SWELLのヘッダーメニューにブログパーツを追加し、関連ページをまとめて案内する方法です。
通常のメニューリンクを残し、その隣の「関連ページを開く」をクリック・Enter・Spaceで開閉します。
マウスホバーでの開閉や画面全体を覆うオーバーレイは使いません。
メニュー項目とブログパーツを用意する
対象はSWELLのヘッダーメニューとスマホ用メニューです。
メニュー項目のリンク先は、関連ページの一覧など実在するURLにします。
メニュー全体のIDではなく、対象のメニュー項目IDを控えてください。
下の例では21813です。
通常の子メニューを持たない項目に適用します。
ブログパーツにリンク一覧やボックスメニューを作り、公開します。
例のブログパーツIDは21787です。
スマホに別メニューを割り当てている場合、メニュー項目IDも別になります。
このコードは指定IDだけが対象なので、スマホ側の通常リンクも残して移動できるようにしてください。
子テーマのfunctions.phpに追加する
変更前にfunctions.phpと追加CSSを保存し、編集前の状態へ戻せるようにします。
次の例の21813と21787を自分のIDに置き換えます。
既存のPHP内へ貼り付ける場合、先頭の<?phpは重ねません。
旧版のadd_custom_content_to_menu_item、motoki_gloal_menu_overlay、そのフック登録と専用CSSは先に外してください。
<?php
add_filter( 'walker_nav_menu_start_el', 'waza_menu_parts', 10, 4 );
function waza_menu_parts( $output, $item, $depth, $args ) {
if ( ! in_array( $args->theme_location ?? '', array( 'header_menu', 'nav_sp_menu' ), true )
|| 0 !== (int) $depth || 21813 !== (int) $item->ID ) {
return $output;
}
// 通常のリンク先は残し、その後ろに開閉操作を追加します。
static $rendering = false;
if ( $rendering ) { return $output; }
$parts_id = 21787;
if ( 'blog_parts' !== get_post_type( $parts_id )
|| 'publish' !== get_post_status( $parts_id )
|| '' !== get_post_field( 'post_password', $parts_id, 'raw' )
|| ! shortcode_exists( 'blog_parts' ) ) {
return $output;
}
$previous_post = $GLOBALS['post'] ?? null;
$rendering = true;
try {
$content = do_shortcode( '[blog_parts id="' . $parts_id . '"]' );
} finally {
$GLOBALS['post'] = $previous_post;
if ( $previous_post instanceof WP_Post ) {
setup_postdata( $previous_post );
}
$rendering = false;
}
if ( '' === trim( $content ) ) { return $output; }
return $output . '<details class="waza-menu-parts"><summary>関連ページを開く</summary>'
. '<div class="waza-menu-parts__body">' . $content . '</div></details>';
}
公開済みでパスワードのないブログパーツだけを挿入します。
再帰呼び出しを防ぎますが、パーツの中に同じナビゲーションを入れる構成は避けてください。
ブログパーツの内容は管理者が編集したHTMLとして扱います。
ブログパーツが公開状態でも、パスワード付きなら通常リンクだけを残します。
2026年10月3日の隔離したWordPress 7.1.2 / SWELL 2.19.0では、修正前はパスワード付き本文が匿名メニューへ出力され、修正後は出力されないことを確認しました。
パスワードなしの公開パーツはPCヘッダーとスマホ用メニュー位置で出力され、非公開パーツ・フッター位置・子階層では通常リンクを維持しました。
追加CSSを保存する
外観の追加CSS、または子テーマstyle.cssに次を追加します。
通常のサブメニュー全体を上書きしない、専用クラスだけの指定です。
960px未満では開いた内容を通常の流れに配置します。
.waza-menu-parts { position: relative; }
.waza-menu-parts > summary { cursor: pointer; padding: .5em; }
.waza-menu-parts > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.waza-menu-parts__body { background: #fff; color: #222; padding: 1em; overflow-wrap: anywhere; }
.waza-menu-parts__body a { color: #075cab; }
@media (min-width: 960px) {
.waza-menu-parts__body { position: absolute; right: 0; top: 100%;
width: min(32rem, 80vw); max-height: 65vh; overflow: auto;
box-shadow: 0 4px 16px #0003; z-index: 10; }
}操作と表示を確認する
通常リンクの次に「関連ページを開く」が出ます。
クリック、またはTabで要約へ移動してEnter・Spaceで開閉します。
開いたらTabで内部リンクへ進めます。
閉じる操作も同じ要約で行います。
これはモーダルではなく、Escapeや外側クリックで自動的に閉じる処理は付けていません。
PCでは左右端のメニュー、スマホではメニュー内の表示と縦スクロールを確認します。
固定ヘッダーや親要素のoverflow指定によってはパネルが切れるため、その場合は絶対配置を外して通常の流れで表示してください。
記事本文のサンプルだけで、全ヘッダー設定での動作を保証するものではありません。
通常リンクを残してキーボードで開閉を確かめる
メニューのリンク文字と「関連ページを開く」は別の操作です。
メニュー項目のURLには通常の案内先を指定し、ブログパーツには追加で紹介するページへのリンクを置きます。
保存後はTabキーで「関連ページを開く」に移動し、Enterでブログパーツが開くことを確認します。
Spaceでも開閉できることを確認したら、通常のメニューリンクをEnterで開き、指定したページへ移動できるか確かめます。
隔離したWordPress 7.1.2 / SWELL 2.19.0では、実際のヘッダーメニューとブログパーツを組み合わせて、この3つの操作を確認しました。
画面幅1280pxでは開いたパーツが画面内に収まりました。
設置位置によって右端からはみ出す場合は、追加CSSの位置指定と幅を調整します。
以下の画像は2026年10月3日の通常PCヘッダーの操作確認です。
その後、スマホメニューでの展開とリンクの表示も確認しましたが、内部リンクのキー操作による遷移と固定ヘッダーでの収まりは未確認です。
末尾で説明する投稿情報の復元を追加した最新版PHPは、利用先でのPC・スマホ操作を別途確認する必要があります。
表示されない場合と戻し方
項目ID、パーツID、公開状態、メニュー位置を確認してください。
別位置のフッターやサブ階層には追加しません。
停止するときは今回のフィルターとCSSを外し、元のメニューリンクが表示されることを確認します。
本文やメニュー項目を削除する必要はありません。
PCでもスマホメニューのボタンを使いたい場合はPCでハンバーガーメニューを表示する方法を参照してください。
今回のコードとは別の実装です。
メニューのパーツ描画後に投稿情報を戻す
SWELL 2.19.0のブログパーツ取得処理は、終了時にメインクエリーの投稿情報へ戻します。
別の投稿ループ中でメニューを描画すると、後続のタイトルや著者名がそのループの投稿と一致しなくなる場合があります。
掲載コードでは呼出し前の投稿を保存し、finallyで復元します。
通常のリンクと再帰呼出しを防ぐ処理は維持します。
隔離したWordPress 7.1.2とSWELL 2.19.0で、別著者の投稿ループ、投稿が設定されていない呼出し、描画中の例外を確認しました。
公開中の利用先でのキャッシュ、PC・スマホ表示と操作は別に確認します。
よくある質問：SWELLのメニューにブログパーツを追加するとき
この方法では、メニューに何を追加しますか？
記事では、SWELLのヘッダーメニューにブログパーツを追加し、関連ページをまとめて案内します。通常のメニューリンクを残し、その隣の「関連ページを開く」をクリック・Enter・Spaceで開閉します。マウスホバーでの開閉や画面全体を覆うオーバーレイは使いません。
どのメニューが対象ですか？
記事では、対象はSWELLのヘッダーメニューとスマホ用メニューです。通常の子メニューを持たない項目に適用し、別位置のフッターやサブ階層には追加しません。スマホに別メニューを割り当てている場合は、メニュー項目IDも別になります。
IDは、何を控えておきますか？
記事では、メニュー全体のIDではなく、対象のメニュー項目IDを控えます。ブログパーツにはリンク一覧やボックスメニューを作って公開し、そのIDも控えます。コード内の例のIDは、自分のIDに置き換えます。
コードは、どこに追加しますか？
記事では、変更前にfunctions.phpと追加CSSを保存し、子テーマのfunctions.phpに追加します。既存のPHP内へ貼り付ける場合は、先頭のPHP開始タグを重ねません。旧版の関数、フック登録と専用CSSは、先に外します。公開済みでパスワードのないブログパーツだけを挿入します。
モーダルのように、Escapeキーで閉じられますか？
閉じられません。記事では、これはモーダルではなく、Escapeや外側クリックで自動的に閉じる処理は付けていません。閉じる操作も、同じ要約で行います。
ブログパーツが画面からはみ出すときは？
記事では、固定ヘッダーや親要素のoverflow指定によってはパネルが切れるため、その場合は絶対配置を外して通常の流れで表示します。設置位置によって右端からはみ出す場合は、追加CSSの位置指定と幅を調整します。960px未満では、開いた内容を通常の流れに配置します。
表示されない場合は、何を確認しますか？
記事では、項目ID、パーツID、公開状態、メニュー位置を確認します。
どこまで検証されていますか？
記事では、隔離したWordPress 7.1.2 / SWELL 2.19.0で、実際のヘッダーメニューとブログパーツを組み合わせて、Enterでの開閉、Spaceでの開閉、通常リンクでの移動を確認しています。一方、内部リンクのキー操作による遷移と固定ヘッダーでの収まりは未確認で、記事本文のサンプルだけで全ヘッダー設定での動作を保証するものではありません。停止するときは、今回のフィルターとCSSを外します。
