WordPress でサブメニューまたはマルチレベル メニューを作成するのは、実際には非常に簡単です。 WordPress には、マルチレベル メニューを作成するためのガイドがあり、ドキュメントで完全に説明されています。これは、メニュー作成の一般的なガイドのほぼ半分です。
では、WordPress がすでにカバーしているものについて、なぜ私たちはすべての記事を持っているのでしょうか? WordPress でサブメニューを作成している場合、問題に遭遇した可能性があります。WordPress はデフォルトで、メニューにクリック可能なリンクのみを必要とします。ただし、Web サイトの訪問者にその下のサブページへのアクセスを提供するためだけに存在するトップ レベルのメニュー項目が必要な場合があります。比較的簡単な作業ですが、方法 するかどうかは明確にされていません!
これを実現する方法を紹介し、その後、メニューの使いやすさを改善するためのより高度な調整を検討します。
WordPress でリンクされていないサブメニュー ラベルを追加する方法
- WordPress 管理画面で、[外観]> [メニュー] に移動します
- そのページの左側のサイドバーで、[カスタム リンク] をクリックします
- URL を次のように単純に設定します:
# - 「リンク テキスト」の値を、メニューに表示したい名前に設定します
- ここで、表示する実際のページ (サブページ) をこの見出しの下に追加し、ドラッグ アンド ドロップして、追加したメニュー項目の下に配置します。サブメニュー項目の場合、インデントされて表示されます。
それでおしまい！それがその基本バージョンです。メニューにはサブメニュー オプションがあり、クリックしても別のページには移動しません。
リンクのように見えないようにする方法
そして、もう少し高度な (しかし実際にはそうではない) 追加について説明します。
使いやすさの観点から、残っている問題は、Web サイトの訪問者がリンクにカーソルを合わせたときに、クリックできるはずのように非常に「感じる」ことです。 リンク用のカーソルがあり、リンクのように機能します。どこにも行かない場所を指しているだけです。 これはおそらく問題ありませんが、これで気が狂ってしまう場合 (こんにちは、私です!) 回避する方法があります。
サイトに CSS を追加する必要があります。 [外観]> [カスタマイザー] に移動し、[カスタム CSS] セクションを開き、これをそこに貼り付けて、変更を保存します:
a[href="#"] {
pointer-events: none;
cursor: default;
}
この CSS は次のように述べています:ターゲット URL として「#」を含むすべてのリンクは、もはやクリック可能ではありません (pointer-events: none; ) カーソルを手以外に設定します (cursor: default; ）。
これで、どこにも移動せず、その下にサブ要素を含めることができ、使いやすさの観点から頭を悩ませることのないヘッダーがメニューに作成されました。
あなたのウェブホストは WordPress をサポートしてくれますか?
いいえ？変化の時なのかもしれません。ハイパフォーマンスなカナダの WordPress ホスティングをチェックしてください!
続きを読む