WordPressナビゲーションメニューを作成、追加、編集する方法

公開: 2022-07-21

WordPressでメニューを作成してカスタマイズする方法を知りたいですか？ナビゲーションメニューには最も重要なページが一覧表示されるため、訪問者はサイトのどこにいてもすばやくアクセスできます。組み込みのWordPressメニューエディタは非常に強力ですが、慣れるまでに時間がかかる場合があります。

どこから始めればよいかわからない場合や、特定の機能を使用してメニューをカスタマイズするためのサポートが必要な場合は、適切な場所に来ています。新しく改良されたナビゲーションメニューを起動して実行しましょう。

WordPressメニューエディタを見つける方法

WordPressメニューエディタを見つけることから始めましょう。まず、WordPressダッシュボードにログインしてから、[外観]→[メニュー]に移動します。すでにメニューが表示されている場合があります。これを編集するか、新しいメニューを作成できます。

テーマカスタマイザ画面を使用してメニューを編集することもできます。これには、作業中に編集内容のライブプレビューを提供するという利点があります。 [メニュー]ページで、[ライブプレビューで管理]ボタンをクリックするか、[外観]→[カスタマイズ]に移動して[メニュー]オプションをクリックします。

どちらの方法でもほぼ同じオプションが提供されるため、どちらかを選択してください。

WordPressでカスタムメニューを作成する方法

まず、WordPressで新しいメニューを作成する方法を学びましょう。既存のものがある場合は、ページの上部にある[新しいメニューの作成]リンクをクリックするだけです。

まだメニューを作成していない場合は、何もクリックする必要はありません。メニュー作成画面に直接移動します。

最後に、ライブプレビュー画面を表示している場合は、いつでも[新しいメニューの作成]ボタンをクリックするだけです。

メニューの目的を説明する名前を考えてから、サイトのどこに表示するかを選択します。これらの簡単な要件を満たしたら、メニューを具体化してアイテムを追加する準備が整います。

WordPressでメニューを編集する方法

既存のメニューを編集する必要がありますか？メニューが1つしかない場合は、[外観]→[メニュー]画面に移動すると、ページに表示され、カスタマイズする準備が整います。

複数のメニューがある場合は、ページの上部にある[編集するメニューを選択してください]ドロップダウンが表示されます。必要なものを選択し、[選択]をクリックしてロードします。

テーマカスタマイザーを使用している場合は、メニュー画面を開くとすぐに、既存のすべてのメニューのリストが上部に表示されます。開きたいものをクリックするだけです。

WordPressメニューにアイテムを追加する方法

次に、メニューの作成の真髄、つまりアイテムの追加とその機能のカスタマイズについて説明します。ネストされたドロップダウンメニューを作成したり、特定のページや投稿を追加したり、メニューバーに他のアイテムを追加したりする場合があります。

1.メニューにページまたは投稿を追加します

まず、最も重要なページに簡単にアクセスできるようにしたいので、メニューにいくつかのリンクを追加しましょう。これはサイトのナビゲーションの重要な部分であり、メニューに新しいエントリを追加するのは非常に簡単です。

左側のボックスを見てください。ここに、いくつかのタブがある[メニュー項目の追加]ボックスが表示されます。 [ページ]タブを開きます。このタブには、[最新]、 [すべて表示] 、[検索]の3つのカテゴリが含まれています。

最初のページには、簡単にアクセスできるように最新のページがいくつか表示されます。サイトに数百のページがある場合、 [すべて表示]タブは少し扱いにくいでしょう。代わりに、[検索]タブを使用して、追加するものを見つけてください。

表示されているすべてのページをメニューに追加する場合は、下部にある[すべて選択]チェックボックスをクリックすることもできます。

必要なものを選択したら、[メニューに追加]をクリックして選択を確定します。新しいページが右側に表示されます。

ブログ投稿の場合、これは非常によく似ています。 [投稿]タブを選択し、以前と同様に、最新のすべての投稿から選択するか、必要な投稿を検索します。次に、[メニューに追加]をクリックします。

追加したメニュー項目を削除したい場合はどうなりますか？これを行うには2つの方法があります。右側の[メニュー構造]セクションで、右側の矢印をクリックして、ページまたは投稿の1つを選択します。次に、赤い[削除]リンクをクリックします。

一度に複数のページを一括削除することもできます。 [一括選択]チェックボックスをクリックして、削除する各メニュー項目にチェックマークを付けます。次に、[選択したアイテムを削除]をクリックします。

最後に、メニュー項目の名前を変更して、別のタイトルで表示することができます。ドロップダウン矢印を使用してページアイテムを選択し、ナビゲーションラベルを変更します。これは、スペースを節約するためにメニュー項目のタイトルを短くしたい場合に便利です。

2.メニューにブログカテゴリを追加します

ブログからトップレベルのカテゴリページにリンクしたい場合はどうなりますか？結局のところ、訪問者がトップレベルのカテゴリページに簡単にアクセスできるようにして、読み続けるように促すことができます。

これは、[カテゴリ]ドロップダウンタブをクリックする必要があることを除いて、投稿またはページの追加と非常によく似ています。次に、最もよく使用するカテゴリから選択したり、リスト全体を表示したり、必要なカテゴリを検索したりできます。

終了したら、[メニューに追加]をクリックすると、投稿やページのように横に表示されます。

3.メニューにカスタムリンクを追加します

他のカテゴリでカバーされていないページがサイトにある場合、またはメニューを外部サイトにリンクさせたい場合はどうなりますか？その場合、カスタムリンクを追加できます。これにより、任意のURLにリンクできます。

[カスタムリンク]タブをクリックし、URLを挿入してメニューテキストを設定し、[メニューに追加]をクリックします。

4.新しいタブで開くメニューへのリンクを追加します

訪問者がWebサイトに戻って閲覧し続けることができるように、メニューリンクを新しいタブで開きたい場合があります。これは、外部リンクを追加した場合に特に当てはまります。訪問者を別のサイトに送信した場合、訪問者が戻る保証はありません。

これは、メニューインターフェイス内の非表示のオプションです。画面上部の[画面オプション]をクリックし、[リンクターゲット]チェックボックスをオンにして、オンにする必要があります。

メニュー項目のドロップダウン矢印を使用すると、新しいチェックボックスが表示されます。新しいタブでリンクを開きます。それをクリックすれば、準備完了です。

5.メニューからページのセクションへのリンクを追加します

ページの特定のセクションにリンクしたい場合があります。その場合、通常の[投稿]または[ページ]ドロップダウンを使用するのではなく、[カスタムリンク]セクションを使用します。

まず、訪問者を適切なセクションにジャンプさせるカスタムURLを作成する必要があります。ブロックエディタで実行できる「アンカー」と呼ばれるものを作成する必要があります。次に、作成したアンカーをサイトのURLの末尾に＃記号を付けて追加します。たとえば、アンカーが「create-a-page-jump」の場合、URLはhttps://example.com/#create-a-page-jumpになります。

これをカスタムリンクバーに貼り付け、ラベルを設定して、[メニューに追加]をクリックします。

6.ドロップダウンメニュー項目を追加します

アイテムのネストは、メニュー機能の重要な部分です。これは、特定のメニュー項目をホバー時にドロップダウンさせる方法です。アイテムを必要なだけ深くネストして、サブメニュー内にサブメニューを無限に作成できます。

これを行うには2つの方法があります。最初のオプションは、ネストするアイテムをクリックして、点線も右に移動するまで右にドラッグすることです。より多くのアイテムをネストするためにこれを続けます。

2つ目の方法は、移動するメニュー項目を開き、 [メニュー項目名]の下のリンクをクリックすることです。

7.リンクなしでメニュー項目を追加します

ほとんどの場合、メニュー項目をページにリンクする必要があります。ただし、ドロップダウンメニューを作成するときのように、トップレベルのリンクをテキストだけにしたい場合もあります。

これを行うには、通常のようにカスタムリンクを作成しますが、リンクを挿入する代わりに、＃記号を挿入します。次に、通常どおりメニュー項目にタイトルを付け、[メニューに追加]をクリックします。

必要に応じて＃記号を残すか、新しいメニュー項目を開いて記号を削除し、[メニューの保存]をクリックします。

メニュー項目はリンクのように見えますが、クリックすることはできません。見た目を変えたい場合は、CSSでいつでもスタイルを変更できます。その方法については後で説明します。

8.メニューに検索アイコンまたはバーを追加します

テーマにヘッダーウィジェットがある場合、それに検索バーを追加するのは簡単です。 [外観]→[ウィジェット]に移動し、左上隅にある青い+をクリックして、[検索]ウィジェットをヘッダー領域にドラッグします。

これが機能しない場合は、ヘッダーに検索バーを配置するテーマに切り替えるか、プラグインを使用する必要があります。最も人気のあるWordPress検索プラグインには、ヘッダーメニューに検索バーを追加するオプションが含まれています。

9.メニュー項目に説明を追加します

通常は必要ありませんが、メニュー項目に説明を追加することをお勧めします。訪問者がクリックしたときにこのリンクがどこに移動するかについて簡単に説明したいと思うかもしれません。

まず、[メニュー]画面で、右上の[画面オプション]を開き、[説明]チェックボックスをオンにします。ドロップダウン矢印からメニュー項目を開くと、[説明]ボックスが表示されるようになりました。

説明を入力し、必ず[メニューの保存]をクリックしてください。サイトにアクセスすると、新しい説明が表示されます。すべてのテーマがこの機能をサポートしているわけではないことに注意してください。

WordPressナビゲーションメニューをアクティブにする方法

メニューのカスタマイズが完了し、それを世界に表示する準備ができたら、表示場所を選択するだけです。その後、サイトに表示されます。

逆に、プライベートでメニューを操作したい場合は、終了するまで表示場所を選択しないでください。表示場所のないメニューは、基本的にすべての訪問者に表示されません。

表示場所の設定方法がわかりませんか？それを調べてみましょう。

WordPressでメニューの位置を変更する方法

メニューの場所が気に入らない場合や、メニューを目的の場所に表示するように設定する方法がわからない場合は、WordPressでメニューの位置を簡単に変更できます。

これを行うには3つの方法があります。まず、デフォルトの[メニューの編集]タブの[外観] → [メニュー]画面で、メインメニューの編集領域を確認します。 メニュー設定というラベルの付いたセクションが表示されます。次に、表示場所を探します。

次に、メニューを表示するボックスにチェックマークを付けます。新しいメニューがどのように表示されるかを確認するには、サイトにアクセスする必要があります。

WordPressでメニューの位置を変更する2つ目の方法は、 [場所の管理]タブをクリックしてから、各メニューに表示するメニューを割り当てることです。複数のメニューがある場合、これは設定が少し簡単です。

最後に、LiveCustomizerを使用できます。 [外観]→[カスタマイズ]を開き、[メニュー]タブをクリックしてから、編集するメニューを選択するか、 [すべての場所を表示]ボタンをクリックします。これの利点は、メニューがどのように表示されるか、および各表示オプションの場所をすぐに確認できることです。

1つのメニューを複数の表示場所に割り当てることができますが、各表示場所は一度に1つのメニューしか占有できないことに注意してください。

また、表示場所はテーマによって決まります。探しているものがない場合は、新しいテーマに切り替える必要があるかもしれません。

WordPressサイト全体で複数のメニューを使用する方法

メニューは1つだけではありません。表示するスペースがあれば、いくつでも作成できます（さらにそれ以上！）。メインメニュー、よりコンパクトなサイドバーメニュー、フッターに個別のメニューなどを含めることができます。これはすべて、テーマが提供するメニューの場所の数によって異なります。

いずれの場合も、[新しいメニューの作成]をクリックして別の表示場所を選択することにより、2番目のメニューを作成できます。最初のメニューと同じように名前を入力してページを設定し、必要な回数だけ繰り返します。

ライブプレビュー画面はさらに直感的です。 [新しいメニューの作成]ボタンをクリックするだけで、作成したすべてのメニューが1つのアクセスしやすい場所に一覧表示されます。

各メニューのオプションを手動で選択して設定するよりもはるかに合理化されているため、 [場所の管理]画面を使用して、各メニューを場所に簡単に割り当てることを忘れないでください。

CSSを使用してメニューの外観をスタイルする方法

WordPressには、メニューを思いどおりに動作させるための基本的なオプションがいくつか用意されていますが、実際の外観に関しては、それほど多くはありません。ただし、テーマのメニュースタイルに依存することに満足できない場合は、CSSを使用して制御できます。

CSSは習得が難しい場合がありますが、CSSを使用するのに専門家である必要はありません。基本的な外観の微調整については、何を変更し、どこに配置するかを知る必要があります。

開始する前に、サイトの最新のバックアップがあることを確認してください。 Jetpack Backupを使用している場合、すべての変更はリアルタイムで保存され、間違えた場合は数回クリックするだけで復元できます。

テーマファイルを直接編集することはできますが、CSSを大量に追加する場合を除いて、特に子テーマを使用していない場合は、通常、これはお勧めしません。代わりに、[外観]→[カスタマイズ]画面の[追加のCSS]ボックス、またはJetpackで使用可能なカスタムCSS機能を使用できます。

また、テーマのメニュークラスを見つける必要があります。テーマに複数のメニューがある場合、それぞれに異なるクラスがあります。

たとえば、 Twenty-Twenty WordPressテーマでは、プライマリメニューのクラスは単に「.primary-menu」です。

メニューを右クリックし、要素の検査ツールを使用してメニューのクラスを見つけます。

サンプルコードのいずれかが機能しない場合、テーマは特定のスタイルを強制し、フォントサイズ、色などを固定している可能性があります。！importantタグを使用してこれをオーバーライドできますが、慎重に行うようにしてください。 CSSに精通している場合は、子テーマを作成してスタイルシートを直接編集することをお勧めします。

1.1つのメニュー項目をターゲットにする方法

すべてを一度に変更するのではなく、1つのメニュー項目を変更したい場合があります。これを行うには、 [外観]→[メニュー]ページに移動し、[画面オプション]を開いて、CSSクラスをオンにします。メニュー項目を編集してCSSクラスを指定し、以下に示すコード例の「.primary-menu」をカスタムCSSクラスに置き換えます。

したがって、ホームページのリンクを「home-menu」クラスに設定する場合は、「。primary-menu」を「.home-menu」に置き換えます。

2.メニューのフォントサイズを変更する方法

メニューが少し目立たない、または少し読みにくい場合は、フォントサイズを変更してみてください。これを行うには、次のコードを使用します。

 .primary-menu { font-size: 30px; }

「30px」を好きなサイズに変更するだけです。

3.メニューの配色を変更する方法

WordPressユーザーからの一般的なリクエストは、メニューのリンクの色を変更したり、背景色を追加したりすることです。

まず、フォントの色を変えてみましょう。次のコードを使用します。

 .primary-menu li a { color: #000000; }

これにより、メニューリンクが黒くなります。上記の色の16進コードを置き換えます—色コードサイトを使用して、必要な色の16進コードを簡単に作成できます。

背景色はどうですか？ティールの背景にこれを試してください：

 .primary-menu { background-color: #00ffff; }

4.メニューのホバー効果を変更する方法

派手なホバー効果はデザインを微妙に整えることができますが、この部分はもう少し複雑になる可能性があります。実装できるホバー効果はたくさんありますが、簡単なものを実行しましょう。メニュー項目にカーソルを合わせたときにフォントの色を変更します。

 .primary-menu li.menu-item a:hover { color: #DEB0F1; }

メニューのリンクにカーソルを合わせると、ラベンダー色に変わります。

実験するものは他にもあります。背景色、不透明度、border / border-radius、transitionタグを使用してみてください。

5.WordPressメニューをスティッキーにする方法

「スティッキー」または固定メニューは、訪問者がスクロールするときにフォローします。つまり、ナビゲーションメニューに到達するために、訪問者が一番上までスクロールする必要はありません。それは人々にとってもう少し便利であり、彼らにブラウジングを続けるように勧めることができます。

これを行う方法は「position：fixed」タグを使用することですが、正しく機能させるには、もう少し追加する必要があります。

以下は、基本的なフローティングナビゲーションメニューを作成します。

 .primary-menu { position: fixed; top:0; right:0; }

ただし、背景、高さ、幅、境界線、パディング、および上/下/左/右のタグを使用して、単なるフローティングテキスト以上のスティッキーメニューを作成することもできます。簡単な例を次に示します。

 .primary-menu { position: fixed; top:0; right:0; background:#000000; height:50px; width:100%; border-bottom: 2px solid #F7156B; padding-top:10px; padding-right:30px; }

6.メニューにボタンを追加する方法

プラグインを使用してメニューにボタンを追加することは可能ですが、CSSを使用して簡単なボタンを追加してみましょう。まず、メニュー内のすべてのアイテムをこのようにスタイル設定する必要がない限り、ボタンメニューアイテムにカスタムCSSクラスを設定する必要があります。

次のコードを試してください。

 .menu-button { background: #000000; padding: 5px 10px 5px 10px; }

ボタンの角を丸めたい場合は、閉じ括弧の上に次のコード行を追加してみてください。

 border-radius: 5px;

よくある質問

このような単純な機能の場合、実際に機能を理解すると、メニューはかなり複雑になる可能性があります。何かを逃した場合に備えて、メニューに関してよくある質問をいくつかまとめましょう。

WordPressメニューを削除または名前変更できますか？

WordPressで好きなだけメニューを作成でき、それらを削除することは完全に可能です。 [外観]→ [メニュー]画面を開き、赤い[メニューの削除]テキストをクリックするだけです。

確認を求めるポップアップが表示されます。 [ OK ]をクリックすると、メニューは完全に消えます。

メニューの名前を変更するだけの場合は、メニューを開いて[メニュー名]ボックスを変更し、[メニューの保存]ボタンをクリックします。そのような単純な！

WordPressメニューにタグを追加できますか？

WordPressメニューにカテゴリを追加することは可能ですが、タグはどうですか？朗報：これはメニュー機能に組み込まれています。あなたはそれをオンにする必要があります。

まず、[外観]→[メニュー]画面が表示されていることを確認してから、右上隅にある[画面オプション]をクリックします。 [画面要素]セクションに、オプションの行が表示されます。そのうちの1つを除いてすべてがチェックされています：タグ。今すぐ選択してください。

[メニュー項目の追加]セクションの[カテゴリ]オプションの下に新しいメニューが表示されます。好きなタグから検索または選択して、メニューに追加できます。

WordPressでメニューを複製できますか？

変更を訪問者にライブでブロードキャストせずにメニューで作業したい場合は、メニューを複製する機能が非常に便利です。

WordPressにはデフォルトでこの機能が付属していませんが、DuplicateMenuという適切なタイトルのシンプルなプラグインを使用して行うことができます。 プラグイン→新規追加画面からインストールすると、[外観]タブの[重複メニュー]の下に新しいページが表示されます。

ここに移動すると、重複するメニューに名前を付けるように求める非常に単純な画面が表示されます。次に、[メニューの複製]をクリックします。

これには少し時間がかかります。次に、複製したメニューに直接ジャンプできます。 2つのメニューが同じスペースを占めることができないため、表示場所が空白になることを除いて、すべてがまったく同じになります。

表示場所を設定するか、古いメニューと交換するまで、訪問者は新しいメニューを見ることができません。あなたはあなたの目に見えるサイトを壊すことを心配することなくあなたの仕事を自由に行うことができます。

メニューに画像を追加できますか？

デフォルトではメニューに画像を追加することはできませんが、MenuImageというプラグインがそれを変更します。

プラグイン→新規追加からインストールし、サイドバーの新しいメニュー画像オプションに注目してください。ここに移動して、メニューの画像サイズを設定できます。 [外観]→ [メニュー]に戻り、メニュー項目を開いて、新しい[画像/アイコンの追加]ボタンをクリックします。

必要に応じて設定を微調整します。 [画像]をクリックして画像をアップロードするか、[アイコン]をクリックしてアイコンから選択します。保存する前にプレビューが表示されます。

WordPressにメガメニューを追加できますか？

大量のリンクを含むメニューが必要な場合、デフォルトのメニュースタイルは非常に雑然としていてプロフェッショナルではないように見えます。代わりに、よりきちんとした整理のためのメガメニューを作成する必要があります。

残念ながら、WordPressはメガメニューをサポートしていないため、MaxMegaMenuのようなプラグインをインストールする必要があります。

プラグイン→新規追加を使用してこれをインストールすると、サイドバーの下部に新しいメガメニューオプションが表示されます。

設定するには、 [メガメニュー]→[メニューの場所]に移動し、[有効]にチェックマークを付けてオンにします。次に、ホバーアニメーションとメニューの動作を変更したり、 [メニューテーマ]タブでテーマをカスタマイズしたりすることもできます。

[外観]→ [メニュー]画面から、いくつかの基本的なメガメニュー機能にアクセスすることもできます。この画面には、新しい[最大メガメニュー設定]タブがあります。

JavaScriptのonclickイベントをメニューに追加できますか？

テーマファイルを編集するか、Simple Custom CSSやJSなどのプラグインをインストールすることで、WordPressサイトにJavascriptを追加できます。

注： functions.phpファイルを直接編集する場合は、最初に子テーマを設定する必要があります。テーマが更新されると、子テーマを使用していない限り、すべてのカスタムスクリプトが失われます。

個々のメニュー項目をターゲットにする方法がわからない場合は、[外観]→[メニュー]ページに移動し、[画面オプション]を開いてから、[ CSSクラス]をオンにしてみてください。メニュー項目にクラスを追加してから、onclickイベントでこのクラスをターゲットにします。

Mega Menuプラグインを使用している場合は、さらにMegaMenu→MenuLocationsに移動し、ターゲットとするメニューを選択して、 Advancedをクリックし、 UnbindJavascriptEventsオプションをオフにする必要があります。競合が発生する可能性があるため、これを行う場合は注意が必要です。

テーマを切り替えるとメニューはどうなりますか？

メニューの整理に多くの時間を費やしている場合は、新しいテーマへの切り替えについて少し心配するかもしれません。幸い、テーマを切り替えるとメニューは完全にそのままになるので、そうしても危険はありません。

ただし、古いメニューでは古い表示場所がすべて割り当てられていないため、もう一度設定する必要があります。 [外観]→[メニュー]と[場所の管理]タブに移動し、メニューを元の場所に再割り当てします。

WordPressデータベースのナビゲーションメニューはどこにありますか？

何らかの理由でデータベースのカスタムメニューを編集する必要がある場合は、wp_postsテーブルのmenu_orderフィールドにあります。ナビゲーションメニューはカスタム投稿タイプとして構築されているため、そこにあります。

データベースに変更を加える前に、JetpackBackupなどのツールを使用してサイトをバックアップしてください。

まったく新しいナビゲーションメニュー

エディターを少し調整し、CSSを少し調整すれば、ナビゲーションメニューは思いどおりになります。あなたのウェブサイトがトラフィックで増加するにつれて、あなたのサイトが訪問者が移動するのを助けるために最適化されたメニューを持つことがますます重要になります。

WordPressメニューをカスタマイズする方法がわかったので、Webサイトデザインの最も重要な柱の1つを作成する準備が整いました。