wordpressでウィジェットを自作してカスタマイズ

wordpressにはウィジェットというシステムが導入されていますが、これはサイドバーやフッターなどに任意のコンテンツを出力する仕組みです。この記事ではウィジェットを自作してカスタマイズする方法を述べていきたいと思います。

[ 目次 ]
  1. wordpressのウィジェットを自作
    1. functions.phpへの設定
    2. register_sidebarにおける配列のキーの意味
    3. テーマでの呼び出し
  2. Widgetとは？
  3. 使いどころ
  4. カスタマイズするにあたって
  5. まとめ

wordpressのウィジェットを自作

wordpressのregister_sidebar関数を使って以下のようにfunctionsへ記述します。これでウィジェットが有効化されます。register_sidebarはそのままでも動作しますが、wordpressの公式サイトではwidgets_initアクションでの呼び出しが推奨されています。

functions.phpへの設定

add_action( 'widgets_init', function(){
register_sidebar([
'name' => 'サイドバー',
'id' => 'name',
'description' => 'サイドバーウィジェット',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h2>',
'after_title' => '</h2>'
]);
});

register_sidebarにおける配列のキーの意味

  • name：サイドバーの名前
  • id：空白以外の小文字半角英数字の文字列
  • description：サイドバーの説明文
  • class：WordPressの管理画面に出力されるcssのクラス
  • before_widget：ウィジェットを囲むボックスの開始タグ
  • after_widget：ウィジェットを囲むボックスの終了タグ
  • before_title：見出しの開始タグ
  • after_title：見出しの終了タグ

テーマでの呼び出し

以下のコードを出力させたい部分に対応するテンプレートに記述します。

また、dynamic_sidebar関数の引数は、register_sidebar関数に渡す配列のキーのidと一致させる必要があります。上記のサンプルでは「name」となります。

複数のウィジェットを利用するには、上記と下記の関数を対にして、これを必要な分作成し、それぞれ所定の場所に記入します。また複数作成する際は、idと引数の名前が他のウィジェットの名前と被らないようにします。

dynamic_sidebar( 'name' );

Widgetとは？

グラフィカルユーザインタフェースを形作る部品ををまとめてWidgetと呼んでいます。本来は名称不明の部品などを意味します。インタフェースはこの部品と人間との接点みたいなもので、グラフィカルなウィンドウやテキストボックスなどがこれに該当します。

現在ではブログパーツとして、或いは携帯やPCなどの待ち受け画面上で動く簡易的なアクセサリーソフトを指すことが多いようです。

wordpressでもウィジェットといえばこの部品のことで、例えばサイドバーやフッター領域に表示するカレンダーやカテゴリ、アーカイブ、RSS、メタ情報、ナビゲーションメニュー、コメントなどのパーツのことを言います。

使いどころ

基本的にはウィジェットを表示したい部分に使います。また、このカスタマイズ機能は原則一つの固まりとして出力しますので、例えば同じサイドバーでも上と下で別々に利用したい場合などに役立ちます。ただ、この場合テキストボックスを使えば一つのウィジェットで済みそうな話なのですが、何らかの理由でそれが出来ない場合は重宝するかも知れません。

他に、フッター領域ではウィジェットを横並びで一つの固まりとしているテーマが多いため、これを縦並びでウィジェットを増やしたい場合なども役立ちそうです。

カスタマイズするにあたって

編集するテンプレートはあらかじめFTPなどでダウンロードしておくと後々何かあった時にすぐ復元できます。コードに誤りがあればバックアップしたファイルをアップロードすることで上書きされるからです。これをしないでwpにエラーを吐かせると最悪ログインさえもできなくなる可能性があります。そうなるとウィジェットのカスタマイズどころではありません。

そのため、ファイルを弄る際は基本的にバックアップをとる習慣を身につけておくと様々な局面で助かります。やり始めは少しだけ編集する予定でこういったバックアップに対する手を抜くことも多いのですが、うまく動作しないために予想外に弄ってしまうことも多々ありますので注意が必要です。

wordpressのカスタマイズ方法
wordpressには大別すると、各テーマやプラグインを丸ごと変更してしまうカスタマイズ方法と、一部のコードを変えたり追...

まとめ

ウィジェットといえば、デスクトップに表示されるグラフィカルインタフェースやスマホの待ち受け画面の小規模なアクセサリーなどを指すことも多いです。しかし、wordpressのブログパーツも基本的には部品という意味で昔からこの名称で呼ばれていたりします。

また、ウィジェットの出力位置は原則テーマの初期設定に依存しますが、上記コードを追記することでwordpressの管理画面上からでもカスタマイズや編集ができるようになります。