カスタムフィールド(ACF)でショートコードを使いたい→今度はpが入ってしまった!どうすればいいんだ?と、困った件についてまとめました。
やりたいこと
- WordPressで既にAdvanced Custom Fieldsを使っている
- 「テキストエリア」内でショートコードを使いたい
- ショートコードはfunction.phpに自分で書きたい
- spanで装飾したいだけなので、pが自動整形で入ると困る
たどり着いた答え
function.php
//[other]装飾したい文字列[/other]
function other_func( $atts, $content = null ) {
return '<span class="other">' . $content . '</span>';
}
add_shortcode('other', 'other_func');
出力したいページ側
<?php echo do_shortcode(get_field('フィールド名')); ?>
えっ、これだけ!?っていう。私の悩みはなんだったんや……
参考サイト
この2サイトが完全回答でした!!!ありがとうございます!!!!

試行錯誤したコード
囲み型のショートコード
まず、上で紹介したショートコード囲み型の記事から基本形をお借りして、function.phpにショートコードを作成します。結局これは最後までこれを使ったのでこれで完璧。
//囲み型ショートコードで出力(ボックスを装飾)
function box_func( $atts, $content = null ) {
return '<div class="box">' . $content . '</div>';
}
add_shortcode('box', 'box_func');
get_field();
問題は、出力する側のコードです。
基本の the_field だとショートコードがそのまま表示されてしまって適用されないので、値を取得するget_fieldを使用します。
投稿に入力されているカスタムフィールド値を「表示」する場合は the_field() を使用します。
https://hirashimatakumi.com/blog/7.html
<?php the_field(‘text_field’); ?>
get_field();
https://qiita.com/karaage_oic/items/4d0c25f9910fc05b6751
フィールドの値を取得する際に使用する。
取得した値を表示する際は、echoで出力する。
フィールドの値の有無でif構文を使用する際にも使用する。
しかし、入力していないpが自動整形で挿入されてしまい、様々な外見が崩れてしまいます。
ここからしばらくネットの海を彷徨いました。
「カスタムフィールド ショートコード p」とかで検索して色々……
function.phpにショートコード関係で発生するpを消すコードを書くものを色々入れてみましたがどうもうまく行かない。
参考サイト:WordPressの囲み型ショートコードでpやbrが付くのを防ぐ方法
参考サイト:WordPressで特定の部分だけ自動整形のPタグを消す
apply_filters(‘the_content’, ……
通常Advanced Custom Fieldを使っていると
https://www.sriproot.net/blog/shortcode-in-customfield-1248
echo get_field(‘custom_field’);
という形で取得して表示しますが、
echo apply_filters(‘the_content’, get_post_meta($post->ID, ‘custom_field’, true));
と記述することで、カスタムフィールド内でもショートコードを利用することができるようになります。
試してみたけど、pが入ってしまうことに変わりはなかったので、
所望のテンプレートファイルに通常、以下のような「本文を出力する」関数がありますが、
http://www-creators.com/archives/653
<?php the_content(); ?>
これをこのように置き換えます。
<?php echo get_the_content(); ?>
これでOKです。
the_content を get_the_content に変えてみたらapply_filtersが動かなくなったのでこの案は却下としました。
do_shortcode();

ここ↑にあるコードで解決なんだけど、自分のためにちょっと勉強することにした。
the_fieldにするとそのまま表示するだけでショートコードが動かないから……
- get_fieldにして表示ではなく「取得」して
- do_shortcode();を使って ショートコードを動かせばいい
ということがわかりました。
do_shortcode – ショートコードを変換する
https://elearn.jp/wpman/function/do_shortcode.html
do_shortcode関数は、……、投稿記事を表示する際に自動的に実行されている。
ショートコードは投稿記事以外でも使用でき、 ……、テーマやプラグイン内で実行することで、任意の文字列を対象にショートコードを変換することができる。
なるほど! 投稿記事だとショートコードを書くとすぐ反映されてた(do_shortcode関数が自動で動作していた)から、テーマ内のphpではショートコードを自分で実行させる指示を書くという発想に欠けていたんだわ。勉強になりました。
しかもdo_shortcodeで普通に……pも入らないんだが……!!?笑
つまりちゃんとショートコード変換が起きたから何も発生しなかったのか?