WordPressでナビゲーションバーを編集する方法を知りたいですか？簡単に言うと、組み込みのメニューエディタか、SeedProdのようなドラッグ＆ドロップビルダーでできます。
ナビゲーションバーは、訪問者が最初に目にするもののひとつです。ナビゲーションバーを編集することで、リンクを追加したり、ボタンを作成したり、デザインをカスタマイズすることができます。
このガイドでは、WordPressのメニューを編集する2つの簡単な方法を紹介します。1つ目はSeedProdを使用してデザインを完全にコントロールする方法、2つ目はWordPressのデフォルト設定を使用して素早く編集する方法です。
なぜWordPressのメニューを編集するのか？
WordPressのナビゲーションバーを編集することで、サイトが使いやすくなり、訪問者のコンバージョンにも効果的です。明確なメニューは、訪問者が適切なコンテンツを素早く見つけるのに役立ちます。
デフォルトでは、WordPressはあなたの公開したページでメニューを作成します。しかし、ブログ記事、商品ページ、カテゴリー、外部サイトへのリンクでカスタマイズすることができます。これにより、基本的なメニューがサイト内でユーザーを誘導するための強力なツールに変わります。
例えば、Eメール登録ページやショップページへのリンクを追加したり、最も人気のあるブログカテゴリーを強調したりすることができます。また、ボタンやアイコン、ドロップダウンメニューを追加して、洗練された外観にすることもできます。
つまり、ナビゲーションバーをカスタマイズすることで、ユーザーエクスペリエンスを向上させ、ウェブサイトの目標をより早く達成することができます。
WordPressでナビゲーションバーを編集する方法：2つの方法
WordPressのナビゲーションバーを編集するには、SeedProdのようなドラッグ＆ドロップビルダーを使う方法と、WordPressに内蔵されているメニューエディターを使う方法があります。どちらも初心者向けですが、カスタマイズのレベルは異なります。
コーディングなしで完全なデザインコントロールを望むなら、SeedProdがより良い選択です。メニューを作成し、ボタンを追加し、すべてを視覚的にスタイリングすることができます。素早い編集を好み、高度なデザインオプションを必要としないのであれば、WordPressのデフォルトのメニュー設定がうまく機能する。
方法1.SeedProdでWordPressのナビゲーションバーを編集する方法
WordPressのナビゲーションバーを編集する最も簡単な方法は、SeedProdを使うことです。SeedProdは、ドラッグ＆ドロップでメニューをデザインしたり、ボタンを追加したり、コードを書かずにスタイリングをカスタマイズできるビルダーです。
SeedProdを使用すると、カスタムWordPressテーマを作成し、ランディングページを構築し、ヘッダーやメニューなどのサイト全体の要素を一箇所で編集することができます。ナビメニューブロックを使用すると、ポイント、クリック、ナビゲーションバーの編集を視覚的に簡単に行うことができます。
メニュー以外にも、SeedProdはあなたをサポートします：
- 近日公開ページを作成する
- メンテナンスモードを有効にする
- カスタム404ページとログインページの作成
- ソーシャルメディア・コンテンツの埋め込み
- WooCommerceストアのデザイン
次に、SeedProdを使ってWordPressのナビゲーションバーを編集する手順を説明します。
ステップ1.SeedProdプラグインをインストールする
SeedProdでWordPressのナビゲーションバーを編集するには、まずプラグインをインストールして有効化します。SeedProdの価格ページに行き、プランを選択し、アカウントダッシュボードからプラグインをダウンロードします。
次に、プラグインをWordPressサイトにアップロードし、有効化をクリックします。次にSeedProd " Settingsにアクセスしてライセンスキーを貼り付け、Verify KeyをクリックしてTheme Builder機能のロックを解除します。
WordPressダッシュボードのSeedProd " Theme Builderにアクセスして、カスタムテーマとメニューの作成を開始します。
注：テーマを置き換えたくない場合でも、ランディングページを作成し、そのヘッダーをカスタマイズすることで、SeedProdでナビゲーションバーを編集することができます。
ステップ2.WordPressテーマのテンプレートを選ぶ
SeedProdでナビゲーションバーを設定する最も早い方法は、あらかじめ用意されたWordPressテーマテンプレートから始めることです。各テンプレートには、ヘッダー、フッター、ホームページ、ブログなど、サイトのすべてのパーツが含まれていますので、デザインをカスタマイズするだけです。
テーマビルダーのダッシュボードから、テーマをクリックしてテンプレートギャラリーを開きます。新しいタブでデザインをプレビューし、あなたのビジネスに合ったものを選ぶことができます。
このチュートリアルではCar Maintenanceのテーマを使いますが、どのテンプレートを選んでもかまいません。オレンジのチェックマークをクリックして、あなたのサイトにインポートしてください。
インポートされると、SeedProdはヘッダー、フッター、ブログページを含むサイト構造を自動的に作成します。ドラッグアンドドロップエディタで任意のパーツを開き、カスタマイズを開始できます。
ステップ3.ヘッダーテンプレート部分をカスタマイズする
ナビゲーションバーはヘッダーテンプレートの中にあります。SeedProdのプレメイドテーマは通常自動的に追加されるので、ヘッダーを開いてカスタマイズするだけです。
ヘッダーを編集するには、テーマビルダーでヘッダーテンプレートにカーソルを合わせ、デザインの編集をクリックします。ドラッグアンドドロップエディターが開きます。
プレビュー内の任意の要素をクリックして編集します。左側に設定パネルが表示され、テキスト、スタイル、機能を変更できます。
例えば、ロゴブロックをクリックして、プレースホルダーのロゴを削除し、WordPressのメディアライブラリから独自のロゴをアップロードします。
また、ソーシャルメディアアイコン、検索バー、カスタムボタンなどの新しいブロックをヘッダーにドラッグして、ナビゲーションバーを拡張することもできます。
ヘッダー編集の基本がカバーされたので、次のステップではナビゲーションメニュー自体をカスタマイズする準備ができました。
ステップ4.WordPressのナビゲーションバーを編集する
SeedProdはサイトのナビゲーションを表示するためにNav Menuブロックを使用します。このブロックはメニューを管理する2つの方法を提供します: クイックリンクのためのシンプルなオプション、または高度なコントロールのためのWordPressメニューオプションです。
オプション1：シンプルメニュー- 任意のページ、投稿、カテゴリ、タグ、または外部URLへのリンクをビルダー内に直接追加します。素早く設定できますが、ドロップダウンメニューや既存のWordPressメニューには対応していません。
配置、フォントサイズ、間隔、仕切りのオプションでシンプルメニューをスタイル設定できます。高度なタブでは、水平または垂直レイアウトを切り替え、タイポグラフィ、色、ボーダーを調整します。
オプション2：WordPressメニュー- WordPressで作成済みのメニューをドロップダウンから選択します。このオプションは、モバイルナビゲーションをサポートし、WordPressの組み込みメニューエディタの柔軟性を継承しています。
また、デフォルトのWordPressメニューページに戻るクイックリンクも表示され、レイアウトを調整することができます。シンプルメニューと同様に、詳細タブではフォント、色、影、デバイスによる表示などをカスタマイズすることができます。
WordPressでメニューボタンを追加する方法
メニューボタンは、"サインアップ "や "始める "のようなアクションを強調するのに最適な方法です。SeedProdでは、Buttonブロックで追加できます。
左側のサイドバーから、ボタンブロックをヘッダーにドラッグします。その後、設定パネルで直接、行動喚起のテキスト、リンク、スタイリングをカスタマイズします。
プロのヒント不要な要素にカーソルを合わせ、ゴミ箱アイコンをクリックして削除します。
メニューが思い通りになったら、右上の保存をクリックしてエディタを閉じ、Theme Builderのダッシュボードに戻ります。
この同じプロセスを繰り返して、WordPressテーマの他の部分をカスタマイズすることができます。
ステップ5.カスタムWordPressテーマを公開する
WordPressのメニューとテーマテンプレートを編集した後、ウェブサイト上で変更を実行する準備ができました。そのためには、Theme BuilderページからEnable SeedProd Themeトグルを見つけ、"On "の位置にしてください。
これでホームページにアクセスし、新しいカスタムナビゲーションメニューを見ることができます。
方法2.プラグインなしでWordPressのメニューを編集する
現在のテーマを維持したい場合は、WordPressの内蔵メニューエディターを使ってナビゲーションバーを編集することができます。このオプションは追加のプラグインを必要としませんが、デザインの選択肢は限られており、お使いのテーマに依存します。
まずは、WordPressダッシュボードの外観 " メニューにアクセスしてください。ここでメニューリンクを追加、削除、整理することができます。
新しい項目を追加するには、左側のパネルからページを選択し、メニューに追加をクリックします。また、投稿、カテゴリー、カスタムリンク、タグなどのセクションを拡張して追加することもできます。
次に、Menu Settings " Display Locationでメニューが表示される場所を選択します。オプションはテーマによって異なります：
- 主要メニュー
- セカンダリーメニュー
- オフキャンバスメニュー
- ユーザーアカウントメニュー
- フッターメニュー
完了したらメニューを保存をクリックし、サイトをプレビューして更新されたナビゲーションバーを確認します。
もっとコントロールしたい場合は、カスタムCSSでメニューをスタイルすることができます。WordPressのナビゲーションメニューのスタイルについては、こちらのガイドを参照してください。
次のステップ
このステップバイステップのチュートリアルで、WordPressでメニューを簡単に編集する方法を学んでいただけたら幸いです。WooCommerceサイトをお持ちの方は、メニューにWooCommerceのショッピングカートアイコンを追加する方法のガイドもお勧めです。
コードなしでウェブサイトのメニューをカスタマイズする準備はできましたか？
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
