【WordPress】ウィジェットでサイドバーを作る

記事更新日：2022-09-10

ウィジェット
は
とても便利

ウィジェットを使うと、簡単にサイドバーを設置できます

１．functions.phpに設定

nameは、サイドバー名

function my_theme_widgets_init() {
    register_sidebar(array(
        'name' => 'side-bar',
        'id' => 'side-bar',
        'before_widget' => '<aside class="p-side-bar">',
        'after_widget' => '</aside>',
        'before_title' => '<h3 class="side-title">',
        'after_title'  => '</h3>',
    ));
}
add_action('widgets_init', 'my_theme_widgets_init');

タグやクラス名は自分の好きなものを

‘widgets_init’ アクションで呼び出してください

参照：

関数リファレンス/register sidebar

２．管理画面｜外観→メニュー

好きなメニュー名をつける

３．管理画面｜外観→ウィジェット

１．ナビゲーションメニューを選択する

サイドバー名が表示されるので、＋ボタンを押す

２．メニュー名を選ぶ

作ったメニュー名が表示されるので、選択

タイトル欄には、表示したいタイトルを入力

４．sidebar.php

()の中身は、自分で作ったサイドバー名

<?php if (is_active_sidebar('category-nav')) : ?>
    <?php dynamic_sidebar('category-nav'); ?>
<?php endif; ?>

dynamic sidebar

この関数はアクティブなウィジェットコールバック関数を順に呼び出し、サイドバーに表示します

参照：

関数リファレンス/dynamic sidebar

５．設置したい場所に記述

<?php get_sidebar(); ?>

６．出力されるHTML

上記の設定で、出力されるHTMLがこちら

<aside class="p-side-bar">
    <h3>カテゴリ</h3>
    <div class="menu-category-nav-container">
        <ul id="menu-category-nav" class="menu">
            <li class="menu-item"><a>xxx</a></li>
            <li class="menu-item"><a>xxx</a></li>
            <li class="menu-item"><a>xxx</a></li>
        </ul>
    </div>
</aside>

「menu-（メニュー名）」というクラスがつく

author
月うさぎ

2022-09-10

編集後記：
この記事の内容がベストではないかもしれません。