初心者向け

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

2022年3月17日

こんな方に読んで欲しい!

  • WordPressのメニューをクリックできないようにしたい!
  • 親メニューはリンク無しにし、子メニューだけリンクさせたい!

WordPressメニューバー(ナビゲーションメニュー)は、デフォルトだとリンク無しのメニューが設定できません。

しかし、親メニューにリンクの無い項目を設定し、子メニューだけクリックさせたいこともあるでしょう。

そこで今回は、親メニューをリンク無しに制御する方法を解説していきます。

大概の場合、5分で簡単にできるので試してみてください。

WordPressメニューのリンクを無くす手順

さっそく、親メニューをリンク無しにする設定をしていきます。

サンプルとして、次の通り親メニューの「会社概要」の下に、「会社理念」「代表あいさつ」「アクセス」の3つの子メニューを設置しました。

親メニュー「会社概要」のクリックを制御して、クリックできないようにします。

WordPress メニュー

手順1. 親メニューをカスタムリンクで作成する

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

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

  • 会社概要(親メニュー):カスタムリンク
  • 経営理念(子メニュー):固定ページ
  • 代表あいさつ(子メニュー):固定ページ
  • アクセス(子メニュー):固定ページ

カスタムリンクは、後ほど削除してしまうので適当なURLを入力します。

https://test」「#」などで構いません。

メニュー カスタムリンク

手順2. カスタムリンクを削除する

手順1で設定したカスタムリンクのURLを削除します。

メニュー カスタムリンク

たったこれだけで設定完了です。

子テーマを設定しなくても、リンク制御はできますが、あまり活用事例はないですね。

メニューのリンクが制御できない場合

大抵の場合は、上記の手順でクリック制限できますが、テーマやプラグインの影響で制御できないことも稀にあります。

クリック制限ができずに、クリックすると404エラーページに飛んでしまうような状態です。

そんな場合は、functions.php に設定を加えていきます。

手順1. カスタムリンクに「notihing」と入力

カスタムリンクのURL欄に、「nothing」と入力して下さい。

メニュー カスタムリンク

手順2. functions.phpを編集する

次のコードを、そのままコピペして使用中テーマの functions.php の最後に貼り付けます。

/* メニューにリンク無しの項目を作る */
function no_link_nav_menu($nav_menu,$args){
	return str_replace('http://nothing','javascript:void(0);',$nav_menu);
}
add_filter('wp_nav_menu','no_link_nav_menu',9999,2);

functions.php の設定をいじる際は「子テーマ」をいじりましょう。

これで、カスタムリンクに「nothing」と入力したメニューは全て制御できるようになるはずです。

まとめ

今回は、WordPressメニューのクリック制限する方法を解説しました。

大概の場合は、カスタムリンクを設定した後、空欄にするだけで制御できるので、試してみてください。

「https://test」「#」などと入力するだけなので簡単ですよ。

-初心者向け