ワードプレスでグローバルナビの親メニューを「リンクなし」にする

※当サイトにはプロモーションが含まれています。

クライアント

グローバルナビの“親メニュー”のリンクをなくしてくれ！

にゃテック

おけまるだにゃ。

ワードプレス（WordPress）でサイトを作成している場合、

たとえば、「社長挨拶」「経営方針」「サービス情報」「採用情報」という４つの子ページを、「会社概要」という親メニューにまとめて配置するケースがあります。

ただ、親メニューに内容（ページ）がなかった場合などは、“親メニューをリンクにしたくない”場合があると思います。

ワードプレス｜親メニューはリンクにしない

このとき、グローバルナビの親メニューのリンクを無効にする方法について解説します。

この記事の目次

親メニューを「リンク無し」に設定する方法

親メニューを「リンク無し」に設定する方法

ワードプレスで、グローバルナビの親メニューのリンクを削除して、クリックできないようにする方法についてです。

①メニューへ移動

左メニューにある、

外観 > メニュー

を選択。

②親メニューをカスタムリンクで作成する

クリックさせたくないメニューは、カスタムリンクとして作成します。

カスタムリンクの下にクリックさせたい子メニューを設置します。今回の場合は、次の通りです。

会社概要･･･カスタムリンク
社長挨拶･･･固定ページ
経営方針･･･固定ページ
サービス情報･･･固定ページ
採用情報･･･固定ページ

カスタムリンクには、URLとリンク文字列を設定（記載）します。

URL･･･何でも構わないのでURLの形式であるもの入力
リンク文字列･･･メニューとなる名称を入力

ワードプレス｜カスタムリンク

作成したら「メニューに追加」ボタンで追加します。

③URLを削除する

先程、作成したカスタムリンクのURLを削除して「メニューを保存」ボタンで更新します。

ワードプレス｜カスタムリンクのURLを削除

これで設定完了です。

にゃのらいと

簡単だにゃ！

ただし、ワードプレステーマによっては、リンク先（href）が存在しないため、マウスオーバーしてもポインターではなく標準のカーソルのまま表示されてしまうことがあります。

にゃテック

「会社概要」にマウスカーソルが重なった時を見比べてみると違いがわかるにゃ

THOR｜グローバルナビ（親リンクなし）

その場合は、次のようにCSSを記述することで、カーソルをポインターに変更できます。

nav a:not([href]) {
 cursor:pointer;
}

これを「追加CSS」に追加してやればOKです。

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

なお、追加CSSに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。

その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

	Windows	Mac
Google Chrome	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Microsoft Edge	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Mozilla Firefox	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Safari(Mac)	‐	【Command＋Option＋R】