【WordPress】「ショートコード」を「カスタムフィールド」で使う方法の備忘録

ブログ・サイト
ブログ・サイト
この記事は約3分で読めます。

とっちゃん@nyanco! です。

今回はWordPress(ワードプレス)の「ショートコード」を「カスタムフィールド」で使えるようにする方法の備忘録です。

スポンサーリンク

デフォルトでは「カスタムフィールド」に「ショートコード」は使えない

肉玉にゃんこ

「ショートコード」とっても便利だけど、もしかして「カスタムフィールド」では使えないのですかにゃ〜?

「ショートコード」「カスタムフィールド」に入力すると、[test] のように入力したそのままで表示されてしまいます。

そう、WordPressのデフォルトでは「カスタムフィールド」に「ショートコード」は使えない仕様となっています。

「カスタムフィールド」に「ショートコード」を使えるようにする方法

▼通常、「カスタムフィールド」を出力したい場合は、テーマファイルの「カスタムフィールド」を出力したい箇所に下記のように記述します(例として「custom_field」というフィールド名のカスタムフィールドを出力しています)。

<p>
 <?php echo get_post_meta( get_the_ID(), 'custom_field' ,true ); ?>
</p>

「ACF(Advanced Custom Fields)」で作成した「カスタムフィールド」ならもっとシンプルです。

<p>
 <?php the_field('custom_field'); ?>
</p>
肉玉にゃんこ

ちなみに「the_field()」はACF専用の関数ですにゃ〜

「ショートコード」が使えるようにするには、下記のように変更します。

<p>
 <?php echo apply_filters('the_content', get_post_meta( get_the_ID(), 'custom_field', true));?>
</p>
肉玉にゃんこ

ACF専用の関数「the_field()」だとできないのでWordPress関数の「get_post_meta」を使いますにゃ〜

これで、「カスタムフィールド」にも「ショートコード」の内容が出力されるようになります!

参考にさせていただいたサイト様

WordPressのカスタムフィールドでショートコードを使う
日曜日なので軽い話題。WordPressのカスタムフィールド内でショートコードを利用する方法です。あまり使う事も無いかもしれませんが、ショートコードを多用する方には利用価値がありそうです。
肉玉にゃんこ

ありがとうございますにゃ〜

「ショートコード」が勝手にpタグで囲まれてしまう時の対処法

「カスタムフィールド」「ショートコード」が使えるようになったけど、今度は「ショートコード」で出力した内容が勝手に「pタグ」で囲まれてしまうという現象に悩まされましたが、下記サイト様の記事で解消しました!ありがとうございます!

WordPressでショートコードがpタグで囲まれたり改行されてしまうのを防ぐ方法
僕はWordPressに投稿する場合、基本的にテキストエディターを使ってHTMLタグも手で打ったりAddquicktagに登録したものを使ったりしているので、ショートコードとは無縁のWPライフを送ってきました。しかし、最近ブロガーさんやWebメディア運営に力を入れている会社さんからの制作依頼が増え、それに伴い「ビジュア

おわりに

そもそも「カスタムフィールド」「ショートコード」を使いたいなんてニッチなニーズなのかも知れませんが、「ショートコード」を多用している方には参考になるかと!

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

コメント

タイトルとURLをコピーしました