プラグインElementorのelementor/element/before_parse_cssフィルタの使用方法・解説

概要

elementor/element/before_parse_css フィルタは、ElementorのカスタムCSSを解析する直前に呼び出されます。このフックを使用すると、Elementorの要素に関するCSSコードを変更したり、カスタマイズしたりすることができます。このフィルタは、以下のようなケースでよく使われます。

特定の要素に独自のスタイルを追加する
既存のCSSルールを上書きする
レスポンシブデザインの調整
特定の条件に基づいてスタイルを変更する
グローバルなスタイル設定を適用する
テーマのスタイルと統合する

構文

add_filter('elementor/element/before_parse_css', 'your_custom_function', 10, 2);

パラメータ

string $css: Elementorで生成されたCSS。
object $element: 現在のElementor要素オブジェクト。

戻り値

string: 修正されたCSSコード。

プラグインおよびワードプレスのバージョン

Elementor: バージョン3.0以降
WordPress: バージョン5.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 add_custom_css( $css, $element ) {
    if ( 'YOUR_ELEMENT_NAME' === $element->get_name() ) {
        $css .= '.your-custom-class { color: red; }';
    }
    return $css;
}
add_filter( 'elementor/element/before_parse_css', 'add_custom_css', 10, 2 );

このコードは、特定のElementor要素にカスタムCSSクラスを追加し、文字色を赤に設定します。

サンプルコード 2: 既存のスタイルの上書き

function override_default_css( $css, $element ) {
    if ( 'YOUR_ELEMENT_NAME' === $element->get_name() ) {
        $css = str_replace( 'original-color', 'blue', $css );
    }
    return $css;
}
add_filter( 'elementor/element/before_parse_css', 'override_default_css', 10, 2 );

このコードでは、指定したElementor要素に対して元の色を青に変更しています。

サンプルコード 3: メディアクエリの追加

function add_media_queries( $css, $element ) {
    $css .= '@media (max-width: 600px) { .your-class { font-size: 12px; } }';
    return $css;
}
add_filter( 'elementor/element/before_parse_css', 'add_media_queries', 10, 2 );

このコードは、画面幅が600ピクセル以下のときにフォントサイズを小さくするメディアクエリを追加します。

サンプルコード 4: 条件付きスタイルの適用

function conditional_styles( $css, $element ) {
    if ( is_single() ) {
        $css .= '.conditional-class { display: none; }';
    }
    return $css;
}
add_filter( 'elementor/element/before_parse_css', 'conditional_styles', 10, 2 );

このコードは、単一の投稿ページで特定のCSSクラスを非表示にするスタイルを追加しています。

サンプルコード 5: グローバルスタイルの適用

function global_styles( $css, $element ) {
    $css .= '.global-class { padding: 20px; margin: 10px; }';
    return $css;
}
add_filter( 'elementor/element/before_parse_css', 'global_styles', 10, 2 );

このコードは、すべてのElementor要素に共通のパディングとマージンを持つスタイルを追加しています。

概要

構文