プラグインWooCommerceのadmin_enqueue_scriptsアクションの使用方法・解説

概要

admin_enqueue_scriptsアクションは、WordPressの管理画面でスクリプトやスタイルシートを適切に読み込むためのフックです。WooCommerceをはじめとするプラグイン開発において、管理画面でのカスタマイズや機能追加の際によく使用されます。このアクションを使用することで、特定のページや条件に基づいて必要なリソースのみを効率的に読み込むことが可能です。

一般的によく使われる場合の例は次の通りです：
1. 管理画面用のカスタムJavaScriptの追加
2. 管理画面用のカスタムCSSの追加
3. 特定の管理ページでのみスクリプトを読み込む
4. プラグインの設定メニューのスタイルの調整
5. 管理画面のユーザーインターフェースを改善するためのリソース追加
6. JSライブラリやフレームワーク（例: jQuery、Bootstrapなど）の読み込み

構文

add_action( 'admin_enqueue_scripts', 'callback_function_name' );

パラメータ

$hook_suffix: 現在の管理ページのフック名。

戻り値

戻り値はありませんが、関数内でスクリプトやスタイルのキューが登録されます。

互換性

WooCommerce: バージョンに依存せず、一般的に使用できます。
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

function my_custom_admin_styles() {
    wp_enqueue_style( 'my-admin-style', plugin_dir_url( __FILE__ ) . 'admin-style.css' );
}
add_action( 'admin_enqueue_scripts', 'my_custom_admin_styles' );

この例では、カスタムCSSファイルを管理画面に読み込むためのコードです。

サンプルコード 2

function my_custom_admin_script() {
    wp_enqueue_script( 'my-admin-script', plugin_dir_url( __FILE__ ) . 'admin-script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'admin_enqueue_scripts', 'my_custom_admin_script' );

このコードは、管理画面でカスタムJavaScriptファイルを読み込むためのものです。

サンプルコード 3

function load_admin_assets( $hook ) {
    if ( 'woocommerce_page_my_custom_page' === $hook ) {
        wp_enqueue_style( 'my-custom-page-style', plugin_dir_url( __FILE__ ) . 'custom-page-style.css' );
        wp_enqueue_script( 'my-custom-page-script', plugin_dir_url( __FILE__ ) . 'custom-page-script.js', array( 'jquery' ), '1.0.0', true );
    }
}
add_action( 'admin_enqueue_scripts', 'load_admin_assets' );

この例では、特定のWooCommerce管理ページでのみスタイルとスクリプトを読み込む方法を示しています。

サンプルコード 4

function my_custom_icon_scripts() {
    wp_enqueue_style( 'my-icon-font', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css' );
}
add_action( 'admin_enqueue_scripts', 'my_custom_icon_scripts' );

このコードは、Font Awesomeのアイコンフォントを管理画面に追加するためのものです。

サンプルコード 5

function my_admin_footer_script() {
    echo '<script>console.log("This is admin footer script.");</script>';
}
add_action( 'admin_footer', 'my_admin_footer_script' );

この例は、管理画面のフッターに簡単なJavaScriptを追加するものです。ただし、admin_footerアクションを使用しているため、admin_enqueue_scriptsの用途には含まれませんが、関連するフックでの使用例として示しています。

概要

構文