ブログ運営

WordPressでヘッダーメニューに「リンク無しのメニュー」と「プルダウンメニュー」を設定する方法

2021年5月5日

 

どうも、にわとりちきんです。

 

ブログを制作していてある程度カテゴリーなどが増えてきたときに、ヘッダーメニューに表示するメニューが増え過ぎてしまって見栄えが悪くなってしまった。という事がありますよね。

そんな時のために、今回はヘッダーメニューにリンク無しの親メニューを作成し、表示したいメニューをプルダウンメニューにまとめる方法を紹介します。

 

ヘッダーメニューに「リンク無しのメニュー」を作成する方法

まずはヘッダーメニューに「リンク無しのメニュー」を作成します。

 

step
1
ダッシュボードから「外観」→「メニュー」をクリックする

 

step
2
メニュー項目を追加から「カスタムリンク」をクリックする

 

step
3
カスタムリンクの「URL」「リンク文字列」を設定して「メニューに追加」をクリックする

  • URL
    適当なリンクを設定します。「#」などで大丈夫です。
  • リンク文字列
    ヘッダーメニューの親メニューに表示したいテキストを設定します。

 

step
4
メニュー構造で先ほど作ったカスタムリンクの「URL」を削除する

先ほど作ったカスタムリンクがメニュー構造に追加されているので、カスタムリンクをクリックして「URL」に設定したリンクを消去します。

 

 

以上で完了です。

引き続き「プルダウンメニュー」を設定する場合は画面はそのままで

 

ヘッダーメニューに「プルダウンメニュー」を設定する方法

続いて「プルダウンメニュー」を設定する方法を紹介します。

 

step
1
親メニューにするメニューの下に、プルダウンメニューに入れるメニューを並べる

移動したいメニューをドラッグ&ドロップすると任意の位置に移動できます。

 

 

step
2
プルダウンメニューに入れるメニューを右にドラッグする

 

step
3
右上の「メニューを保存」をクリックする

 

以上で完了です。

 

※完成後の見た目がこちら

 

まとめ

今回は、ヘッダーメニューに「リンク無しのメニュー」と「プルダウンメニュー」を設定する方法を紹介しました。

メニューも項目があり過ぎると閲覧者もどれを見ていいのかわからなくなる、目的のページが見つからないなどの問題が発生し、ページ離脱率に影響してしまうこともあります。

メニューもうまく整理して見やすいページの作成に役立てていきましょう!

 

最後まで読んでいただきありがとうございました!

「にわとりちきんのブログ」ではTwitterで最新記事の投稿、更新などのお知らせをしております。

次回も読んでいただけるという方は、是非Twitterのフォローよろしくお願いいたします!

それでは、また!

 

こちらの記事もおすすめ

 

© 2021 にわとりちきんのブログ Powered by AFFINGER5