こんにちは、RSSでフロントエンドの開発を行っているS.A.です。
本記事では、WordPressのサイトに「人気記事ランキング」のウィジェットを追加し、閲覧数を表示する方法とそのカスタマイズ方法について解説します。
今回は Lab23 という無料のWordPressのテーマを使用しています。
https://retval.jp/lab23/
テーマの設定方法はこちらを参照してください。
今回作成したい「人気記事ランキング」のウィジェットは、
基本のテーマには含まれないので、閲覧数を計測するプラグインを導入します。
はじめに、ウィジェットという言葉について補足します。
WordPressの”ウィジェット”とは？
● ウィジェットとは、WordPressのサイト上に追加できる小さなプログラムや機能のことです。
● 一般的にウィジェットは、サイドバーやフッターなどの特定の領域に配置されます。
● ウィジェットを使うことで、簡単にウェブページのデザインや機能を拡張することができます。
● 例えば、人気記事ランキングや最新の投稿を表示するためのウィジェットがあります。
本来は「人気記事ランキング」や「最新の投稿」を表示したいと思ったら、自分でプログラムを作らなければいけないのですが、ウィジェットを利用することで簡単にその機能を使うことができます。
WordPressのサイトをカスタマイズするのに欠かせないのがウィジェットです。
それでは、プラグインを導入し、ウィジェットを表示させましょう。
導入手順
閲覧数をカウントするプラグインはたくさんありますが、
今回はPost Views Counterというプラグインを使用しました。
選んだ理由は 導入手順の後 にまとめているので、興味のある方は読んでみてください。
Post Views Counterの導入について説明します。
Post Views Counter の導入
プラグインを利用する場合は、インストールと有効化が必要です。
Post View Counterのインストールと有効化について説明します。
Post Views Counter プラグインをインストールするには、
WordPress 管理パネルにログインし、［プラグイン]-> ［新しいプラグインの追加] に移動します。
「プラグインの検索」ボックスで「Post Views Counter」を検索して、「今すぐインストール」ボタンをクリックします。インストールができたら有効化します。
WordPress管理パネルのサイドバーにプラグインが追加され、利用できる状態になりました。
続いて、サイトにも表示させましょう。
サイドバーにウィジェットを追加します。
ウィジェットの追加
2-1. ［外観］ -> ［ウィジェット］を選択します。
2-2. サイドバーにウィジェットを追加します。
2-3. ＋ボタンを押して、「最も表示数の多い投稿」を選択します。
2-4. ウィジェットの表示に関する設定をします。
タイトルは「人気記事ランキング」に変更します。
閲覧数とサムネイルを表示させたいので、
□ 閲覧数を表示しますか？
□ 投稿のサムネイルを表示しますか？
のチェックボックスにチェックを入れます。
2-5. サイトを確認しましょう
サイドバーにウォレットが追加されました。
※閲覧数が0の場合は表示されないので、記事をクリックして閲覧数を増やします。
サムネイルの範囲が大きくて、記事のタイトルの改行が不自然なので、ウィジェットをカスタマイズしていきます。
ウィジェットをカスタマイズ
PHPでの開発経験が少ない方には、CSSを追加するプラグインにスタイルを書いていく方法がおすすめです。
CSSでスタイルを変更しましょう。
3-1.CSSでスタイルを変更する
今回は「Simple Custom CSS and JS」を使います。
このプラグインをインストールして有効化します。
CSSのコードを追加して、更新します。
スッキリとしたデザインになりました。
さらに、プラグインを直接変更することで、記事の作成日の日付やデザインを変えることもできます。
3-2.プラグインを直接変更する
注意：必ずこの変更を加える前にバックアップをとってください
Post Views Counteのプラグインで、
サイドバーのウィジェットを生成している以下のファイルを変更します。
wp-content/plugins/post-views-counter/includes/functions.php
▼主な変更点
①ビュー数のフォーマットを変更
②記事の作成日を追加
get_the_date('Y/m/d', $post->ID )
上記のような変更を加えると、
以下のようなHTMLが生成されます。
BEFORE
<li>
<span class="post-thumbnail">
<img width="150" height="150" src="http://localhost/wp-content/uploads/2024/04/9b51d723814705ad346977a900f5a08e-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" decoding="async" loading="lazy">
</span>
<a class="post-title" href="https://tech-blog.staging.rg-gcp.dev/?p=69">デザインシステム「sora」</a>
<span class="count">(1)</span>
</li>
AFTER
<li>
<span class="post-thumbnail">
<img width="150" height="150" src="http://localhost/wp-content/uploads/2024/04/9b51d723814705ad346977a900f5a08e-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" decoding="async" loading="lazy">
</span>
<a class="post-title" href="https://tech-blog.staging.rg-gcp.dev/?p=69">デザインシステム「sora」</a>
<div class="post-box">
<span class="post-date">2024/02/21</span>
<span class="count">6</span>
</div>
</li>
さらにCSSを追加して、完成です！
最後に、Post View Counter を選んだ４つの理由を説明します。
Post Views Counterを選んだ理由
- 無料で使える
Post Views Counterは、無料で使うことができますが、有料プランもあります。
有料版では
・閲覧数のレポートの作成、エクスポート
・Google AMPのサポート
・プラグインの自動更新
などの機能が提供されています。
今回は、閲覧数のカウント機能を使うことができれば問題ないため、有料プランは使用しません。
- 有効インストール数が多く、定期的に更新されている
2024/04/22時点でのプラグインの評価は以下の通りです。
・有効インストール数：200,000＋
・評価：★★★★★（1,005）
・最終更新：1週間前
インストール数が多いプラグインは良いプラグインであるとは一概にはいえませんが、
インストール数が多いほど、多くのユーザによって動作が確認されており、
新しいバグを発見する確率は低くなるため、信頼性が高いといえます。
また、プラグインの最終更新が1週間前で、定期的なメンテナンスがされているため、安心感があります。
- 使用中のWordPressバージョン（6.5.2）と互換性がある
今回使用するPost Views Counter 1.4.6 のバージョンは、WordPress 6.5.2と互換性があります。
互換性があるプラグインを選ぶことは、サイトの安定性、機能性、セキュリティの観点から重要であるため、互換性があるものを選ぶことが望ましいとされています。
- 公式の説明書が分かりやすい
英語ではありますが、インストール方法から設定の方法まで画面キャプチャ付きで解説してくれています。
また、functionsの説明が、カスタマイズする際にもとても参考になりました。
上記の理由から、Post Views Counter を選びました。
以上です。
おわりに
最後まで読んでくださってありがとうございました。
このテックブログを開設するにあたって、初めてWordPressを使ったので、
「ウィジェットって何？」や「どのファイルを変更すればいいんだろう」と戸惑いましたが、
エコシステムが充実しているので、単語や作法が分かれば、思い通りに開発ができました。
環境構築が簡単で、カスタマイズの自由度が高く、WordPressの利便性を強く感じました。
今後も活用していきます！
これからもRSSのメンバーがブログを投稿していきます。
次は、私の同期のガジェットマニアの T.K.くん がキーボードを自作したそうで、
その体験談を投稿してくれるそうです。
この前出社したときに、「キーボード作ったの見て～」って嬉しそうに見せてくれました。笑
自慢のキーボードの作成秘話を楽しみにしていてください！
RSSでは、UI/UXデザイナー、フロントエンドエンジニアを募集しています！
レイスシステムソリューションズ株式会社のソフトウェア開発や、
採用に関するお問い合わせについては、下記のリンクにてお問い合わせください。