WordPressのウィジットエリアを追加する方法

Moving Stool by Gabriele Pezzini for Max Design By: SOCIALisBETTER

WordPressのウィジットエリアを複数作成する方法を紹介します。

ウィジットエリアを複数作成しておけば、フッターやヘッダー・サイドバーなどに個別のウィジットが表示でき、サイトのコンテンツが簡単に充実させられます。

ウィジットエリアの追加と配置
  1. ウィジットエリアの追加
  2. ウィジットエリアの配置

ウィジットエリアの追加

ウィジットエリアを追加するときは、functions.phpに以下のコードを追加します。

functions.php
register_sidebar(array(
     'name' => 'Footer' ,
     'id' => 'footer' ,
     'before_widget' => '<div class="widget">',
     'after_widget' => '</div>',
     'before_title' => '<h3>',
     'after_title' => '</h3>'
));
nameウィジット画面に表示する名前
idウィジットエリアのID(※画面に配置するときに必要となります)
before_widgetウィジットエリアの前に表示するタグ
after_widgetウィジットエリアの後に表示するタグ
before_titleウィジットのタイトルの前に表示するタグ
after_titleウィジットのタイトルの後に表示するタグ
function.phpに追加すると、ウィジットエリアが追加されます。
widget
ウィジットエリアにカテゴリを追加して、表示させるとこのようにタグが出力されます。
widget1

widget2

複数のウィジットエリアを表示するときは、同様の定義を追加します。
※同じ「name」と「id」は定義できないため、変更する必要があります。

functions.php
$sidebars = array(1, 2, 3);
foreach($sidebars as $number) {
     register_sidebar(array(
          'name' => 'Footer ' . $number,
          'id' => 'footer ' . $number,
          'before_widget' => '<div class="widget">',
          'after_widget' => '</div>',
          'before_title' => '<h3>',
          'after_title' => '</h3>'
     ));
}
これで、このように複数のウィジットエリアが追加できます。
widget3

ウィジットエリアの配置

ウィジットエリアを配置するときは、ヘッダー/フッターなどのphpファイルに以下のコードを追加します。

php file
<?php dynamic_sidebar('ウィジットエリアのID'); ?>

最初に追加したFooterを配置するときは、以下のように記述します。

<?php dynamic_sidebar('footer'); ?>
後は、追加したウィジットエリアをサイドバーやフッターに配置すると、このように複数のウィジットが違う場所に表示できます。
widget4

ウィジットのような、複雑なHTML構造を持つコンテンツを簡単に配置できるのも、WordPressの強みの一つなので、ぜひ使用してみてください。

divider

Trackback URL

http://webnonotes.com/wordpress/addwidget/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>