プラグインElementorのelementor/editor/wp_headアクションの使用方法・解説

概要

elementor/editor/wp_headは、Elementorで編集画面が表示される際に実行されるアクションフックです。このフックを利用することで、WordPressのヘッダー部分にカスタムスクリプトやスタイルを追加することができます。主に、Elementorを使ったカスタムデザインや機能を実装する際に利用されます。

このアクションの主な使用例:

カスタムCSSの追加
JavaScriptファイルの読み込み
特定のページでのメタタグの追加
スクリプトの依存関係の定義
Google Fontsや他の外部リソースの追加
フロントエンドのセキュリティ対策のための設定

構文

add_action( 'elementor/editor/wp_head', 'your_function' );

パラメータ

このアクションには特にパラメータはありません。

戻り値

このアクション自体は戻り値を持ちません。

使用可能なプラグイン

Elementor 2.0以降
WordPress 5.0以降

サンプルコード

サンプル1: カスタムCSSの追加

add_action( 'elementor/editor/wp_head', function() {
    echo '<style>
            .custom-editor-style { background-color: #f0f0f0; }
          </style>';
});

このコードは、Elementorの編集画面にカスタムスタイルを追加します。.custom-editor-styleクラスに対して、背景色を設定しています。

サンプル2: JavaScriptファイルの読み込み

add_action( 'elementor/editor/wp_head', function() {
    echo '<script src="' . esc_url( get_template_directory_uri() . '/js/custom-editor.js' ) . '"></script>';
});

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

サンプル3: メタタグの追加

add_action( 'elementor/editor/wp_head', function() {
    echo '<meta name="description" content="This is a custom Elementor editor description">';
});

このサンプルは、Elementorの編集画面にカスタムのメタタグを追加するものです。

サンプル4: Google Fontsの追加

add_action( 'elementor/editor/wp_head', function() {
    echo '<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">';
});

このコードは、Elementorの編集画面にGoogle Fontsとして「Roboto」フォントを追加します。

サンプル5: フィルターフックでのカスタマイズ

add_action( 'elementor/editor/wp_head', function() {
    if ( is_user_logged_in() ) {
        echo '<script>console.log("User is logged in.");</script>';
    }
});

このサンプルコードは、ユーザーがログインしている場合に特定のスクリプトをコンソールに出力するためのものです。

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

アクション名	使用例
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
elementor/editor/wp_head	〇

概要