【Contact Form 7】コンタクトフォームの編集ページでショートコードを使って画像を呼び出す方法

こんにちは、ゆうや（@yuyaphotograph）です！

この記事では、

という方のお悩みを解決します！

どういうシチュエーション？

Contact Form 7のコンタクトフォームの編集ページで貼り付けるコードには、phpの記述は書けません。

<a href="">
  <img src="'.get_stylesheet_directory_uri().'/resources/images/contact-privacy-icon.png" alt="">個人情報の取り扱いについて
</a>

そのため、WordPressテーマ内の画像を挿入する際、srcのパスはhttpsから始まるフルパスで直接指定するしかないように思われます。

今回紹介する方法を知るまではぼくもこんな感じでimg要素を設置していました。

▼▼▼

<a href="">
  <img src="https://sample.com/resources/images/contact-privacy-icon.png" alt="">個人情報の取り扱いについて
</a>

もちろんこれでちゃんと動作するので問題はないと言えばないのです。

しかし、テスト環境と本番環境でURLが異なってしまうので移し替える時にそこだけ修正しないといけないのが面倒くさい。

どうするのが最もスマートなのか、ずっと考えていた時に、たまたまLIGの記事に出会ってドンビシャで解決してくれたので、以下でその方法を紹介します。

ショートコードで画像を呼び出す方法

以下、2ステップで任意の画像をショートコードで呼び出すことができます。

1つずつ解説します。

functions.phpに追記

以下のコードをお使いのテーマのfunctions.phpに貼り付けましょう。

＊ショートコード名はよしなに、srcのパスはご自身の環境に合わせて変更してください。

// テーマ内の画像をコンタクトフォームの編集ページで呼び出すショートコード
function the_required_image(){
  return '<img src="'.get_stylesheet_directory_uri().'/resources/images/contact-privacy-icon.png" alt="">';
}
wpcf7_add_shortcode("privacy_icon","the_required_image");

編集ページでショートコードを使う

あとは、コンタクトフォームの編集ページの任意の箇所に、先程作成したショートコードを[privacy_icon]といった形で追加してあげれば完了です。

以下、ショートコードの記述例となります。

<a href="">
  [privacy_icon]個人情報の取り扱いについて
</a>

まとめ

以上、Contact Form 7のコンタクトフォームの編集ページでショートコードを使って画像を呼び出す方法を紹介しました。

もちろん画像だけではなく、定型文、その他テキストをショートコードとして格納しておいて使い回すことにも使えそうですね。

今回のTipsが少しでもお役に立ちますように！

Contact Form 7記事まとめ

Contact Form 7を使うときに役立つ記事まとめ