Elementorで高度なカスタムフィールドを使用する方法：詳細ガイド

WordPressは、機能豊富で視覚的に美しいウェブサイトを作成する際に、最も人気のある選択肢の1つです。その柔軟性だけでなく、様々なプラグインと完璧に互換性があるからだ。つの優れたプラグインは エレメンタ 歌で応える 高度なカスタムフィールド高度なカスタムフィールド(略してACF）.

この記事では、この2つを併用してウェブサイトに新しいカスタムデザイン体験をもたらす方法について説明します。カスタムページレイアウトの作成であれ特定のページに動的コンテンツを追加するこの記事を読めば、誰もが明確な指針を見つけることができる。

アドバンスト・カスタム・フィールド（ACF）とは何ですか？

Advanced Custom Fieldsは、カスタムフィールドの作成と管理に役立つWordPressウェブサイト用の広く使用されているプラグインです。ページ、投稿、カスタム投稿タイプ、タクソノミーなどに追加のコンテンツ入力フィールドを追加することができ、WordPressウェブサイトの機能性を高めるのに非常に役立ちます。

ACFプラグインバージョン

• 無料版WordPressのプラグインリポジトリで利用可能で、日常的なウェブサイトのほとんどのニーズに基本的な機能を提供します。
• プレミアムバージョン: 繰り返し使用可能なフィールド、柔軟なコンテンツフィールド、ギャラリーフィールドなど、より高度な機能を提供します。

Elementorとは？

エレメンタ は、直感的なドラッグ＆ドロップのインターフェイスと豊富なデザインオプションのおかげで、世界中のユーザーに愛されている広く使用されているWordPressページビルダープラグインです。コードを書くことなく、高度にカスタマイズされたページデザインを簡単に作成することができます。

Elementorプラグインバージョン

• 無料版WordPressのプラグインリポジトリからダウンロードできます。
• プレミアムバージョンテンプレートライブラリ、グローバルウィジェット、ダイナミックコンテンツ表示など、より高度な機能のロックを解除します。

Elementorを使用すると、特にACFと組み合わせて使用する場合、カスタムデータを動的に表示するために、さまざまなページタイプのためのユニークなレイアウトやスタイルを設計することが可能です。

ElementorでACFを設定して使用する方法：詳細な手順

次に、ACFとElementorを統合し、ウェブサイトにダイナミックコンテンツを表示する方法をステップバイステップで説明します。

1.プラグインのインストールと有効化

まず、WordPressサイトに以下のプラグインがインストールされ、有効化されていることを確認する必要があります：

• エレメンタ
• アドバンスト・カスタム・フィールド（ACF）

どちらのプラグインもWordPressのプラグイン・リポジトリで無料で入手できます。インストール後、両プラグインの設定ポータルはWordPressダッシュボード左側のナビゲーションバーにあります。

2.新しいフィールドグループの創設

ある ACF で、フィールドはフィールド・グループを通じて管理されます。各フィールド・グループには、以下のような複数のフィールドを含めることができます。特定のページ、記事、その他のカスタム記事タイプについてこれらのフィールドを設定する。

1. のWordPressダッシュボードに移動する。 「カスタムフィールドクリック "新しいフィールドグループの追加".

2. フィールドグループの名前。この名前はバックエンドでの認識のみに使用され、フロントエンドには表示されません。

3. 次に、必要なフィールドを追加します。フィールド設定ページでは、フィールドタイプ（テキスト、数値、画像、チェックボックスなど）を選択できます。

例えば、WooCommerceの商品ページに以下のフィールドを追加することができます：

• 塩化ジエチルアンモニウム
• 製品素材
• 製品価格

各フィールドは、必要に応じて、フィールド・ラベル、名前、デフォルト値、プレースホルダーなどの異なる属性で設定することができる。

3.フィールド表示ルールの設定

フィールドグループのセットアップ完了後これを行うには、これらのフィールドを表示する場所を指定する必要があります。例えば、これらのフィールドをすべての投稿、ページ、または特定のカスタム投稿タイプの下に表示することを選択できます。

1. フィールドグループの設定で 「表示ルール パート

2. などの条件を設定する。ページは例ページに等しい「または記事タイプは製品に等しい".

3. 設定を保存します。

4.Gutenbergエディターでフィールドをテストする

コンフィギュレーションが完了すると グーテンベルク・エディター をクリックして、追加したフィールドを確認します。にマッチするセット条件を開く。ページまたは記事に追加される。一番下に新しく追加されたカスタムフィールドをご覧ください。.

5.ElementorでACFデータを表示する

次に エレメンタ を使用して、これらのカスタムフィールドをフロントエンドページに表示します。以下の手順に従ってください：

1. Elementorエディタを開き、表示したいカスタムフィールドデータを選択する。ウェブページ編集してください。
2. Elementorで、適切なウィジェット（テキスト、タイトルなど）をページにドラッグ＆ドロップする。
3. ウィジェットをクリックして左セットアップこね板.

4. 設定パネルで 「ダイナミック・ラベリング アイコンを選択し 「ACFフィールド.

5. ドロップダウンメニューから、以前に設定した ACF フィールド（例："塩化ジエチルアンモニウム").

6.ダイナミックなコンテンツ・プレゼンテーション

上記のステップを完了すると、あなたのページは ACF用カスタム・フィールド・データ例えば、ACFで「商品名」を入力すると、自動的にフロントエンドページに表示されます。例えば、ACFで「商品名」を入力すると、自動的にフロントエンドページに表示されます。

7.ACFデータの更新

さらに、GutenbergエディタでACFフィールドの値を変更した場合、Elementorを再度開いて編集する必要はありません。Elementorは自動的にACFから更新されたデータを読み込み、フロントエンドにリアルタイムで表示します。

高度な使用法：カスタマイズされた投稿タイプ（CPT）とACF

投稿とページに加えて、カスタム投稿タイプにもACFを使用できます。 (カスタム投稿タイプ、CPT） Add Fields.CPTは、WordPressが提供する機能で、通常の投稿やページとは異なるコンテンツタイプを作成することができる。ケーススタディ「またはチームメンバー".

Elementorでは、これらのカスタム投稿タイプのためにユニークなレイアウトをデザインし、ACFを介して動的なコンテンツを表示することができます。

はんけつをくだす

とおす WP独学ウェブサイトビルダー意志 ACF 歌で応える エレメンタ ACFを併用することで、様々なカスタムフィールドを作成することができ、Elementorを使用することで、比類のないページデザインを体験することができます。WooCommerceの商品ページに動的な情報を追加する場合でも、企業サイトでブランドパートナーを紹介する場合でも、この2つのプラグインを組み合わせることで、あなたのデザインはかつてないほど簡単になり、創造性の余地が生まれます。