【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ソースが埋め込まれます。そのウィジェット用のhtmlは必要なソースなのですが、そのソースの前に「before_widget」で指定したhtml、後ろに「after_widget」で指定したhtmlが追加されます。

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

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

この2つは空文字にして囲うタグはソースの方にベタ書きにしても良いと思います。そのあたりは好みですね。

add_action(最終行)

add_action('widgets_init', 'widget_sidebar');

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

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

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

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

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

まとめ

これで独自テーマでもウィジェットを使ってサイドメニューなどをカスタマイズできるようになりました。