ウィジェットの作り方:新着・更新記事のウィジェット化と子テーマ運用

カテゴリー別人気ランキング

ウィジェット化のメリット

過去記事の内容を修正、追記したことをユーザーに通知したい時があります。ですが、WordPress には新着記事の通知ウィジェットはありますが、過去記事の修正通知をする機能がありません。

前回記事で書いた、記事の公開日と更新日を判定して、新しい日時順に公開記事と更新記事を「新着・更新記事」として一緒に表示する方法を、サイドバーに表示できるよう、ウィジェット化しました。

子テーマを利用してフッターに最新の新着・更新記事を表示する
過去記事を追加・変更しても・・ WordPressの投稿記事は「投稿日時」順に記事が表示されますが、過去に書いた記事の内容を補強したり、新...

ウィジェットの作り方

ウィジェットの基本形

ウィジェットは「初期化処理」、「表示処理」、「設定の更新処理」、「設定用フォーム」の4つのメソッドから構成されます。
1行目の「My_Widget」は WordPress の WP_Widget クラスを継承するウィジェット名(任意の名前)で、最終行でこの My_Widget を WordPress に登録します。

一番シンプルなウィジェットの例

基本形の内「初期化処理」と「表示処理」のみを使い、「初期化処理」でウィジェット管理画面に表示されるウィジェットボックスの名前を定義し、「表示処理」に ”これはサンプルページです。” を出力するコードを記述した、一番シンプルなウィジェットです。

上記ウィジェットを子テーマの「function.php」に追加しフッターエリアに表示した例です。

一番シンプルな例

新着・更新記事ウィジェットの作成

最新の新着・更新記事のウィジェット化

ウィジェット管理画面からタイトル、表示数を設定し、それを出力する処理を追加します。参考にさせて頂いたのは、Simplicity の libフォルダーにある widget.php です。

下のコードをコピーして、あなたの function.php に追加し、サイドバーに設定すれば、このウィジェットが使えるようになります。変更箇所は以下の3ヵ所です。

  • 7行目:「僕のウィジェット」はウィジェットボックスの名前、「直近の新着・更新」はそのボックスの下に表示される説明文です。あなたの好きな名前と説明文に変更します。
  • 31行目:サムネイル画像は、WordPressの初期設定で100×100(thumb100)が作られていますので、CSSでそれを75×75に縮小し左寄せにして利用しています。
    サムネイル画像が表示されない時は、この名前「thumb100」を変更してください。
  • 25行目、31行目:表示を統一するため、人気記事表示ウイジェット「WordPress Popular Posts」の class:「class=”wpp-list”」(リンク表示)と「class=”wpp-views」(日付のサイズ縮小・イタリック表示)を流用しています。
    「WordPress Popular Posts」を使用してない時は、class指定が無効となりますので、CSSで調整してください。

Simplicity子テーマへの組み込み

Simplicity子テーマの「function.php」末尾に上記コードを追加します。組み込み方はこちらを参考にしてください。

子テーマを利用してHTMLエディターにタグや定型文のボタンを追加する方法
クイックタグとは WordPressで原稿を作成する時に、HTMLエディターに記事内でよく使う見出しなどのタグをボタン(クイックタグ)とし...

子テーマの「function.php」に組込むことで、親テーマの影響を受けずに管理ができるので楽です。

ウィジェットの動作確認

「外観」→「ウィジェット」でウィジェット設定画面を開きます。今回作成した「僕のウィジェット」が「利用できるウィジェット」に追加されています。

ウィジェット設定画面

後は、通常のウィジェットと同様に、表示したいウィジェットエリア(サイドバーエリア)にドラッグ&ドロップで移動させればOKです(タイトルと表示数の設定が可能です)。

設置が終ったら、ページを開くとサイドバーに最新の「新着・更新記事」が表示されます。

結果の確認

新着・更新記事ウィジェットの機能追加

今回作成した「新着・更新記事のウィジェット」に、人気記事ウィジェット「WordPress Popular Posts」の閲覧数(テンプレートタグ)を使って、

  1. 「閲覧数」の表示
  2. 「更新記事(更新日順)」or「新着記事(公開日順)」のどちらを表示するか、をウイジェットから選択できる「表示モード」を追加
  3. 「投稿更新日時」と「閲覧数」の表示/非表示をウイジェットから設定

を行える機能を追加します。

「WordPress標準の新着記事」や「Simplicityの新着記事」には、記事の閲覧数を表示する機能がないので、閲覧数を表示したい場合は、こちらを使うと簡単です。

ウィジェットのラジオボタンおよびチェックボックスの ON/OFF で「表示モード」の選択と「投稿更新日時」「閲覧数」の表示・非表示の切り替えが行えます。詳細はこちらを参照してください。

ウィジェットの作り方:新着・更新記事ウィジェットの機能追加
新着・更新記事ウィジェットの機能追加 以前作成した、最新更新日順に公開記事と更新記事を「新着・更新記事」として一緒にサイドバーに表示する「...
スポンサーリンク
wp_レクタングル (大)
wp_レクタングル (大)
☆最後までお読みいただきましてありがとうございます。
☆この記事がお役に立ちましたらシェア・フォローしていただけると嬉しいです!