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

概要

elementor/icons_manager/additional_tabsは、Elementorのアイコンマネージャーにカスタムタブを追加するためのフィルターフックです。このフックを使用することで、独自のアイコンやカテゴリを追加し、Elementorのユーザビリティを向上させることができます。このフィルタは以下のような機能を実装する際によく使用されます：

独自のアイコンセットを追加する。
タブを通じてアイコンを整理する。
特定のプロジェクトやテーマに合わせたアイコンカテゴリを作成する。
アイコンのデフォルトセットをカスタマイズする。
他のプラグインやテーマと連携するためのアイコンを提供する。
デザインの一貫性を持たせるためのカスタムアイコンバンクを作成する。

構文

add_filter( 'elementor/icons_manager/additional_tabs', 'your_custom_function' );

パラメータ

$tabs (array): 追加するタブの配列。

戻り値

(array): タブの配列。カスタムタブを追加した場合は、元のタブに加えて追加したタブが含まれます。

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

Elementor: 2.0以降

ワードプレスのバージョン

WordPress: 4.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: カスタムアイコンタブを追加

このコードは、”Custom Icons”というカスタムタブをアイコンマネージャーに追加します。

add_filter('elementor/icons_manager/additional_tabs', function($tabs) {
    $tabs['custom-icons'] = [
        'title' => __('Custom Icons', 'your-plugin'),
        'icon' => 'fa fa-star',
    ];
    return $tabs;
});

説明: アイコンマネージャーに新しいタブを追加し、タイトルとアイコンを設定します。

サンプル2: 特定のアイコンを追加

このコードは、特定のアイコンを新しいタブに追加します。

add_filter('elementor/icons_manager/additional_tabs', function($tabs) {
    $tabs['custom-icons'] = [
        'title' => __('Custom Icons', 'your-plugin'),
        'icon' => 'fa fa-star',
    ];

    $tabs['custom-icons']['icons'] = [
        'custom-icon-1' => 'path/to/icon1.svg',
        'custom-icon-2' => 'path/to/icon2.svg',
    ];

    return $tabs;
});

説明: 新しいタブに特定のカスタムアイコンを追加します。

サンプル3: デフォルトアイコンのオーバーライド

このコードは、Elementorのデフォルトアイコンの一部をオーバーライドします。

add_filter('elementor/icons_manager/additional_tabs', function($tabs) {
    if (isset($tabs['fa-free'] ) ) {
        $tabs['fa-free']['icons']['fa-beer'] = 'path/to/new/icon.svg';
    }
    return $tabs;
});

説明: 既存のタブから特定のアイコンを新しいアイコンに変更します。

サンプル4: 自動生成されたアイコンリストを修正

このコードは、自動生成されたアイコンリストを修正します。

add_filter('elementor/icons_manager/additional_tabs', function($tabs) {
    foreach ($tabs as &$tab) {
        if (isset($tab['icons'])) {
            foreach ($tab['icons'] as &$icon) {
                $icon['name'] .= ' (Custom)'; // アイコン名にカスタムを追加
            }
        }
    }
    return $tabs;
});

説明: 各アイコンの名前に”(Custom)”を追加します。

サンプル5: 新規タブにアイコンを動的に追加

このコードは、新規タブにアイコンを動的に追加します。

add_filter('elementor/icons_manager/additional_tabs', function($tabs) {
    $tabs['dynamic-icons'] = [
        'title' => __('Dynamic Icons', 'your-plugin'),
        'icon' => 'fa fa-refresh',
        'icons' => array_map(function($i) {
            return "dynamic-icon-$i";
        }, range(1, 5)), // 1から5までのアイコンを動的に生成
    ];

    return $tabs;
});

説明: 動的に生成したアイコンのリストを新しいタブに追加します。

概要

構文