WPBeginnerでは、数え切れないほどの読者がWordPressサイトをカスタマイズして、ユーザーエクスペリエンスを向上させ、ブランディングを強化し、コンバージョンを促進するのを支援してきました。そして、適切に行われた場合、ユニークなナビゲーションメニューはエンゲージメントを高め、人々をより長くサイトに滞在させるのに役立つことを私たちは見てきました。
問題は、すべての WordPress テーマにナビゲーションメニューを表示できる設定済みの場所があるため、これを変更するのは難しいということです。これは特に初心者にとっては、テーマファイルを変更するのは繊細なプロセスであるため、当てはまります。
ブロックテーマを使用している場合、フルサイトエディターでこれを行うことができます。しかし、私たちの経験では、すべてのテーマタイプで機能するより良いオプションがあります。
例えば、高度なカスタマイズを行いたい場合は、SeedProd のような強力なページビルダーを使用できます。または、カスタムコードを簡単に使用する方法を探している場合は、WPCode が断然最良の選択肢です。
この記事では、WordPressテーマの任意の領域にカスタムナビゲーションメニューを追加する方法をご紹介します。3つの異なるオプションを順を追って説明しますので、ご自身のニーズに合ったチュートリアルを選択できます。
WordPressテーマにカスタムナビゲーションメニューを追加する理由
ナビゲーションメニューは、ウェブサイトの重要な領域を指すリンクのリストです。これにより、訪問者は興味のあるコンテンツを簡単に見つけることができ、WordPressでのページビューを増やし、直帰率を減らすことができます。
メニューの正確な場所は、WordPress テーマによって異なります。ほとんどのテーマにはいくつかのオプションがあり、異なるメニューを作成して異なる場所に表示できます。
現在のWordPressテーマでメニューを表示できる場所を確認するには、外観 » メニューに移動し、「表示位置」セクションを確認してください。
次の画像は、Astra WordPressテーマでサポートされている場所を示しています。
テーマで「表示場所」としてリストされていない領域にメニューを表示したい場合があります。
これを踏まえて、WordPressテーマの任意の場所にカスタムナビゲーションメニューを追加する方法を見ていきましょう。お好みの方法にジャンプするには、以下のクイックリンクを使用してください。
- 方法1：フルサイトエディターを使用する（ブロックベースのテーマのみ）
- 方法2：ページビルダープラグインを使用する（すべてのテーマで動作します）
- Method 3: Create a Custom Navigation Menu in WordPress Using Code (Advanced)
方法1：フルサイトエディターを使用する（ブロックベースのテーマのみ）
ブロックテーマ（例：ThemeIsle Hestia Pro）を使用している場合、フルサイト編集（FSE）とブロックエディターを使用してカスタムナビゲーションメニューを追加できます。
詳細については、WordPressのフルサイト編集に最適なブロックテーマに関する記事をご覧ください。
この方法はすべてのテーマで機能するわけではなく、メニューのすべての部分をカスタマイズできるわけでもありません。WordPressのテーマに完全にカスタムなメニューを追加したい場合は、代わりにページビルダープラグインを使用することをお勧めします。
ブロックベースのテーマを使用している場合は、外観 » エディター にアクセスしてください。
デフォルトでは、フルサイトエディターにはテーマのホームページテンプレートが表示されますが、ナビゲーションメニューはどのエリアにも追加できます。
利用可能なすべてのオプションを表示するには、「テンプレート」、「パターン」、または「ページ」のいずれかを選択してください。
カスタムナビゲーションメニューを追加したいテンプレート、テンプレートパーツ、またはページをクリックできるようになりました。
WordPressはデザインのプレビューを表示します。このテンプレートを編集するには、小さな鉛筆アイコンをクリックします。
次のステップは、メニューを表示したい領域にナビゲーションブロックを追加することです。
左上隅にある青い「+」ボタンをクリックしてください。
次に、「Navigation」と入力して検索バーに入力します。
「ナビゲーション」ブロックが表示されたら、レイアウトにドラッグアンドドロップするだけです。
次に、ナビゲーションブロックを選択するためにクリックします。
表示したいメニューを作成済みの場合は、ナビゲーションブロックを選択してクリックします。右側のメニューで、「メニュー」の横にある3つの点のアイコンをクリックします。
次に、ドロップダウンからメニューを選択できます。
フルサイトエディター内で、ページ、投稿、カスタムリンクなどを追加してメニューを作成することもできます。新しいメニューに項目を追加するには、「+」アイコンをクリックするだけです。
ここで、投稿またはページを追加し、これらのリンクを新しいタブで開くかどうかを決定するポップアップが表示されます。
WordPressメニューに検索バーを追加したり、ソーシャルメディアアイコンを追加したりすることもできます。ポップアップで、メニューに追加したいブロックを入力し、表示されたら正しいオプションを選択するだけです。
ミニツールバーと右側のメニューの設定を使用して、このブロックを構成できます。これらの手順を繰り返すだけで、メニューにさらに項目を追加できます。
メニューの外観に満足したら、「保存」ボタンをクリックするだけです。
これで、サイトは新しいテンプレートを使用するようになり、訪問者はカスタムナビゲーションメニューと対話できるようになります。
方法2：ページビルダープラグインを使用する（すべてのテーマで動作します）
フルサイトエディターでは、ブロックベースのテーマにメニューを追加できます。ただし、高度で完全にカスタマイズ可能なメニューを任意のWordPressテーマに追加したい場合は、ページビルダープラグインが必要になります。
SeedProdは、ナビゲーションメニューのすべての部分をカスタマイズできる、市場で最高のWordPressページビルダープラグインです。
私たちは、このツールを使用してカスタムナビゲーションメニュー、ランディングページなどを構築する豊富な経験を持っています。詳細については、SeedProdの完全なレビューをご覧ください。
ページに関しては、SeedProdには350以上のプロフェッショナルにデザインされたテンプレートがあり、これらを開始点として使用できます。テンプレートを選択した後、SeedProdの既製のNav Menuブロックを使用して、サイトにカスタムナビゲーションメニューを追加できます。
まず、SeedProdプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
注意: コードを書かずにカスタムナビゲーションメニューを作成できる、SeedProd の無料版もあります。ただし、このガイドでは、Nav Menu ブロックと追加のテンプレート、高度な機能が備わっている SeedProd Pro を使用します。
プラグインを有効化すると、SeedProdはライセンスキーを要求します。
この情報は、SeedProdウェブサイトのアカウントで見つけることができます。キーを入力したら、「キーを検証」ボタンをクリックします。
それが完了したら、SeedProd » ランディングページに移動し、「新しいランディングページを追加」ボタンをクリックします。
これで、カスタムページのテンプレートを選択できます。
適切なデザインを見つけるのに役立つように、SeedProdのすべてのテンプレートは、「近日公開」やリード獲得キャンペーンなど、さまざまなキャンペーンタイプに整理されています。SeedProdのテンプレートを使用して、404ページを改善することもできます。
デザインを詳しく見るには、テンプレートの上にマウスカーソルを合わせ、虫眼鏡アイコンをクリックするだけです。
使用したいデザインが見つかったら、「このテンプレートを選択」をクリックします。
すべての画像で「ブラックフライデーセールページ」テンプレートを使用していますが、お好きなテンプレートを使用できます。
テンプレートを選択したら、そのカスタムページの名前を入力します。SeedProd はページのタイトルに基づいて URL を自動的に作成しますが、この URL は好きなものに変更できます。
例えば、検索エンジンがそのページの内容を理解するのに役立つように、関連キーワードを追加することができます。これにより、WordPressのSEOが向上し、検索エンジンがあなたのコンテンツを探しているユーザーにそのページを表示するのに役立ちます。
この情報を入力したら、「保存してページの編集を開始」ボタンをクリックします。
ほとんどのテンプレートには、SeedProdのすべてのページレイアウトのコアコンポーネントであるいくつかのブロックが既に含まれています。
ブロックをカスタマイズするには、ページエディターでクリックして選択するだけです。
左側のツールバーに、そのブロックの設定がすべて表示されます。たとえば、下の画像では、「見出し」ブロック内のテキストを変更しています。
左側のメニューの設定を使用して、テキストの書式設定、配置の変更、リンクの追加などを行うことができます。
「詳細」タブを選択すると、さらに多くの設定にアクセスできます。たとえば、ボックスシャドウを追加したり、CSSアニメーションを追加したりすることで、ブロックを際立たせることができます。
デザインに新しいブロックを追加するには、左側のメニューでブロックを見つけて、ページにドラッグするだけです。ブロックを削除したい場合は、ブロックをクリックして選択し、ゴミ箱アイコンを使用してください。
カスタムナビゲーションメニューを作成したいので、「Nav Menu」ブロックをページにドラッグします。
これにより、デフォルトの「会社概要」項目が1つだけ含まれるナビゲーションメニューが作成されます。
SeedProdエディター内で新しいメニューを作成するか、WordPressダッシュボードで既に作成したメニューを選択できます。
以前作成したメニューを表示するには、「WordPressメニュー」ボタンをクリックします。「メニュー」ドロップダウンを開き、リストから任意のオプションを選択できます。
その後、左側のメニューの設定を使用して、フォントサイズ、テキストの配置などを変更できます。
新しいメニューをSeedProd内で作成したい場合は、「シンプル」ボタンを選択してください。
次に、「アバウト」項目をクリックして展開します。これはSeedProdによってデフォルトで作成されます。
これにより、テキストを変更したり、メニュー項目がリンクする URL を追加したりできるコントロールが開きます。
デフォルトでは、リンクは「dofollow」となり、同じブラウザウィンドウで開きます。「URLリンク」セクションのチェックボックスを使用して、これらの設定を変更できます。
次の画像では、「nofollow」リンクを作成し、新しいウィンドウで開くようにしています。このトピックの詳細については、nofollowリンクの初心者向けガイドをご覧ください。
メニューにさらに項目を追加するには、「新しい項目を追加」ボタンをクリックするだけです。
その後、上記と同じプロセスに従って、これらの各項目をカスタマイズできます。
左側のメニューには、フォントサイズとテキストの配置を変更する設定もあります。
区切り線を作成することもできます。これは、メニューの各項目の間に表示されます。
その後、「詳細設定」タブに切り替えます。ここで、メニューの色、間隔、タイポグラフィ、その他の詳細設定を変更できます。
変更を加えると、ライブプレビューが自動的に更新されるため、さまざまな設定を試して、デザインに何が適しているかを確認できます。
デフォルトでは、SeedProd はモバイルデバイスとデスクトップデバイスで同じメニューを表示します。ただし、モバイルデバイスは通常、デスクトップコンピューターと比較して画面がはるかに小さいです。
これを踏まえて、モバイルデバイスに表示するために別のメニューを作成したい場合があります。例えば、モバイルユーザーが横スクロールする必要がないように、縦長のレイアウトを使用するかもしれません。スマートフォンやタブレットデバイスで表示するリンクの数を減らしたい場合もあります。
モバイル対応のメニューを作成するには、上記と同じ手順でメニューをデザインするだけです。次に、「高度」タブを選択し、「デバイスの表示」セクションをクリックして展開します。
デスクトップで非表示にする」スライダーをオン/オフできるようになりました。
これで、SeedProd はこのメニューをモバイルユーザーにのみ表示します。
カスタムメニューの外観に満足したら、公開する準備ができました。
「保存」の横にあるドロップダウン矢印をクリックし、「公開」を選択するだけです。
これで、WordPressブログにアクセスすると、カスタムナビゲーションメニューが機能しているのがわかります。
方法3：コードを使用してWordPressでカスタムナビゲーションメニューを作成する（上級者向け）
ページビルダープラグインを設定したくない場合は、コードを使用してカスタムナビゲーションメニューを追加できます。テーマの functions.php ファイルにカスタムコードスニペットを追加する方法の説明が記載されたガイドがよく見つかります。
しかし、コードのわずかな間違いでも、一般的なWordPressのエラーが多数発生したり、サイトが完全に壊れたりする可能性があるため、この方法は推奨しません。また、WordPressテーマを更新するとカスタムコードも失われます。
そのため、WPCode の使用をお勧めします。これは、WordPress のコアファイルを編集することなく、カスタムコードを WordPress に追加する最も簡単で安全な方法です。
注意: WPCodeを使用してWordPressサイトを安全にカスタマイズする方法はたくさんあります。組み込みのコードスニペットライブラリがあり、PHP、JavaScript、CSS、HTMLなど、最も重要なWordPress言語をすべてサポートしています。プラグインの詳細については、WPCodeの完全なレビューをご覧ください。
まず、無料のWPCodeプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
有効化したら、WordPressダッシュボードのCode Snippets » Add Snippetに移動してください。
ここには、サイトに追加できる既製のスニペットがすべて表示されます。これには、コメントを完全に無効にする、WordPressが通常サポートしていないファイルタイプをアップロードする、添付ファイルページを無効にするなどのスニペットが含まれます。
カスタムスニペットを作成するには、「カスタムコードを追加（新規スニペット）」にマウスカーソルを合わせ、「+カスタムスニペットを追加」ボタンをクリックします。
次に、画面に表示されるオプションのリストからコードタイプを選択する必要があります。このチュートリアルでは、コードタイプとして「PHPスニペット」を選択してください。
カスタムスニペット作成ページに移動します。
まず、カスタムコードスニペットのタイトルを入力します。これは、WordPressダッシュボードでスニペットを識別するのに役立つものであれば何でも構いません。
それが完了したら、次のスニペットをコードエディターに貼り付けるだけです。
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
これにより、「マイカスタムメニュー」という新しいメニューロケーションがテーマに追加されます。別の名前を使用したい場合は、コードスニペットを調整するだけです。
テーマに複数のカスタムナビゲーションメニューを追加したい場合は、コードスニペットに1行追加するだけです。
例えば、ここではテーマに「My Custom Menu」と「Extra Menu」という2つの新しいメニューロケーションを追加しています。
function wpb_custom_new_menu() {
register_nav_menus(
array(
'my-custom-menu' => __( 'My Custom Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'wpb_custom_new_menu' );
その後、「挿入」オプションまでスクロールします。「自動挿入」メソッドがまだ選択されていない場合は、WPCode がスニペットをサイト全体に追加できるように、「自動挿入」メソッドを選択してください。
次に、「位置」ドロップダウンを開き、「すべてで実行」をクリックします。
次に、画面の上部までスクロールし、「非アクティブ」トグルをクリックして「アクティブ」に変更します。
最後に、「保存」をクリックしてこのスニペットを公開します。
その後、外観 » メニューに移動し、「表示位置」セクションを確認します。
新しい「マイカスタムメニュー」オプションが表示されるはずです。
これで、新しい場所にメニュー項目を追加できます。詳細については、初心者向けのナビゲーションメニューの追加方法に関するステップバイステップガイドを参照してください。
メニューに満足したら、次のステップはWordPressテーマに追加することです。
ほとんどのウェブサイトでは、ナビゲーションメニューがヘッダーセクションのすぐ下に表示されます。これは、メニューが訪問者が最初に目にするものの一つであり、サイトロゴまたはタイトルとともに表示されることを意味します。
テーマのテンプレートファイルにコードを追加することで、カスタムナビゲーションメニューを任意の場所に配置できます。
WordPressダッシュボードで、外観 » テーマファイルエディターに移動します。
右側のメニューで、メニューを追加したいテンプレートを選択します。たとえば、カスタムナビゲーションメニューをウェブサイトのヘッダーに表示したい場合は、通常header.phpファイルを選択します。
適切なテンプレートファイルを見つける方法については、WordPressテーマの編集対象ファイルの見つけ方に関するガイドをご覧ください。
ファイルを選択した後、wp_nav_menu関数を追加し、カスタムメニューの名前を指定する必要があります。
例えば、次のコードスニペットでは、テーマのヘッダーに「My Custom 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ナビゲーションメニューのスタイル設定方法。
Expert Guides: WordPress ナビゲーションメニューでさらに多くのことを行う
WordPressを使用すると、あらゆる種類の役立つ魅力的なメニューを作成できます。それを念頭に置いて、ナビゲーションメニューをさらに活用するための専門家によるガイドをいくつかご紹介します。
- WordPressでナビゲーションメニューに画像アイコンを追加する方法
- WordPress でメニューに条件付きロジックを追加する方法（ステップバイステップ）
- WordPressテーマにメニューの説明を追加する方法
- WordPressにフルスクリーンレスポンシブメニューを追加する方法
- WordPressサイトにメガメニューを追加する方法（ステップバイステップ）
この究極のガイドが、WordPressでカスタムナビゲーションメニューを追加する方法を学ぶのに役立ったことを願っています。また、WordPressヘッダーメニューにボタンを追加する方法やWordPressでメニュー項目をハイライトする方法に関するガイドも参照してください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
イジー・ヴァネック
このようなことには、まずプラグインを避けたいと思っていました。だからこそ、WP Codeとスニペットを使用するオプションも提供してくれるといつも感謝しています。まずテストサイトで試してみて、これはうまく機能しました。その後、必要に応じていつでも参照できる自分のコードストアにスニペットを保存します。ありがとう。
WPBeginnerサポート
Glad to hear you found our code snippets helpful!
管理者
マイク
コードを見せてくれてありがとう。問題があります。適用後、新しいメニューに常にメインメニューと同じコンテンツが表示されます：
wp_nav_menu( array( ‘theme_location’=>’too-right-menu’, ‘container_class’=>’top-right-class’ ) );
お願いします。
WPBeginnerサポート
テーマでアクティブになっている別のメニューと同じ名前を使用している可能性があります。まだ行っていない場合は、別の場所の名前を試してください。
管理者
Shubham Kumar
そのメニューをスティッキー（固定表示）にするにはどうすればよいですか？最初の方法、つまりコードをテーマのheader.phpに貼り付ける方法を使用しました。今、ユーザーがそのメニューの位置からスクロールした場合、その要素をスティッキーにしたいです。
Amit Singh
メニューを2つ作成しました。1つはロゴの左側、もう1つは右側です。サブメニューを追加したいのですが、親メニューの下にドラッグしているのですが、うまくいきません。カスタムサブメニューの追加方法を説明した記事はありますか？
WPBeginnerサポート
今のところはありませんが、今後の記事で必ず検討させていただきます。
管理者
Mohit
素晴らしい仕事を続けてください
WPBeginnerサポート
Glad you continue to enjoy our content
管理者
Saurabh
メニューがヘッダーに表示されません。ページタイトルの下に表示されます。
WPBeginnerサポート
コードを挿入する場所はテンプレートで変更する必要があるかもしれませんが、現在のテーマのサポートに問い合わせれば、テーマのどこにヘッダーが追加されるか教えてくれるはずです。
管理者
イアン
こんにちは
ウェブサイトのメニューページが表示されないのはなぜですか？
チュートリアルのレイアウトが私の画面と全く似ていません
ありがとう
WPBeginnerサポート
あなたのサイトはWordPress.comサイトですか？ https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
管理者
krishna
こんにちは
ヘッダーに独自のHTMLを追加したいのですが
どうすればできますか？
Mukeshwar Singh
こんにちは、Magazine Proを使用していますが、ウィジェットエリアにカスタムメニューのオプションがありません!!カスタムメニューを作成するためにあなたのコードを使用しましたが、ウィジェットエリアにカスタムメニューのオプションがないため、フッターエリアにドラッグアンドドロップできません…助けてください
Elle
こんにちは！チュートリアルを完了し、サイトの希望する場所にメニューを追加できるようになりました。スタイルもすべて整えました。問題：メニューはページリフレッシュ時に一瞬表示され、クリックすることもできます！しかし、すぐにヘッダーの後ろに消えてしまいます。消えた後はクリックできません。これを解決しようと頭が爆発しそうです！！
Furqan
こんにちは
最初にカスタムメニューという名前でアドメニューを作成し、それは完全に問題なく取得できます。その後、フッターメニューに名前を変更したところ、カスタムナビゲーションの名前が変更され、取得できなくなりました。その理由はなぜですか？
Himanshu
質問が1つあります：既存のWordPressナビゲーションバーはどうすればよいですか？削除方法は？
karima
こんにちは、友人が問題を抱えています。いくつかありますが、水平ヘッダーナビゲーションバーと、ページコンテンツを隠してしまう垂直ナビゲーションバーもあります。これはホームページでスクロールを開始すると表示されますが、すべてのコンテンツページで固定されています。誰か見てアドバイスしてもらえませんか？また、削除方法がわからないエラー通知もあります。何か助けがあれば幸いです。
sudhakar
デフォルトのスライダーをテーマから削除し、新しいスライダーモデルをホームページに追加する方法
Imran
WordPressでカスタムヘッダーを作成しましたが、メニュー項目がハードコーディングされています。ハードコーディングされたメニューの代わりにWordPressのメニューをヘッダーで使用するにはどうすればよいですか？
シェリル
WordPressはまだあまり慣れていませんが、作成したカスタムメニューを編集したいと思っています。メニュー内に何かが間違って表示されているようです。
これはどうすればいいですか？
Manu
Excellent tutorial! This was exactly what I needed right now. Within 5 minutes I was able to set up a footer menu in a theme that by default didn’t have any. Thank you so much
Munna Hossain
役立つ記事です。私はWordPressユーザーで、このヒントはカスタムナビゲーションメニューの追加に役立ちます。共有ありがとうございます。
ダニエル・キース
こんにちは、
素晴らしいチュートリアルです。このカスタムメニューにCSSを適用するにはどうすればよいですか？
これは複数のメニューを追加するのに最適な方法ですが、適切なCSSがないとウェブサイトが奇妙に見えます。
Zaheer Abbas
WordPressのテーマを作成していますが、管理画面にメニューとウィジェットが表示されません???
これはWordPressの組み込み機能ですか、それともコードでメニューとウィジェットを作成する必要がありますか？教えてください。
Tabitha
ドロップダウンメニューを列にするにはどうすればよいですか？現在のドロップダウンが長すぎます。
Aakash Salunke
私は少し上級ユーザーです。私のテーマはメニューを1つしかサポートしていませんが、もう1つメニューを追加したいです。作成しましたが、どのように追加すればよいですか？
WPBeginnerサポート
まず、メニューの場所を登録する必要があります。次に、ナビゲーションメニューを表示するためにテーマファイルを編集する必要があります。
管理者
bobit
うまくいきました、素晴らしい投稿をありがとう
Aijaz Ansari
素晴らしいチュートリアルです。私のような初心者には本当に役立ちます。
ありがとうございます
Victoria
記事をありがとうございます!!! 新しいメニューを作成しました。
しかし、問題があります。
私のウェブサイトは固定幅で、ウィンドウをリサイズしても、新しいメニューを除いてすべて元の位置にとどまります。最小幅は、私が望む動作と正確に一致しないため、選択肢ではありません。
ページ内の他のコンテンツと同じように動作させるにはどうすればよいですか?
ありがとうございます!
ジョーイ
ありがとうございます！長い間探していましたが、こんなに簡単なことだとは思いませんでした。
Cory
WP 3.0+メニューをサポートしていない、非常に古いテーマを使っています。このチュートリアルはとても簡単でした。3分で少し最新の状態にすることができました。本当にありがとうございます。
Jacques Goudreau
ヒントをありがとうございます！素晴らしいチュートリアルです！
Emma
これらの変更を行うには、どこに行けばよいですか？[テーマ]または[テーマオプション]タブの下にそれらのオプションが見つかりません。
I use the Buenos Theme, but can’t find on the Buenos theme page does it support these changes? I want to put in an Archive menu with a list of all the recipes on my blog… should be easy but proving impossible
編集スタッフ
ほとんどのテーマはこれをサポートしています。「外観」>「メニュー」をご覧ください。この記事は、テーマデザイナーがバックエンドからメニューを追加できるように、テーマにこの機能を追加したいと考えている人向けです。
管理者
ゾーイ
トップナビゲーションメニューセクションで、単一のカスタムURLにカスタムクラスを追加しようとしていますが（URL1つだけ色を変更するため）、出力ソースコードで既存のクラスの拡張としてクラスが追加されるだけで何も起こりません。
私のCSSコードと、私のサイトに出力されるソースコードはこちらです。
.myCustomClass { color: #FFFF00; }
一度限りの色付きリンク
これを機能させるための提案はありますか？
編集スタッフ
はい、color: #ffff00 !important; のようにクラスに追加してください。これでうまくいきます。
管理者
Jeremy Johnson
これらの変更を実装でき、カスタムメニューは機能しました。しかし、選択したテーマのCSSはサブメニューをサポートしていないようです。サブメニュー項目は常に表示されており、親項目にマウスを合わせても何も起こらず、親メニュー項目は子項目よりも幅が広いため、他のメニュー項目が本来あるべき位置よりも右に押しやられています。サブメニューを動的に機能させるための提案はありますか？私はCSSはかなり初心者です。
編集スタッフ
まずはデフォルトのTwenty Elevenテーマを使用するのが良いでしょう。そこからナビゲーションCSSを取得し、変更を開始してください。
管理者
Cedric
これに対する解決策を探しています。
shaunling
これは素晴らしいです！
digitfox
はい！私にとって素晴らしいチュートリアルです！WPは全くの初心者です！ありがとうございます
PauloNeves
助けが必要です。
すべての手順に従いましたが、Appearance Panel のオプションメニューが有効になりません。
他のテーマを選択すると機能します。
オプションメニューを有効にするにはどうすればよいですか？
よろしくお願いします。
Paulo Neves
wpbeginner
@PauloNeves テーマのfunctions.phpファイルに次の行を追加する必要があります： add_theme_support( ‘menus’ );
ブラッド
これ、ありがとうございます！私には素晴らしく機能し、クライアントにも大いに役立ちました！ – aptdesign
eeebasic
WordPress 3.3バージョンが数日前にリリースされたばかりですが、それは私にとって非常に役立ちます。
citydan
指示とこちらの投稿、そしてこちらの投稿（https://www.wpbeginner.com/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/）の手順に従い、メニューを正しく表示させるためのCSSを理解しましたが、子アイテム（サブメニューアイテム）が表示されません。メニューエディタでは正しく設定していますが、サイト上では表示されません。CSSで隠されているわけではなく、ページのソースコードにも存在しません。
メニューのサブ項目が表示されない理由について、何かアイデアはありますか？
GourabMalla
こんにちは、
トップナビゲーションにカスタムメニューを追加しましたが、「現在のページクラス」をアクティブにする方法を知りたいです。
WordPress 3.2を使用しています
ありがとう
Gourab
DanFlynnDesign
ありがとうございます！すべて動的で、クライアントが必要に応じて編集でき、現在のページを指定してホバー効果を適用できるのが気に入っています！まさに私が探していたものです！
asharperrazor
何度か試しました。古いWordPressテーマを使用しています。あまりにも古いので、どのバージョンのWordPress用に書かれたものかも定かではありません。とにかく、functionsの部分は機能させることができます。正しいメニューを保存できます。ウェブサイトの他の部分、例えばフッターにコードを配置することもできますが、横並びではなく階層リストとして表示されます。
トップナビゲーションメニューに表示されません。新しいテーマが必要ですか、それとも新しいメニュー機能を許可するために現在のテーマを編集することは可能ですか？
事前に感謝します。ウェブサイトは http://www.asharperrazor.com です。
JamesGeorge
問題なく実装できました。ありがとうございます！「ナビゲーションメニュー」のコードを取得し、クライアントのテーマがページのリストを呼び出していたdivに配置しました。基本的に、上記のコードで置き換え、アップロードしたところ、CSSは同じスタイルを維持しました。見た目も機能も完璧です。素晴らしい！
ÁlvaroBenavides
クラスのCSSの実装に本当に助けが必要です。完了したら通知してください！
Bec
素晴らしい投稿です – ありがとうございます！
上記のように実装しましたが、サイトにはメニュー項目が表示されるだけで、各ページが空です？！
何かアイデアはありますか？
編集スタッフ
PHPエラーのようです。PHPを検証して、エラーがないことを確認してください。
管理者
Joseph McCullough
クイック＆ダーティ – コードスニペットはこうあってほしい。どうもありがとう。
ポール
カスタムナビゲーションメニューを何度か作成しました。奇妙なのは、作成して保存した後、しばらく表示されるのですが、その後、設定が自動的に上書きされたかのように、ナビゲーションバーが2つのタブのみに戻ってしまうことです。同じテンプレートのサイトで、カスタムバーを作成したことがないサイトでは正しく表示されます。
何かアイデアはありますか？
編集スタッフ
いいえ、なぜそうなるのか全く分かりません。
管理者
Narendra Choudhary
ナビゲーションごとにカスタムクラスを定義し、背景に画像を追加できます。必要であれば、CSS（text-indent）プロパティを使用してメニューテキストを削除することもできます。
返信
Ram
ナビゲーションメニューについて質問があります。
ナビゲーションメニューのリストに画像を追加する方法はありますか？
ありがとうございます、
Ram
編集スタッフ
各ナビゲーションにカスタムクラスを定義し、背景に画像を追加できます。CSSのtext-indentプロパティを使用して、メニューテキストを削除することもできます。
管理者
Ram
thanks for your response but i need more clearly that custom menu image for the wordpress.
Im using wp_list_categories(‘exclude=4,7&title_li=’); to show the navigational menu so is it any possibility to add the different images to the different menu button. Im trying the CSS but it never works for me
ありがとうございます、
Ram
編集スタッフ
はい、カスタムメニューで異なる画像を追加することは可能です。あなたが使用しているのは、この記事で話しているメニューではありません。
Julie @ Inspired to Write
コードを追加して、より見栄えを良くすることはできますか（フォント、ボタン、サイズなど）？もしそうなら、例とコードの場所を教えていただけますか？よろしくお願いします！
編集スタッフ
これはCSS関連の質問です。CSSファイル内の適切なクラスにフォントサイズを追加する必要があります。近日中にCSSスタイルに関する記事を公開する予定です。
管理者
Chris
メニューの取り扱いに関する質問です。
右揃えのメニューがあり、メニュー項目が逆順で表示されます。
menu_orderを逆順に並べ替える方法はありますか？
so: sort_column’ => ‘menu_order’ は、順序を反転させるために何かを追加することになります。
ありがとうございます！
編集スタッフ
右揃えになっているからといって、逆順に表示されるべきではありません。それを修正するには、フックを逆にすることではなく、CSSを変更する必要があります。右揃えのコンテナdivを作成し、リストタグを左にフロートさせます。
管理者
Julie
指示に従いましたが、メニューを作成し、使用する適切なカテゴリを追加した後、ナビゲーションバーに表示されません。私が間違ってしまったことはありますか？
編集スタッフ
コードを header.php またはメニューを表示したい場所に貼り付けましたか？
管理者