【WordPress】独自テーマでウィジェットを使えるようにする&設置方法

独自テーマを作る場合、何もしなければ「外観」には「テーマ」「カスタマイズ」「テーマエディター」しかありません。

引用:wordpress

ですが、function.phpに少し書き足すと、「ウィジェット」「メニュー」を追加することができます。

引用:wordpress

この「ウィジェットとメニューの追加方法」と「ウィジェットをサイトに表示させる方法」をメモしておきたいと思います。

スポンサーリンク

独自テーマで「外観」にウィジェットを追加する方法

<?php
function widget_sidebar() {
  // ウィジェットを登録
  register_sidebar(array(
    'id'   => 'sidebar-1',
    'name' => 'サイドバー',
    'before_widget' => '<div class="sidebar>',
    'after_widget' => '</div>'
  ));
}
add_action('widgets_init', 'widget_sidebar');
?>

上のソースで「sidebar-1」というIDで「サイドバー」というウィジェットが設定できるようになりますIDはこのサイドバーをサイトに表示させる時に必要になります。

引用:wordpress

これだけで「外観」にウィジェットとメニューが追加されました。また、「サイドバー」というウィジェットも設定できるようになっています。

簡単な説明

下記ソースは関数名さえ他と被らなければ、そのまま使っていただいても問題ありません。ですので、説明が不要な方は読み飛ばして次の「ウィジェットをサイトに表示する」へお進みください。

<?php
function widget_sidebar() {
  // ウィジェットを登録
  register_sidebar(array(
    'id'   => 'sidebar-1',
    'name' => 'サイドバー',
    'before_widget' => '<div class="sidebar>',
    'after_widget' => '</div>'
  ));
}
add_action('widgets_init', 'widget_sidebar');
?>

関数名(1行目)

「widget_sidebar」としていますが、他の関数と被らなければ何でもOKです。ただし、「add_action」(最終行)の2つ目の引数も同じ関数名に変更してください。

register_sidebar(3行目)

このままご利用ください。

id(4行目)

ウィジェットをサイトに表示する際に必要になります。後ほど「ウィジェットをサイトに表示する」で実際に使います。
※「id」は何でもOKです。好きな「id」にしてください。もちろんこのままでも大丈夫です

name(5行目)

「外観」>「ウィジェット」に表示される名称です。
※「name」は何でもOKです。好きな「name」にしてください。もちろんこのままでも大丈夫です

引用:wordpress

before_widget、after_widget(6、7行目)

ウィジェットをサイトに表示させると、ウィジェット用のhtmlソースが埋め込まれます。そのソースの前に「before_widget」で指定したhtml、後ろに「after_widget」で指定したhtmlが追加されます

例だと「before_widget」には <div class=”sidebar> 、「after_widget」には </div> を指定していると思います。その場合、下記のようなソースになります。

<div class="sidebar">
  ウィジェットに必要なソース
</div>

ちなみに、この2つ「before_widget」「after_widget」に空文字を指定して、ベタ書きでhtmlを書いても良いと思います。そのあたりは好みですね。

add_action(最終行)

add_action('widgets_init', 'widget_sidebar');

赤字の部分は指定した関数名(1行目)と合わせてください。それ以外はこのままご利用ください。

ウィジェットをサイトに表示する方法

 <?php
dynamic_sidebar( 'sidebar-1' );
?>

dynamic_sidebar」という関数を使って引数にウィジェットのIDを指定するだけでウィジェットをサイトに表示させることができます。

表示させる方法はとても簡単ですね。

まとめ

これで独自テーマでもウィジェットを使ってサイドメニューなどをカスタマイズできるようになりました。これまでは、あまりウィジェットの対応をしたことがなかったのですが、お客さんによっては自由度が上がって嬉しい方もいるかと思います。

実際は、「なるべくシンプルで設定できる箇所は投稿のみが良い」というお客さんも多いです。

ただ、お客さんが選択できる幅が増えるのは良いことなのかなと思います。機会があれば使っていこうかな。

それでは、最後までお読みいただきありがとうございました!

スポンサーリンク