- WordPressのメニューをクリックできないようにしたい!
- 親メニューはリンク無しにし、子メニューだけリンクさせたい!
WordPressメニューバー(ナビゲーションメニュー)は、デフォルトだとリンク無しのメニューが設定できません。
しかし、親メニューにリンクの無い項目を設定し、子メニューだけクリックさせたいこともあるでしょう。
そこで今回は、親メニューをリンク無しに制御する方法を解説していきます。
大概の場合、5分で簡単にできるので試してみてください。
WordPressメニューのリンクを無くす手順
さっそく、親メニューをリンク無しにする設定をしていきます。
サンプルとして、次の通り親メニューの「会社概要」の下に、「会社理念」「代表あいさつ」「アクセス」の3つの子メニューを設置しました。
親メニュー「会社概要」のクリックを制御して、クリックできないようにします。
手順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」「#」などと入力するだけなので簡単ですよ。