要約：WordPressのメニューをカスタマイズする方法
テーマや必要な設定の自由度に応じて、WordPressのメニューをカスタマイズする方法は4つあります。
- 「外観」→「メニュー」– クラシックテーマでの基本的な編集にはこれが最も速い
- SeedProd– 色、フォント、レイアウトを自由にカスタマイズ可能
- WordPressサイトエディター– ブロックテーマの標準機能
- カスタムコード– テーマに新しいメニュー項目を追加します
私は長年にわたって多くのWordPressメニューをカスタマイズしてきたが、いつも気づくことのひとつは、デフォルトのスタイルがいかに背景に溶け込んでいるかということだ。それは機能するのですが、あなたのブランドとマッチしていなかったり、サイトを目立たせることができなかったりするのです。
メニューを少し変えるだけで、サイト全体が洗練され、ナビゲートしやすくなります。
このガイドでは、コーディング不要でWordPressのメニューをカスタマイズする4つの方法を、順を追ってご紹介します。
WordPressのメニューをカスタマイズする最も手っ取り早い方法は、ダッシュボードの「外観」→「メニュー」から行うことです。項目を追加し、表示位置を設定して、保存します。フォント、色、レイアウトを完全に制御したい場合は、SeedProdのドラッグ＆ドロップビルダーをご利用ください。ブロックテーマの場合は、WordPressサイトエディタをご利用ください。
デフォルトのエディタを使ってWordPressのメニューをカスタマイズするにはどうすればいいですか？
まず始めに、「外観」→「メニュー」にある標準のメニューエディタを使うのが最も簡単です。これはクラシックテーマや、ブロック形式ではないほとんどのテーマで動作し、追加のプラグインは必要ありません。
私はこのエディタを何年も使っていますが、基本的なナビゲーション構造を構築するには、今でもこれが一番手っ取り早い方法です。
ステップ1. 新しいメニューを作成する
WordPressのダッシュボードから、「外観」→「メニュー」に移動します。上部に「メインメニュー」などのメニュー名を入力し、「メニューを作成」をクリックします。
ステップ 2. ページ、投稿、またはカスタムリンクを追加する
左側で、追加したいページや投稿にチェックを入れ、「メニューに追加」をクリックします。「カスタムリンク」パネルを使用して、任意のURLとリンクテキストを追加できます。
ステップ3. 表示場所を指定する
画面を下にスクロールして「メニュー設定」まで進み、「メインメニュー」などの表示場所を選択してください。利用可能な表示場所は、使用しているテーマによって異なります。
また、項目をドラッグ＆ドロップして順序を変更したり、ネストさせてドロップダウン形式のサブメニューを作成したりすることもできます。
ステップ4. メニューを保存する
「メニューを保存」をクリックすると、選択した場所にメニューが表示されます。
この方法では基本的な構造と順序は処理できますが、スタイルの制御は限定的です。フォント、色、レイアウトを完全に制御したい場合は、以下のSeedProdの方法をお試しください。
ページビルダーを使ってWordPressのメニューをカスタマイズするにはどうすればいいですか？
メニューの外観をより細かく調整したい場合は、ページビルダープラグインが最適です。この例ではSeedProdを使用しますが、他のページビルダーでも同様の原則が適用されます。
SeedProdは、WordPress用のドラッグ＆ドロップ式ウェブサイトビルダーで、コードを記述することなく、カスタムページやメニュー、さらにはテーマ全体を作成することができます。主な機能は以下の通りです：
- ドラッグ＆ドロップ式ページビルダー
- WordPressテーマビルダー
- あらかじめ用意されたテンプレート
- カスタマイズ可能なメニュー
- ソーシャルメディア統合
- そしてもっと。
ウェブサイトのフッター、ヘッダー、サイドバー、ページコンテンツにカスタムメニューを追加することもできます。
この方法を使えば、WordPressのテーマに関係なくメニューをカスタマイズすることができます。始めるには、以下の簡単な手順に従ってください。
ステップ1.SeedProdをインストールする
まず、SeedProdプラグインをダウンロードし、WordPressサイトにインストールして有効化します。
このステップについては、SeedProdのインストール方法のガイドをご参照ください。
ステップ2.ランディングページのテンプレートを選ぶ
プラグインを有効にしたら、WordPressのダッシュボードからSeedProd " Landing Pagesに移動し、新しいランディングページを追加ボタンをクリックします。
ランディングページテンプレートのライブラリーが表示され、カスタムページを素早く作成することができます。
各テンプレートは、異なるウェブサイトのニッチに合わせて完全にカスタマイズ可能です。例えば、上部にある「Lead Squeeze」タブをクリックすると、スクイーズページの作成に最適なテンプレートが表示されます。
あなたのニーズに合ったデザインが見つかったら、そのデザインにカーソルを合わせ、オレンジ色のチェックマークアイコンをクリックします。
ページ名とURLを入力するウィンドウが表示されます。これらの詳細を入力したら、「保存してページの編集を開始する」ボタンをクリックします。
ステップ3.ページコンテンツをカスタマイズする
次の画面では、SeedProdのビジュアルページビルダーの中にあなたのランディングページが表示されます。左側にブロック、セクション、設定が表示され、右側にページのプレビューが表示されます。
ページに加えた変更は、リアルタイムで自動的に表示されます。こうすることで、変更を公開する前に見栄えを確認することができます。
テンプレートの内容のカスタマイズは、ポイント＆クリックで簡単にできます。例えば、テキストの内容を変更するには、そのテキストをクリックし、既存のテキストを削除して、独自のテキストに置き換えます。
画像やコール・トゥ・アクション・ボタンなど、新しい機能をページに追加するには、左側のパネルでブロックを見つけ、ページ上にドラッグします。
満足のいくデザインができるまで、テンプレートのコンテンツを自分のものに置き換えていきましょう。カスタマイズの詳細については、WordPressでランディングページを作成する方法をご覧ください。
ステップ4.WordPressメニューをカスタマイズする
ページをカスタマイズした後、メニューを作成し、簡単にカスタマイズすることができます。私のテンプレートにはヘッダーエリアが含まれていないので、まずヘッダーエリアを作る必要がある。
これを行うには、Columnブロックを見つけ、ページの上部にドラッグします。
次にレイアウトを選びます。今回は3カラムレイアウトを使用します。
それでは、ヘッダーエリアにウェブサイトのロゴを表示する画像ブロックを設定してみましょう。
ロゴ画像をアップロードするには、ブロック設定パネルで「自分の画像を使う」ボタンをクリックします。これにより、WordPressのメディアライブラリから画像を選択するか、コンピューターから画像をアップロードすることができます。
次に、Nav Menuブロックを見つけ、ヘッダーの別のカラムにドラッグします。ここで、ユーザーがクリックしてサイト内の他のページを訪問するためのメニュー項目を追加することができます。
ブロック設定では、メニューを表示する方法が2つあります。
シンプルメニュータイプでは、ページビルダーを離れることなく個々のメニューリンクを追加できます。メニュー名を追加し、カスタムリンクを貼り付けるだけです。
リンクのターゲットをフォローなしにし、新しいタブで開くこともできる。
WordPressメニュータイプでは、WordPressで作成済みのメニューを表示することができます。ドロップダウンメニューをクリックすると、プライマリメニューやメインメニューなど、サイトで利用可能なすべてのメニューが表示されます。
必要なのは、ヘッダーに表示するメニューを選択することだけだ。
SeedProdには、両方のメニュータイプに対して高度なカスタマイズオプションがあります。詳細タブでは、メニューの色、フォント、テキストの影、ホバーカラーなどを変更することができます。
メニューは縦長でも横長でも表示できます。縦長のデザインは、サイドバーのウィジェットエリアやフッターメニューの場所に最適です。
メニューを管理するには、メニュー画面のリンクをクリックするか、WordPressの管理画面から外観 " メニューに 移動します。
ここでは、メニュー構造を編集したり、チェックボックスをクリックして新しいメニュー項目やサブメニューを追加したり、ロケーションを管理したりすることができます。このページで新しいメニューを作成することもできます。
メニュー機能を保存するには、忘れずに「メニューを保存」ボタンをクリックしてください。
多くのウェブサイトでは、サイトナビゲーションにボタンを使用して、特定の行動喚起を促しています。SeedProdのボタンブロックを使用すると、数回のクリックでメニューボタンを作成することができます。
ボタンブロックを見つけて、ヘッダーエリアに追加するだけです。
その後、ブロックの設定で、メニューリンクを追加し、ボタンのスタイルをカスタマイズすることができます。
ステップ5.カスタムページを公開する
ページの見た目に満足したら、画面右上の「SaveandPublish」をクリックします。
そこから、WordPressのカスタムメニューが表示されているページを見ることができます。
WordPressのサイトエディタを使ってメニューをカスタマイズするにはどうすればいいですか？
最初の方法は、どのテーマを使用しているかにかかわらず、どのウェブサイトにとっても優れたソリューションです。しかし、Twenty Twenty ThreeのようなブロックベースのWordPressテーマを使っている場合は、WordPressサイトエディターを使ってメニューをカスタマイズする方がいいかもしれません。
注意：この方法はすべてのテーマで使えるわけではありませんし、メニューのすべての部分をカスタマイズできるわけでもありません。
サイトエディタを開くには、WordPressダッシュボードから外観 " エディタに移動します。
次の画面で、「パターン」タブをクリックします。WordPress 6.5 以降では、「ヘッダー」オプションがすぐに見つからない場合は、「パターン」→「テンプレートパーツ」を確認してください。
そこから、ヘッダーオプションをクリックし、ヘッダーテンプレートを選択します。
ここでは、ドラッグ＆ドロップでメニューの位置を並べ替えたり、メニューから項目を削除することができる。
鉛筆のアイコンをクリックして、メニューのスタイルを編集することもできます。
例えば、メニューの背景色、フォント、パディング、マージン、ボーダーなどを調整することができます。
Advancedタブまでスクロールダウンすると、カスタムCSSクラスを入力することができます。
ヘッダーボタンのような別のメニューオプションを追加するには、ブロックの追加アイコンをクリックします。
これで、ブロックを検索し、それをクリックしてメニューに追加し、他のWordPressブロックのようにカスタマイズすることができます。
メニューの設定とカスタマイズが完了したら、「保存」ボタンをクリックします。
これで、サイトにアクセスしてカスタムメニューを見ることができます。
WordPressでプラグインを使わずにカスタムメニューを追加するにはどうすればいいですか？
ページビルダー・プラグインをセットアップしたくない場合、WordPressのブロックテーマを持っていない場合は、いつでもコードを使ってカスタムナビゲーションメニューを追加することができる。
そのためには、WPCodeのようなWordPressコードスニペットプラグインを使用することをお勧めします。これは、functions.phpファイルのようなWordPressのコアファイルを編集することなく、WordPressにカスタムコードを追加する最も安全で簡単な方法です。
これを行うには、無料のWPCodeプラグインをインストールし、WordPressダッシュボードからCode Snippets " Add Snippetに進みます。
このページでは、数回のクリックであなたのサイトに追加できる既製のスニペットをご覧いただけます。
このチュートリアルでは、独自のスニペットを作りたいので、「Add Your Custom Code」にマウスカーソルを合わせ、「Use snippet」ボタンをクリックする。
スニペットのタイトルを入力し、"Code Type "ドロップダウンを開き、PHP Snippetをクリックします。
次に、以下のスニペットをコード・エディターに貼り付ける：
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );このスニペットは、テーマに新しいメニューの場所 "マイカスタムメニュー "を追加します。
挿入が完了したら、挿入オプションまでスクロールダウンし、サイト全体にスニペットを追加する「自動挿入」方法を選択します。
そこから "Location "ドロップダウンメニューを開き、"Run Everywhere "をクリックする。
画面上部にスクロールし、"Inactive "トグルをクリックして "Active "に変更する。
最後にSaveをクリックして、スニペットをライブにする。
次に、外観 " メニューに行き、「表示場所」エリアを見る。
このエリアに、メニュー項目を追加できる新しい「マイカスタムメニュー」オプションが表示されるはずです。
次のステップは、WordPressテーマにカスタムメニューを追加することです。
テーマのテンプレートファイルにコードを追加することで、サイト上の任意の場所にカスタムナビゲーションメニューを表示することができます。
外観 " テーマファイルエディタ.
次に、右側のメニューから、ウェブサイトのヘッダーなど、メニューを追加したいテンプレートを探します。
ここで、wp_nav_menu関数を追加し、カスタムメニューの名前を指定する必要があります。例えば、以下のコードでは、テーマのヘッダーにマイカスタムメニューを追加しています：
wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );コードを追加したら、「ファイルを更新」ボタンをクリックして変更を保存します。
さて、あなたのサイトにアクセスすると、カスタムメニューが動いているのが見えるが、シンプルな箇条書きリストで表示されていることに気づくだろう。
カスタムCSSコードをサイトに追加することで、WordPressのテーマやブランドによりマッチしたメニューにすることができます。
これを行うには、外観 " カスタマイズに行き、WordPressカスタマイザーの追加CSSをクリックします。
カスタムCSSを入力するエディターが開きます。
これで、テーマテンプレートに追加したCSSクラスを使ってメニューをスタイルすることができます。この例では、.custom_menu_classです。
以下のコードでは、余白とパディングを追加し、テキストの色を黒に設定し、メニューを水平レイアウトにしている：
div.custom-menu-class ul {
margin:20px 0px 20px 0px;
list-style-type: none;
list-style: none;
list-style-image: none;
text-align:right;
display:inline-block;
}
div.custom-menu-class li {
padding: 0px 20px 0px 0px;
display: inline-block;
}
div.custom-menu-class a {
color:#000;
}WordPressのカスタマイザーは自動的に更新されるので、新しいスタイルでメニューがどのように見えるかを確認することができます。変更に問題がなければ、公開します。
よくある質問
WordPressのナビゲーションメニューをカスタマイズするにはどうすればいいですか？
最も手っ取り早い方法は、WordPressダッシュボードの「外観」→「メニュー」に移動することです。表示したいページや投稿を追加し、メニューを「メインメニュー」などの表示場所に割り当てて、「メニューを保存」をクリックします。フォント、色、レイアウトをより細かく調整したい場合は、SeedProdのドラッグ＆ドロップビルダー、またはブロックテーマ用のWordPressサイトエディタをご利用ください。
WordPressサイトのナビゲーションメニューを編集するにはどうすればよいですか？
WordPressダッシュボードの「外観」→「メニュー」に移動し、編集したいメニューを選択します。項目を追加または削除し、ドラッグして順序を変更したら、「メニューを保存」をクリックします。ブロックテーマを使用している場合は、「外観」→「エディター」にあるWordPressサイトエディターを使用して、ナビゲーションブロックを直接編集してください。
プラグインを使わずにWordPressのメニューをカスタマイズすることはできますか？
はい。WordPressには、「外観」→「メニュー」にプラグインなしで利用できる組み込みのメニューエディタが用意されています。ブロックテーマの場合は、WordPressサイトエディタをご利用ください。カスタムメニューの位置を追加するには、WPCodeなどのコードプラグインを使用して、短いPHPスニペットを挿入します。手動でファイルを編集する必要はありません。
WordPressでドロップダウンメニューを追加するにはどうすればいいですか？
「外観」→「メニュー」で、親項目の下にあるメニュー項目を少し右にドラッグします。WordPressが自動的にインデントを付け、ドロップダウンとして扱います。最大3階層までネスト可能です。ドロップダウンの見た目をカスタマイズするには、SeedProdの「Nav Menu」ブロックに、ホバー効果、色、レイアウトのオプションが組み込まれています。
WordPressナビゲーションのヒント
WordPressのナビゲーションを自由にデザインしたいなら、SeedProdを使えば、コードを一切触らずにカスタムメニュー、ヘッダー、レイアウトを簡単に作成できます。今すぐSeedProdを入手しましょう
- WordPressでモバイルメニューを編集する方法（初心者ガイド）
- メニューにWooCommerceショッピングカートのアイコンを追加する方法
- ランディングページのナビゲーションは死んだ：その理由はここにある
- WordPressでナビゲーションバーを編集する手順
- Lの作り方aナビゲーションのないページの作り方（簡単な方法）
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
