WordPressテーマに独自ウイジェットを追加する方法(画像付き新着エントリー機能を作ってみる)

Wordpress

WordPressテーマに自作のウイジェット機能を付加する方法がないかと探したら、あまりなかったので自分が作成した方法をメモがてら紹介です。

プラグインとして追加するものは、検索で結構見つかるのですが、、今回はテーマに追加する形になります。(この方法は、子テーマに書いても有効な方法です。)

photo by Chris Harrison

スポンサーリンク
レクタングル(大)広告

作成するウイジェット

今回作成するウイジェットは、このような感じにしたいと思います。

新着エントリー表示ウイジェット

仕様としてはこんな感じ。

  • 画像(75×75)付きの新着エントリーを表示する
  • ウイジェットのタイトルを変更できるようにする
  • 表示数も変更できるようにする

ウイジェット設定画面の見た目はこんな感じになります。

ウイジェット設定画面

準備

まずは作成前の準備です。

といっても、アイキャッチがなかったときのために、以下のような画像に「no-image.png」と名前をつけて(親)テーマのimagesフォルダーに放り込むだけです。

no-image

あとこちらの記事を読んでおくと、以降の文の理解が深まると思います。今回のコードはこちらを参考にさしてもいました。

WordPressのウィジェットを自作するためのTips – かちびと.net

ウイジェット作成クラスを作る

ウイジェット作成するためのコードは、functions.phpに記入していきます。

僕はこのように書きました。ポイントとなるコードの説明はコメントに書いてあります。

本来ならば、ここに全ての処理を書いても良いのです。けれど、それだとちょっとコード量が増えすぎてインデントも深くなってしまい、読みづらくなってしまうので、今回は「新着エントリーを表示する処理」は、以下のようにテンプレートファイルに切り分けました。(エディターでもこっちの方が読みやすい。)

ウイジェット作成クラス側で設定した変数を渡すには.グローバル関数を使って受け渡します。

新着エントリー表示用の処理をテンプレートで作る

ウイジェット追加するには基本的にfunctions.phpに書いていくのですが、コードの見やすさを考えて.新着エントリー表示に関する処理を、new-entries.phpというテンプレートファイルを作ってそこに書いていきます。

functions.phpに全て書いてしまった方が楽という人は、それでもいいと思います。

新着エントリーを表示する処理はこんな感じです。(new-entries.php)

ここでのポイントは、functions.phpで設定したグローバル変数を呼び出していることです。

ちょっと作法的に良くないのかもしれません。けれど、Railsのようにテンプレートに変数を渡す方法を探したのですが、ちょっと調べた限りでは見つからなかったのでこういった方法にしました。

あとは、以下のように「thumb100」という100×100のサムネイルを無理やり75×75に変換しています。

「thumb100」の部分は、テーマで設定されているサムネイル設定に合わせて変更してください。75×75のサムネイルがあればそれが一番ですし、なければ近い大きさの物に編集してください。

テーマで使用しているサムネイル設定を知るにはfunctions.phpを「add_image_size」あたりで検索して見てください。

以下のようなものが見つかります。

設定方法などは長くなるので割愛。

スタイルシートの設定

あとはstyle.cssでスタイルを以下のように設定すればOKかと思います。

動作確認

最後は動作確認です。

「外観→ウイジェット」でドラッグ&ドロップをして「新着エントリー」ウイジェットをサイドバーなどに移動します。

そして、「新着エントリー」ウイジェットの設定を以下のように設定しました。

ニューエントリーウイジェット

タイトルを英語に変更して、表示数を少なめの3つにしています。

ブラウザで表示を確認すると以下のようになっています。

新着エントリーの動作確認

動作も問題ないようです。

まとめ

こういったことをやってみる前は、ウイジェットを作成するというから、もっと大変な作業なのかと思いました。

けれど、簡単なものならfunctions.phpにクラスを作って必要なところを変更するだけで、思ったより簡単に処理部分が作れてしまうというのは意外でした。(今回は2ヶ所に分けて書いたけど)

冒頭にも書きましたが、子テーマに追記するだけでもウイジェットが作れるようになるので、「テーマに独自のウイジェットを作成したい」なんて人は、是非試してみてください。

ウイジェットAPIの詳しい仕様については以下を参照してください。

WordPress ウィジェット API