Blogページにアクセスされたらジャンル毎のオススメ記事一覧をjQueryでランダム表示

スポンサーリンク

 

当ブログでは、Webページの記事下に、推奨したいオススメ記事一覧を4つのジャンルに分けて切替えボタンを付けて表示していました。 この場合、閲覧者が切替ボタンを選択しない限り残りのジャンルは非表示のままで、殆ど陽の目を見る機会を失ってしまうという問題が想定出来ます。

そこで、ブログページにアクセスされる毎にランダムに4つのジャンルが切り替わる様に表示すればオススメ記事を見る機会が均等化され上記の問題は解決されると考え、jQueryでページアクセス毎にランダムに表示させるプログラムを作成して見ました。(DEMO-1

このプログラムの変形で一定時間毎にジャンルを切替えることも実現できます。(DEMO-2

 

ジャンルの切替え手段は、以下のページを参考に一部改変して使用させて頂きました。

 

ページアクセス毎にランダムにジャンル表示させるjQuery DEMO-1

jQueryを使うには CDNを利用して外部サイトのjQueryを読み込む必要があります。 HTML のhead内に下記を例示します。 Wordpressのテーマを使用している場合は、既にこのCDNが組込まれていると思われますので、以下の記述は不要です。

 html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 






jQuery code

ポイント

  • 5行〜14行:ページがアクセス(又はReload)されると、表示要素名の配列(0〜3番地)をランダムに取得し対応するオススメ記事一覧と[ジャンル]ボタンを表示させています。
  • 20行〜33行:[ジャンル]ボタンが押される毎に、該当するオススメ記事一覧と[ジャンル]ボタンを表示させます。
  • 30行目:オススメ記事一覧表示する時のアニメーションメソッドで fadeIn(又は show) を指定します。

CSS code

ポイント

  •  .et_pb_text_inner1〜.et_pb_text_inner4 はDEMO用のためにデザインしていますので、実際の実装に当たってはは、オプションを全て削除します。

HTML code

ポイント

  • 1行目:デモ用の[Reload ]ボタンの記述ですので、実際の実装に当たっては不要です。 この行を削除します。
  • 36,53,66,80行:「ジャンル:1〜4 に対するオススメ記事一覧」を記述します。

[Reload] ボタンを押すと、ランダムに[ジャンル]ボタンとオススメ記事一覧が選択・表示されます。


 

3秒間隔でジャンルを切り替え表示させるjQuery DEMO-2

CSS と HTML code は共通です。




jQuery code

ポイント

  • 9行〜15行:DEMO1と同じ。 ページがアクセス(又はReload)されると、表示要素名の配列(0〜3番地)をランダムに取得し対応するオススメ記事一覧と[ジャンル]ボタンを表示させています。
  • 19行〜35行:一定時間ごとのタイマー割り込みで表示要素名の配列番地(0〜3)を繰り返しインクリメントして、要素に対応する[ジャンル]ボタンとオススメ記事一覧を表示させています。
  • 38行〜54行:[ジャンル]ボタンが押されると、タイマー割り込みを停止させ、該当するオススメ記事一覧と[ジャンル]ボタンを表示させます。
  • 28行目、51行目:表示する時のアニメーションメソッドで fadeIn(又は show) を指定します。
  • 35行目:DEMO表示のため、時間間隔(3秒=3000ms)を指定しています。(実用上は7秒程度?)

[ジャンル]ボタンを押すと、動きが止まります。 [Reload]ボタンで動き開始


 

WordPress に実装する

以前の記事で、「オススメ記事一覧」をAffinger5テーマで作成する方法を紹介しました。 この「オススメ記事一覧」と前述のjQuery をコンビネーションしてPost Snippetsプラグイン で実装させて行きます。

更に、Post Snippetsプラグインを使えば、DEMO1とDEMO2の仕様を jQueryの if 文を使って、切替えることが簡単に出来てしまいます。

参 照
Affinger5(WordPress )「オススメ記事一覧」のスタイルをカスタマイズする

WordPress テーマのAffinger5は、オススメ記事一覧が簡単に投稿ページの下に表示することが出来ますが、あまりスマートでありません。 独自デザインで、ブログカードをタイルとして2コラム表示 ...

注意ポイント

実際の実装に当たり、

  1. HTML codeの1行目は[Reload ボタンですのでこの行は不要です。
  2. CSS code のクラス  .et_pb_text_inner1〜.et_pb_text_inner4 はDEMO用のためにデザインしていますので、オプション全て削除します。
  3. 同一ページに複数の当該jQueryプログラムを実装できません。(IDが重複するとデザインが崩れます)

Post Snippetsプラグイン で実装する手順


  • Post Snippetsを使ってショートコード化

    Post Snippets(以下PSP)プラグインの使い方は、ここをクリックしてご参照ください。 ここでは、PSPの管理画面(下の画面)で、項目①〜⑥についての説明になります。

    Post Snippetsの設定画面

    • タイトル名:ショートコードの名前になります。(Ex. my_osusume )
    • コード・コンテンツエリア:前述のDEMO2のjQuery、CSS、HTML cordを<script>タブや<style>タブ含めて、全てコピペした後、
    • HTML cordの7、11、16、20行にある<strong>タブで囲まれたジャンルボタンの名称を変更し、36、53、66、80行に「ジャンル:1〜4 に対するオススメ記事一覧」を記述します。

    DEMO2・jQueryコードの19行〜35行にあるタイマー割り込みルーチンを if 文でサンドイッチします。

     jQuery
    if ( '{timer}' == 'on' ) {  // timer変数が on ならタイマー割り込み実行
    // タイマー割り込みルーチン
    }
    
    • Variables(変数):timer="off" を記載  ショートコードのデフォルトオプションになります。
    • Shortcode:レ点を入れる
    • PHP Code:無記入
    • Description:ショートコードを判りやすく説明

    完成したショートコード

     shortcode
    [my_osusume timer="off"]
    

  • ショートコードの実装

    完成したショートコードを例えば、Wordpress のウィジェットの記事下などに配置します。 ショートコードオプションの timer="off" を "on" に変更すれば、一定時間間隔でジャンルが切り替わる DEMO2 仕様になります。


 

当ブログに配置して

場合によっては、変更することもあり得ますが、取り敢えず以下で様子を見ることにしました。

  • [my_osusume timer="off"]=(DEMO-1)をページの記事下に配置してみました。(このページの記事下を参照してください)
  • [my_osusume timer="on"]=(DEMO-2)を、切替間隔7秒、アニメーションメソッドをfadeInにして当Blogのトップページに配置してみました。(https://pianoforte32.com/

 

 

以上、jQueryでオススメ記事一覧をページアクセス時にランダム表示する方法と、一定間隔時間でオススメ記事一覧を切り替え表示する方法の紹介でした。 オススメ記事の視認率がUPされるかも知れません。

 

スポンサーリンク

 

Blog オススメ記事(コンテンツ選択)
  • レコード音質とハイレゾ化

  • CD音質と圧縮音源 AAC等

  • WordpressやiPhone・PC

  • ツールと閑話ブログ

スポンサーリンク