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

概要

Elementorのフィルタ elementor/divider/styles/additional_styles は、Elementorで作成したページにおいて、分割線のスタイルをカスタマイズするためのフックです。このフィルタを使用することで、デフォルトのスタイルに加えて独自のスタイルを追加することができます。一般的に、以下のような機能を実装する際に使用されます。

分割線の色を変更する
分割線の太さをカスタマイズする
分割線の種類（実線、点線、破線など）を変更する
分割線のマージンやパディングを調整する
特定の条件に基づいてスタイルを変更する
レスポンシブデザインに対応したスタイルを実装する

構文

add_filter('elementor/divider/styles/additional_styles', 'custom_divider_styles');
function custom_divider_styles($styles) {
    // ここでスタイルを追加または変更
    return $styles;
}

パラメータ

$styles: デフォルトのスタイル配列。これを変更することでカスタムスタイルを追加できます。

戻り値

$styles: 変更後のスタイル配列。

使用可能なプラグインバージョン

Elementor: バージョン 3.0 以降
WordPress: バージョン 5.0 以降

サンプルコード

サンプルコード1: 分割線の色を赤に変更

このサンプルコードは、分割線の色を赤に変更します。

add_filter('elementor/divider/styles/additional_styles', function($styles) {
    $styles['color'] = '#ff0000'; // 赤色を指定
    return $styles;
});

サンプルコード2: 分割線の太さを5pxに設定

このサンプルコードは、分割線の太さを5ピクセルにカスタマイズします。

add_filter('elementor/divider/styles/additional_styles', function($styles) {
    $styles['border_width'] = '5px'; // 太さを5pxに設定
    return $styles;
});

サンプルコード3: 分割線を点線に変更

このサンプルコードは、分割線のスタイルを点線に変更します。

add_filter('elementor/divider/styles/additional_styles', function($styles) {
    $styles['border_style'] = 'dotted'; // 点線スタイルを指定
    return $styles;
});

サンプルコード4: レスポンシブデザインに対応

このサンプルコードは、スクリーンサイズによって分割線のスタイルを変更します。

add_filter('elementor/divider/styles/additional_styles', function($styles) {
    if (wp_is_mobile()) {
        $styles['border_width'] = '2px'; // モバイル用に太さを変更
    } else {
        $styles['border_width'] = '4px'; // デスクトップ用に太さを設定
    }
    return $styles;
});

サンプルコード5: カスタムマージンの設定

このサンプルコードは、分割線の上下のマージンを設定します。

add_filter('elementor/divider/styles/additional_styles', function($styles) {
    $styles['margin'] = '20px 0'; // 上下20pxのマージン
    return $styles;
});

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

アクション	使用例
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のデザインに応じて分割線のスタイルを自由にカスタマイズするための強力なツールです。適切なアクションとの組み合わせにより、ユーザーのニーズに応じた柔軟な実装が可能です。

概要

構文