WordPressのカスタムフィールドは、WordPressを”単なるブログプラットフォーム”ではなく、柔軟なコWordPressのカスタムフィールドに関しては、freemium Advanced Custom Fieldsプラグインが最もよく知られている名前の1つです。 これにより、あらゆる面でカスタムフィールドを簡単に操作できるようになり、今日の投稿のトピックでもあります。

具体的には、高度なカスタムフィールドが非常に価値がある理由を説明し、WordPressサイトに適用する方法を段階的に示します。ここでは、この記事で見つけることができますすべてです：
そこにカバーするために多くのことがありますので、ダイビングしてみましょう…

WordPressのカスタムフィールドとは何ですか？ 彼らはあなたに何をさせますか？WordPressのカスタムフィールドを使用すると、WordPressのコンテンツに関する追加情報を追加、保存、および表示できます。 より技術的なレベルでは、カスタム項目はメタデータの保存に役立ちます。

この用語に慣れていない場合でも、カスタムフィールドはお気に入りのプラグインやテーマの機能の多くをパワーします。

たとえば、eコマースストアを構築する最も一般的な方法であるWooCommerceは、カスタムフィールドを使用して、次のような製品に関する追加情報を格納します。

• Price
• Weight
• Color

または、WordPressのイベントカレンダープラグインを使用している場合、そのプラグインはカスタムフィールドを使用して、次のようなイベントに関する追加情報を格納します。:

• 場所
• 開始/終了時刻
• 価格

独自のカスタムフィールドを作成して、固有のニーズに関連する情報を保存することもできます。

WordPressのカスタムフィールドはどのようにクールですか？ ►私たちの最新のガイドで素晴らしい@wp_acfでそれらを活用する方法を学びます！ ►Click To Tweet

カスタムフィールドはいつ使用する必要がありますか？ここで、なぜ最初にカスタムフィールドが必要なのか疑問に思うかもしれません。たとえば、WordPressサイトにイベントを投稿したい場合、そのすべての情報をWordPressエディタに通常のテキストとして入れることはできませんでしたか？まあ、はい、あなたはできます。

まあ、はい、あなたはできます。

かし、カスタムフィールドを使用することは、いくつかの理由のためのより良いアプローチです：

• 簡単な入力—ゼロから物事を入力するのではなく、 たとえば、日付を入力する代わりに、日付ピッカーから日付を選択することができます。
• 一貫性—カスタムフィールドに入力した情報は、常に設定に従って表示されます。
• 簡単な更新とメンテナンス—将来その情報がどのように表示されるかについて何かを変更したい場合は、各投稿を個別に編集するのではなく、一

WordPressには組み込みのカスタムフィールド機能が含まれています

WordPressには、実際にコンテンツにカスタムフィールドを追加するための組み込み機 古典的なTinyMCEエディタでは、画面オプション領域からこれを有効にすることができます。 または、新しいブロックエディタでは、オプション領域から有効にすることができます。

キー/値のペアを使用してカスタムフィールドデータを入力することができます:

このネイティブカスタムフィールド機能は完全に機能していますが、それは多くの人々が代わりに高度なカスタムフィールドプラグインに目を向ける理由である、物事を行うための最もユーザーフレンドリーな方法ではありません。

高度なカスタムフィールドは、それがはるかに簡単になります

簡単に言えば、高度なカスタムフィールドは、それがはるかに簡単にWordPressのカス

WordPressダッシュボードでカスタムフィールドを追加および管理するためのインターフェイスを簡素化し、サイトのフロントエンドにカスタムフィールドか その事実は、それが1以上の百万のウェブサイト上でアクティブだ理由を説明するのに役立ちます4.9以上のレビューで星の評価1,000.

バックエンドでは、事前に選択されたフィールドタイプを含むユーザーフレンドリーなメタボックスを作成できます。 したがって、一般的なキーと値のペアのインターフェイス（上記のようなもの）ではなく、日付ピッカー、チェックボックスなどを使用することができます:

合計で、高度なカスタムフィールドは、投稿、ユーザー、分類法、メディア、コメント、さらにはカスタムオプションページを含む、ダッシュボード内の任意の領域に追加できる30以上の異なるフィールドタイプを提供しています。

各フィールドタイプの詳細情報をここで表示できます。

高度なカスタムフィールドは、よく文書化された関数、ショートコード、Gutenbergブロックなどで、その情報を表示することがはるかに簡単になります。

または、ドラッグアンドドロップのWordPressページビルダーなど、他のツールとの統合を見つけることができます。

高度なカスタムフィールド無料対プロ：あなたはどちらが必要ですか？

高度なカスタムフィールドは、無料だけでなく、手頃な価格のプレミアムバージョンの両方が付属しています。

ほとんどの基本的な使用のために、無料版は完全に問題ありません。 これにより、ほぼすべてのフィールドタイプにアクセスできるだけでなく、上記で概説したすべての時間を節約し、ユーザーフレンドリーな機能にアクセコンテンツに関する追加情報を保存したいだけの場合は、無料版が必要です。

それが言われていると、Proバージョンでは、より興味深い方法で高度なカスタムフィールドを使用するのに役立ついくつかの非常に便利な機能を追 たとえば、スピーカーに関する情報をイベントに追加する場合、リピータフィールドは、複数のスピーカーがいる状況を処理するのに役立ちます（スピーカーのフィールドを必要なだけ何度でも”繰り返す”ことができ、複数のスピーカーがいるエッジケースを処理できます）。

ACF blocks—フィールドをメタボックスではなくブロックGutenbergとして表示します。 これは、クライアント用のサイトを構築していて、カスタムフィールドデータを入力して視覚化する簡単な方法を提供したい場合に特に便利です。

柔軟なコンテンツフィールド—他のフィールドからレイアウトを作成します。 これは、カスタムフィールド情報に基づいた軽量のページビルダーのようなものです。

ギャラリーフィールド—単一のフィールドに複数の画像をアップロードします。

オプションページ、フィールドを複製する機能、リレーションシップフィールドの改善、その他の小さな調整など、他のいくつかの違いもあります。ここですべてのACF PROの機能を見ることができます。

ACF PROは、単一のサイト上で生涯使用するための2 25から始まります。

または、無制限のサイトで生涯使用するために$100を支払うことができます。

疑問がある場合は、必要な機能を正確に把握するまで無料版から始めてください。 必要に応じて、いつでも後でアップグレードできます。

高度なカスタムフィールドチュートリアル: あなたのフィールドを追加する方法

それでは、実際の高度なカスタムフィールドのチュートリアルに掘ると私はカスタムフィールドの最初のセッこの例では、実行についてのブログがあるとしましょう。 あなたは本当に実行中に…のようなものだし、あなたはあなたの読者とあなたの日々のトレーニングを共有したいです。 具体的には、各ブログ記事で、実行を共有したいとします。

• 目的—”スピードワーク”と”コンディショニング”の二つの異なるタイプの実行があるとしましょう。li>
• 距離—あなたの実行時間の長さ。
• 距離-あなたの実行時間の長さ。
• 開始時刻—実行を開始した時刻。
• 終了時刻—実行を終了した時刻。
• 場所—実行が行われた場所。

その情報を収集するには、5つのカスタムフィールドを追加します。

この高度なカスタムフィールドチュートリアルで学ぶ原則は、どのユースケースにも適用されることに注意することが重要です。 具体的な例を選んでいるのは、接続する具体的な例を持つのに役立つからです。

このチュートリアルを二つの部分に分割します。

1. バックエンドでカスタムフィールドを追加および管理する方法。
2. サイトのフロントエンドにカスタムフィールド情報を表示する方法。

新しいフィールドグループを作成します

あなたはから高度なカスタムフィールドの無料版をインストールしてアクティブにしたらWordPress.org、カスタムフィールドに移動します>最初のフィールドグループを作成するには、新規追加します。

名前が示すように、”フィールドグループ”は、WordPressのダッシュボードに一緒に表示される一つ以上のカスタムフィールドのグループです。

この例では、5つのカスタムフィールドを含む1つのフィールドグループを作成します。

フィールドグループに名前を付け、その場所を選択します。 この例では、通常のWordPressブログ投稿用にこれらのカスタムフィールドを表示したいので、デフォルトの投稿のままにしておきます。ただし、カスタム投稿タイプやタクソノミと一緒にカスタムフィールドを他の場所に表示する場合は、これを変更する必要があります。 また、複数のルールを設定して、フィールドを複数の場所に表示することもできます:

カスタムフィールドを追加します

次に、+フィールドの追加ボタンをクリックして、最初のカスタムフィールドを追加します。

これは多くのオプションを開きますが、必ずしもすべてを記入する必要はあ

2つの最も重要な選択肢は次のとおりです。

• フィールドラベル—これはエディタに表示されます。 また、コードで使用するフィールド名を生成するためにも使用されます。 フィールド名を変更する必要はありません（必要に応じて変更できます）。
• フィールドタイプ—これは収集する情報のタイプです。 たとえば、番号フィールドで番号情報を収集したり、電子メールフィールドで電子メールアドレスを収集したりすることができます。

この最初のフィールドには、ラジオボタンのフィールドタイプが必要です:

さらに下に、選択ボックスにラジオボタンの選択オプションを入力できます。

フィールドが必要かどうかやデフォルト値など、他にも多くの選択肢があります。 あなたの必要性にこれらを形成すること自由に感じなさい。

別の例を見てみましょう：実行の距離を収集するためのカスタムフィールド。 今回は、数値フィールドタイプが必要です。

距離単位を追加することを選 また、必要に応じて、最小値と最大値で検証を追加することもできます。 例えば、おそらく1,000マイルの操業で行っていない(そして…OMG、最終的なForrestのGumpである)!

収集する他のすべてのカスタムフィールド 完了すると、次のようになります。

設定と公開を設定

ここでは、WordPressエディターでのフィールドの表示方法を制御できます。ほとんどの場合、これらはデフォルトのままにしておくことができます。

しかし、あなたがしたい場合は、物事を変更して自由に感じます。 たとえば、通常のWordPressエディタの上にカスタムフィールドを表示することができます。

選択したら、フィールドグループを公開してライブにします。

WordPressエディタに情報を追加

フィールドグループを公開すると、新しい投稿を作成するときにフィールドが表示されます。

デフォルトでは、従来のTinyMCEエディタと新しいブロックエディタの両方でエディタの下に一緒に表示されます:

ここで入力した情報は、簡単に検索できるようにサイトのWordPressデータベースに保存されます（高度なカスタムフィールドチュートリアルの次の部分で確認できます）。

条件付きロジックの探索

前に進む前に、簡単に迂回しましょう。

参照してください、高度なカスタムフィールドが非常に人気がある理由の一つは、それが可能なすべての興味深い実装のためです。

ここでの強力なオプションの1つは条件付きロジックで、以前のフィールドの回答方法に基づいてフィールドを表示/非表示にすることができます。

これがどのように機能するかの簡単な例を見てみましょう…

食べ物、あなたの旅行、または実行以外のものについてブログしたいとしましょう。 実行されていないトピックについて書いているときは、実行に関する情報のカスタムフィールドを表示することはあまり意味がありませんよね？作成したすべてのカスタムフィールドを自動的に表示する代わりに、「この投稿は実行ですか？”:

チェックボックスをオンにすると、実行情報フィールドが自動的に表示されます。 チェックを外したままにすると、非表示のままになります。

サイトのフロントエンドに高度なカスタムフィールドデータを表示する方法はいくつかあります。 あなたが選ぶ正確な方法は、あなたのニーズと知識レベルに依存します。 これを達成するための3つの異なる方法は次のとおりです:

1. テーマのテンプレートファイル—これには少し技術的な知識が必要ですが、特にテーマのテンプレートファイルで作業しやすい場合は、ほとんどの場合、最
2. ショートコード付き—これは非常にシンプルで、ケースバイケースでカスタムフィールドデータを挿入したい場合に適しています。 あなたはすべてのポストにショートコードを追加する必要がありますので、しかし、それはより多くの手動作業が必要です。
3. With Elementor Pro—これはPHPで作業する必要が完全になくなるので素晴らしいですが、プレミアム製品であり、テンプレートにElementor Proを使用する必要があること

上記をクリックすると、特定のメソッドに直接ジャンプするか、それらのすべてを読むことができます。 あなた次第です。

テーマテンプレートファイルに高度なカスタムフィールドを追加する方法

カスタムフィールド情報を表示する最初の方法は、高度なカスタムフィールドのPHP関数を子テーマのテンプレートファイルに直接追加することです。

これは、テーマのテンプレートファイルを掘り下げる必要があるため、少し高度ですが、カスタムフィールドが毎回同じ場所に自動的に表示されます。具体的には、問題の投稿タイプの単一のテンプレートを編集する必要があります。通常のブログ記事の場合、これは単一です。

php。 または、いくつかのテーマは、テンプレートの部分に物事を分割します。 たとえば、TwentyNineteenテーマの場合、実際にはcontent-singleを編集する必要があります。phpのテンプレート部分。ここで迷っている場合は、別の方法を使用することをお勧めします。

単一の投稿のテーマテンプレートファイルを見つけたら、高度なカスタムフィールドのthe_field()関数を使用してフィールドの情報を表示できます。 たとえば、

<?php the_field('FIELD_NAME'); ?>

それについての詳細はこちらをご覧ください。たとえば、”Purpose”フィールドを表示するには、

<?php the_field('purpose'); ?>

フィールドグループを編集するときにフィールド名を見つけることができます:

だから、PHPと少しHTMLマークアップを組み合わせると、すべてのフィールドを表示するには、次のようなものが得られるかもしれません。

<div class="run-information"><ul><li><strong>Purpose:</strong> <?php the_field('purpose'); ?></li><li><strong>Distance:</strong> <?php the_field('distance'); ?></li><li><strong>Start Time:</strong> <?php the_field('start_time'); ?></li><li><strong>End Time:</strong> <?php the_field('finish_time'); ?></li><li><strong>Location:</strong> <?php the_field('location'); ?></li></ul></div>

これを上に追加するには通常の投稿コンテンツは、the_content（）の上のテーマテンプレートファイルにこれを追加します:

そして今、ブログ記事を更新した後、あなたは通常のWordPressのコンテンツの上にカスタムフィールドデータを見ることができます。

ショートコードは、テーマテンプレートファイルと同じに見える

elementor PROで高度なカ それはあなたが視覚的な、ドラッグアンドドロップ編集を使用してデザインを構築することができます。 サイドノートでは、ElementorはKinstaの公式パートナーの1つです。

elementor Pro、有料アドオンを使用すると、また、あなたのデザインに高度なカスタムフィールドから動的なカスタムフィールドデータを挿入するオプションを含

これは、テンプレートにカスタムフィールドデータを自動的に含める柔軟性を求めているが、テーマのテンプレートファイルに直接コードを編集することが快適ではない場合に最適なオプションです。

開始するには、テンプレート>テーマビルダーに移動し、あなたのポストシングルのための新しいElementorテンプレートを作成します。

投稿タイトルと投稿コンテンツの通常のElementorウィジェットを追加することができます。 次に、カスタムフィールドデータを表示するには、通常のテキストエディタウィジェットを追加します。 ここでの唯一の違いは、テキストを編集する代わりに、動的オプションを選択することです:P>

この後、ドロップダウンからACFフィールドを選択できます。