jQueryを使用してDIVをランダムに表示する

ページをロードするたびに、複数のDIVの項目のいずれかをランダムに表示したい場合があります。 たとえば、ページを訪問するたびに、複数のバナー画像のいずれかがランダムに表示されるようにする場合に、ここに該当します。 この場合jQueryを使用してDIV要素をランダムに表示することができます。 WordPressを使用している場合は、プラグインを利用して、より簡単に実装することができます。

jQueryを使用してDIVをランダムに表示する

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>

簡単には、次のようなスクリプトを使用することができます。

var random = Math.floor(Math.random() * $('.item').length);
$('.item').hide().eq(random).show();
// Source: stackoverflow

>> デモ

または、ダウムガようなスクリプトも可能です。

window.onload=function() {
var E = document.getElementsByClassName("item");
var m = E.length;
var n = parseInt(Math.random()*m);
for (var i=m-1;i>=0;i--) {
var e = E[i];
e.style.display='none';
}
E[n].style.display='';
}

>> デモ

その後、上記のスクリプトと同じようにランダムに表示されます。

WordPress ランダムコンテンツのプラグイン - Random Content

参考までに WordPressでコンテンツをランダムに表示したい場合 Random Contentというプラグインを使用することができます。 このプラグインを使用すると、コンテンツを追加して、グループ化してグループごとにコンテンツを表示することができます。

現在、このプラグインをした WordPress サイトでよく使用されています。 しかし、1年以上の更新がされていないですね。 現在までよく動作しますが、今後の最新 WordPressと互換性の問題が発生する可能性も排除できないようです。 同様の機能のプラグインを検索してみると、ほとんどの古いプラグインしか検索されていないですね。

2021年5月更新： このプラグインは、再度更新が活発に行われているようです。

もし、上記のプラグインが後日問題が発生した場合は、少し面倒な場合があるが、上記で述べたjQueryを使用してみることができるようになります。

WordPress Brave Popupプラグインを使用してバナーをランダムに表示する

ページをロードするたびに、複数のバナーのいずれかがランダムに表示するようにしたい場合Brave Popupプラグインの有料版を利用することができます。 このプラグインのA / Bテスト機能を使用して、複数のバナーをランダムに表示し、どのバナーのコンバージョン率が高いかどうかを確認することができます。

• 使いやすい WordPress ポップアッププラグインBrave Popup Builder