前回の続きです。
投稿一覧、投稿、固定ページ、アーカイブの出力については概ね出来てきたので、
今回はサイドバーをやってみたいと思います。
サイドバーの登録と表示
ということで、こちらを参考にやってみます。
サイドバーを登録するために、functions.php に以下のようなコードを追加しました。
add_action( 'widgets_init', function() {
register_sidebar(
[
'name' => 'サイドバー',
'id' => 'rf-sidebar',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>'
]
);
}); name と id は省略することも可能なようですが、判別できるように設定しておくようにします。
個々のウィジェット全体を <section> で、ウィジェットのタイトルは <h3> で囲むように設定しました。
これで、
管理画面の「外観」に「ウィジェット」が追加され、ウィジェットを登録することができるようになりますが、
このままでは画面に出力されないので、そのためのコードを書きます。
大抵の場合は footer.php に書くことになると思います。
例のごとく、テンプレート部品化しました。
</main>
<?php get_template_part( 'parts/sidebar' ); ?>
</div>
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>parts/sidebar.php のコードは以下の通りとなりました。
<?php if ( is_active_sidebar('rf-sidebar') ) : ?>
<aside id="sidebar">
<div class="widget-list">
<?php dynamic_sidebar('rf-sidebar'); ?>
</div>
</aside>
<?php endif; ?> 登録時のIDを使って目的のサイドバーを指定するようにします。
is_active_sidebar() で該サイドバーが有効になっているか確認し、dynamic_sidebar() でサイドバーを表示させます。割と簡単ですね。
サイドバーを含む構造を確認
ヘッダー、フッター、サイドバーのコードを書いたことによって、構造が変化したので確認しておきましょう。
以下のような感じになりました。
ということで、ローカルなWordPress環境での動作を確認してみましょう。
サイドバーとして期待したような表示になるように、CSSを追加しました。
#primary {
display: flex;
}
#main {
width: calc(100% - 200px);
}
#sidebar {
width: 200px;
}
.widget-list {
margin: 0 0 0 20px;
} で、いくつかのウィジェットを追加してみた結果は↓こんな感じになりました。
とりあえずうまく行っているようですね。
次回に続きます。