WordPress でフッターにウィジェットを追加する方法

2018年10月31日

サイドバーにウィジェットを追加する方法

functions.php に以下のコードを追記します。

//サイドバーにウィジェット追加
function widgetsidebar_init() {
register_sidebar(array(
'name'=>'サイドバー',
'id' => 'side-widget',
'before_widget'=>'
<div id="%1$s" class="%2$s sidebar-wrapper">',
'after_widget'=>'</div>',
'before_title' => '<h5 class="sidebar-title">',
'after_title' => '</h5>'
));
}
add_action( 'widgets_init', 'widgetsidebar_init' );

詳しくは下記の記事をご覧ください。

フッターにウィジェットを追加する方法

functions.php に以下のコードを追記します。

//フッターにウィジェット追加
$sidebars = array(1, 2, 3);
foreach($sidebars as $number) {
register_sidebar(array(
'name' => 'Footer ' . $number,
'id' => 'footer ' . $number,
'before_widget' => '<div id="%1$s" class="%2$s footer-wrapper">',
'after_widget' => '</div>',
'before_title' => '<h5 class="footer-title">',
'after_title' => '</h5>'
));
}

$sidebars = array()の中に値を指定しています。また、$sidebars = array(1, 2, 3)のように複数のウィジェットを指定（例では1～3の3つ）できます。

‘name’

ウィジェットエリアに名前を付けています。ここに記述した名前が管理画面のウィジェット選択画面に表示されます。

‘id’

ウィジェットエリアにidを付けます。ここで指定した値でfooter.phpの中にウィジェットを呼び出します。

‘before_widget’
‘after_widget’

ウィジェットの前と後ろに要素を置きたい場合に値を指定します。
今回は、ウィジェットアイテムの種類別に別々のid・class名が反映されるように『id=”%1$s”』『class=”%2$s”』と記述し、各ウィジェットごとの名前 + 各アイテム共通の『footer-wrapper』というclass名が反映されるように設定しています。

‘after_title’
‘before_title’

ウィジェットの前と後ろに要素を置きたい場合に値を指定します。
各ウィジェットにタイトルが付けられた場合のタグを設定できます。上記のソースコードでは、見出しタグのh5タグでタイトルを括るように設定しています。

フッターにウィジェットを表示する

<aside id="footer-widget">
<?php dynamic_sidebar('footer.1'); ?>
<?php dynamic_sidebar('footer.2'); ?>
<?php dynamic_sidebar('footer.3'); ?>
</aside>