ページをロードするたびに、複数の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と互換性の問題が発生する可能性も排除できないようです。 同様の機能のプラグインを検索してみると、ほとんどの古いプラグインしか検索されていないですね。
このプラグインは、再度更新が活発に行われているようです。
もし、上記のプラグインが後日問題が発生した場合は、少し面倒な場合があるが、上記で述べたjQueryを使用してみることができるようになります。
WordPress Brave Popupプラグインを使用してバナーをランダムに表示する
ページをロードするたびに、複数のバナーのいずれかがランダムに表示するようにしたい場合Brave Popupプラグインの有料版を利用することができます。 このプラグインのA / Bテスト機能を使用して、複数のバナーをランダムに表示し、どのバナーのコンバージョン率が高いかどうかを確認することができます。
コメントを残す