MENU

カスタムフィールドでショートコードを使う時にpが入ってしまうのを解決

WordPress
  1. TOP
  2. Tips
  3. WordPress
  4. カスタムフィールドでショートコードを使う時にpが入ってしまうのを解決

カスタムフィールド(ACF)でショートコードを使いたい→今度はpが入ってしまった！どうすればいいんだ？と、困った件についてまとめました。

Contents

やりたいこと

  • 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サイトが完全回答でした！！！ありがとうございます！！！！

WORDPRESSDAY
ショートコードの囲み型を作成 先日までに、ショートコードの基本と自己完結型の記事を書きました。 今回は、囲み型のショートコードを作成していき…
Qiita
WordPressのカスタムフィールドでショートコードを利用する – Qiita WordPressには、本文内にプログラムを埋め込むときに利用できる「ショートコード」の機能があります。MW WP Formなどのフォーム系プラグインなども、この機能を利用してい…

試行錯誤したコード

囲み型のショートコード

まず、上で紹介したショートコード囲み型の記事から基本形をお借りして、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() を使用します。
<?php the_field(‘text_field’); ?>

https://hirashimatakumi.com/blog/7.html

get_field();
フィールドの値を取得する際に使用する。
取得した値を表示する際は、echoで出力する。
フィールドの値の有無でif構文を使用する際にも使用する。

https://qiita.com/karaage_oic/items/4d0c25f9910fc05b6751

しかし、入力していないpが自動整形で挿入されてしまい、様々な外見が崩れてしまいます。

ここからしばらくネットの海を彷徨いました。
「カスタムフィールド ショートコード p」とかで検索して色々……
function.phpにショートコード関係で発生するpを消すコードを書くものを色々入れてみましたがどうもうまく行かない。

参考サイト：WordPressの囲み型ショートコードでpやbrが付くのを防ぐ方法
参考サイト：WordPressで特定の部分だけ自動整形のPタグを消す

apply_filters(‘the_content’, ……

通常Advanced Custom Fieldを使っていると
echo get_field(‘custom_field’);
という形で取得して表示しますが、
echo apply_filters(‘the_content’, get_post_meta($post->ID, ‘custom_field’, true));
と記述することで、カスタムフィールド内でもショートコードを利用することができるようになります。

https://www.sriproot.net/blog/shortcode-in-customfield-1248

試してみたけど、pが入ってしまうことに変わりはなかったので、

所望のテンプレートファイルに通常、以下のような「本文を出力する」関数がありますが、
<?php the_content(); ?>
これをこのように置き換えます。
<?php echo get_the_content(); ?>
これでOKです。

http://www-creators.com/archives/653

the_content を get_the_content に変えてみたらapply_filtersが動かなくなったのでこの案は却下としました。

do_shortcode();

Qiita
WordPressのカスタムフィールドでショートコードを利用する – Qiita WordPressには、本文内にプログラムを埋め込むときに利用できる「ショートコード」の機能があります。MW WP Formなどのフォーム系プラグインなども、この機能を利用してい…

ここ↑にあるコードで解決なんだけど、自分のためにちょっと勉強することにした。

the_fieldにするとそのまま表示するだけでショートコードが動かないから……

  1. get_fieldにして表示ではなく「取得」して
  2. do_shortcode();を使って ショートコードを動かせばいい

ということがわかりました。

do_shortcode – ショートコードを変換する

do_shortcode関数は、……、投稿記事を表示する際に自動的に実行されている。
ショートコードは投稿記事以外でも使用でき、 ……、テーマやプラグイン内で実行することで、任意の文字列を対象にショートコードを変換することができる。

https://elearn.jp/wpman/function/do_shortcode.html

なるほど！ 投稿記事だとショートコードを書くとすぐ反映されてた（do_shortcode関数が自動で動作していた）から、テーマ内のphpではショートコードを自分で実行させる指示を書くという発想に欠けていたんだわ。勉強になりました。

しかもdo_shortcodeで普通に……pも入らないんだが……！！？笑
つまりちゃんとショートコード変換が起きたから何も発生しなかったのか？

WordPress
シェアしてね
  • URLをコピーしました！
Contents