ウィジェットエリアを追加して表示する方法【WordPress】

こんにちは。

今回はワードプレスでウィジェットエリアを追加し、追加したウィジェットを表示する方法について紹介したいと思います。

それでは、いつも通り、まずは結論から。

functions.phpを編集してウィジェットエリアを追加する

WordPressの管理画面の左サイドにあるメニューの、

[外観] → [テーマの編集]

に進み、右サイドの「テーマファイル」の中から「テーマのための関数（functions.php）」をクリック。

もちろん、FTPソフトを使ってサーバーと接続してfunctions.phpファイルを直接編集してアップロードする方法でも問題ありません。

そして、そのファイルのどこでもいいので下記のソースを入力します。

register_sidebar( array('name' => 'widget_name' ,
　'id' => 'widget_area' ,
　 'before_widget' => '<div class="widget">',
　'after_widget' => '</div>',
　'before_title' => '<h3>',
　'after_title' => '</h3>'
　'after_title' => '</h3>'
));

追加したウィジェットを表示する方法

では、続いて、上記ソースの解説と追加したウィジェットを表示する方法を紹介します。

'name' => 'widget_name' 

は管理画面のウィジェットエリアの名前として表示されるものです。

「widget_name」の部分をお好みのウィジェットエリア名に変更しましょう。

'id' => 'widget_area'

は「widget_area」の部分をお好みのidに変更しましょう。

これが、ウィジェットを表示するために必要なIDとなります。

ウィジェットエリアを表示したい場所に

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

と記述することでこのウィジェットエリアを表示することができます。

'before_widget' => '<div class="widget">' 　と　'after_widget' => '</div>'

は、このウィジェットエリアを囲むタグを設定しています。

この場合、

<div class="widget">
 <!-- ウィジェットエリアの中身 -->
</div>

のように出力されます。

'before_title' => '<h3>'
'after_title' => '</h3>'

は、このウィジェットエリアに導入する各ウィジェットのタイトルを囲むタグを設定しています。

まとめ

それぞれのソースの意味の解説は以上です。

今回紹介したソースをそのまま使ってウィジェットを表示する場合、

<div class="widget">
　<h3><!-- 各ウィジェットのタイトル --></h3>
　<!-- ウィジェットコンテンツが出力される -->
</div>

のように出力されます。