WordPressサイトで特定ページのヘッダーのみ独自のメニュー項目を追加する方法をご紹介します。

ヘッダーメニューのイメージ

今回は、トップページのときにヘッダーメニューの最後に「追加項目」のメニューを追加します。

クラシックテーマの場合

サンプルはTwenty Seventeenがベースです。

ブロックテーマ（フルサイト編集）の場合

サンプルはTwenty Twenty-Fiveがベースです。

ヘッダーメニューの項目を追加する方法

特定ページのときにヘッダーメニューの項目を追加するには、WordPress子テーマのfunctions.phpを編集する必要があります。

• WordPress子テーマの作り方

その内容は、クラシックテーマかブロックテーマ（フルサイト編集）かで異なります。

クラシックテーマの場合

function settings_my_header_menu($items, $args) {
    // トップページ
    if (is_front_page()) {
        $items .= '<li><a href="https://example.com/">追加項目</a></li>';
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'settings_my_header_menu', 10, 2);

クラシックテーマのPHPでは、既存メニューの末尾に「追加項目」メニューのliを追加しています。

ブロックテーマ（フルサイト編集）の場合

function settings_my_header_menu($block_content, $block) {
    // トップページ
    if (is_front_page()) {
        // ナビゲーションブロックのとき
        if ($block['blockName'] === 'core/navigation') {
            $pattern = '/(<\/li><\/ul>)<\/ul>/'; // ul.wp-block-navigation__containerの閉じタグ
            $replacement = '</li>' . '<li><a href="https://example.com/">追加項目</a></li>' . '</ul></ul>';

            // ul.wp-block-page-listの閉じタグ直前にメニュー項目を追加する
            $block_content = preg_replace($pattern, $replacement, $block_content, 1);
        }
    }
    return $block_content;
}
add_filter('render_block', 'settings_my_header_menu', 10, 2);

ブロックテーマ（フルサイト編集）のPHPでは、メニュー関連のブロックが処理されるときに、ヘッダーメニューul.wp-block-page-listの閉じタグ直前に「追加項目」メニューのliを置換で追加しています。

まとめ

WordPressサイトで特定ページのヘッダーのみ独自のメニュー項目を追加する方法をご紹介しました。

カナメグローバルホールディングスではWebサイトの制作や保守を行っています。

WordPressサイトも対応しているのでお気軽にご相談ください。