WordPressで人気記事を期間ごとにタブで切り替え表示する方法

こんにちは!くまぺです。

今回は、WordPress Popular Postsを使って、
人気記事を期間ごとにタブで切り替え表示する方法をご紹介します。

PC表示はこんな感じ!

スマホ表示はこんな感じ!

スマホ表示はこのページの下の方にもあるので、ぜひ操作して動きをチェックしてみてください。
(PC表示はサイドバーにあります)

くまぺ
では早速やっていきましょう〜
WordPressのカスタマイズの際は、ローカル開発環境での開発をおすすめします。
WindowsでのXAMPPの使い方はこちら
【XAMPPのインストール方法と使い方】ローカル環境でwordpressを開発するための初期設定をわかりやすく解説
MacでのMAMPの使い方はこちら
【MAMPのインストール方法と使い方】ローカル環境でwordpressを開発するための初期設定【初心者でも簡単!】
他にも、InstantWPやLocal by Flywheelなど便利なものがいろいろあるので、お好みのものをご使用ください。
当ブログでは近々Local by Flywheelの紹介記事をアップする予定です。

今回のカスタマイズの流れ

まずはじめに、今回のカスタマイズの流れを確認しておきましょう。

全部で6ステップあります。

やることは多いですが、1つ1つは難しくないのでご安心ください。

  1. WordPress Popular Postsをインストール
  2. タブを作成
  3. 期間ごとの人気記事を表示
  4. cssを追記
  5. jsファイルを作成
  6. functions.phpの追記
で完成になります。

プラグインをインストールし、
タブを作成し、
人気記事を表示します。

cssでデザインを調整後、
jsでタブを動かせるようにし、
functions.phpでjsを読み込む設定をして完成です。

それでは始めましょう!

WordPress Popular Postsをインストール

まずは今回のキモである人気記事を表示してくれるプラグインをインストールしましょう。

ここで何をする?
→人気記事を表示するためのプラグインをインストールします。

「プラグイン」→「新規追加」
から
「WordPress Popular Posts」
と検索してください。


「今すぐインストール」をクリック後、
「有効化」をクリックしてください。

このステップはこれで完了です。

「WordPress Popular Posts」は、ある期間での人気記事を表示してくれるプラグインです。

今回はこのプラグインを利用してタブ表示をしていきます。

タブを作成

次に、タブを作成していきましょう。

ここで何をする?
→テキストウィジェットを使って、期間を切り替えるためのタブ部分を作成します。

今回はサイドバーに表示することを想定しています。

「外観」→「ウィジェット」
でサイドバーの設定を開きましょう。

ストークの方は「PC:メインサイドバー」や「PC:スクロール領域」、
スマホにも表示したい方は「SP:メインサイドバー」
アフィンガーの方は「サイドバー」
などに、「テキスト」ウィジェットを使ってタブを作成していきます。

ご自身のテーマのサイドバーウィジェット欄に作成してください。

「利用できるウィジェット」から「テキスト」をサイドバーに追加します。

「タイトル」に「人気記事 TOP5」のようなタイトルをお好みで入力し、
「テキストモード」で以下のコードを追加します。

 

上図のように入力できましたら「保存」をクリックして保存しましょう。

以上でタブ部分が作成できました。

これでこのステップは完了です。

期間ごとの人気記事を表示

次に、
「1週間の人気記事」
「1ヶ月の人気記事」
「全期間の人気記事」
をサイドバーに追加します。

ここで何をする?
→プラグインを使い、それぞれの期間ごとの人気記事を3つ表示します。

先ほどサイドバーに追加した「テキスト」のすぐ下に、
「利用できるウィジェット」から「WordPress Popular Posts」を追加します。

次に、以下のように入力していきます。

タイトル:空欄 (入力しない)
最大表示数:5 (お好みで大丈夫ですが、全て統一してください)
ソート順:総閲覧数

フィルター
計測期間:過去7日間
投稿タイプ:post
(他は空欄)

投稿設定
アイキャッチ画像を表示にチェック
保存後、サイズ選択が出てくるので
「サイズを手動で指定」にチェック
幅・高さともに60px
(他は空欄)

上図のように入力できましたらOKです。

では、これで「7日間(1週間)の人気記事」の作成ができたので、
同じ要領で
1ヶ月の人気記事」と
全期間の人気記事」を作成してください。

「フィルター」の「計測期間」を、それぞれ
過去30日間
全期間
に変えるだけで、他は同じで大丈夫です。

以上で、サイドバーに

「テキスト:(タイトル)」
「WordPress Popular Posts(過去7日間)」
「WordPress Popular Posts(過去30日間)」
「WordPress Popular Posts(全期間)」
の4つが追加されたと思います。

これでこのステップは完了です。

では、次にcssでデザインを調整していきましょう。

cssを追記

ここで何をする?
→cssで操作するidを確認してから、cssでデザインを調整します。

cssを記述する前に、

「テキストのid(text-〇〇)」と、
「人気記事のid(wpp-〇〇) 3つ」を知る必要があります。

なぜかというと、今までにサイドバーで作成した数によってidが変わってしまうためです。

このidは、Chromeの検証ツールをつかってチェックしてください。
検証ツールの使い方はサルワカさんのこちらの記事をどうぞ。
初心者向け!Chromeの検証機能(デベロッパーツール)の使い方

まずは自分のブログのトップページなどを開き、検証ツールを開きます。

「選択モード」で、先ほどサイドバーに追加したテキストをクリックして「テキストのid(text-〇〇)」。
次に人気記事を3つクリックして「人気記事のid(wpp-〇〇)」を3つ確認してください。

WordPress Popular Postsを使い始めたばかりの場合、「データがありません」と表示される可能性がありますが、そのままクリックしても確認できるので問題ありません。
また、「人気記事のid(wpp-〇〇)」は、3つとも異なるidになります。

「WordPress Popular Posts(過去7日間)」
「WordPress Popular Posts(過去30日間)」
「WordPress Popular Posts(全期間)」
がそれぞれどのid(wpp-〇〇)かを確認し、メモなどを取っておきましょう。

「テキストのid(text-〇〇)」と、
「人気記事のid(wpp-〇〇) 3つ」

が確認できたら、cssの追記をしていきます

「外観」→「テーマの編集」より、
「style.css」の編集画面を開きます。

そこの最後に、次のコードを追記してください。
(id部分は先ほどメモしたidを入力してください)

 

上記コードのように、「テキストのid」と
「30日間、全期間のid」を入力します。

例として、

テキストのid: text-2
7日間の人気記事: wpp-2
30日間の人気記事: wpp-3
全期間の人気記事: wpp-4
でサイドバーに追加された場合、

上記cssの

  • 2行目 /* テキストのid */がある行のtext-〇〇の〇〇にテキストのid「2」を入力
  • 34行目 /* 30日間、全期間のid */がある行の#wpp-△△, #wpp-□□の△△に「3」を, □□に「4」をそれぞれ入力

のような感じです。

これでこのステップは終わりです。

jsファイルを作成

次に、jsファイルを作成しましょう。

このjsファイル(JavaScript)でタブを動かします。

ここで何をする?
→タブで期間を切り替えるためのjsファイルを作成します。

以下のコードをコピーして「pop-tabs.js」というファイルを作成し、
FTPソフトなどで、使用しているテーマ(子テーマを使用している場合は子テーマ)の中に入れてください。
(id部分は先ほどメモしたidを入力してください)

 

idを書き換える部分は2~4行目のみそれぞれでOKです。

これでこのステップは終わりです。

functions.phpの追記

さあ!ついに最後のステップです。

先ほど作成したjsを読み込む設定をしましょう。

ここで何をする?
→子テーマ内に置いたjsファイルを読み込む設定をします。

「外観」→「テーマの編集」で、
「functions.php」の編集画面を開いてください。

そして、一番下に以下のコードを追記します。

 

 

以上で、全てのステップが完了しました!
お疲れ様でした。

完成!

  1. WordPress Popular Postsをインストール
  2. タブを作成
  3. 期間ごとの人気記事を表示
  4. cssの追記
  5. jsファイルを作成
  6. functions.phpの追記
以上で全て終わりました。

これで、人気記事を期間ごとにタブで切り替え表示することができるようになったかと思います。


お好みでcssで色を調整したり、WordPress Popular Postsの集計期間を変えたりしてカスタマイズしてみてください。

また、当記事の不備や、テーマによる不具合などもあるかもしれないので、もし「できないよ!」ってなったらお気軽にTwitterとかにご連絡ください。

付録として、ストークなどでPC版とスマホ版合わせて表示する場合のコードも以下に記しておきます。

ではでは〜

 
 
 

付録:PC版とスマホ版両方のサイドバーに表示する場合

ここからは、ストークなどでPC版とスマホ版合わせて表示する場合のコードをご紹介します。

まず、

「テキスト:(タイトル)」
「WordPress Popular Posts(過去7日間)」
「WordPress Popular Posts(過去30日間)」
「WordPress Popular Posts(全期間)」
をPC版のサイドバーとスマホ版のサイドバーそれぞれに追加します。

その後、それぞれのidを確認します。
ここでは、例として

PC版のid

テキストのid: text-2
7日間の人気記事: wpp-2
30日間の人気記事: wpp-3
全期間の人気記事: wpp-4

スマホ版のid

テキストのid: text-3
7日間の人気記事: wpp-5
30日間の人気記事: wpp-6
全期間の人気記事: wpp-7

と仮定します。

cssを追記

 

(テキストのpaddingなどはテーマのデザインによって調整してください。)

jsファイルを作成

 

functions.phpは上記と同じでOKです。

PC版とスマホ版両方に追加した場合の対応は以上です。

お疲れ様でした。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください