ACFフィールドからスマートタグを作成する方法

ACF（Advanced Custom Fields）で生成されたフィールドを基に、カスタムスマートタグを作成したいとお考えですか？このチュートリアルでは、簡潔なコードスニペットを使用して、これらの特殊なスマートタグを作成するプロセスをご案内します。

このチュートリアルの例では、投稿を販売ポートフォリオアイテムとして利用するWordPressサイトを考えてみましょう。PHPテンプレートにシームレスに統合し、各投稿ページに表示される単一のフォームを考案します。

しかし、作者が効果的にアイテムを出品するためには、それぞれの価格を入力する必要があります。ACFプラグインを活用して、投稿設定に価格フィールドを組み込みました。

この価格フィールドはフォームに事前に入力され、閲覧中の投稿に基づいて動的に更新されます。フォームは投稿によって変化しませんが、価格は変化するので、各投稿の情報更新に適応できるように、このフィールドにスマートタグを採用します。

ACFによるカスタムフィールドの作成

まず、Advanced Custom Fieldsプラグインを使ってカスタムフィールドを作成します。

ACFのドキュメントにしたがって、私たちは投稿にportfolio_priceという新しいフィールドを追加しました。

ACFフィールドからスマートタグを作成する

通常はまずフォームを作成します。しかし、この新しいスマートタグをフォームビルダーの中で使いたいことがわかっているので、フォームを作成する前にスニペットを追加します。

スニペットをサイトに追加する際にヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

/**
 * Register the Smart Tag so it will be available to select in the form builder.
 *
 * @link   https://wpforms.com/developers/how-to-create-a-smart-tag-from-an-acf-field/
 */

function wpf_dev_register_smarttag( $tags ) {
 
    // Key is the tag, item is the tag name.
    $tags[ 'portfolio_price' ] = 'Portfolio Price';
 
    return $tags;
}

add_filter( 'wpforms_smart_tags', 'wpf_dev_register_smarttag' );
 
/**
 * Process the Smart Tag.
 *
 * @link   https://wpforms.com/developers/how-to-create-a-smart-tag-from-an-acf-field/
 */

function wpf_dev_process_smarttag( $content, $tag ) {
 
    // Only run if it is our desired tag.
    if ( 'portfolio_price' === $tag ) {

        //Get the field name from ACF
        $my_acf_field = get_field( 'portfolio_price', get_the_ID() );

        // Replace the tag with our link.
        $content = str_replace( '{portfolio_price}', $my_acf_field, $content );
    }
 
    return $content;
}

add_filter( 'wpforms_smart_tag_process', 'wpf_dev_process_smarttag', 10, 2 );

この2つの機能を分解してみよう。

最初の関数は空のスマートタグを作成するもので、名前は「ポートフォリオ価格」です。このタグにはまだ何も割り当てられません。

次の関数では、スマートタグを定義し、どこから情報を引き出すかを定義します。

my_acf_field = get_field( 'portfolio_price', get_the_ID() );という行で、Advance Custom Fieldsに行ってこのフィールドの値を取得する必要があることをコードに伝えています。ここでフィールド名を入力する必要があります。 このチュートリアルでは、フィールド名をportfolio_priceとしました。

フィールド名を探すのに助けが必要な場合は、ACFで作成したフィールドを編集し、Field Nameというラベルを探します。

フォームの作成

名前、Eメール、商品タイトル（一行テキスト）、商品価格（一行テキスト）、コメント（段落テキスト）のフォームフィールドを持つフォームを作成しました。

スマートタグの追加

私たちのフォームでは、記事タイトルである商品タイトルを入力します。これにはWPFormsがすでに提供している組み込みのスマートタグを使います。

商品タイトル用の1行テキストフィールドを追加したら、［詳細設定］タブをクリックします。フィールドのデフォルト値]で[スマートタグを表示]リンクをクリックし、[埋め込み投稿/ページタイトル]を選択すると、投稿タイトルがこのフォームフィールドに自動的に入力されます。

次に、このステップを商品価格フィールドでもう一度繰り返します。

商品価格フィールドの詳細タブで、利用可能なスマートタグから{portfolio_price}を選択します。スマートタグを選択します。

WPFormsショートコードをPHPテンプレートに追加する

PHPテンプレートにショートコードを追加する際にヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

このチュートリアルでは、ショートコードを単一投稿ページテンプレートの一番下に追加しました。

投稿が変われば、フォームの商品価格と 商品タイトルも変わることがわかります。

もっとカスタムスマートタグを作りたいですか？カスタムスマートタグの作成方法のチュートリアルをご覧ください。

リファレンス・フィルター

• wpforms_smart_tags
• wpforms_smart_tag_process