WPBeginnerでは、数え切れないほどの読者がWordPressサイトをカスタマイズして、ユーザーエクスペリエンスを向上させ、ブランディングを強化し、コンバージョンを促進するのを支援してきました。そして、適切に行われた場合、ユニークなナビゲーションメニューはエンゲージメントを高め、人々をより長くサイトに滞在させるのに役立つことを私たちは見てきました。
問題は、すべての WordPress テーマにナビゲーションメニューを表示できる設定済みの場所があるため、これを変更するのは難しいということです。これは特に初心者にとっては、テーマファイルを変更するのは繊細なプロセスであるため、当てはまります。
ブロックテーマを使用している場合、フルサイトエディターでこれを行うことができます。しかし、私たちの経験では、すべてのテーマタイプで機能するより良いオプションがあります。
例えば、高度なカスタマイズを行いたい場合は、SeedProd のような強力なページビルダーを使用できます。または、カスタムコードを簡単に使用する方法を探している場合は、WPCode が断然最良の選択肢です。
この記事では、WordPressテーマの任意の領域にカスタムナビゲーションメニューを追加する方法をご紹介します。3つの異なるオプションを順を追って説明しますので、ご自身のニーズに合ったチュートリアルを選択できます。
WordPressテーマにカスタムナビゲーションメニューを追加する理由
ナビゲーションメニューは、ウェブサイトの重要なエリアを指すリンクのリストです。これにより、訪問者は興味のあるコンテンツを簡単に見つけることができ、WordPressでのページビューを増やし、直帰率を減らすことができます。
メニューの正確な場所は、WordPressテーマによって異なります。ほとんどのテーマにはいくつかのオプションがあるため、異なるメニューを作成して異なる場所に表示できます。
現在のWordPressテーマでメニューを表示できる場所を確認するには、外観 » メニューに移動し、「表示位置」セクションを確認してください。
次の画像は、Astra WordPressテーマでサポートされている場所を示しています。
テーマで「表示場所」としてリストされていない領域にメニューを表示したい場合があります。
これを踏まえて、WordPressテーマの任意の場所にカスタムナビゲーションメニューを追加する方法を見ていきましょう。お好みの方法にジャンプするには、以下のクイックリンクを使用してください。
方法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ナビゲーションメニューのスタイル設定方法に関するガイドをご覧ください。
Expert Guides: WordPress ナビゲーションメニューでさらに多くのことを行う
WordPressを使用すると、あらゆる種類の役立つ魅力的なメニューを作成できます。それを念頭に置いて、ナビゲーションメニューをさらに活用するための専門家によるガイドをいくつかご紹介します。
- WordPressでナビゲーションメニューに画像アイコンを追加する方法
- WordPress でメニューに条件付きロジックを追加する方法（ステップバイステップ）
- WordPressテーマにメニューの説明を追加する方法
- WordPressにフルスクリーンレスポンシブメニューを追加する方法
- WordPressサイトにメガメニューを追加する方法（ステップバイステップ）
この究極のガイドがお役に立ち、WordPressでカスタムナビゲーションメニューを追加する方法を学べたことを願っています。また、WordPressのヘッダーメニューにボタンを追加する方法やWordPressでメニュー項目をハイライトする方法に関するガイドもご覧ください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
イムラン
WordPressでカスタムヘッダーを作成しましたが、メニュー項目がハードコーディングされています。ハードコーディングされたメニューの代わりにWordPressのメニューをヘッダーで使用するにはどうすればよいですか？
シェリル
WordPressはまだあまり慣れていませんが、作成したカスタムメニューを編集したいと思っています。メニュー内に何かが間違って表示されているようです。
これはどうすればいいですか？
マヌ
素晴らしいチュートリアルです！まさに今必要としていたものでした。わずか5分で、デフォルトでは何も持っていなかったテーマにフッターメニューを設定することができました。本当にありがとうございます
ムンナ・ホサイン
役立つ記事です。私はWordPressユーザーで、このヒントはカスタムナビゲーションメニューの追加に役立ちます。共有ありがとうございます。
ダニエル・キース
こんにちは、
素晴らしいチュートリアルです。このカスタムメニューにCSSを適用するにはどうすればよいですか？
これは複数のメニューを追加するのに最適な方法ですが、適切なCSSがないとウェブサイトが奇妙に見えます。
Zaheer Abbas
WordPressのテーマを作成していますが、管理画面にメニューとウィジェットが表示されません???
これはWordPressの組み込み機能ですか、それともコードでメニューとウィジェットを作成する必要がありますか？教えてください。
Tabitha
ドロップダウンメニューを列にするにはどうすればよいですか？現在のドロップダウンが長すぎます。
Aakash Salunke
私は少し上級ユーザーです。私のテーマはメニューを1つしかサポートしていませんが、もう1つメニューを追加したいです。作成しましたが、どのように追加すればよいですか？
WPBeginnerサポート
まず、メニューの場所を登録する必要があります。次に、ナビゲーションメニューを表示するためにテーマファイルを編集する必要があります。
管理者
bobit
うまくいきました、素晴らしい投稿をありがとう
Aijaz Ansari
素晴らしいチュートリアルです。私のような初心者には本当に役立ちます。
ありがとうございます
Victoria
記事をありがとうございます!!! 新しいメニューを作成しました。
しかし、問題があります。
私のウェブサイトは固定幅で、ウィンドウをリサイズしても、新しいメニューを除いてすべて元の位置にとどまります。最小幅は、私が望む動作と正確に一致しないため、選択肢ではありません。
ページ内の他のコンテンツと同じように動作させるにはどうすればよいですか?
ありがとうございます!
ジョーイ
ありがとうございます！長い間探していましたが、こんなに簡単なことだとは思いませんでした。
コーリー
WP 3.0+メニューをサポートしていない、非常に古いテーマを使っています。このチュートリアルはとても簡単でした。3分で少し最新の状態にすることができました。本当にありがとうございます。
Jacques Goudreau
ヒントをありがとうございます！素晴らしいチュートリアルです！
エマ
これらの変更を行うには、どこに行けばよいですか？[テーマ]または[テーマオプション]タブの下にそれらのオプションが見つかりません。
Buenosテーマを使用していますが、Buenosテーマのページでこれらの変更をサポートしているか見つけられません。アーカイブメニューにブログのすべてのレシピのリストを入れたいのですが…簡単であるはずなのに不可能です
編集スタッフ
ほとんどのテーマはこれをサポートしています。「外観」>「メニュー」をご覧ください。この記事は、テーマデザイナーがバックエンドからメニューを追加できるように、テーマにこの機能を追加したいと考えている人向けです。
管理者
ゾーイ
トップナビゲーションメニューセクションで、単一のカスタムURLにカスタムクラスを追加しようとしていますが（URL1つだけ色を変更するため）、出力ソースコードで既存のクラスの拡張としてクラスが追加されるだけで何も起こりません。
私のCSSコードと、私のサイトに出力されるソースコードはこちらです。
.myCustomClass { color: #FFFF00; }
一度限りの色付きリンク
これを機能させるための提案はありますか？
編集スタッフ
はい、color: #ffff00 !important; のようにクラスに追加してください。これでうまくいきます。
管理者
ジェレミー・ジョンソン
これらの変更を実装でき、カスタムメニューは機能しました。しかし、選択したテーマのCSSはサブメニューをサポートしていないようです。サブメニュー項目は常に表示されており、親項目にマウスを合わせても何も起こらず、親メニュー項目は子項目よりも幅が広いため、他のメニュー項目が本来あるべき位置よりも右に押しやられています。サブメニューを動的に機能させるための提案はありますか？私はCSSはかなり初心者です。
編集スタッフ
まずはデフォルトのTwenty Elevenテーマを使用するのが良いでしょう。そこからナビゲーションCSSを取得し、変更を開始してください。
管理者
セドリック
これに対する解決策を探しています。
ショーンリン
これは素晴らしいです！
デジトフォックス
はい！私にとって素晴らしいチュートリアルです！WPは全くの初心者です！ありがとうございます
PauloNeves
助けが必要です。
すべての手順に従いましたが、Appearance Panel のオプションメニューが有効になりません。
他のテーマを選択すると機能します。
オプションメニューを有効にするにはどうすればよいですか？
よろしくお願いします。
Paulo Neves
wpbeginner
@PauloNeves テーマのfunctions.phpファイルに次の行を追加する必要があります： add_theme_support( ‘menus’ );
ブラッド
これ、ありがとうございます！私には素晴らしく機能し、クライアントにも大いに役立ちました！ – aptdesign
eeebasic
WordPress 3.3バージョンが数日前にリリースされたばかりですが、それは私にとって非常に役立ちます。
citydan
指示とこの投稿、そしてここの投稿（https://014.leahstevensyj.workers.dev/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
ご返信ありがとうございます。しかし、WordPressのカスタムメニュー画像について、もっと明確に説明していただけますでしょうか。
ナビゲーションメニューを表示するためにwp_list_categories（‘exclude=4,7&title_li=’）を使用していますが、異なるメニューボタンに異なる画像を追加する可能性はありますか。CSSを試しましたが、うまくいきません
ありがとうございます、
Ram
編集スタッフ
はい、カスタムメニューで異なる画像を追加することは可能です。あなたが使用しているのは、この記事で話しているメニューではありません。
Julie @ Inspired to Write
コードを追加して、より見栄えを良くすることはできますか（フォント、ボタン、サイズなど）？もしそうなら、例とコードの場所を教えていただけますか？よろしくお願いします！
編集スタッフ
これはCSS関連の質問です。CSSファイル内の適切なクラスにフォントサイズを追加する必要があります。近日中にCSSスタイルに関する記事を公開する予定です。
管理者
クリス
メニューの取り扱いに関する質問です。
右揃えのメニューがあり、メニュー項目が逆順で表示されます。
menu_orderを逆順に並べ替える方法はありますか？
so: sort_column’ => ‘menu_order’ は、順序を反転させるために何かを追加することになります。
ありがとうございます！
編集スタッフ
右揃えになっているからといって、逆順に表示されるべきではありません。それを修正するには、フックを逆にすることではなく、CSSを変更する必要があります。右揃えのコンテナdivを作成し、リストタグを左にフロートさせます。
管理者
ジュリー
指示に従いましたが、メニューを作成し、使用する適切なカテゴリを追加した後、ナビゲーションバーに表示されません。私が間違ってしまったことはありますか？
編集スタッフ
コードを header.php またはメニューを表示したい場所に貼り付けましたか？
管理者
ダン
メニューを使用するには、functions.phpファイルにこれも追加する必要があります
register_nav_menus( array( 'primary' => __( 'メインナビゲーション', 'twentyten' ), ) );
編集スタッフ
無料テーマをリリースする際には確かに必要なものですが、カスタムテーマの場合は必要に応じてすべて異なります。場所を登録する必要がない場合もあります。
管理者
うーん
全く理解できません…このコード（add_theme_support( ‘menus’ );）をfunctions.phpファイルにどこに挿入すればよいか、もっと明確にしてもらえますか？
全く迷っています
編集スタッフ
PHPタグのどこかです。PHPの経験がない場合は、専門家を雇うことをお勧めします。
管理者
BanyanTree
初心者向けのの記事を書くのであれば、簡単な質問に答えるべきです。そうでなければ、ビジネスを推進するために広告に費用をかけ、見せかけはやめましょう。
wpbeginner
@BanyanTree functions.php ファイルにコードを追加するのは、それほど難しくありません。PHP タグ内に貼り付けます。このような記事を書いています。https://014.leahstevensyj.workers.dev/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/ しかし、すべての記事からその 1 つの記事にリンクすることは不可能です。誰かが CSS の背景を変更する方法を尋ねて、CSS プロパティに background: #000 や別の 16 進コードを追加すると言った場合、それは十分な助けになります。次に、CSS ファイルのどこに貼り付けるかを尋ねられた場合、それは事前に知っておく必要があることです。このサイトは PHP for Dummies サイトでも CSS for Dummies サイトでもありません。私たちはできるだけ多くの人々を無料で助けるために最善を尽くしています。
BanyanTree
@wpbeginner @BanyanTree 記事にリンクする必要はありません。誰もそれを求めていませんでした。彼の質問に答える3つの単語は「最後に」であり、皮肉なコメントよりも入力が簡単です。サイトの名前が「wpbeginner」であることを覚えておいてください。もしあなたがそのオーディエンスを求めているなら、それに合わせてください。
wpbeginner
@f1mktsol はい、サイトは当初想定していたオーディエンスを超えて成長しました。このサイトは進化しました。だからこそカテゴリがあるのです…「初心者」という言葉は相対的な尺度で使用されています。
初心者ガイドカテゴリの単なるユーザーである「超初心者」向けのの記事があります…また、WordPressプラグインカテゴリにも、その読者層に合わせた記事があります。WPテーマカテゴリにいる場合、記事は初心者テーマ開発者向けに書かれています。彼らは開発者分野の初心者です。チュートリアルも同様です。
これで説明できたことを願っています。
f1mktsol
@wpbeginner 名前が手に余るようになった場合は、好むオーディエンスに合わせて変更する必要があります。専門家に相談することを検討してください。
Skubeedoo
add_theme_support( ‘menus’ );
を追加しましたが、管理画面にオプションが表示されませんでした。[どこを見ればいいですか？] intrepidity テーマを使用しています。初心者なので、目の前にあるのに気づいていないだけかもしれません。ウェブサイトの中にWPがあり、WPからメインURLに戻れるようにナビゲートしたいのです。「ホーム」ナビゲーションリンクがあれば十分です。
よろしくお願いします。
編集スタッフ
外観タブの下に表示されるはずです。
管理者
ianarosh
友よ、君のサイトは素晴らしいし、見つけられて嬉しいよ！
カスタムメニューの追加方法を理解しようと頭を抱えていたけど、これを見て簡単だとわかった！本当にすごい。
ブログ/サーバーのセキュリティに関する投稿を作成する際に、これまで検討されたことのある提案はありますか？（すでにさらに探求する必要があったかどうかはわかりません :O）
敬具、そして良い仕事を続けてください！
編集スタッフ
検索してください。すでにその件に関する投稿があります。
管理者
Charles
functions.phpファイルで複数のメニューのサポートを追加する方法を教えていただけますか？ 2セットのメニューを含めたいです。
編集スタッフ
2つの functions.php を持つ必要はありません…メイン関数を呼び出すだけです。wp-admin のユーザーインターフェイスを使用して複数のメニューを作成します。その後、php コードでメニューを呼び出す必要があります。
管理者
ジェイミー
お知らせですが、以下の通りです。
“add_theme_support( ‘nav-menus’ );”
最終リリースで変更されました：
“add_theme_support( ‘menus’ );”
ありがとう！
Peter Luit
@Jamie: 最新のコメントありがとうございます！
編集スタッフ
ありがとうジェイミー、投稿を修正しました
管理者
ジェイコブ
素晴らしい。まさに探していたものです。メニューのスラッグを関数に追加するにはどうすればよいですか？
編集スタッフ
‘メニュー’ => ‘プロジェクトナビゲーション’ のように <<
管理者
クリス・クリード
これについてありがとうございます。現在、新しいメニューシステムを試しています。これは、物事をはるかに簡単にすることができる素晴らしい追加機能です。私はテーマを開発しており、サイトにカスタムナビゲーションセクションを作成したいという人々からかなりのサポートリクエストを受け取っています。新しいメニューは、特にWordPressの経験が少ない人々にとって、物事を大幅に単純化するのに役立つはずです。
Gopal Bhattacharjee
WordPress 3.0 Beta もテスト中です。これでメニューで遊べます…ありがとうございます！
アンジー
WP 3.0ベータ版でナビゲーションメニューからHOMEを削除する方法を知りたいのですが。wp_nav_menu関数を編集すべきですか、それとも何か他の方法がありますか？
関数を編集する場合、手順を教えていただけますか？
編集スタッフ
他のナビゲーションリンクと同じように、削除をクリックするだけです。
管理者
ケビン
メニュービルダー内で「ホーム」ページをメニューに追加する方法がないのは残念です。これは大きな欠陥です。
編集スタッフ
なぜダメなのですか？「ホーム」というカスタムナビゲーションリンクを作成し、そこにホームページのURLを追加することができます。
管理者
ヌール
WordPress 3.0 Betaもテストしていますが、メニューにいくつか悪い点を見つけました。例えば、一貫性がなく、最終リリースまでには一貫性が保たれることを願っています。
ミシェル
素晴らしいチュートリアルです！共有ありがとうございます！
Mani Viswanathan
まずは良いチュートリアルです！3.0にアップグレードする際に役立ちます