私は長年にわたって多くのWordPressメニューをカスタマイズしてきたが、いつも気づくことのひとつは、デフォルトのスタイルがいかに背景に溶け込んでいるかということだ。それは機能するのですが、あなたのブランドとマッチしていなかったり、サイトを目立たせることができなかったりするのです。
メニューを少し変えるだけで、サイト全体が洗練され、ナビゲートしやすくなります。
このガイドでは、WordPressのメニュースタイルをステップバイステップでカスタマイズする方法を紹介する。
なぜWordPressのメニューをカスタマイズするのか？
メニューはWordPressウェブサイトの最も重要な部分の一つです。訪問者があなたのサイトに到着したときに最初に目にするものであり、ナビゲーションのために使用するものです。そのため、メニューのデザイン性と使いやすさが重要です。
WordPressのナビゲーションメニューをカスタマイズすべき理由は以下の通りです：
- ウェブサイトのルック＆フィールを向上させます。メニューはサイト全体のデザインに大きく影響します。カスタマイズすることで、ホームページや他のトップページのルック＆フィールにマッチし、より視覚的にアピールすることができます。
- ユーザーフレンドリーなウェブサイトを目指しましょう。優れたデザインのメニューは、訪問者が探しているものを素早く簡単に見つけるのに役立ちます。メニューをカスタマイズすることで、訪問者がサイトをナビゲートしやすくなり、必要な情報を見つけやすくなります。
- ウェブサイトのSEOを向上させるメニューの構成もサイトのSEOに影響します。メニューをカスタマイズすることで、検索エンジンにインデックスされやすくなり、検索結果で上位に表示されやすくなります。
WordPressのメニューをカスタマイズする方法はたくさんあります。メニュー項目の順番を変更したり、新しい項目を追加したり、メニュー自体のデザインを変更することもできます。
また、さらにカスタマイズするためのプラグインもたくさんあります。以下のステップバイステップガイドでは、WordPressプラグインを使う場合と使わない場合で、WordPressサイトにカスタムメニューを追加する3つの方法を紹介する。
- ページ・ビルダー・プラグインでWordPressのメニューをカスタマイズする方法
- WordPressサイトエディターでWordPressメニューをカスタマイズする方法
- プラグインなしでWordPressのメニューをカスタマイズする方法
- WordPressナビゲーションのヒント
ページ・ビルダー・プラグインでWordPressのメニューをカスタマイズする方法
まず、ページ・ビルダー・プラグインを使ってWordPressのメニューをカスタマイズする方法を紹介する。この例ではSeedProdを使いますが、他のページビルダーでも同様の原則が適用されます。
SeedProdは、コードを書くことなくWordPressでカスタムページやメニューを作成できる強力な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サイトエディターでWordPressメニューをカスタマイズする方法
最初の方法は、どのテーマを使用しているかにかかわらず、どのウェブサイトにとっても優れたソリューションです。しかし、Twenty Twenty ThreeのようなブロックベースのWordPressテーマを使っている場合は、WordPressサイトエディターを使ってメニューをカスタマイズする方がいいかもしれません。
注意：この方法はすべてのテーマで使えるわけではありませんし、メニューのすべての部分をカスタマイズできるわけでもありません。
サイトエディタを開くには、WordPressダッシュボードから外観 " エディタに移動します。
次の画面で、「パターン」タブをクリックする。
そこから、ヘッダーオプションをクリックし、ヘッダーテンプレートを選択します。
ここでは、ドラッグ＆ドロップでメニューの位置を並べ替えたり、メニューから項目を削除することができる。
鉛筆のアイコンをクリックして、メニューのスタイルを編集することもできます。
例えば、メニューの背景色、フォント、パディング、マージン、ボーダーなどを調整することができます。
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のメニューをカスタマイズする方法を学ぶのに役立てば幸いです。WordPressのナビゲーションをもっと活用するために、以下のヒントやチュートリアルをご覧ください：
- WordPressでモバイルメニューを編集する方法（初心者ガイド）
- メニューにWooCommerceショッピングカートのアイコンを追加する方法
- ランディングページのナビゲーションは死んだ：その理由はここにある
- WordPressでナビゲーションバーを編集する手順
- Lの作り方aナビゲーションのないページの作り方（簡単な方法）
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
