ときどき、素晴らしいテーマを見つけることがありますが、重要なリンクやよく使うリンクを含む追加のナビゲーション メニューがあれば、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 ファイルを探し、それを一度クリックして、ページの上部にある編集ボタンをクリックします。
ファイルの一番下までスクロールします。 メニューを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と名付けました。 これを変更することができますが、調整を反映するためにこのコードを更新してください。
保存ボタンを押し、ダッシュボードの外観 > メニューに移動してください。 新しいメニューは、メニュー設定のセクションのテーマの場所の下に表示されることがわかります。
これで、新しいメニュー場所が表示されることが確認できます。
新しく作ったメニューの場所にリンクを表示させるには、ページの一番上にある［新しいメニューを作成］をクリックします。
まだメニューを持っていない場合は、ページ上のフィールドにメニュー名を入力し、［メニューを作成する］をクリックします。
新しいメニューを作成したら、「場所の管理」タブで表示場所を管理することもできます。
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」を参照してください。
Tags:
- メニュー
- ナビ