How to Create a Smart Tag from an ACF Field with WPForms

Markdownを表示

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

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

ただし、著者が商品を効果的に販売リストするには、それぞれの価格を入力する必要があります。ACFプラグインを活用して、投稿設定に価格フィールドを組み込みました。

この価格フィールドはフォームに事前入力され、表示されている投稿に基づいて動的に更新されます。フォームは投稿間で一定ですが、価格は異なるため、このフィールドにはスマートタグを使用して、各投稿の情報更新で適応できるようにします。

ACFでカスタムフィールドを作成する

まず、Advanced Custom Fieldsプラグインでカスタムフィールドの作成から始めます。

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

投稿にフィールドを追加するには、ACFのドキュメントに従って新しいカスタムフィールドを作成してください。

このチュートリアルでは、フィールドが既に投稿に追加されていることを前提としています。Advanced Custom Fieldsプラグインを使用してWordPress投稿にフィールドを追加する方法については、ドキュメントを参照してください。

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で作成したフィールドを編集し、フィールド名というラベルを探してください。

ACFプラグインで作成したフィールドラベルを探します