【WordPress】ウィジェットでサイドバーを作る
記事更新日:2022-09-10
![サムネイル](https://tsukiusagi.biz/wp-content/uploads/2022/01/wordpress.png)
ウィジェット
は
とても便利
は
とても便利
ウィジェットを使うと、簡単にサイドバーを設置できます
1.functions.phpに設定
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
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');
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
タグやクラス名は自分の好きなものを
register sidebar
‘widgets_init’ アクションで呼び出してください
2.管理画面|外観→メニュー
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
好きなメニュー名をつける
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/09/menu.png?resize=1024%2C316&ssl=1)
3.管理画面|外観→ウィジェット
1.ナビゲーションメニューを選択する
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
サイドバー名が表示されるので、+ボタンを押す
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/09/wijet-2.png?resize=1024%2C197&ssl=1)
2.メニュー名を選ぶ
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
作ったメニュー名が表示されるので、選択
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/09/widjet.png?resize=1024%2C439&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
タイトル欄には、表示したいタイトルを入力
4.sidebar.php
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
()の中身は、自分で作ったサイドバー名
<?php if (is_active_sidebar('category-nav')) : ?>
<?php dynamic_sidebar('category-nav'); ?>
<?php endif; ?>
dynamic sidebar
5.設置したい場所に記述
<?php get_sidebar(); ?>
6.出力されるHTML
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
上記の設定で、出力される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>
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
「menu-(メニュー名)」というクラスがつく
2022-09-10
編集後記:
この記事の内容がベストではないかもしれません。
記事一覧
-
bodyタグに任意のクラス名 【WordPress】bodyに任意のクラス名を付ける -
function_existsで関数を作る 【WordPress】if (!function_exists()が必要な理由|子テーマでカスタマイズしやすくなる -
絵文字を停止する 【WordPress】高速化|絵文字を読み込む設定を停止する -
シンプルなページネーション 【WordPress】ページネーションを作る関数|the posts pagination -
カテゴリ画像をサムネイルに 【WordPress】管理画面でカテゴリ別画像を登録・サムネイルに設定【メディアアップロード追加方法】 -
クラス名を変数でechoする 【WordPress】クラス名を変数にしてechoする