独自サイドバー(サイドバーウィジェット)の追加方法|WordPress Theme作成

      2018/06/13

既存のサイドバーウィジェットではなく、作成テーマ用に独自のサイドバーウィジェットを用意する方法です。

functions.php

functions.phpregister_sidebarをパラメータ付きで記述します。

register_sidebar( array(
    'name' => 'Sidebar (PC)',
    'id' => 'sidebar-pc',
    'description' => 'This sidebar widget is only shown when pc size.',
    'before_widget' => '<li>',
    'after_widget' => '</li>',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
) );
キー 説明
before_widget ウィジェットの直前に出力する HTML テキスト
after_widget ウィジェットの直後に出力する HTML テキスト
before_title タイトルの直前に出力する HTML テキスト
after_title タイトルの直後に出力する HTML テキスト

上記を設定すると外観>ウィジェットに下の様なサイドバー領域が追加されます。

Sidebar (PC)

sidebar.php

sidebar.phpに登録したサイドバーを表示する処理を記述します。dynamic_sidebarの引数にregister_sidebaridを指定します。

<ul class="sidebar-pc">
    <?php dynamic_sidebar( 'sidebar-pc' ); ?>
</ul>

スタイルシートについてはここでは省略します。

 - WordPress