WordPressのテーマをウィジェットに対応させる

WordPressで自作のテーマを作った場合などは、自分でウィジェットを利用可能にしない限り、ウィジェットは利用出来ません。このサイトのテーマは自作なのですが、今までウィジェットは使う機会がなかったので、未対応のままになっていました(:_;)

今回は、サイドにWordPress Popular Postsプラグインの人気記事一覧を表示させたかったので、調べてみましたよっ！ってことで、ウィジェットに対応していないWordPressでウィジェットを利用可能にする方法です。

手順は簡単です。

1.ウィジェットを有効にする

functions.php

<?php
// サイドバーウィジェット
register_sidebar(array(
     'name' => 'side-widget', //作成するウィジェットの名前（お好きな名前で）
     'before_widget' => '<div class="widddget">', //ウィジェットを囲む開始タグ
     'after_widget' => '</div>', //ウィジェットを囲む終了タグ
     'before_title' => '<h3>', //ウィジェットタイトルを囲む開始タグ
     'after_title' => '</h3>', //ウィジェットタイトルを囲む終了タグ
));

?>

ウィジェットを作成するだけなら、functions.phpに、register_sidebar(); もしくは、register_sidebars();と記述するだけで、OKみたいですが、それだとウィジェットのタイトルやウィジェットを囲むHTMLタグの設定がデフォルト（h2とliかな？）のままになります。今回はHTMLタグも変えたかったので、before_widgetなどの設定をしています。

2.ウィジェットを表示させたい箇所に以下を記述

sidebar.php

<?php dynamic_sidebar('side-widget'); //functions.phpに設定した名前 ?>

functions.phpでregister_sidebar(); もしくは、register_sidebars();と設定しているだけなら、引数無しのdynamic_sidebar();でOKです。

むむむ・・・

本当に簡単だったので、ついでに複数のウィジェットの設定方法もまとめておきます。

複数のウィジェットを作成する場合

ウィジェットを左右のサイドバーで使い分けるなど、複数のウィジェットが必要な場合も上で説明したウィジェット設置時のfunctions.phpの内容を必要な数だけ追加し、呼び出したい箇所にdynamic_sidebarでnameかidを指定して呼び出してやれば、可能です。簡単ですね。

1.ウィジェットを有効にする

functions.php
register_sidebarで2つのウィジェットを作成

<?php
register_sidebar();
register_sidebar();
?>

register_sidebarsで2つのウィジェットを作成

<?php
register_sidebars(2);
?>

２つのウィジェット(widget1,widget2)を作成

<?php
register_sidebars(2, array('name'=>'widget%d'));
?>

上記どのパターンでも2つのウィジェットが追加されます。name,idを指定しない場合は、サイドバー1,サイドバー2みたいな名前で追加されます。functions.php内で上から書かれている順に番号が振られていく感じみたいです。2つ以上の場合は数字を変えるだけで作成可能です。

ここを見るとregister_sidebarsを使うほうが一般的みたいです。

2.ウィジェットを表示させたい箇所に以下を記述

複数のウィジェットの作成が完了したら、表示したい箇所に呼び出します。

sidebar.php
functions.phpでウィジェットのnameもidも指定せずに設定した場合

サイドバー1

<?php dynamic_sidebar(1); ?>

サイドバー2

<?php dynamic_sidebar(2); ?>

sidebar.php
functions.phpでnameかidを指定した場合

サイドバー1

<?php dynamic_sidebar('widget1'); ?>

サイドバー2

<?php dynamic_sidebar('widget2'); ?>

ちなみに、register_sidebar、dynamic_sidebarといった具合に、sidebarという名前になっているので、なんとなくサイドに置くのか。。って感じですが、ウィジェットはフッターやコンテンツなど好きな箇所に表示することが可能です。