WEB

WordPressのContact Form 7プラグインで独自のショートコードを呼ぶ方法

WordPressのContact Form 7プラグインで独自のショートコードを呼ぶ方法

こんにちは、エンジニアの段田です。

世間的にはもうシーズン・イン・ザ・サンですね。
自分の中では夏を待ちきれなくて、情熱が花火のようで、夏だねって感じたら、きっと、どこかでひまわりを見ちゃうんじゃないかと思ってました。
こんなSUMMER DREAMはセンチメンタルに首ったけで僕も恋してムーチョしそうです。あー夏休みまでもう少し! Only You 君と夏の日を過ごすのが待ち遠しいですね。

じゃあ、話を進めます。(飽きた)

今回はWordPressのメールフォームプラグイン「Contact Form 7」で、自作のショートコードを呼ぶ方法についてです。

Contact Form 7とは?

WordPress › Contact Form 7 « WordPress Plugins

WordPressでメールフォームを設置できるプラグインです。
公式サイトはこちらから。

 
c71

編集画面はこのようになっていて、HTMLとContact Form 7で用意されているショートコードを書くことによりメールフォームを作成できます。
 

c72

実際に画面表示させるとこんな感じで表示されます。
簡単! 便利!

自分で作ったショートコードを埋め込む

ここで本題です。Contact Form 7でテーマ内の画像を呼び出す必要があり、ショートコードで対応しようとしました。

/**
* テーマ内の画像を呼び出します。
*/
function the_required_image(){
	return '<img src="'.get_stylesheet_directory_uri().'/images/required.png" alt="必須" width="40" height="20"/>';
}
add_shortcode("required_image","the_required_image");

こんなかんじでWordPressで用意されているadd_shortcode関数を使って、ショートコードを登録しました。
 

c74

が、ショートコードは実行されずタグのまま表示されました・・・。

/(^o^)\ナンテコッタイ

でもご安心を。
Contact Form 7プラグインではプラグイン内で実行できるショートコード登録関数があります。それがwpcf7_add_shortcode関数です。
 

/**
* テーマ内の画像を呼び出します。
*/
function the_required_image(){
	return '<img src="'.get_stylesheet_directory_uri().'/images/required.png" alt="必須" width="40" height="20"/>';
}
wpcf7_add_shortcode("required_image","the_required_image");

このように呼び出しをwpcf7_add_shortcodeに変更すると・・・
 

c75

ショートコードが実行され、画像表示されるようになりました!

最後に

今回はテーマ内の画像を呼び出すだけでしたが、カスタマイズが必要な場合は柔軟に対応ができそうです。

他にもプラグイン内でフィルターが用意されているので、別の機会があれば紹介したいと思います。

ではでは・・・。

この記事を書いた人

段田
段田 エンジニア兼段田商会店主 2010年入社
段田です。いつも仕事中は14の言葉を呟いています。らせん階段 カブト虫 廃墟の街 イチジクのタルト カブト虫 ドロローサへの道 カブト虫 特異点 ジョット 天使 紫陽花 カブト虫 特異点 秘密の皇帝...