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

概要

elementor/icons_manager/native フィルタは、Elementor プラグインでアイコンのマネージメントを行うために使用されるフィルタです。このフィルタを利用することで、デフォルトのアイコンセットを拡張したり、カスタムアイコンを追加したりすることが可能です。このフィルタは、以下の場面で特に役立ちます：

1. 独自のアイコンフォントを追加したいとき
2. 特定のアイコンセットをフィルタリングしたいとき
3. アイコンの表示条件をカスタマイズしたいとき
4. アイコンのスタイルを一括で変更したいとき
5. 他のプラグインやテーマと連携し、アイコンをシームレスに統合する必要があるとき
6. ユーザインターフェースをカスタマイズし、特定のデザイン要件に応じてアイコンを選択したいとき

フィルタの概要

• 構文: add_filter('elementor/icons_manager/native', 'カスタム関数名');
• パラメータ: $icons (アイコンの配列)
• 戻り値: カスタマイズされたアイコンの配列
• 使用可能なプラグインのバージョン: Elementorバージョン 3.0以降
• WordPressのバージョン: バージョン 5.0以降

サンプルコード

1. 独自アイコンの追加

   add_filter('elementor/icons_manager/native', function($icons) {
      $icons['my_custom_icon'] = [
          'title' => 'My Custom Icon',
          'url' => 'path/to/my-custom-icon.svg',
      ];
      return $icons;
   });
   

   このコードは、Elementorのアイコンマネージャーに独自のアイコンを追加します。

2. アイコンセットのフィルタリング

   add_filter('elementor/icons_manager/native', function($icons) {
      foreach ($icons as $key => $icon) {
          if ($icon['title'] === 'Unwanted Icon') {
              unset($icons[$key]);
          }
      }
      return $icons;
   });
   

   ここでは、特定のアイコンをアイコンセットから削除するフィルタリング処理を行います。

3. 複数アイコンの追加

   add_filter('elementor/icons_manager/native', function($icons) {
      $custom_icons = [
          'icon_one' => ['title' => 'Icon One', 'url' => 'path/to/icon-one.svg'],
          'icon_two' => ['title' => 'Icon Two', 'url' => 'path/to/icon-two.svg'],
      ];
      return array_merge($icons, $custom_icons);
   });
   

   このコードは、複数のカスタムアイコンを一度にアイコンマネージャーに追加します。

4. アイコンのタイトルを変更

   add_filter('elementor/icons_manager/native', function($icons) {
      if (isset($icons['old_icon_title'])) {
          $icons['old_icon_title']['title'] = 'New Icon Title';
      }
      return $icons;
   });
   

   既存のアイコンのタイトルを変更するためのフィルタです。

5. アイコンのURLを変更

   add_filter('elementor/icons_manager/native', function($icons) {
      if (isset($icons['example_icon'])) {
          $icons['example_icon']['url'] = 'path/to/new-example-icon.svg';
      }
      return $icons;
   });
   

   こちらは、特定のアイコンのURLを新しいものに変更するサンプルコードです。

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

このフィルタは、Elementorのアイコン管理に特化しており、他の一般的なアクションフックでは直接の使用は見受けられません。