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

MFクラウド確定申告

[PR]

確定申告の受け付け期間になりました!MFクラウドで申告の手間を軽減!

確定申告、面倒くさいです。

ただでさえ面倒なのに、2014年の確定申告から、僕のような超零細個人事業主でも、記帳義務と保存義務…

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

この記事をお届けした
寝ログの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク