Amazonで商品を見る セール会場へ

SWELL│特定のナビメニューの最後にメニューを追加するカスタマイズ

ナビゲーションの最後にリンクを固定で追加するには、wp_nav_menu_itemsを使います。

通常は管理画面のカスタムリンクで追加できますが、ここではコードで追加位置を管理したい場合の実装を紹介します。

このコードはメニューを表示するときのHTMLにリンクを追加するため、管理画面のメニュー項目としては登録されません。

追加リンクの文言・URL・対象位置は、掲載コードで変更します。

目次

著者

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください!

対象のメニュー位置を選ぶ

SWELL 2.19.0のメニュー位置は、header_menu(グローバルナビ)、sp_head_menu(スマホ用ヘッダー)、nav_sp_menu(スマホ開閉メニュー内)、footer_menu(フッター)、fix_bottom_menu(固定フッター)、pickup_banner(ピックアップバナー)です。

テーマに元からあるregister_nav_menusのコードを貼り直す必要はありません。

リンクを追加するコード

子テーマのfunctions.phpのPHP内へ追加します。

コード内のcontactは実在するページのパスへ変更してください。

Code Snippetsを使う場合も同じ処理を登録できますが、子テーマとの二重登録は避けます。

add_filter( 'wp_nav_menu_items', 'waza_append_contact_link', 10, 2 );
function waza_append_contact_link( $items, $args ) {
    // スマホ用ヘッダーも対象にする場合は sp_head_menu を配列へ追加。
    $locations = array( 'header_menu' );
    if ( ! in_array( $args->theme_location ?? '', $locations, true ) ) {
        return $items;
    }
    if ( false !== strpos( $items, 'waza-contact-item' ) ) { return $items; }
    // WordPressをサブディレクトリに設置した場合もサイトURLを基準にする。
    $url = home_url( '/contact/' );
    return $items . '<li class="menu-item waza-contact-item"><a href="'
        . esc_url( $url ) . '"><span>' . esc_html( 'お問い合わせ' ) . '</span></a></li>';
}

home_urlを使うため、サイトURLがサブディレクトリを含む場合もその配下を基準にします。

別サイトの問い合わせ先なら、確認済みの完全なURLに置き換えてください。

追加後にリンクを開いて、404や意図しない別サイトに移動しないことを確認します。

スマホ用メニューにも追加する場合

locations配列にsp_head_menuまたはnav_sp_menuを追加します。

同名の関数をもう一つ貼り付けません。

旧版のPC用・スマホ用サンプルは同じ関数名だったため、両方を貼ると再定義エラーになりました。

旧関数add_contact_button_to_menuと登録を外してから新コードへ切り替えてください。

対象位置にはメニューを割り当て、少なくとも通常の項目を一つ入れてください。

メニューが未割り当てでテーマのフォールバックが表示される場合、このフィルターを通らないことがあります。

header_menuはスマホ開閉メニューのフォールバックとして使われる場合もあり、PC限定という意味ではありません。

末尾のリンクから案内先へ移動する

追加する前に、お問い合わせページをブラウザーで開き、実際のURLを控えます。

サンプルのhome_url('/contact/')はサイトのホームURLに/contact/を付けるため、ページのスラッグや設置先が違う場合は実際のURLに合わせてください。

管理画面で通常のメニューを配置したうえでコードを有効にし、公開画面のヘッダーを開きます。

通常の項目の後ろに「お問い合わせ」が1つだけ追加されたら、Tabキーでそのリンクを選び、Enterキーでページを開いてください。

隔離したWordPress 7.1.2 / SWELL 2.19.0では、通常の項目を残したまま末尾に追加され、Enterキーで「お問い合わせの案内先」ページへ移動できました。

後述のスマホでの遷移検証では、サンプルの/contact/を検証用固定ページのURLへ置き換えています。

導入先に/contact/が存在することや、サブディレクトリ構成での遷移を実証した結果ではありません。

写真は移動後のPC画面です。

リンクが見えても案内先が404になる場合は、まず控えたURLとリンク先を照合します。

リンクを追加するフィルターだけではお問い合わせページを作成できません。

2026年10月3日の隔離環境では、幅390pxでheader_menuがスマホ開閉メニューに使われる場合も、追加リンク1件の表示とEnterキーによる検証用ページへの移動を確認しました。

専用のnav_sp_menuを割り当てた場合は、掲載コードの対象がheader_menuだけなので、専用メニューに自動追加リンクは表示されませんでした。

導入先では実際に使われるメニュー位置を照合し、対象を変更した後の表示とリンク先を確認してください。

導入先の実URL、他のスマホ配置、WP Rocketなどを組み合わせた状態は未検証です。

末尾のお問い合わせリンクから移動した実ページ
末尾のお問い合わせリンクから移動した実ページ。2026年10月3日、隔離したWordPress 7.1.2 / SWELL 2.19.0で撮影。

表示確認と戻し方

PCとスマホで追加位置を確認し、Tabでリンクへ移動してEnterで開きます。

スマホヘッダーを絶対配置で移動する旧CSSは外し、テーマ標準の位置でまず確認してください。

画面幅によってはリンクが増えると収まりきらないため、短いラベルにするかスマホ開閉メニュー内へ配置します。

停止する場合は今回のフィルター登録と関数を外します。

管理画面の通常メニューは変更していないため残ります。

既に手動で同じリンクがある場合は自動では判別しないので、コード導入前に重複を確認してください。

リンクの下に詳細な一覧を表示する場合はメニューへブログパーツを追加する方法を参照してください。

公式仕様:wp_nav_menu_items、home_url()。

  • URLをコピーしました!

実装を任せたい方へ

SWELLのカスタマイズ代行

記事のコードをそのまま使うのが不安な場合や、サイトに合わせた調整が必要な場合は当社が実装します。1時間 ¥8,000〜(税込)。テーマ更新に強い書き方で納品します。

WAZAの有料記事のサブスクリプションも開始しました。

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

目次