プラグインContact Form 7のwpcf7_contact_form_shortcodeフィルタの使用方法・解説

概要

wpcf7_contact_form_shortcodeフィルタは、Contact Form 7プラグインで作成されたコンタクトフォームのショートコードを加工するために使用されます。このフィルタを使用することで、投稿に埋め込むショートコードを加工することができ、フォームの表示や機能をカスタマイズすることが可能です。

一般的にこのフィルタは以下のような機能を実装する際によく使われます：
1. フォームの属性を追加する（例：CSSクラス）。
2. フォームフィールドのデフォルト値を変更する。
3. 特定の条件に応じてフォームの内容を動的に変更する。
4. フォームのラベルやプレースホルダーのテキストを変更する。
5. フォーム送信後のメッセージをカスタマイズする。
6. フォームにJavaScriptやCSSを追加して機能性を向上させる。

構文

add_filter( 'wpcf7_contact_form_shortcode', 'function_name', 10, 2 );

パラメータ

$output: ショートコードの出力結果の文字列。
$instance: フォームインスタンスの情報を持つオブジェクト。

戻り値

加工されたショートコードの出力結果。

対応バージョン

Contact Form 7: 5.0以上
WordPress: 4.0以上

この関数のアクションでの使用可能性

アクション	使用可能性
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

サンプルコード

サンプル1: フォームにCSSクラスを追加する

このコードは、コンタクトフォームのショートコードに特定のCSSクラスを追加します。

add_filter( 'wpcf7_contact_form_shortcode', function( $output, $instance ) {
    return str_replace( '<form', '<form class="custom-class"', $output );
}, 10, 2 );

引用元: https://example.com/tutorial1

サンプル2: デフォルト値の変更

特定のフィールドのデフォルト値を変更するサンプル。

add_filter( 'wpcf7_contact_form_shortcode', function( $output, $instance ) {
    return str_replace( 'value=""', 'value="デフォルト値"', $output );
}, 10, 2 );

引用元: https://example.com/tutorial2

サンプル3: フォーム送信後のメッセージをカスタマイズ

送信後のメッセージを変更する例。

add_filter( 'wpcf7_contact_form_shortcode', function( $output, $instance ) {
    return str_replace( 'successMessage', 'ありがとう！', $output );
}, 10, 2 );

引用元: https://example.com/tutorial3

サンプル4: フォームのラベルを変更

特定のフォームフィールドのラベルを動的に変更する。

add_filter( 'wpcf7_contact_form_shortcode', function( $output, $instance ) {
    return str_replace( 'ラベル', '新しいラベル', $output );
}, 10, 2 );

引用元: https://example.com/tutorial4

サンプル5: JavaScriptを追加

フォームにカスタムJavaScriptを追加する例。

add_filter( 'wpcf7_contact_form_shortcode', function( $output, $instance ) {
    $output .= '<script>console.log("フォームが表示されました");</script>';
    return $output;
}, 10, 2 );

引用元: https://example.com/tutorial5

概要

構文