« 前の記事

WordPressメニュー応用編｜サイドバーにカテゴリーを階層表示＆カスタマイズする手順

WordPressメニュー応用編｜サイドバーにカテゴリーを階層表示＆カスタマイズする手順

前回の記事では、WordPressの基本機能を使ってメニューを新規作成し、パソコンのヘッダーとスマートフォンのスライドインメニューに表示させる手順をご紹介しました。

この記事では、メニュー機能を使ってカテゴリーの階層構造（親子メニュー）を作る手順から、サイドバーへの設置方法、Cocoon標準の「Font Awesome 5」を活用した上品な装飾、そして子カテゴリーをすっきりと折りたたむ実用的なアコーディオン開閉の実装方法まで、詳しくご案内します。

なぜサイドバーに「メニュー機能」でカテゴリーを置くのか

「カテゴリーの一覧なら、カテゴリーウィジェットを置くだけで十分では？」と思われるかもしれません。しかし、あえて「メニュー機能」を使ってサイドバーにカテゴリーを配置することには、サイト運営上の大きなメリットがあります。

メニュー機能を使ってカテゴリーを設置する主なメリットは、次の3点です。

  • 表示順を自由に並び替えられる：通常のウィジェットでは名前順や投稿数順など機械的な並びになりますが、メニューなら「読者に一番読んでほしい主力カテゴリー」を一番上に配置できます。
  • 見せたい項目だけを厳選できる：まだ記事数が少ない準備中のカテゴリーを非表示にしたり、特定の重要カテゴリーだけをピックアップして掲載できます。
  • サブディレクトリや外部リンクも混在できる：「カスタムリンク」を活用することで、別館サイト（サブディレクトリや英語サイトなど）や重要なタグ一覧ページへの導線も、違和感なく同じリスト内にまとめられます。

新しくカテゴリーを作成した際には手動でメニューに追加するひと手間が必要になりますが、サイト設計や導線をコントロールしたい個人商店のサイトや特化ブログにとっては、便利な方法です。

カテゴリーで階層メニューを新規作成する手順

それでは実際に、カテゴリーを並べた階層メニューを作成していきましょう。管理画面からドラッグ操作で簡単に組み立てることができます。

新しいメニューを作成する

まずは、サイドバー専用の新しいメニュー枠を用意します。

  1. WordPressの管理画面から、「外観」➔「メニュー」を開きます。
  2. 「新しいメニューを作成しましょう」というリンクをクリックします。
  3. 「メニュー名」に、自分で管理しやすい名前を入力します（例：サイドバー用カテゴリー など）。
  4. 画面下の「メニューを作成」ボタンをクリックします。

WordPressで新しいメニューを作成する

※ここでのメニュー名は管理画面内での識別名ですので、ご自身が分かりやすい名前でOKです。

カテゴリーをメニューに追加する

枠組みができたら、メニューの中に表示させたいカテゴリーを追加します。

  1. 画面左側にある「カテゴリー」のアコーディオンをクリックして開きます。
  2. 「すべて表示」タブに切り替えます。
  3. メニューに並べたいカテゴリーにチェックを入れます。
  4. 「メニューに追加」ボタンをクリックします。

選択したカテゴリーが、右側の「メニュー構造」エリアに一覧として追加されます。

ドラッグ＆ドロップで階層化（親子関係）を設定する

追加された項目は、マウスのドラッグ＆ドロップで順番を入れ替えたり、階層構造（親カテゴリーと子カテゴリー）に設定したりできます。

  1. 子メニューにしたい項目のブロックをマウスで掴みます。
  2. 親にしたい項目のすぐ下へ持っていき、少しだけ右側へずらして指を離します。
  3. 項目のラベルに「サブ項目」と表示され、右へ一段下がった状態になれば階層化の完了です。
  4. 並び順と階層が整ったら、画面下の「メニューを保存」をクリックします。

WordPressのメニューにカテゴリーを追加する

親項目の右下に一段くぼんで配置されることで、視覚的にもすっきりとした親子関係が完成します。

サイドバーにナビゲーションメニューを配置する

メニューの組み立てが完了したら、サイドバーにウィジェットとして配置しましょう。

    1. WordPressの管理画面から、「外観」➔「ウィジェット」を開きます。
    2. 利用できるウィジェット一覧から「ナビゲーションメニュー」を探します。
    3. 「サイドバー」エリアへドラッグ＆ドロップするか、クリックして「サイドバー」を選択し「ウィジェットを追加」をクリックします。
    4. 配置したナビゲーションメニューの設定を開き、タイトルに「カテゴリー」などサイト上で表示させたい見出しを入力します。
    5. 「メニューを選択」のプルダウンから、先ほど作成した「サイドバー用カテゴリー」を選択します。
    6. 「保存」をクリックします。

WordPressのナビゲーションメニューをサイドバーに設置する

これで、実際のサイトのサイドバーに作成したカテゴリーメニューが表示されるようになります。

Font Awesome 5とCSSでカテゴリーメニューをおしゃれに整える

初期状態のままでも一覧として機能しますが、文字だけが並んでいると少し寂しい印象を受けることがあります。そこで、Cocoonに標準で備わっている「Font Awesome 5」のWebアイコンフォントとシンプルなCSSを組み合わせて、視認性の高いデザインに整えてみましょう。

親カテゴリーの先頭にはフォルダアイコン、階層化された子カテゴリーの先頭には三点リーダーアイコンを表示し、項目ごとに優しい下線を引いて区切ります。

このような状態を目指します↓
Cocoonテーマのサイドバーにメニューで設置したカテゴリー一覧をカスタマイズしたところ

Cocoonの子テーマ用CSSコード

以下のスタイルコードを、「外観」➔「テーマファイルエディター」➔「スタイルシート（style.css）」に貼り付けてください。

WordPressのスタイルシート編集画面

/* -------------------------------------------
 * サイドバーのナビゲーションメニュー（カテゴリー）装飾
 * ------------------------------------------- */

/* リスト全体の余白リセットと下線 */
.sidebar .widget_nav_menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar .widget_nav_menu li {
  border-bottom: 1px solid #eeeeee;
  position: relative;
  line-height: 1.6;
}

.sidebar .widget_nav_menu li a {
  display: block;
  padding: 8px 36px 8px 4px; /* 右側に開閉ボタン用の余白を確保 */
  color: #333333;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* ホバー時のテキスト色 */
.sidebar .widget_nav_menu li a:hover {
  color: #2055a4;
  background-color: #f9f9f9;
}

/* 親メニューのアイコン（フォルダアイコン） */
.sidebar .widget_nav_menu ul.menu > li > a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f07c"; /* 開いたフォルダ */
  font-weight: 900;
  margin-right: 8px;
  color: #d9534f; /* アクセントカラー（お好みの色に変更可） */
}

/* 子メニュー（サブメニュー）全体のインデント */
.sidebar .widget_nav_menu .sub-menu {
  margin-left: 12px;
  border-top: 1px solid #eeeeee;
  display: none; /* 初期状態では折りたたんで非表示 */
}

.sidebar .widget_nav_menu .sub-menu li:last-child {
  border-bottom: none;
}

.sidebar .widget_nav_menu .sub-menu li a {
  padding-right: 4px; /* 子階層は右余白を標準に戻す */
}

/* 子メニューのアイコン（サブ項目アイコン） */
.sidebar .widget_nav_menu .sub-menu li a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f141"; /* 水平の3点リーダー */
  font-weight: 900;
  margin-right: 8px;
  color: #d9534f; /* アクセントカラー（お好みの色に変更可） */
  font-size: 0.85em;
}

/* -------------------------------------------
 * 開閉トグルボタンのスタイル
 * ------------------------------------------- */
.sidebar .widget_nav_menu .menu-toggle-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888888;
  padding: 0;
}

.sidebar .widget_nav_menu .menu-toggle-btn::before {
  font-family: "Font Awesome 5 Free";
  content: "\f078"; /* 下向き矢印（閉じている状態） */
  font-weight: 900;
  font-size: 0.8em;
  transition: transform 0.25s ease;
}

/* 開いている状態（矢印が上を向く） */
.sidebar .widget_nav_menu li.is-open > .menu-toggle-btn::before {
  transform: rotate(180deg);
  color: #2055a4;
}

親カテゴリーをクリックで開閉！アコーディオン化のカスタマイズ

子カテゴリーが増えてくると、サイドバーが縦に長くなりすぎてしまいますよね。そこで、「親カテゴリーの文字をクリックすると一覧ページへ遷移し、右端の矢印アイコンをクリックすると子カテゴリーがスムーズに開閉する」実用的なアコーディオン機能を導入しましょう。

このような状態を目指します↓
サイドバーのカテゴリーメニューを展開した表示例

プラグインを追加することなく、Cocoon子テーマの「javascript.js」にスクリプトを記述するだけで安全に実装できます。

javascript.jsにコードを追記する手順

  1. WordPressの管理画面から、「外観」➔「テーマファイルエディター」を開きます。
  2. 画面右上の「編集するテーマを選択」が「Cocoon Child」になっていることを確認します。
  3. 右側のテーマファイル一覧から「javascript.js」をクリックします。
  4. 以下のスクリプトコードをコピーし、末尾に貼り付けます。
  5. 「ファイルを更新」をクリックします。

Cocoon子テーマのjavascript.js編集画面

// サイドバーカテゴリーメニューのアコーディオン開閉
document.addEventListener('DOMContentLoaded', function () {
  var menuItems = document.querySelectorAll('.sidebar .widget_nav_menu li');

  menuItems.forEach(function (li) {
    var subMenu = li.querySelector(':scope > ul.sub-menu');

    // 直下に子メニュー（sub-menu）が存在する場合のみボタンを設置
    if (subMenu) {
      if (!li.querySelector(':scope > .menu-toggle-btn')) {
        var toggleBtn = document.createElement('button');
        toggleBtn.type = 'button';
        toggleBtn.className = 'menu-toggle-btn';
        toggleBtn.setAttribute('aria-label', 'サブメニューを開閉する');

        toggleBtn.addEventListener('click', function (e) {
          e.preventDefault();
          e.stopPropagation();

          var isOpen = li.classList.contains('is-open');

          if (isOpen) {
            li.classList.remove('is-open');
            subMenu.style.display = 'none';
          } else {
            li.classList.add('is-open');
            subMenu.style.display = 'block';
          }
        });

        var parentLink = li.querySelector(':scope > a');
        if (parentLink) {
          parentLink.after(toggleBtn);
        } else {
          li.appendChild(toggleBtn);
        }
      }
    }
  });
});

設定後にブラウザのキャッシュをクリア（スーパーリロード）して確認してみましょう。

親カテゴリーの文字をクリックすれば通常通りカテゴリー記事一覧へ移動でき、右側の矢印ボタンを押せば子カテゴリーが滑らかに展開・収納されます。

まとめ

WordPressの「メニュー機能」を活用したカテゴリーの階層表示と、サイドバーへの設置、そしてアコーディオン開閉の手順について解説いたしました。

サイドバーの導線が美しく整うと、読者がサイト内を快適に巡回できるようになり、サイト全体の回遊性アップにも直結します。ぜひご自身のサイトに合わせて、すっきりと見やすいサイドバーを作ってみてくださいね！

拍手ありがとうございます！よろしければメッセージをどうぞ！

スポンサーリンク

コメント Leave a Comment

タイトルとURLをコピーしました