ACF(Advanced Custom Fields)6.2.7以降からthe_field()やthe_sub_field()で出力していた内容が表示されなくなった時の対処法

ACF6.2.7以降からthe_field()やthe_sub_field()でフィールドの内容を出力する際に、wp_kses()経由でHTMLエスケープ処理が実施されるように仕様変更されました。

これにより、iframeタグやscriptタグなどを含めて出力していた場合、エスケープされて正常に表示されなくなります。

エスケープ処理によってHTMLが除去されている箇所がある場合は、以下のような警告が管理画面に表示されているかと思います。[詳細を表示]をクリックすると、該当箇所を確認できます。

ACF — ACF now automatically escapes unsafe HTML when rendered by the_field or the ACF shortcode. We’ve detected the output of some of your fields has been modified by this change, but this may not be a breaking change.

今回は、エスケープ処理によってthe_field()やthe_sub_field()の出力内容が、正常に表示されなくなった場合の対処法をご紹介いたします。

ACF6.2.7以降からthe_field()やthe_sub_field()で出力していた内容が表示されなくなった時の対処法

対処法1. get_field()やget_sub_field()を使って出力する

簡単な対処法としては、the_field()をget_field()に、the_sub_field()をget_sub_field()に置き換える方法です。

以下のように、get_field()をechoすれば入力内容をそのままエスケープさせずに出力できます。

<?php echo get_field('フィールド名'); ?>

対処法2. 指定したフィールドに対してエスケープ処理しないようにする

2つ目の対処法は、指定したフィールドに対してエスケープ処理をスキップさせるようにルールを変更する方法です。

適用しているテーマのfunctions.phpに下記コードを追加します。

‘フィールド名’のところは、エスケープ処理させたくないフィールドのフィールド名を入れてください。複数のフィールドを指定する場合は、「if($selector === ‘フィールド名1’ || $selector === ‘フィールド名2’)」という感じで条件指定します。

add_filter('acf/the_field/allow_unsafe_html', function ($allowed, $selector) {
  if ($selector === 'フィールド名') {
    return true;
  }
  return $allowed;
}, 10, 2);
apply_filters('acf/the_field/allow_unsafe_html', false, $selector, $post_id, $field_type, $field_object);

参考：ACF 6.2.5 Security Release

あとがき

ACFを使っているサイトでthe_field()やthe_sub_field()を使って出力している箇所がある際は、一度サイトをチェックしてみることをおすすめします。

入力内容が正常に出力されていない場合は、上述した対処法をお試しください。