How to Add More Navigation Menus to Your WordPress Theme

ときどき、素晴らしいテーマを見つけることがありますが、重要なリンクやよく使うリンクを含む追加のナビゲーション メニューがあれば、WordPress サイトの使いやすさが向上することに気づくかもしれません。

コードをいじくりまわしたくない場合は、重い作業を代行し、スタイル設定オプションを提供する多くのプラグインがあります。

どのオプションを選択しても、以下のガイドがそれを実現するのに役立ちます。 コアファイルのいずれかに変更を加える前に、途中で何か問題が発生した場合に備えて、サイト全体をバックアップすることをお勧めします。 FTP を介して、または独自の Snapshot などのプラグインを使用して、サイトを手動でバックアップすることができます。 ただ、バックアップを失うリスクを最小限にするために、データベースとファイルのコピーをサイトとは別の場所に保存するようにしてください。

子テーマを作成するために必要な詳細は、「WordPress の子テーマを作成する方法」と「WordPress で子テーマを自動的に作成する方法」を参照してください。

WordPress のローカル インストールを作成する方法の詳細については、これらの投稿を参照してください。

  • MAMPでWordPressをローカル開発する方法
  • PC/WindowsにXAMPPとWordPressをローカルインストールする方法
  • DesktopServerで5分以内にWordPressをローカルにセットアップする方法The Quick and Easy Guide to Migrating a Local WordPress Installation to Live Site
  • How to Move WordPress for Local Development with XAMPP

これらのオプションのいずれかをセットアップしたら、そのオプションを使用することができます。 ナビゲーションメニューの作成に取りかかることができます。 ただし、プラグインやテーマ フレームワークを使用することに決めた場合は、子テーマを作成する必要はありません。

Creating New Menus

管理ダッシュボードの [外観] > メニューに選択式のメニュー位置オプションを追加するには、いわゆる「メニュー登録」を実行する必要があります。 これは、wp-content > themes > your-theme.

にある functions.php ファイルにコードの断片を追加するだけです。cPanel で、ホームページの Files セクションにある File Manager アイコンをクリックします。

あなたの /wp-includes/ フォルダに functions.php ファイルがありますが、あなたが編集する必要があるのはこのファイルではありません。 使用しているテーマにあるfunctions.phpファイルを探すようにしてください。 そうでなければ、後で見つかったコードを追加しようとしたときにエラーになってしまいます。

あなたの functions.php ファイルを探し、それを一度クリックして、ページの上部にある編集ボタンをクリックします。

cPanel で直接あなたのテーマの functions.php ファイルを編集できます。 以前に無効にした場合は表示されないことがあります。

ファイルの一番下までスクロールします。 メニューを1つだけ追加したい場合は、次のコードを新しい行に追加します。

function register_my_menu() {register_nav_menu('new-menu',__( 'New Menu' ));}add_action( 'init', 'register_my_menu' );

この例では、New Menuは管理ダッシュボードのメニューページに表示される名前で、人間の目に分かりやすくするためのものです。 new-menu の名前は、WordPress がコードを正しく実行するために理解するものです。

メニューの名前は何でもかまいませんが、人間が読みやすい名前だけがスペースと大文字を含んでいることを確認してください。

ファイルに行った変更を保存します。

Adding Menu Locations to Your Theme

ここで、メニューを配置する場所を決定する必要があります。 メニューをページの一番上に表示させたい場合は、header.php ファイルを編集する必要があります。

また、テンプレートファイルを編集することによって、フッターにメニューを表示することもできますし、サイドバーには、sidebar.phpファイルを編集してメニューを表示します。

<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>

new-menuをあなたが選んだWordPressの読みやすい名前に置き換えるだけで、これらの場所に追加する必要がある最小限のコードは次のとおりです。 基本的な機能だけでなく、見栄えも良くするために、CSSでメニューをスタイル付けしたいと思うかもしれません。 これを行うには、クラスを作成し、次のコードでテーマに追加する必要があります。

<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>

前と同じように、new-menu を選択した名前で置き換えてください。 この例では、作成したクラスをnew_menu_classと名付けました。 これを変更することができますが、調整を反映するためにこのコードを更新してください。

保存ボタンを押し、ダッシュボードの外観 > メニューに移動してください。 新しいメニューは、メニュー設定のセクションのテーマの場所の下に表示されることがわかります。

メニュー設定に表示される新しい登録メニュー項目

これで、新しいメニュー場所が表示されることが確認できます。

新しく作ったメニューの場所にリンクを表示させるには、ページの一番上にある[新しいメニューを作成]をクリックします。

create a new menu linkをクリックするか、メニューの新しい名前を入力します。

まだメニューを持っていない場合は、ページ上のフィールドにメニュー名を入力し、[メニューを作成する]をクリックします。

新しいメニューを作成したら、「場所の管理」タブで表示場所を管理することもできます。

Styling, Plugins and Responsive Menus

新しいメニューは、CSS を使用してスタイルを設定する準備ができました。 必要なコーディングは使用しているテーマによって異なるため、この記事では説明しませんが、「WordPress テーマに素晴らしいレスポンシブ メニューを作成する方法」という別の記事がありますので、そちらを参照してください。 また、モバイル対応のレスポンシブ メニューを作成する方法も紹介しています。

より簡単なオプションをご希望の場合は、テーマのスタイルに基づいてレスポンシブ メニューを作成する多くのプラグインがあります。 私が見つけた最高のものの 1 つは Responsive Menu です。

また、ShiftNav、WP Responsive Menu、および Max Mega Menu も参考になると思われる注目すべき言及があります。 自分でコーディングするか、プラグインやテーマ フレームワークを使用するかどうかにかかわらず、WordPress サイトに新しいメニューが追加されました。 このような場合、専門家のアドバイスとサポートがあれば、どんな問題でも解決できます。

新しいテーマをどのようにスタイルするかについての詳細については、多くのリソースをチェックアウトすることができ、それらはすべて私たちの記事「A Mega Guide to Learning and Referencing CSS for WordPress」で見つけることができます。

また、テーマの CSS をコーディングするための詳細については、「WordPress の CSS を学ぶためのシンプルなヒント 10」、「WordPress の CSS コーディングをきれいにするためのエキスパートによるヒント 25」、「CSS ワークフローの改善のためのプロのヒント 25」および「WordPress サイトのライブ編集のための無料の CSS プラグイン 5」を参照してください。

無料動画Why 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch)Google PageSpeed Insightsを使って現実的な目標を設定し、サイトスピードを改善する方法と、なぜ100点満点を目指すことが間違った目標であるのかを学びます。

Tags:

  • メニュー
  • ナビ

コメントを残す

メールアドレスが公開されることはありません。