どうも@De_webdesignです。今回はWordpress初心者の方だと少し手こずるかもしれないメニューのリンクを無効にする方法をご紹介します。
メニュー構造が複雑になってくるとどうしても親、子の階層ができ、親のリンクは無効にしたいという時に活躍する方法です。Javascriptを使用してもできるのですが、CSSでの実装の方が簡単かつわかりやすいと思うのでCSSの方法のみご紹介しようと思います。
WordPress メニューにタイトルを追加
あまり意識していない方は今まで気づいていなかったかもしれませんが、Wordpressのメニューではtitle属性を入力できます。title属性とは <a href=”#” title=”これ”></a> のことです。このtitle属性をWordpressではメニュー管理画面から設定できるのですが、今回はそれを利用してリンク無効を行っていきたいと思います。
「タイトルの属性」に入力
メニュー画面からリンクを無効にしたいメニューアイテムを選んで、上記の赤枠内に任意の値を入力します。（日本語はやめた方がいいです）
入力した値がPHPで書き出され実際にHTMLコードとして表示されるときに <a href=”#” title=”これ”></a> のtitle=””に入ってきます。このtitle属性を利用してCSSで該当のリンクを無効にします。
※もしタイトルの属性という項目が見当たらない場合
メニュー画面の右上にヘルプの隣に表示オプションというドロップダウンをクリックしてください。そうすると下記の画像のように項目が現れるのですが「タイトルの属性」にチェックを入れることでメニューに項目が追加されます。
CSS pointer-events プロパティ
あまり聞きなれないCSSプロパティかと思いますが、pointer-eventsというプロパティがありこれを使用することでリンクタグを無効にできます。
値に指定できるのは、auto,none,visiblePainted,visibleFill,visibleStroke,visible,painted,fill,stroke,all,inheritです。
今回使用する値はnoneですが他の値について知りたい方は下記のリンクをご覧ください。
https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events
リンクが無効になる原理
pointer-events : none;
これを記述するだけでリンクが効かなくなるのですが、どのようにして効かなくなるのかを説明いたします。
通常aタグや他のタグでもそうですが、hoverやclickなどのマウスイベントのターゲットになります。（簡単に言うとマウスでなんかした時にそのイベントが発生するみたいな感じです）
このpointer-events:none;を指定することによって要素がマウスイベントのターゲットではなくなる=ホバーもクリックも効かなくなるという原理です。
上記のような理由で本来リンクとして動くはずのaタグを無効にしているのです。
実際のコード
WordPressでメニューに設定したtitle属性を「nolink」と仮定して話を進めます。
css
a[title="nolink"] {
pointer-events: none;
}
aタグのtitle属性nolinkを持った要素に対して、pointer-events: none;を指定するというコードです。
このコードをスタイルシートに追加するだけでリンクは無効になります。ちなみに他にtitle属性が同じnolinkだった場合、その要素もリンクは効かなくなりますのでご注意ください。
上記はWordpressのメニューのリンクを無効にするため、わかりやすくTitle属性を使用しましたが、普通にIDやクラスを指定してあげても使用できるのでメニュー以外にも使用していただけます。
対応ブラウザ
Can I Useを見てみると主要ブラウザでは使用可能ですがIEは11以降となっていますね。IE11以下を切り捨てるのであれば使用しても問題はなさそうです。ちなみに僕は切り捨てるのでバンバン使うつもりです。
まとめ
Javascriptが全然わからないという方でもHTMLとCSSの知識があれば今回のは簡単にできると思います。今後CSSが発展してpointer-eventsのような便利なプロパティが出るのが楽しみです。
では。
