ひとり勉強ログ

ITエンジニアの勉強したことメモ

WordPressでウィジェットエリアを追加して好きな場所にHTMLを表示させる方法

WordPressのテーマではデフォルトでサイドバーやフッターなどにウィジェットエリアが設定されていることが多いです。

しかし設計上、他の場所でウィジェットが必要になることもしばしばあります。

例えば、 ・各投稿のフッターにバナーを掲載したい ・サイドバーのウィジェットエリアが足りない ・トップページのメイン画像下にお知らせ文言を入れたい などです。

テンプレートに直接記述すれば対応できますが、テンプレートファイルの編集はできる限り限られた人が最小限の編集にとどめたいもの。

そんな場合、ウィジェットエリアの設定をしておけばテンプレートファイルを編集することなく自由にコンテンツが追加削除できるようになります。

今回は「各投稿のフッターにバナーを掲載したい 」というのをお題に、ウィジェットエリアの追加方法をご紹介します。

ウィジェットエリアを使用するためには ・ウィジェットエリアの追加 ・ウィジェットエリアの表示 の2段階が必要です。

ウィジェットエリアの追加

下記のコードでウィジェットエリアの追加ができます。

■記述ファイル functions.php

ソースコード [php] // widgets_initアクションで呼び出し add_action( 'widgets_init', 'theme_widgets_init' ); function theme_widgets_init() { register_sidebar( array( 'name' => ( '個別投稿フッター' ), 'id' => 'post-footer-1', // 表示時に紐付けるID 'description' => ( 'ウィジェットエリアの説明' ), 'before_widget' => '<div class="widget post-footer-bnr">', // ウィジェットの直前に出力する HTML テキスト 'after_widget' => '</div>', // ウィジェットの直後に出力する HTML テキスト 'before_title' => '<p>', // タイトルの直前に出力する HTML テキスト 'after_title' => '</p>', // タイトルの直後に出力する HTML テキスト ) ); } [/php]

上記コードを追加すると、管理画面内「外観」→「ウィジェット」に下記のように「name」で設定した名前でウィジェットエリアが表示されます。

2016-07-01_01

表示されたウィジェットエリアのタイトル右の三角印をクリックしてウィジェットエリアを開きます。ここでウィジェットエリアの説明が表示されるので、用途が決まっている場合は表示されるようにしておくとよいでしょう。

左側の「利用できるウィジェット」の中から「テキスト」を選び、今回追加したウィジェットエリアの中にドラッグします。

そして「タイトル」、「内容」を設定します。今回、「内容」にはバナーを表示させるため、あらかじめ管理画面左メニューの「メディア」→「新規追加」でアップロードしておくとよいでしょう。

2016-07-01_02

ここまでで、ウィジェットエリアの追加はできました。

ウィジェットエリアの表示

追加の作業が終わっただけでは、追加したウィジェットエリアの内容は表示されません。テンプレート内の表示させたい場所にウィジェットエリアの名前を設定する必要があります。

今回は、投稿記事のフッターに表示させるため、single.php に記述します。

[php] <?php dynamic_sidebar('post-footer-1'); ?> [/php]

引数で指定する値は、ウィジェットエリア設定時に id で指定した値になります。

これで表示の設定も完了し、下記のようにバナーが表示されます。

2016-07-01_03

設定時にテンプレートファイルを編集するものの、ウィジェットエリアの追加・表示は難しいものではありません。

運用上で編集頻度が高そうなところは、ウィジェットエリアとして設定しておくことで後々の手間を省くことができそうですね。