WordPress メニューに条件付きロジックを実装する方法

公開: 2022-10-14

デフォルトでは、Web サイト用の WordPress メニューを簡単に作成できますが、作成されたメニューは Web サイトのすべてのページでレンダリングされます。場合によっては、別のページに別のメニューを表示したり、別のユーザーに別のメニューをレンダリングしたりする必要があるため、これは制限と見なされることがあります。たとえば、ログインしているユーザーに「登録」メニュー項目を表示することは不適切です。

さまざまな条件でさまざまなメニューを実装することは、WordPress が提供する柔軟性ではありません。このガイドでは、条件付きロジックと、それを WordPress メニュー内に実装して、さまざまな条件でさまざまなメニューを表示する方法について説明します。

条件付きロジックとは

WordPress メニューにおける条件付きロジックの重要性

ナビゲーションメニューの設定

WordPress メニューの条件付きロジックに追加する方法

ログインしたユーザーとログアウトしたユーザーに異なる WordPress メニューを表示する
ユーザーの役割ごとに異なる WordPress メニューを表示する
異なるページに異なる WordPress メニューを表示する
条件付きメニュープラグインの代替

結論

条件付きロジックとは

条件付きロジックは、特定の基準が満たされた場合、または到達した場合に発生する自動化セットです。たとえば、条件ロジックは主にフォームで見られ、特定のオプションが有効になっている場合、特定のフィールドが表示されます。これは、たとえば WooCommerce チェックアウトで確認できます。特定の支払いゲートウェイを選択すると、支払いゲートウェイフィールドがレンダリングされます。

ここでは、メニューコンテキストの条件付きロジックを調べます。支払いゲートウェイフィールドと同様に、WordPress メニューをユーザーのアクションに基づいてレンダリングできます。

WordPress メニューにおける条件付きロジックの重要性

条件付きロジックを使用すると、WordPress Web サイト内のナビゲーションを改善できます。

メニューに条件付きロジックを実装したいさまざまなシナリオがあります。これらのいくつかは次のとおりです。

i) ログインしたユーザーとログアウトしたユーザーに異なるメニューを表示する。

ii) さまざまなページでさまざまなメニューをレンダリングする。

iii) ユーザーの役割ごとに異なるメニューを表示する

上記は、メニューの条件付きロジックを適用できるケースのほんの一部です。このガイドの後半では、上記のシナリオで条件付きロジックを実装する方法について説明します。

ナビゲーションメニューの設定

ほとんどの WordPress テーマには、事前設定されたメニューとメニューの場所が付属しています。ただし、サイトの機能に合わせてメニューナビゲーションを設定する必要がある場合があります。たとえば、アーカイブ用にレンダリングされるメニューと、通常のページ用に別のメニューをセットアップする必要がある場合があります。

ナビゲーションメニューをセットアップするには、次の手順を実行します。

WordPress ダッシュボード内の [外観] > [メニュー] セクションに移動します。

「新しいメニューを作成」リンクをクリックします

次の画面で、メニュー名を指定し、[メニューの作成] ボタンをクリックします。

次に、左ペインから、アコーディオンアイコンをクリックし、さまざまなチェックボックスを選択してさまざまなメニュー項目を選択することにより、メニュー内でレンダリングしたいコンテンツを選択できます。

各アコーディオンの下に配置したいメニュー項目を選択したら、それぞれの「メニューに追加」ボタンをクリックして、メニュー項目をメニューに追加します。

次に、好みの順序に基づいて、右側のメニュー項目をドラッグアンドドロップできます。

メニュー項目の下には、メニューの表示位置を指定するオプションや、メニューを表示するセクションを指定するオプションもあります。テーマが異なれば、メニューの場所も異なる場合があります。

上記を実行したら、上のスクリーンショットにある「メニューを保存」ボタンをクリックしてメニューを保存してください。

WordPress メニューの条件付きロジックに追加する方法

WordPress メニューの条件付きロジックは、カスタムコードまたはプラグインを使用して追加できます。ここでは、Conditional Menus プラグインを使用します。

Conditional Menus プラグインは無料のプラグインであり、以下の手順を実行して設定できます。

WordPress ダッシュボード内の [プラグイン] > [新規追加] セクションに移動します。

「Conditional Menus」プラグインを検索します

プラグインのインストールと有効化に進みます

ログインしたユーザーとログアウトしたユーザーに異なる WordPress メニューを表示する

さまざまなケースで、ログインしているユーザーとログアウトしているユーザーで異なる WordPress メニューを表示することが重要です。たとえば、オンラインストアを運営している場合、この機能は実際に役立つ場合があります。そのような実装を実現するには、次のことを実行する必要があります。

i) 最初に 2 つの異なるメニューをセットアップします。 1 つはログインしたユーザーのメニューとして機能し、もう 1 つはログアウトしたユーザーのメニューとして機能します。「ナビゲーションメニューの設定」セクションに記載されている手順を利用できます。

ii) [外観] > [メニュー] > [場所の管理] セクションに移動します

iii) 次に、メニューをレンダリングしたいテーマの場所で、「条件付きメニュー」リンクをクリックします。

iv) ログインしたユーザーに表示するメニューを選択します

v) 条件リンクをクリックします

vi) レンダリングされたポップアップで、[全般] タブ内にある [ユーザーがログインしました] オプションを選択します。

vii) すべての変更を保存します

ログイン中にウェブサイトにアクセスしようとすると、ログインしたメニューがサイト内に表示されることがわかります。以下は、ここでの例に基づいたサンプルの図です。

ログアウト中にサイトをプレビューすると、デフォルトのメニューがレンダリングされていることに気付くでしょう。以下はこれに関するサンプルです。

ユーザーの役割ごとに異なる WordPress メニューを表示する

条件付きメニュープラグインを使用すると、さまざまなユーザーロールに対してさまざまな WordPress メニューを表示できます。ログインしているユーザーとログアウトしているユーザーの異なるメニューの表示と同様に、最初に [外観] > [メニュー] セクションから、異なるユーザーロールに対して異なるメニューを設定する必要があります。これが完了したら：

i) [外観] > [メニュー] > [場所の管理] セクションに移動します

ii) 次に、「条件付きメニュー」リンクをクリックします。