プラグインContact Form 7のwpcf7_enqueue_scriptsアクションの使用方法・解説

概要

wpcf7_enqueue_scripts アクションは、WordPress プラグイン Contact Form 7 において、フォームが表示される際に必要なスクリプトやスタイルシートをエンキューするために使用されます。このフックは、Contact Form 7 の機能を拡張したり、独自のスタイルやスクリプトを追加したりする場合に非常に便利です。以下のような機能を実装する際によく使われます。

カスタムスタイルシートの追加
jQuery プラグインの読み込み
フォームのバリデーションスクリプトの追加
独自のアイコンやアニメーションの追加
サードパーティ製スクリプトのインクルード
Google Analytics や他のトラッキングスクリプトの追加

構文

add_action( 'wpcf7_enqueue_scripts', 'your_custom_function' );

パラメータ

your_custom_function: 自分が作成した関数名。

戻り値

このアクションは戻り値を持ちません。エンキューしたスクリプトやスタイルシートは、指定したフォームが表示されるときに適用されます。

使用可能なバージョン

Contact Form 7 バージョン: 4.7以上
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のエンキュー

function my_custom_styles() {
    wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/css/my-custom-style.css' );
}
add_action( 'wpcf7_enqueue_scripts', 'my_custom_styles' );

このコードは、Contact Form 7 が表示される際にカスタム CSS をエンキューします。

サンプル2: jQueryプラグインのエンキュー

function my_custom_scripts() {
    wp_enqueue_script( 'my-jquery-plugin', get_template_directory_uri() . '/js/my-jquery-plugin.js', array('jquery'), null, true );
}
add_action( 'wpcf7_enqueue_scripts', 'my_custom_scripts' );

ここでは、jQuery を依存関係として持つ jQuery プラグインをエンキューしています。

サンプル3: フォームバリデーションスクリプトの追加

function add_validation_script() {
    wp_enqueue_script( 'form-validation', get_template_directory_uri() . '/js/form-validation.js', array(), null, true );
}
add_action( 'wpcf7_enqueue_scripts', 'add_validation_script' );

このコードは、Contact Form 7 のフォームでバリデーションを行うための JavaScript を追加します。

サンプル4: Google Analytics スクリプトの追加

function add_google_analytics() {
    ?>
    <script>
        // Google Analytics tracking code
    </script>
    <?php
}
add_action( 'wpcf7_enqueue_scripts', 'add_google_analytics' );

このサンプルでは、Google Analytics のトラッキングコードをフォームに追加します。

サンプル5: カスタムスクリプトのエンキュー

function my_custom_form_script() {
    wp_enqueue_script( 'my-custom-script', get_template_directory_uri() . '/js/my-custom-script.js', array(), null, true );
}
add_action( 'wpcf7_enqueue_scripts', 'my_custom_form_script' );

このコードは、Contact Form 7 のフォームにカスタム JavaScript を追加します。

概要

構文