WordPress(ワードプレス)でホームページを作りたい、カスタムしたいという人のためのサイトです。

WordPressのカスタムテーマでウィジェットを追加する方法

TOP > カスタム方法 > WordPressのカスタムテーマでウィジェットを追加する方法

WordPressのテーマをカスタムする際に、サイドバーとかにウィジェットを使いたい場合があると思います。
その時に使える方法です。

ウィジェットを使用する事で管理が楽になるというのはもちろんですが、ウィジェットに対応していないと使えないプラグインもあるのでその場合に重宝します。
では実際の手順を紹介します。

WordPressにウィジェットを追加する手順

カスタムテーマにウィジェットを追加する手順は以下のような順番になります。

  1. functions.phpにウィジェット追加にかかる記述を追記する
  2. ウィジェットを追加したい箇所を制御するテーマファイルに記述を追記する

修正するのはたった2つだけ。
内容さえしっかり分かっていればすごく簡単ですね!

内容の詳細は以下のような感じになります。

functions.phpにウィジェット追加にかかる記述を追記する

コードの基本形は以下のような感じです。
下記の「before_widget」「after_widget」「before_title」「after_title」は省略可能です。
「name」は管理画面上に表示される文字列なので、分かりやすい名前を推奨です。

if (function_exists('register_sidebar')) {
//ここから
register_sidebar(array(
'name' => 'ウィジェット名',
'before_widget' => 'ウィジェットを囲む開始タグ',
'after_widget' => 'ウィジェットを囲む終了タグ',
'before_title' => 'ウィジェットのタイトルを囲む開始タグ',
'after_title' => 'ウィジェットのタイトルを囲む終了タグ'
));
//ここまでをウィジェットの数だけ繰り返す
}

実際に書いてみるとこんな感じになります。
ここではtest1,test2,test3という3つのウィジェットの場合として記述しています。

if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'test1',
'before_widget' => '<p>',
'after_widget' => '</p>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' => 'test2',
'before_widget' => '<p>',
'after_widget' => '</p>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
register_sidebar(array(
'name' =&gt; 'test3',
'before_widget' => '<p>',
'after_widget' => '</p>',
'before_title' => '<h4>',
'after_title' => '</h4>'
));
}

上記の場合だと以下のようにHTMLが出力されます。

<h4>test1</h4>
<p>test1のウィジェットの内容</p>
<h4>test2</h4>
<p>test2のウィジェットの内容</p>
<h4>test2</h4>
<p>test2のウィジェットの内容</p>

functions.phpへの追記は以上です。

ウィジェットを追加したい箇所を制御するテーマファイルに記述を追記する

次は表示したいテーマファイルに以下のように追記します。

<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('test1')) : ?>
<?php endif; ?>

上記コードでウィジェットにtest1が追加される形になります。
この設定方法で追加すると好きな分だけウィジェットを追加できるので、既にあるテーマにウィジェットを追加したい場合にも対応できますね。


« »

ABOUT THE AUTHOR

こしもあんず
こしもあんず

Wordpressをカスタマイズすることが好きなギーク女子です。
好きなエディタはSublimetext2です。
Google+やってるので、よろしくです。
デザインは好きですが、PHPはあまり得意ではないのでその辺ご容赦くださいね。


Twitterはこちら
https://twitter.com/wordpresscusto1

ad