SWELLのメインビジュアル画像の後に、関連リンクのメニューを追加する方法です。この記事の例は画像1枚の構成を対象にします。カスタマイザーの「メインビジュアルの高さ設定」は「画像・動画サイズのまま」にしてください。
追加メニューの動く見本
次の見本は、SWELL 2.19.0の実テンプレートと掲載PHPで生成したHTMLです。画像1枚・高さを画像に合わせる構成に、3項目のメニューを追加しています。記事内で見比べられるよう枠内へ配置し、リンクはWAZAの記事へ移動します。
Tabキーでリンクを順番に選び、Enterキーで開けます。画面が狭い場合は項目が折り返されます。
メニューは画像の後、メインビジュアルのコンテナ内に出力されます。動画・スライダー・画面いっぱいの高さでは表示条件が異なるため、この見本の検証範囲には含めません。
トップページだけメニューを増やしたい時に使いました。
SWELLでメインビジュアル下にコンテンツを表示する方法
swell_inner_main_visualフックに出力を追加します。メニューの作成、PHPの追加、CSSの追加の順に進めます。
メニューの作成
「外観」→「メニュー」で、表示したいリンクだけを登録したメニューを作成します。
掲載例のメニューIDは94です。自分のサイトで作成したメニューIDに置き換えてください。
functions.phpの挿入
PHPは子テーマのfunctions.php、またはPHPスニペット管理プラグインのどちらか一方へ追加します。
add_action('swell_inner_main_visual', function () {
$menu_id = 94; // 自分のメニューIDへ変更
$menu = wp_get_nav_menu_object($menu_id);
if (!$menu || is_wp_error($menu)) {
return;
}
$items = wp_nav_menu([
'menu' => $menu_id,
'container' => false,
'menu_class' => 'waza-mv-menu__list',
'fallback_cb' => false,
'echo' => false,
'depth' => 1,
]);
if (!$items) {
return;
}
echo '<nav class="waza-mv-menu" aria-label="トップページの関連リンク">' . $items . '</nav>';
});CSSの挿入
以下のCSSは、追加したメニュー専用のクラスだけに適用します。
PC・スマホとも横並びを基本とし、幅が足りないときは折り返します。
.waza-mv-menu {
position: relative;
z-index: 2;
width: 100%;
padding: 12px;
background: #fff;
color: #222;
}
.waza-mv-menu .waza-mv-menu__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 16px;
margin: 0;
padding: 0;
list-style: none;
}
.waza-mv-menu .waza-mv-menu__list > li {
margin: 0;
max-width: 100%;
}
.waza-mv-menu .waza-mv-menu__list > li > a {
display: block;
padding: 12px;
color: inherit;
overflow-wrap: anywhere;
}
.waza-mv-menu a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}確認
冒頭の見本で、メインビジュアルの画像に続くメニューの配置を確認できます。
確認した環境と戻し方
swell_inner_main_visualはメインビジュアル内部のフックです。メインビジュアルが表示されないページには、この例のメニューも出力されません。この例ではメニューの第1階層だけを表示し、存在しないメニューIDや空のメニューでは何も出力しません。
冒頭の見本と画像は、掲載コードで生成した表示を2026年10月1日に撮影したものです。画像1枚・高さを画像に合わせる構成だけを確認しており、動画・スライダー・画面いっぱいの高さは検証範囲に含めません。
CSSは追加CSSへ保存します。既存のヘッダー用クラスは変更しません。元に戻すときは、今回追加したPHPとCSSだけを削除します。
関連する実装はSWELLカスタマイズのまとめから探せます。
よくある質問：SWELLでメインビジュアル下にコンテンツを表示する方法
メインビジュアルの下に、メニューを追加できますか？
記事では、SWELLのメインビジュアル画像の後に、関連リンクのメニューを追加する方法です。トップページだけメニューを増やしたいときに使いました。swell_inner_main_visualフックに出力を追加し、メニューの作成、PHPの追加、CSSの追加の順に進めます。
どんな構成が対象ですか？
記事では、この例は画像1枚の構成が対象で、カスタマイザーの「メインビジュアルの高さ設定」は「画像・動画サイズのまま」にしてください。動画・スライダー・画面いっぱいの高さでは表示条件が異なるため、検証範囲には含まれません。
メニューは、どう作りますか？
「外観」→「メニュー」で、表示したいリンクだけを登録したメニューを作成します。記事では、掲載例のメニューIDは94なので、自分のサイトで作成したメニューIDに置き換えてください。
メニューは、どこに表示されますか？
記事では、メニューは画像の後、メインビジュアルのコンテナ内に出力されます。メインビジュアルが表示されないページには、この例のメニューも出力されません。
どんなメニューが表示されますか？
記事では、この例ではメニューの第1階層だけを表示し、存在しないメニューIDや空のメニューでは何も出力しません。見本では3項目のメニューを追加し、画面が狭い場合は項目が折り返されます。Tabキーでリンクを順番に選び、Enterキーで開けます。
CSSは、どこに保存しますか？ 元に戻すには？
記事では、CSSは追加CSSへ保存し、既存のヘッダー用クラスは変更しません。元に戻すときは、今回追加したPHPとCSSだけを削除します。
確認の範囲を教えてください。
記事では、冒頭の見本と画像は、SWELL 2.19.0の実テンプレートと掲載PHPで生成した表示を2026年10月1日に撮影したもの（画面幅390pxで確認）です。画像1枚・高さを画像に合わせる構成だけを確認しており、メニューIDの管理画面の画像は撮影環境の選択肢がメニューID3と34で、掲載コードのメニューID94の作成例を実証した画像ではありません。最新は公式で確認してください。
