WordPress でオリジナルテーマを作る【sidebar.php】編

2018年11月03日

2カラムや3カラム、またはそれ以上のカラムのブログでは、記事の右側や左側にブログの各メニューのリンクがあるのが一般的です。たとえば、カテゴリーページや月別アーカイブページ、テーマによってはトップページや投稿記事ページなどです。それらのメニューを表示させるサイドバーを作成します。

register_sidebar();

作成後の運用時の利便性を考えて、管理画面のウィジェットを利用してサイドメニューを管理できるようなサイドバーを作成します。
管理画面・ダッシュボードのメインメニューの中に外観という項目があります。そのサブメニューに「テーマ」「カスタマイズ」および「テーマの編集」のみしか表示されていない場合はfunctions.phpでウィジェットを有効にする必要があります。

functions.php を編集します。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' );

サイドバーの記述は、array()の中に値を指定しています。

‘name’
サイドバーに名前を付けています。ここに記述した名前が管理画面のウィジェット選択画面に表示されます。
‘id’
ウィジェットエリアにidを付けます。ここで指定した値でsidebar.phpの中にサイドバーを呼び出します。
‘before_widget’
‘after_widget’
ウィジェットの前と後ろに要素を置きたい場合に値を指定します。
今回は、ウィジェットアイテムの種類別に別々のid・class名が反映されるように『id=”%1$s”』『class=”%2$s”』と記述し、各ウィジェットごとの名前 + 各アイテム共通の『sidebar-wrapper』というclass名が反映されるように設定しています。
‘after_title’
‘before_title’
ウィジェットの前と後ろに要素を置きたい場合に値を指定します。
各ウィジェットにタイトルが付けられた場合のタグを設定できます。上記のソースコードでは、見出しタグのh5タグでタイトルを括るように設定しています。

sidebar.php

sidebar.php を作成し、index.php や header.php などと同じ階層に置きます。

<!-- sidebar -->
<aside id="sidebar"><?php dynamic_sidebar( 'side-widget' ); ?></aside>

<?php get_sidebar(); ?>

index.php に <?php get_sidebar(); ?> というインクルードタグを記載します。

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

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

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>'
));
}

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

WordPress, オリジナルテーマ

Posted by WordPress Bookmark