カスタムフィールドthe_field()でclassが出力されない

前提

現在wordPressでオリジナルテーマを作成しています。
プラグインのAdvanced Custom Fieldsを使用して、ラッパー属性のクラス入力欄に任意のクラス名を入力して保存し、
ループ内にthe_field('フィールド名')を入力したのですが、class名が出力されません。
class名だけでなく、そもそもタグが出力されず、テキストのみ出力されてしまいます。
例）検証ツールで見ると、タグがなく「" テキストテキストテキストテキスト "」と出力されます。

実現したいこと

フィールドタイプをテキストにした場合、「<p class="クラス名">テキストテキストテキスト</p>」
フィールドタイプを画像にした場合、「<img class="クラス名" src="url" alt="">」
という感じに出力したいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

php
1<ul class="product_list_ul">
2<?php
3            $productloop = get_query_var( 'product_cate' ); //指定したいタクソノミーを指定
4            $args = array(
5                'post_type' => array('product'), 
6                'tax_query' => array(
7                    'relation' => 'OR',
8                    array(
9                        'taxonomy' => 'product_cate',
10                        'field' => 'slug',
11                        'terms' => $productloop, /* 上記で指定した変数を指定 */
12                    ),
13                ),
14                'paged' => $paged,
15                'posts_per_page' => '4' /* 1ページに表示させたい件数 */
16            ); ?>
17            <?php query_posts( $args ); ?>
18            <?php if (have_posts()) : ?>
19            <?php while (have_posts()) : the_post(); /* ループ開始 */ ?>
20
21           <!-- ▼コンテンツ -->
22            <li class="product_list_content">
23                
24                <a href="<?php the_permalink(); ?>">
25                    <?php $image = get_field('product_picture'); if( !empty($image) ): ?>
26                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
27                    <?php endif; ?>
28                    <div class="product_list_text">
29                        <h2 class="product_list_title"><?php the_title(); ?></h3>
30                        <?php the_field('product_explanation'); ?>
31                        <h3 class="example_title">Example of use</h4>
32                        <p class="product_list_example"><?php the_field('product_example'); ?></p>
33                    </div>
34                </a>
35            </li>
36           
37           
38           <!-- ▲コンテンツ -->
39
40            <?php endwhile; else: ?>
41           <p><?php echo "お探しの記事、ページは見つかりませんでした。"; ?></p>
42            <?php endif; ?>
43</ul>

試したこと

記事の更新、プラグインの更新をしましたが変わりませんでした。
なにかが邪魔しているのでしょうか？
全く分からず何時間も作業が止まってしまっています。
最終手段はphpファイルに直接自分でタグで囲ってクラス名をいれていくというやり方になると思います・・・
ただできたらそのやり方ではなくプラグインからきちんと管理したいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

回答1件

ベストアンサー

ラッパー属性は入力フォームをラップする要素のクラスと横幅指定のためのもので、
出力時はテキストのみとなります。
出力時にクラスを付与しないなら自分で関数を作って、その中でクラス付要素で囲んでthe_fieldで出力するのがいいと思います。

他でテキストを使うときに不便になるのでお勧めしませんが、下記のコードはacf/textのフィールド出力時にwapperに設定したclassをpタグに追加してくれるコードです。
functions.phpに追加してください。

php
1     add_filter('acf/format_value/type=text', function($value, $post_id, $field ){
2      return "<p class='". $field["wrapper"]["class"]??"" . "'>" . $value . "</p>"; 
3     }, 10, 3);

投稿2023/01/13 01:11

gogoweb_ikeda

総合スコア1426

回答へのコメント

yuu-user

2023/01/16 00:26

「ラッパー属性は入力フォームをラップする要素のクラスと横幅指定のためのもので、出力時はテキストのみとなります。」 →そうだったのですね。どうやら盛大な勘違いをしていました…。素直にクラス付き要素で囲みたいと思います。クラスを付与するコードまで送っていただきありがとうございます。参考にさせていただきます。丁寧にご回答いただきありがとうございました！