WordPressでカスタムメニュー構造を作成する方法
公開: 2015-07-22WordPressには、メニューを作成する自動組み込みナビゲーション構造があります。 ページとカテゴリが含まれます。 カテゴリ内にページや投稿を作成する以外に何もしなくても、メインメニューに配置されます。 これは、ページとカテゴリが数個しかない場合に最適ですが、しばらくすると手に負えなくなる可能性があります。 また、ナビゲーションを自動的に処理できるからといって、それを許可する必要があるわけではありません。
WordPressは、ユーザーからの入力なしで自動的にメニューを処理しますが、メニュー構造を最大限に活用したい場合は、独自のカスタムメニューを作成できます。 カスタムメニューを使用すると、ナビゲーション構造を完全に制御でき、サイトをよりクリーンでプロフェッショナルな外観にすることができます。
メニューの種類
メニューにはいくつかの種類があります。 使用できるメニュータイプは、テーマの機能によって異なります。 人気のメニュータイプは次のとおりです。
- プライマリメニュー–これはヘッダーの下に表示されます。 それはあなたが持っているウェブサイトのタイプに基づいてあなたの訪問者が期待するあなたのメインナビゲーションとページを含むべきです：ホーム、アバウト、コンタクト、ブログ、ポートフォリオなど。
- セカンダリメニュー–これはヘッダーの上に表示されます。 これには、読者に便利な場所に提供したいリンクとページを含める必要がありますが、必ずしもメインのナビゲーション構造に含める必要はありません。 これは、チュートリアル、ショッピングカートなどのアイテムにすることができます。
- サイドバー–カスタムメニューウィジェットを使用して、カスタムメニューをサイドバーに配置できます。 ウィジェットはいくつでも使用でき、メニューを配置できます。
- フッター–フッター専用のメニューを作成できます。 このメニューには通常、プライマリメニューよりも少ない情報が含まれています。 サイトのニーズに応じて、通常、自宅、概要、連絡先、ブログなどが含まれます。サイトに求人情報、アフィリエイトプログラム、姉妹サイトが含まれている場合は、それらもここに含めることができます。
- ソーシャルリンクメニュー–これは、ソーシャルメディアリンクをサイドバーに配置するTwentyFifteenなどのテーマにある特別なメニューです。 テーマがソーシャルネットワークを認識する場合、適切なアイコンが表示されます。 そうでない場合は、名前がテキストとして表示されます（リンクのラベル付け方法に応じて）。
プライマリメニューとセカンダリメニューは、WordPressテーマの中で最も人気があります。 それらに何が入るかは、実際にはサイトの焦点によって異なります。 サイトの主な焦点がメインメニューに表示されます。 それはあなたの訪問者にとって意味があり、彼らが期待するものでなければなりません。
たとえば、店舗がある場合は、ショッピングカートをメインメニューに配置する必要があります。 ポートフォリオサイトを持っていて、いくつかのものも販売している場合は、ポートフォリオをプライマリメニューに、ショッピングカートをセカンダリメニューに配置する必要があります。 論理的にどこに収まるかを考え、それに応じて配置します。
独自のカスタムメニューの作成
WordPressを使用すると、独自のカスタムメニューを手動で簡単に作成できます。 バックエンドからメニューを作成、調整、および適用できます。また、フロントエンドからメニューを選択して表示し、ライブに移行する前にテストすることができます。
バックエンドからのメニューの作成
バックエンドで、[外観]に移動し、[メニュー]を選択します。 フロントエンドで[カスタマイズ]に移動し、[ナビゲーション]を選択します。
メニュー画面で、[新しいメニューの作成]を選択し、メニューに名前を付けて、[メニューの作成]ボタンをクリックします。
これで、ナビゲーション構造の追加を開始する準備が整いました。 左側には、ページ、カスタムリンク、およびカテゴリのボックスがあります。 これらすべてをカスタムメニューのリンクとして使用できます。 真ん中にはいくつかのオプションがあります。 すべての新しいページをメニュー構造に自動的に追加できるようにするか、より詳細に制御してページとカテゴリを自分で選択する場合は、これをオフのままにしておくことができます。
ページ
まだ開いていない場合は、左側のウィンドウで[ページ]タブを選択します。 メニューにページを追加するには、必要なすべてのページを選択して、[メニューに追加]をクリックします。
別の方法で配置したい場合は、移動するメニュー項目を新しい場所にドラッグアンドドロップするだけです。 サブアイテムにしたいアイテムの右下にドラッグアンドドロップすることで、別のメニューアイテムのサブアイテムにすることもできます。
右側の矢印を選択してアイテムを開き、名前や場所を変更するなどの調整を行うことができます。 ここでメニュー構造からアイテムを削除することもできます。
カスタムリンク
カスタムリンクを追加するには、左側のウィンドウで[カスタムリンク]を開き、必要なURLを追加して、[メニューに追加]を選択します。 必要な種類のリンクを作成して、メニュー構造の一部にすることができます。 これは、ソーシャルリンクメニューのリンクを作成する方法でもあります。
次に、メニュー構造内の目的の場所にドラッグアンドドロップできます。
カテゴリ
左側のウィンドウでページを選択して追加するのと同じ方法で、カテゴリを選択して追加します。 これらは、ページやリンクがメニューで行うのと同じように機能します。
メニューを保存する
新しいメニュー構造が気に入ったら、それを保存して使用できます。
場所の管理
バックエンドからメニューを使用する方法は2つあります。
メニュー設定
メニューを作成した画面の[メニュー設定]の下にチェックボックスのグループがあります。 任意のメニューを選択してから、それを使用する場所を選択できます。 いくつでも選択できます。 保存することを忘れないでください。
場所の管理
[場所の管理]タブを選択します。 ここで、ドロップダウンボックスのどこでどのメニューを使用するかを選択できます。 それらすべてを使用する必要はありません。 保存を押すだけでどのメニューを使用するかを選択し、メニュー構造を更新しました。
ウィジェット
WordPressには、サイドバーにドラッグアンドドロップできるカスタムメニューウィジェットもあります。 ここからメニューを選択できます。
テスト
これが私のテストメニューとサイドバーウィジェットの外観です。 次に行うことは、各アイテムをテストして、スムーズかつ直感的に機能することを確認することです。 このステップを忘れないでください。 メニューをテストして、意図したとおりに機能するかどうかを確認することが非常に重要です。 明らかに、これらはあなたがあなたのウェブサイトで使うべきメニュータイトルではありません。
WYSIWYGビューにフロントエンドを使用する
フロントエンドからメニュー構造を変更するには、[外観]に移動して[カスタマイズ]を選択します。 フロントエンドに到達したら、ナビゲーションを選択します。 ここからメニューを選択できます。 このビューの利点は、変更を保存する直前に変更を確認できることです。 このようにして、コミットする前にそれが好きかどうかを判断できます。 残念ながら、このシステムでは作成できません。
Diviのようなテーマでルックアンドフィールをカスタマイズする
エレガントテーマのDivi2.4などの一部のテーマにはツールが用意されているため、フロントエンドからメニューのルックアンドフィールを調整して、その影響をすぐに確認できます。 このようにして、保存する前に訪問者に何が表示されるかを知ることができます。
Diviのメニュー調整を見てみましょう。 これらと同じ調整を行って、各メニュー項目のルックアンドフィールを変更できます。
さらにカスタマイズ–プラグインを使用してメニューを変更する
WordPressで利用できるプラグインはたくさんあり、新しい機能、外観、機能でカスタムメニューを変更するのに役立ちます。 それらは多くのCSS調整を追加し、それらを応答性にし、さらにそれらをより速くします。 最も人気のあるプラグインのいくつかを見てみましょう。
カスタムメニューウィザードウィジェット
この無料のプラグインは、サイドバーまたはショートコードを使用してコンテンツで使用できるカスタムメニューウィジェットを追加します。 メニューパラメータを完全に制御でき、カスタムメニューの特定の部分を使用できます。 また、いくつかのカスタムクラスを追加します。
メニューの特定の部分またはメニュー全体を表示できます。 出力を条件付きにすることもできます。 指定したレベル数に応じて、フラットまたは階層として表示されます。 HTMLで出力を変更することもできます。
ウィジェットの設定は使いやすいです。 ドロップダウンボックスからメニューを選択し、フィルター、フォールバック、出力、コンテナー、クラス、リンク、および代替を選択します（これは別のレベルの条件です）。 また、メニューをコンテンツに貼り付けることができるように、ショートコードも提供します。
Nextendアコーディオンメニュー
このプラグインを使用すると、メニューレベル、色、アニメーションなどを完全に制御できるアコーディオンスタイルのメニューを作成でき、それぞれに独自の設定とスキンがあります。 フォント、背景、色、画像などのレベルと状態を制御できます。キャッシュを使用してメニューシステムを高速化し、さまざまな種類のアニメーションを提供し、メニューのレベルを無制限にし、30の設定を提供します。
アコーディオンメニューのしくみが好きです。 使用したいときに展開し、非表示にして、画面に表示したくないときにレイアウトをすっきりさせることができます。 プラグインは使いやすく、セットアップも簡単です。 カスタムコンテンツタイプと同じようにメニューを作成します。 次に、ウィジェットをサイドバーにドラッグして、ウィジェット内からメニューを選択できます。
3つのテーマとサポートを追加したProエディションもあります。 価格は29ドルから。
レスポンシブメニュー
この無料のプラグインには、メニューの外観、感触、動作を調整するための70のオプションがあります。 タイトル、CSS、アクション、サイズ、アニメーション、スクリプトなどを調整できます。 モバイルデバイスに最適で、メニューを片側から引き出してメニューの場所を設定する機能があります。 メニューのCSSとJavaScriptも縮小されます。 カスタムHTMLを追加し、設定をインポート/エクスポートすることもできます。
設定には多くの調整がありますが、それらはすべて理解して調整するのが簡単です。 高度なレベルの設定もありますが、必要に応じて無視してかまいません。 ショートコードが含まれており、必要に応じてPHPコードをテーマに追加することもできます。
メニューを変更する他のプラグイン
これが私が面白いと思った他のプラグインのリストです。 メニューの機能を追加または変更し、さまざまな方法でそれらを制御できます。
- WordPressメガメニュー
- CSS3メガドロップダウンメニュー
- WPレスポンシブメニュー
- FontAwesome4メニュー
- メニューのショートコード
- より速い外観–メニュー
- フード＆ドリンクメニュー
- シンプルな小売メニュー
- WordPressメニューを浄化する
- ウィジェットメグナイザー
優れたメニュー構造を作成するためのヒント
- メニューを使用して、ナビゲーション構造を整理します。
- できるだけ少ないレベルを使用してください。 一次と二次の観点から考えてください。
- コードを解読しなくても、読者にとって意味のある名前を使用してください。
- KISSメソッドを使用します。 覚えておいてください–シンプルな方が良いです。 メニューは使いやすく直感的でなければなりません。
- お気に入りのサイトのメニュー構造をチェックして、好きなものと嫌いなものを確認してください。 次に、あなたをより良くします。
最終的な考え
独自のカスタムメニュー構造を追加するのは簡単で、WordPressサイトの外観と雰囲気をよりプロフェッショナルにし、構造がランダムに見えないようにします。 独自のメニューセットを作成するのに数分しかかからず、ライブに移行する前にそれらを確認して試すことができます。 訪問者は、サイトをより迅速かつ直感的にナビゲートできるメニュー構造を高く評価します。
あなたの番！ 独自のカスタムメニュー構造を作成しましたか？ 追加するものはありますか？ プラグインを使用してメニューを変更していますか？ 以下のコメントでそれについて教えてください。