スマホで上のメニューが出ないテーマ：大事なリンクはフッターのメニューにも足す

カスタム投稿で、1 件ずつのページと一覧のページは作ってあったのですが、一覧のページへのリンクがサイトのどこにもなく、検索エンジンから来た人しかたどり着けない状態でした。せっかく一覧のページがあるので、メニューから開けるようにしました。

グローバルメニューに足すと、PC の幅でサイト名に重なった

まず、ヘッダーのグローバルメニューに、カスタム投稿の一覧ページへのリンクを足しました。ところが PC の幅で見ると、メニューが横に長くなり、左にあるサイト名に重なってしまいました。

メニューに出す名前を短くすると、重なりはなくなりました。メニューの項目の「ナビゲーションラベル」を変えただけなので、一覧ページのタイトルはそのままです。

スマホの幅では、上のメニューがそもそも出ない

次にスマホの幅で見ると、ヘッダーにメニューが出ていませんでした。開発者ツールで調べると、このテーマはスマホの幅ではグローバルメニューを出さない作りで、メニューを開くボタンも幅が 0 になっていました。つまり、グローバルメニューに足しただけでは、スマホで見ている人には見えません。

一方、フッターのメニューはスマホの幅でも出ていたので、同じリンクをフッターのメニューにも足しました。あわせて、サイトマップのページにも一覧ページへの段を 1 つ足し、どの入り口からでもたどれるようにしています。

場所	PC の幅	スマホの幅
グローバルメニュー	出る（長いとサイト名に重なる）	出ない（開くボタンも幅 0）
フッターのメニュー	出る	出る
サイトマップのページ	出る	出る

テーマによって、スマホの幅でどのメニューを出すかは違います。大事なリンクは、グローバルメニューだけに頼らず、スマホでも出る場所（フッターのメニューなど）にも置いておくと安心です。

メニューに一覧ページを足す手順

管理画面で足す

管理画面の「外観 → メニュー」で、足したいメニュー（グローバル・フッターなど）を選び、左の「カスタムリンク」に一覧ページの URL とリンク文字を入力して「メニューに追加」を押します。項目の並びを決めたら、最後に「メニューを保存」を押すと反映されます。

カスタムリンクに入力するもの

URL：一覧ページの URL（例：https://example.com/my_article）
リンク文字：メニューに出す名前（長いと PC の幅で重なることがあるので、短めに）

カスタム投稿を register_post_type() で登録するときに 'has_archive' => true にしていれば、一覧ページの URL は「サイトの URL ＋ /投稿タイプのスラッグ」です（rewrite の slug を決めていれば、その名前）。最後に / が付くかどうかは「設定 → パーマリンク」の形に合わせて決まり、テーマのコードでは get_post_type_archive_link() で正しい URL を取れます。

今回検証したサイトでは、パーマリンクの最後に / が付かない設定のため、一覧ページは /my_article で開き、/my_article/ を開くと /my_article へ 301 で転送されることを確認しました。メニューには、転送の挟まらない形の URL を書いておきます。

REST API で足す

WordPress 5.9 からは、REST API でもメニューの項目を足せます。/wp-json/wp/v2/menu-items に、メニューを編集できるユーザーで（アプリケーションパスワードなどを使って）POST します。

メニューの項目を足す（例）

POST /wp-json/wp/v2/menu-items

{
    "title": "一覧",
    "url": "https://example.com/my_article",
    "menus": 12,
    "menu_order": 5,
    "type": "custom"
}

書き方	役目
`title`	メニューに出す名前
`url`	リンク先の URL
`menus`	足す先のメニューの ID（GET /wp-json/wp/v2/menus で調べる）
`menu_order`	メニューの中での順番（1 から）
`type`	`custom` でカスタムリンクになる

status は送らなければ publish になり、すぐにメニューに出ます。足したあとは、管理画面の「外観 → メニュー」でも並びを確認しておきます。

足したあとに確認すること

メニューを足したら、PC の幅とスマホの幅の両方でページを開き、重なりやはみ出しがないかを見ます。PC の幅で見て大丈夫でも、スマホの幅ではメニューが出ていない、ということがあるからです。

確認しているときに、スマホの幅で横に少しはみ出して見えたのですが、原因はログイン中だけ上に出る管理バーでした。ログアウトした状態で開き直すと、はみ出しはありませんでした。訪問者が見るのはログアウトした状態の見た目なので、見た目の確認はログアウトした状態（またはプライベートウィンドウ）で行っています。

確認すること