ACF対DIVI設計変数：いつ使用するか

Divi 5の最新のAlphaリリースにより、設計変数は、Webサイトで設計値とコンテンツ値を管理するための新しいアプローチとしてDiviエコシステムに入りました。これは、特に長年にわたって高度なカスタムフィールド（ACF）に依存してきたユーザーを励ましてきました。 ACFに固執するか、Diviの変数に切り替える必要がありますか？または、両方を同時に使用できますか？

この投稿では、違いを説明し、いつ使用する必要がありますか。それに到達しましょう！

DIVI 5は、新しいWebサイトビルドに使用する準備ができています。

DIVI設計変数とは何ですか？

Webサイトを構築するときは、色からフォントスタイル、連絡先の詳細など、多くのページで同じ情報を再利用することがよくあります。設計変数は、1つの中央の場所から共有要素を管理するのに役立ちます。標準のACFフィールドとは異なり、設計変数はポスト固有のコンテンツに結び付けられていないため、動的なコンテンツフィールドではなく、グローバルな設計値とコンテンツ値として機能します。

すべてのページを掘り、電話番号の変更や背景色の調整など、マイナーアップデートを作成する代わりに、変数を1回更新すると、サイト全体のフローが自動的にフローが行われます。

季節のプロモーションのためにブランドの色を切り替えたいですか？単一の変数を変更します。フッターテキストやロゴを更新する必要がありますか？すべてのインスタンスを即座に編集します。 Diviの設計変数を使用すると、より速くスタイリングするだけでなく、より賢く構築します。

よりスマートでアップデートしやすいWebサイトを構築します

標準のACFフィールドは、特定の投稿に関連付けられたカスタムフィールドを作成することにより、WordPressユーザーが設計とコンテンツを構成する方法を改善します。 Diviの設計変数は、まったく異なるルートを取ります。それらは、一度にどこでも更新するグローバルにアクセス可能なデザイン値です。違いは最初は微妙に見えるかもしれませんが、WordPressサイトの構築と維持方法を変えます。

ACFがテーブルにもたらすもの

Advanced Custom Fields（ACF）では、コアバージョンにページや投稿に追加のデータフィールドを追加できます。基本的なタイトルとコンテンツボックス以上のものを取得します。 ACFは、写真、テキストブロック、ファイル、ドロップダウンメニューなどの特別なフィールドを提供します。

関連するフィールドをプロジェクトの論理グループにバンドルできます。たとえば、役職、部門、写真、バイオのスポットを備えたスタッフメンバーグループを作成する場合があります。または、仕様、価格設定、および機能リストのフィールドを使用して製品の詳細を作成します。

これらのフィールドグループは、カスタムポストタイプで非常にうまく機能します。それらを組み合わせると、チームディレクトリ、サービスリスト、プロパティカタログなどの特別なコンテンツセクションを構築できます。それぞれがそのコンテンツに正確に適切なフィールドを備えています。

ACFは、通常のWordPress管理エリアにスムーズに収まるため、ACFが大好きです。カスタムフィールドは、通常の編集画面に正しく表示されるため、ハイテクに精通していないクライアントがコンテンツを更新することが簡単になります。

オプションページ：サイト全体のコントロールパネル

ACF Proで利用可能なACFオプションページでは、特定のコンテンツに接続する通常のACFフィールドとは異なり、サイト全体の情報用の中心的な場所を作成できます。この機能は素晴らしいです：

• 連絡先
• 重要なリンク
• 営業時間と場所
• デフォルトの画像とロゴ

電話番号のように何かが変更されたら、管理者セクションで1回だけ更新する必要があります。変更はすぐにあなたのサイトのどこにでも現れます。 ACF Proがオプションページを使用する必要があることは注目に値します。

Diviとの深い統合

標準のACFフィールドは、Diviの動的コンテンツシステムを介してDiviとうまくペアになります。 Diviビルダーでページを作成するときは、ACFカスタムフィールドから情報を引き出すことができます。このチームワークでは、ACFのコンテンツ管理とともにDiviの設計ツールを使用できます。

プロセスが通常どのように機能するかは次のとおりです。

• ACFでカスタムフィールドをセットアップします
• これらのフィールドをWordPressのコンテンツで埋めます
• Diviでページレイアウトを設計します
• ACFコンテンツをDIVIモジュールに接続します

DIVIとACFのこの組み合わせは、有用な分離を作成します。コンテンツエディターは、クリーンで整理されたインターフェイスで情報を更新でき、デザイナーはコンテンツ管理の詳細に迷い込んでレイアウトを作成できます。

柔軟なアプローチ

標準のACFフィールドは、コーディングであろうと視覚的なツールを好むかどうかにかかわらず、スキルのために機能します。開発者は、テンプレート関数を使用して、カスタムテーマにフィールド値を表示できます。コードしない場合でも、PHPを知らずにDIVIのようなビルダーでACFフィールドを使用できます。

この柔軟性により、標準のACFフィールドは、基本的なビジネスウェブサイトや複雑なプロジェクトに適しています。簡単な機能から始めて、学習してサイトが成長するにつれて、より高度な機能を使用できます。

Diviの設計変数の柔軟性

DIVI 5デザイン変数は、Webサイト管理をより簡単にします。彼らは、あなたがあなたのサイトのどこにでも使用できるデザインの選択と再利用可能なコンテンツを保存します。 1つの変数を更新すると、使用したすべての変数が変更されます。

Variable Managerは、Divi 5のVisual Builderサイドバーの変数アイコンをクリックして見つかります。これにより、すべての設計要素を1か所で管理できます。

6種類の設計変数

DIVI 5には、ウェブサイトのさまざまな側面を支援する6つの異なるタイプの変数が含まれています。

• カラー変数：ブランドの色、テキストの色、背景を保持します
  • 「Coral Blush」または「Shumpagne Gold」のようにはっきりと名前を付けることができます
  • それらをボタン、テキスト、背景、境界に使用します
  • 次に、これらのいくつかの変数を更新することにより、全配色を変更することができます
• フォント変数：テーマカスタマイザーを超えてタイポグラフィオプションを設定します
  • 見出し、ボディテキスト、または特別な領域に個別のフォント設定を作成できます
  • これにより、タイポグラフィはあなたのウェブサイト全体で一貫しています
  • 必要に応じて、すべてのフォントを一度に更新できます
• 数値変数：設計で使用される測定値を保存します
  • 間隔、境界、サイズ、テキストの寸法に最適です
  • レスポンシブデザインのために、Clamp（）などのCSSユニットと連携します
  • これらは、どこでも間隔とサイジングを一貫性を保つのに役立ちます

Divi 5変数は、サイト全体に表示されるコンテンツも処理します。

• 画像変数：複数の場所で使用される写真を保存します
  • ロゴ、背景パターン、写真に最適です
  • すべてのページではなく、画像を1回更新します
  • 季節の更新やブランド変更をはるかに速くします
• テキスト変数：多くのスポットに表示される書面によるコンテンツを保存
  • 連絡先情報、タグライン、営業時間に役立ちます
  • テキストを1回変更して、どこでも更新します
  • 詳細が変更されたら、情報を一貫して保ちます
• リンク変数：ボタンとメニューにURLを保存します
  • アクションボタン、ソーシャルメディアリンク、ナビゲーションに使用します
  • Webアドレスが変更されたら、壊れたリンクを避けてください
  • 新しいページを追加するときに、関連するすべてのボタンを一度に更新します

実世界の利点

設計変数は、視覚的であるため、時間を節約し、エラーを減らします。クライアントがウェブサイトの色を変更したい場合、色変数のみを更新することができ、その色（ボタン、背景、テキスト）がサイト全体ですぐに変更されます。

これらの変数は、DIVIのプリセットシステムでうまく機能します。モジュールプリセットに変数を追加し、変数を更新すると、その変数が変更されたすべてのモジュールが変更されます。

すべてのデバイスで見栄えの良いWebサイトの場合、Clamp（）などのCSS機能を備えた数値変数は、レイアウトが個別のデザインを必要とせずに画面サイズに合わせます。複数の人がWebサイトで作業する場合、設計変数は同じ設計ルールを使用して全員を保持します。これは、誰が変更を加えても、サイトが一貫してプロフェッショナルにとどまるのに役立ちます。

彼らがどのように比較するか

標準のACFフィールドとDIVIの設計変数を比較する場合、Webサイトをより管理しやすくするための2つの異なるアプローチを検討しています。彼らの核となる違いを分解しましょう：

標準のACFフィールドは、投稿とページ間で変更される構造化されたコンテンツが必要な場合に輝きますが、Divi設計変数はサイト全体の設計の一貫性を維持します。 ACFオプションページ（ACF Proで利用可能）とDIVI設計変数が似ているいくつかの側面があります。

DIVI設計変数は、ACF Proが行うすべてのことをしようとしないことを理解することが重要です。彼らはあなたにあなたのウェブサイト全体で同じ情報を保存して使用する別の方法を与えます。 ACFは、Divi変数ができないことをまだたくさん行うことができます。

Divi変数は、連絡先情報の変更、季節と写真の交換、ブランドの色の更新などの単純な仕事に最適です。 ACFは、カスタムフィールドや投稿タイプの作成など、デザイン要素を超えた専門のコンテンツ管理が必要なWebサイトに最適です。同様に、ACF Proで利用可能なACFオプションページは、DIVIデザイン変数のより成熟したバージョンです。

ただし、Diviの設計変数は、追加費用なしでDivi 5に組み込まれています。すでに使用しているビルダーで、色、フォント、テキスト、画像を設定できます。追加のプラグインや新しいシステムの学習は必要ありません。プロジェクトの要件は、どのシステムがワークフローで主役を演じるかをガイドする必要がありますが、これらのツールは表面の類似性にもかかわらず根本的に異なる問題を解決することを忘れないでください。

ACFとDIVI変数は一緒に動作できますか？

はい。実際には、同じWebサイトで標準のACFフィールドとDivi設計変数の両方を使用できます。彼らはあなたのサイトのさまざまな部分を扱うので、彼らはうまく働きます。それらをペアにすると、標準のACFフィールドは、エージェント、近隣、および価格設定カスタムフィールドに接続するプロパティリストのポストタイプを使用して、不動産サイトのような複雑なデータ関係を処理できます。

一方、デザイン変数は、すべてのページと投稿テンプレートでブランドの色、タイポグラフィ、および間隔を一貫して保ちます。これは、あなたのウェブサイトが強力なデータ管理と視覚的な一貫性の両方を持っていることを意味します。

コンテンツエディターは、ACFのおなじみのフィールドと連携してプロパティの詳細や価格を更新することができますが、サイトはDiviの設計システムを通じてプロフェッショナルな外観を維持しています。この組み合わせにより、いずれかのツールが単独で提供できるよりも優れた制御が得られます。

重要なのは、各ジョブにどのツールを使用するかを知ることです。彼らの強みを理解することにより、まとまりのある視覚的アイデンティティを維持する洗練されたコンテンツ構造を備えたWebサイトを構築できます。これらのツールが一般的なウェブサイトの問題をどのように解決するかの実際の例を見てみましょう。

ユースケース＃1 - 季節の変更を伴うローカルビジネスウェブサイト

地元のベーカリーのウェブサイトには、構造化されたコンテンツと季節のデザインの更新が必要です。このサイトの実用的な方法で、標準のACFフィールドとDIVI設計変数を組み合わせました。

標準のACFフィールドは、次のようなカスタムポストタイプとフィールドでベーカリーの製品カタログを処理します。

• アイテム
• アイテムの説明
• 成分とアレルゲン情報
• 価格設定層
• 可用性ステータス

これらの詳細は各製品の変化であるため、ACFの構造化されたアプローチは完全に機能します。ベーカリースタッフは、ACFの馴染みのあるWordPressインターフェイスを通じて製品情報を更新します。

一方、Divi設計変数は、季節の設計要素を管理します。

• 季節とともに変化する配色
• 休日のプロモーションバナーテキスト
• ホームページで製品画像を特徴としています
• 毎月更新する背景パターン

秋が到着すると、ベーカリーの所有者は夏のパステルから秋のトーンまで季節の色の変数を更新するだけで、サイト全体が即座にリフレッシュします。

背景画像は、次のように画像変数を使用して各ページを個別に編集する必要なく、転倒をテーマにした装飾を表示するために変更されます。

このセットアップは、ベーカリーに両方の世界で最高の世界を提供します。標準のACFフィールドを介した構造化された製品データと、Diviの設計変数を介した迅速な季節のリフレッシュです。

ユースケース＃2 - 写真ポートフォリオWebサイト

写真ビジネスのウェブサイトは、組織化されたクライアントギャラリーと一貫したビジュアルブランドのバランスをとる必要があります。標準的なACFフィールドとDIVI設計変数がこの課題を解決する方法は次のとおりです。標準のACFフィールドは、構造化されたコンテンツの側面を管理します。

• カスタム投稿タイプとしてのクライアントプロジェクトギャラリー
• のカスタムフィールド：
  • 詳細な価格フィールドを備えたサービスパッケージ
  • クライアント名を含む証言コレクション
  • プロジェクトタイプ
  • 機器の仕様

写真家は、ACFのインターフェイスを介して各クライアントギャラリーを更新し、次のことを追加します。

• プロジェクトの日付と場所
• 基本情報
• 画像の並べ替えと分類

一方、Divi設計変数は、ブランドの一貫性を処理します。

• すべての見出しとボディテキストのタイポグラフィシステム
• すべてのページにブランドカラーパレットが適用されます
• 一貫したレイアウトリズムの間隔値
• 均一なプレゼンテーション用のギャラリーグリッド設定

ブランドの更新が必要ですか？写真家はいくつかの設計変数を更新し、サイト全体が変更されます。ギャラリーは数値のために間隔を保持し、各プロジェクトはACFのおかげで詳細を保持します。

結婚式のシーズンが忙しくなると、写真家は予約のために1つのテキスト変数を変更し、サイトのいたるところに更新されます。同じテキストを修正するためにすべてのページをチェックすることはもうありません。この組み合わせにより、写真とクライアント情報（ACF）は、サイトの外観（設計変数）とは別に保持されているため、写真家は構造と外観を正しく取得できます。

あなたのプロジェクトに正しい選択をします

私たちのベーカリーと写真の例を見ると、これらのツールがさまざまなWebサイトの課題に取り組むことができます。ベーカリーの所有者は、季節の色を楽に交換しながら、製品情報を更新します。写真家はギャラリーを整理し続けていますが、数回クリックしてサイトの外観を更新できます。

これらのツールのいずれかを必要とするサイトもあれば、両方でうまく機能するサイトもあります。一つのことは、標準のACFフィールドとDIVI設計変数を選択することで、どちらかまたは決定である必要はありません。

Divi 5は、ツールキットに別の便利なオプションを追加しました。シンプルなものであろうと複雑なものであろうと、見栄えが良くてうまく機能するサイトを作成する方法が増えました。

よりスマートな構築を開始します

一番下の行は、Divi 5の設計変数と標準のACFフィールドがそれぞれ異なる問題を解決しながら、いくつかのオーバーラップを持っていることです（特にオプションページを使用）。サイト全体で迅速なデザインの更新が必要ですか？デザイン変数は輝いています。条件付きロジックを備えた強力なコンテンツ管理が必要ですか？標準のACFフィールドが配信されます。

多くのサイトは、両方のツールで並んでうまく機能します。 ACFオプションページは、複雑なコンテンツのニーズを管理するために適しています。設計変数はオプションページを完全に置き換えることを意図したものではありませんが、ほとんどのユーザーでは単純な要件を持つため、それらは強力な代替手段になる可能性があります。

デザイン変数機能は、DIVI 5で利用できるようになりました。追加のコストもコーディングも必要ありません。次のプロジェクトの準備ができています。

覚えておいてください：Divi 5は新しいWebサイトに最適です。既存のサイトをDivi 5に移動することはまだお勧めしません。