WordPressにナビゲーションメニューを追加する方法(初心者向けガイド)

WordPressサイトにナビゲーションメニューを追加しますか??


WordPressには、ヘッダーメニュー、ドロップダウンオプション付きのメニューなどを作成するために使用できるドラッグアンドドロップメニューインターフェイスが付属しています.

このステップバイステップガイドでは、WordPressにナビゲーションメニューを簡単に追加する方法を示します.

WordPressでナビゲーションメニューを追加する方法

ナビゲーションメニューとは?

ナビゲーションメニューは、Webサイトの重要な領域を指すリンクのリストです。通常、ウェブサイトの各ページの上部にあるリンクの水平バーとして表示されます.

ナビゲーションメニューはサイトの構造を提供し、訪問者が探しているものを見つけやすくします。 WPBeginnerでのナビゲーションメニューの外観は次のとおりです。

WPBeginnerナビゲーションメニュー

WordPressを使用すると、メニューやサブメニューを簡単に追加できます。最も重要なページ、カテゴリまたはトピック、ブログ投稿へのリンク、さらにはソーシャルメディアプロフィールなどのカスタムリンクを追加できます.

メニューの正確な場所は、WordPressテーマによって異なります。ほとんどのテーマにはいくつかのオプションがあるため、さまざまな場所に表示できるさまざまなメニューを作成できます.

たとえば、ほとんどのWordPressテーマには、上部に表示されるプライマリメニューがあります。一部のテーマには、セカンダリメニュー、フッターメニュー、またはモバイルナビゲーションメニューも含まれる場合があります.

初めてのカスタムナビゲーションメニューの作成

ナビゲーションメニューを作成するには、 外観»メニュー WordPress管理ダッシュボードのページ.

WordPressでメニューを作成する

最初に、「トップナビゲーションメニュー」などのメニューの名前を指定し、[メニューを作成]ボタンをクリックする必要があります。これにより、メニュー領域が拡張され、次のようになります。

WordPressで新しく作成されたメニュー

次に、メニューに追加するページを選択できます。すべての新しいトップレベルのページを自動的に追加するか、左の列から特定のページを選択することができます.

まず、[すべて表示]タブをクリックして、サイトのすべてのページを表示します。その後、メニューに追加する各ページの横にあるボックスをクリックし、[メニューに追加]ボタンをクリックします.

ナビゲーションメニューへのアイテムの追加

ページが追加されたら、ドラッグアンドドロップで移動できます.

アイテムをドラッグアンドドロップしてメニュー内で移動する

注意: すべてのメニューには、メニューエディターの縦(上から下)リストに項目がリストされています。メニューをサイトに公開すると、選択した場所に応じて、垂直または水平(左から右)に表示されます.

ほとんどのテーマには、メニューを配置できる場所がいくつかあります。この例では、5つの異なる場所があるデフォルトの2020テーマを使用しています.

メニューにページを追加したら、メニューを表示する場所を選択し、[メニューを保存]ボタンをクリックします.

メニューの表示場所の選択

ヒント: それぞれの場所がわからない場合は、メニューを別の場所に保存してから、サイトにアクセスしてメニューを確認してください。おそらくすべての場所を使用する必要はありませんが、複数の場所を使用したい場合があります.

これがサイトの完成したメニューです。

完成したライブナビゲーションメニュー

WordPressでドロップダウンメニューを作成する

ネストされたメニューと呼ばれることもあるドロップダウンメニューは、親メニュー項目と子メニュー項目を持つナビゲーションメニューです。親アイテムの上にカーソルを置くと、すべての子アイテムがサブメニューのその下に表示されます.

サブメニューを作成するには、アイテムを親アイテムの下にドラッグしてから、少し右にドラッグします。メニューの「Services」の下に3つのサブアイテムを配置しました。

メニュー項目をサブメンとして追加する

これはサイトにライブのサブメニューです:

サイトのナビゲーションのドロップダウンサブメニュー

ドロップダウンの複数のレイヤーを追加して、サブメニューにサブメニューを含めることもできます。これは少し雑然と見てしまう可能性があり、多くのテーマはマルチレイヤーのドロップダウンメニューをサポートしていません.

この例では、「Logo Design」(「Services」の子アイテム)に独自の子アイテムが2つあることがわかります.

ネストされたドロップダウンメニュー

WordPressメニューへのカテゴリの追加

WordPressを使用してブログを実行している場合は、ブログのカテゴリをWordPressメニューのドロップダウンとして追加できます。これはWPBeginnerで行います。

カテゴリーのドロップダウンを表示するWPBeginnerメニュー

メニュー画面の左側にある[カテゴリ]タブをクリックすると、メニューにカテゴリを簡単に追加できます。すべてのカテゴリを表示するには、[すべて表示]タブをクリックする必要がある場合もあります.

メニューに追加するカテゴリを選択し、[メニューに追加]ボタンをクリックするだけです.

メニューにカテゴリを追加する

カテゴリは、メニューの下部に通常のメニュー項目として表示されます。それらを所定の位置にドラッグアンドドロップできます。これらすべてのカテゴリをブログメニュー項目の下に配置します.

カテゴリーを「ブログ」メニュー項目の下に置く

ホームページとは別のブログページをサイトに配置しますか?その場合は、WordPressのブログ投稿用に別のページを作成する方法に関するチュートリアルをご覧ください。.

WordPressナビゲーションメニューへのカスタムリンクの追加

WordPressでは、カテゴリとページの他に、カスタムリンクをメニューに簡単に追加することもできます。これを使用して、ソーシャルメディアのプロファイル、オンラインストア、所有している他のWebサイトにリンクできます。.

メニュー画面の「カスタムリンク」タブを使用する必要があります。メニューで使用するテキストと一緒にリンクを追加するだけです.

メニューへのTwitterへのカスタムリンクの追加

クリエイティブになって、メニューにソーシャルメディアアイコンを追加することもできます.

ソーシャルメディアメニュー

WordPressナビゲーションメニューのメニュー項目の編集または削除

カスタムナビゲーションメニューにページまたはカテゴリを追加すると、WordPressはページタイトルまたはカテゴリ名をリンクテキストとして使用します。必要に応じてこれを変更できます.

メニュー項目は、横にある下向き矢印をクリックして編集できます.

メニュー項目を展開して名前を編集する

ここでメニュー項目の名前を変更できます。ここから[削除]をクリックして、メニューからリンクを完全に削除することもできます.

ドラッグアンドドロップインターフェースを使用している場合は、適切な[移動]リンクをクリックしてメニュー項目を移動することもできます。.

サイドバーとフッターにWordPressメニューを追加する

テーマの表示場所だけに固執する必要はありません。サイドバーやフッターなど、ウィジェットを使用する任意の領域にナビゲーションメニューを追加できます.

単に行く 外観»ウィジェット サイドバーに「ナビゲーションメニュー」ウィジェットを追加します。次に、ウィジェットのタイトルを追加し、[メニューを選択]ドロップダウンリストから適切なメニューを選択します.

サイドバーウィジェットとしてメニューを追加する

Syed BalkhiのWebサイトに構築されたカスタムのWordPressフッターメニューの例を次に示します.

WordPressフッターメニューの例-Syed Balkhi

ナビゲーションメニューをさらに進める

たくさんのリンクを含む本当にエピックなメニューを作成したい場合は、WordPressでメガメニューを作成する方法に関するチュートリアルがあります。これにより、画像を含む多くのアイテムを含むドロップダウンを作成できます.

メガメニュープレビュー

オンラインストアやニュースサイトなどの大規模なサイトを運営している場合は、メガメニューが最適です。このタイプのメニューは、ロイター、バズフィード、スターバックスなどのサイトで使用されています.

この記事が、WordPressにナビゲーションメニューを追加する方法を学習するのに役立つことを願っています。また、WordPressでナビゲーションメニューのスタイルを設定する方法や、WordPressでスティッキフローティングナビゲーションメニューを作成する方法についてのガイドもご覧ください.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map