グローバルナビでリンクなしメニューの設置方法【WordPress】

WordPress

やりたいこと

  • 親メニューはリンク設定しない(クリックしても画面遷移しない)
  • 子メニューのみリンク設定(クリック時に画面遷移する)

手順

  • 「外観」「メニュー」を選択
  • カスタムリンクのURLに「#」入力
  • リンク文字列に親メニューの名前を追加
  • 「メニューに追加」をクリックし、ナビの設置
  • 「メニューを保存」をクリック

カーソル設定(管理画面上で設定する方法)

下記悩みを解決したい場合に設定を行う

  • クリックしても画面遷移しないため、
    親メニューをホバーしてもクリックできないことをカーソルで表現したい
  • 子メニューホバー時にクリック可能なことをカーソルで表現したい

手順

「表示オプション」より「CSSクラス」を表示させる

「CSS Class(オプション)」に任意のクラス名を追加する

下記例では、以下を追加した

  • 親メニューに「is-cursor-none」
  • 子メニュー「is-nav-hover」

CSSをカスタマイズする

  • 「外観」>「カスタマイズ」>「追加CSS」をクリック
  • 下記コードを追加
  • 「公開」ボタンをクリック
.is-cursor-none > a {
	cursor: default;
}

.is-nav-hover:hover {
	opacity: .7;
	text-decoration: underline;
}
なぜ「.親メニュークラス名 > a」なのか
  • 「li」タグに「クラス名」が追加される
  • 既存の状態では「a」タグに「cursor: pointer」が付与されている
  • 「.caption-wrap」や「.item-label」は子メニューにも影響する
なぜ「.子メニュークラス名:hover」なのか

「.sub-menu」直下の「li」タグにしかクラス名が追加されていない

よって親メニューに影響しない