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

概要

elementor/element/parse_css フィルタは、Elementor で作成されたページやウィジェットのカスタム CSS を解析し、最終的な CSS コードを変更するために使用されます。このフィルタを利用することで、開発者はデフォルトのスタイルを上書きしたり、追加のスタイルを適用したりすることができます。このフィルタはカスタムウィジェットや特定のデザイン要件に応じたスタイルの調整によく使われます。

よく使われる機能

1. 特定のウィジェット用のカスタムスタイルの追加
2. 余分なデフォルトのスタイルの削除
3. スタイルのレスポンシブ調整
4. 特定の条件に基づくスタイルの適用
5. ウィジェットのカスタム CSS クラスの追加
6. JavaScript による動的スタイルの生成

構文

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

パラメータ

• $css – 解析される CSS コード。
• $element – Elementor の要素オブジェクト。

戻り値

• 変更後の CSS コード（文字列）。

使用可能なバージョン

• Elementor バージョン: 3.0 以上 (具体的なバージョンに依存する場合があります)
• WordPress バージョン: 5.0 以上 (具体的なバージョンに依存する場合があります)

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

サンプルコード

1. カスタムウィジェット用のスタイルを追加

   add_filter('elementor/element/parse_css', function($css, $element) {
      if ('custom-widget' === $element->get_name()) {
          $css .= '.custom-class { color: red; }';
      }
      return $css;
   });
   

   • このコードは、特定のウィジェット（custom-widget）に対してカスタムスタイルを追加し、文字色を赤に設定します。

2. 不要なデフォルトスタイルの削除

   add_filter('elementor/element/parse_css', function($css) {
      $css = preg_replace('/.default-class{[^}]*}/', '', $css);
      return $css;
   });
   

   • ここでは、特定のデフォルトスタイル（.default-class）を削除することによって、出力される CSS から余分なスタイルを排除します。

3. レスポンシブスタイルを追加

   add_filter('elementor/element/parse_css', function($css) {
      $css .= '@media (max-width: 600px) { .responsive-class { font-size: 14px; } }';
      return $css;
   });
   

   • このコードは、画面幅600px以下の場合に特定のクラスのフォントサイズを変更するレスポンシブスタイルを追加します。

4. 条件に基づくスタイルの適用

   add_filter('elementor/element/parse_css', function($css, $element) {
      if ($element->get_settings('toggle_style')) {
          $css .= '.toggle-class { display: block; }';
      }
      return $css;
   }, 10, 2);
   

   • この例では、ウィジェットの設定に基づいて特定のクラスの表示を変更します。

5. JavaScript による動的スタイルの生成

   add_filter('elementor/element/parse_css', function($css) {
      $css .= '.dynamic-style { background-color: blue; }';
      return $css;
   });
   

   • ここでは、JavaScript を駆使して青色の背景を持つスタイルを追加しています。

これらのサンプルコードは、Elementor を使用してカスタムスタイルを適用する方法を示しています。詳細については、Elementor の公式ドキュメントを確認することをお勧めします。