DiviとACFを使用してCTAに動的URLを追加する方法
公開: 2020-01-04ウェブサイトの構造を作成するとき、複数のページ、投稿、プロジェクトに同じCTAを含めたいと思う可能性が高くなります。 もちろん、URLを近くに置いて、コピーして貼り付けることもできますが、それが必ずしも最も簡単な方法であるとは限りません。 ページ、投稿、プロジェクトの作成を開始する前に、必要になる可能性のあるすべてのURLのリストを設定し、それらのデフォルト値を設定して、作成する新しいアイテムにデフォルト値を使用できます。
何らかの理由で特定のページ、投稿、またはプロジェクトでURLが異なる場合は、フィールド全体のデフォルト値に適用せずに、アイテム自体の中でURLを変更できます。 URLに添付されているデフォルト値は、新しいページ、投稿、またはプロジェクトを作成するときに有利なスタートを切るのに役立ちます。 このチュートリアルでは、そこに到達する方法を段階的に説明します。
それを手に入れよう！
チュートリアルの概要
- このアプローチは、ページ、投稿、プロジェクトの追加を開始する直前に、カスタムフィールドグループを新しいWebサイトに追加する場合に最適に機能します。
- WordPressWebサイトにAdvancedCustomFieldsプラグインをインストールします
- プラグイン内で、すべてのページ、投稿、プロジェクトに表示されるフィールドグループを設定できます。
- Webサイト全体で必要になる可能性のあるすべてのURLに対して個別のURLフィールドを作成します
- 各フィールドにデフォルト値を割り当てます。 このデフォルト値は、新しいページ、投稿、またはプロジェクトごとに自動的に表示されます
- 既存のページ、投稿、プロジェクトでは、バックエンドを入力してデフォルトのURLを保存すると、値が表示されます。
- Diviデザイン全体でURLフィールドを動的リンクコンテンツ（ページ、投稿、プロジェクト、テンプレート）として使用します
- フィールド設定でデフォルトURLを変更した場合でも、以前のデフォルト値を継承したページ、投稿、プロジェクトには古いデフォルトURLが引き続き適用されます。
1.ACFプラグインをインストールしてアクティブ化します
最初に行う必要があるのは、WebサイトにAdvanced CustomFieldsプラグインをインストールすることです。 ここからプラグインをダウンロードするか、WordPressダッシュボード内でプラグインを検索できます。 プラグインをインストールしたら、すぐに開始できるように、プラグインもアクティブ化してください。
2.すべての投稿、ページ、プロジェクトにフィールドグループを設定します
ここで、ACFプラグインをインストールしたら、URLフィールドグループを作成します。 このグループには、ページ、投稿、プロジェクトで複数回使用するすべてのCTAが含まれます。 WordPressダッシュボード>カスタムフィールド>新規追加に移動します。
グループにタイトルを付け、ルールを設定して続行します。 フィールドグループがウェブサイトのすべての投稿タイプに表示されるようにしています。 ただし、リンクを1つの特定の投稿タイプにのみ表示する場合は、必要に応じてルールを調整できます。
次の場合にこのフィールドグループを表示します。
- 投稿タイプ–等しい–投稿または
- 投稿タイプ–等しい–ページまたは
- 投稿タイプは次の値に等しい–プロジェクト
3.デフォルト値で異なるURLフィールドを追加します
引き続き、さまざまなURLフィールドを追加します。 前述のように、投稿タイプ全体で複数回使用するURLごとに個別のURLフィールドが必要になります。 それがどのように機能するかを説明するために、3つの異なるURLフィールドを追加します。 フィールドの1つは訪問者をDiviギャラリーのランディングページにリダイレクトし、2番目のフィールドは訪問者を連絡先ページに導き、残りのフィールドはユーザーをメンバーエリアにリダイレクトします。
それで、人々をDiviギャラリーのランディングページにリダイレクトするCTAから始めているとしましょう。 そのための新しいフィールドを追加し、認識可能なフィールド名を付けます。 そうすれば、Divi Builderの内部に入ると、適切なURLを選択する際に混乱が生じることはありません。
フィールド設定を下にスクロールして続行し、フィールドタイプとして[URL]を選択します。
次に行う必要がある最後のことは、フィールドにデフォルト値を追加することです。 これは、CTAがリダイレクトするURLを配置する場所です。 このデフォルト値を追加するとすぐに、追加する新しいページ、投稿、プロジェクトごとに自動的に適用されます。
Webサイトで必要なCTAフィールドごとに、上記の手順を繰り返します。 この特定の例では、2つの追加フィールドを作成していることを意味します。 連絡先ページ用に1つ、メンバーエリア用に1つ。
すべてのURLフィールドを追加したら、フィールドグループに加えたすべての変更を必ず保存してください。
4.リンクボタンは動的URLにリンクします
これで、投稿、ページ、またはプロジェクトを入力すると、下部にURLフィールドグループが表示されます。 何らかの理由で、その特定のページ、投稿、またはプロジェクトで別のURLを使用する場合は、フィールドに別のURLを追加できます。 追加したURLは、作業中の特定のページ、投稿、またはプロジェクトにのみ適用されます。 フィールドグループのコアでは、デフォルトのURLは、フィールドの作成時に追加したものと同じです。
デフォルトのURLを使用している場合は、Visual Builderに切り替えて、デザインのボタンを正しいURLにリンクし始めます。
Diviボタンに動的URLを追加するのは本当に簡単です。 ページにあるボタンを開き、リンク設定に移動して、動的コンテンツアイコンをクリックします。
動的アイコンをクリックすると、選択できる動的コンテンツのリストが表示されます。 そのリストには、さまざまなURLフィールドも表示されます。 リンクする正しいURLフィールドを選択します。
ページのボタンごとに手順を繰り返します。 何らかの理由でページ、投稿、またはプロジェクトのURLが変更された場合は、その特定のページ、投稿、またはプロジェクトに戻って、バックエンドのURL動的コンテンツを変更できます。
同じアプローチは、動的URLをテンプレートに追加する場合にも当てはまります。 たとえば、ブログ投稿テンプレートのボタンに動的URLを追加する場合は、Webサイトのテーマビルダーに移動して、投稿本文テンプレートエディターを開くことができます。
ボタンモジュール設定を開いて続行し、リンク設定に移動して、動的コンテンツアイコンをクリックします。
ここでも、CTAに一致するURL動的コンテンツを選択できるドロップダウンメニューが表示されます。
動的URLも追加した後は、必ずすべてのテーマビルダーの変更を変更してください。
最終的な考え
この投稿では、動的URLを作成し、それらをWebサイトの各ページ、投稿、またはプロジェクトで使用できるようにする方法を示しました。 Diviの動的コンテンツをACFプラグインと組み合わせて使用しました。 デフォルト値を設定し、そのURL値をCTAに適用することができました。 このチュートリアルは、Diviを使用してWebサイトを作成するときに、可能な限り効果的になることを可能にすることに焦点を当てています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。