意外と簡単!?WordPressでウィジェットアイテムを自作してみる

 ウィジェットを使うとブログのサイドバーを簡単に編集することができます。管理画面の「外観」→「ウィジェット」で設定できるいつものやつです。ほとんどのテーマで対応しているのではないでしょうか。サイドバーのデザインを管理画面から簡単に取り外しできる便利機能ですが、これを自作してみたいと思います。

20151013_1

 管理画面で管理できるので何度もソースコードを書き直す必要がなく、サイドバーが複数あっても使いまわすことができるなどのメリットがあります。

完成予想図

 ウィジェットの管理画面でEメールアドレスをテキストボックスに入力・保存し、それをサイドバーのウィジェットに表示するウィジェットアイテムを作ってみましょう。

20151013_2
20151013_3

最初に完成したソースコードを貼っておきます。

基本

これがウィジェットの基本の形になります。

WP_Widget を継承したクラスで __construct、widget 関数、update 関数、update 関数をそれぞれオーバーライドして動作を記述していくことになります。以下、オーバーライドするメソッドをひとつずつみていきます。

__construct

古い記事ですとコンストラクタがクラス名になっている情報もあるかと思います。

このコンストラクタの記述の仕方は、将来的に廃止する方向であると公式にアナウンスされているので、今のうちから __construct() を使うようにしましょう。ウィジェットアイテムを作成するクラスのコンストラクタは以下のようになります。

例えば、次のようなコンストラクタでウィジェットアイテムを作成したとします。

管理画面では次のように表示されます。

20151013_4

サイドバーの各ウィジェットの HTML ソースは ASIDE タグで囲まれていますが、class 属性と id 属性はそれぞれ次のようになります。

スタイルシートでデザインをカスタマイズする際には、これら class・id 属性を利用するので、使いやすいように決めるとよいでしょう。参考までに、他のウィジェットがどのようになっているかを見ると、

「アーカイブ」の場合:

「最近の投稿」の場合:

id 属性の末尾に自動で「-2」が付与されることに注意してください。ちなみに、次のように省略して記述することもできます。

日本語表示に関して補足

 日本語を出力させたい場合は注意が必要です。例えば、上記のコンストラクタのソースコードを Twenty Fifteen テーマの function.php に追記しても日本語を表示してくれません。

 今回は説明を簡単にするために function.php にソースコードを追加して動作確認していきますが、本来はプラグインとしてウィジェットアイテムを作成することが望ましく、ソースコードは次のように翻訳関数を使って英語表記にします。_e() のかわりに __() でもよいようです。

その上で、プラグインフォルダの中に「language」フォルダを作成し、拡張子が .mo の翻訳ファイルを使って日本語に対応するというのが正しい手順です。

今回は行儀悪く、次のように対応しています。

function.php を UTF-8 で保存し直しても一応動作はします。

widget 関数

サイドバーでどのように表示するのかをここで記述します。

before_widget、after_widget、before_title、after_title など、見慣れないものがありますね。これらの変数は次のように対応しています。

これらが無いとスタイルシートでの指定によっては表示が崩れることがあります。ソースコードを一部削除したりして確認してみてください。例えば、次のようなソースコードにしたとします。

Twenty Fifteen テーマでは次のように表示が崩れます。

20151013_5

アクションフックでウィジェットを登録

update、form 関数についてはソースコードのままなので省略。最後に WordPress のアクションフックで作成したウィジェットを登録します。widgets_init のタイミングで register_widget 関数を使い、ウィジェットとして作成した My_Widget クラスを登録します。

PHP 5.3 から使えるようになった無名関数で記述していますが、やっていることは以下のソースコードと同じです。

最後に、管理画面でウィジェットエリアに自分で作成したウィジェットを追加し、E メールを入力して保存、エントリーのサイドバーでちゃんと表示されることを確認してください。サイドバーで次のような HTML が出力されていれば完成です。

まとめ

 今回は説明を簡単にするために省略しましたが、実際には widget、update、form の各関数内で empty、strip_tags、esc_attr 関数などを使って、入力された値が適切であるかをチェックします。自分で使う分にはなくても困りませんが、作成したプラグインを公開する場合、ユーザーが思わぬ値を入力することで、よからぬ動作をすることを防ぐ必要があるので注意してください。

 WordPress をインストールしたフォルダ以下の wp-includes/default-widgets.php で他のウィジェットが定義されています。これらを参考に、ウィジェットの完成度を高めてください。

2015.10.13 追記:ウィジェットのチェックボックスがうまく動作しない

 ウィジェットの設定画面でチェックボックスを表示させて、設定によりサイドバーの表示方法を変更したい場合があると思います。例えば、アーカイブなんかでも見たことありますよね。

20151013_6

これを実現するようなソースコードはこんな感じになると思います。

ところが、これだとうまく動作しません。こちらのリンク先でも述べられておられますが、

実装はされるのですが、チェックボックスにチェックが入った状態を保存してくれず、いつまでたっても input タグに「checked=”checked”」が追加されません。

 これをきちんと動作させるにはソースコードを次のように修正します。修正部分は form 関数内だけなので、他の部分は省略します。

form 関数を置き換えてみてください。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP