プラグインElementorのelementor/fonts/print_font_links/{$font_type}フィルタの使用方法・解説

概要

elementor/fonts/print_font_links/{$font_type} フィルタは、Elementorプラグインにおいてフォントを管理するためのフックです。このフィルタは、特定のフォントタイプに基づいてフォントリンクを追加または編集できる機能を提供します。主に以下のような機能を実装する際に使用されます。

カスタムフォントの追加
Google Fontsからのフォントインポート
フォントスタイル、ウエイトの設定
テーマやプラグイン特有のフォントの適用
フォントのバージョン管理
フォントの読み込み条件の制御

このフィルタの構文は以下の通りです：

add_filter('elementor/fonts/print_font_links/{$font_type}', 'your_function');

パラメータ

{$font_type}: 対象となるフォントのタイプ（例: ‘text’, ‘icon’ など）
your_function: 追加または変更を行うユーザー定義関数

戻り値

フィルタリングされたフォントリンクのHTML文字列

使用可能なバージョン

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: カスタムフォントを追加

add_filter('elementor/fonts/print_font_links/text', function($link) {
    $link .='<link rel="stylesheet" href="https://example.com/custom-font.css">';
    return $link;
});

このコードは、Elementorにカスタムフォントを追加する例です。指定したCSSファイルからフォントを読み込むリンクを追加します。

サンプル 2: Google Fontsのインポート

add_filter('elementor/fonts/print_font_links/text', function($link) {
    $link .= '<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">';
    return $link;
});

このコードは、Google Fontsから「Roboto」フォントを読み込むためのリンクを追加しています。

サンプル 3: 異なるフォントスタイルを適用

add_filter('elementor/fonts/print_font_links/icon', function($link) {
    $link .= '<link href="https://example.com/icons.css" rel="stylesheet">';
    return $link;
});

このコードは、アイコンフォントのスタイルシートを追加する方法の例です。

サンプル 4: フォントのバージョン管理

add_filter('elementor/fonts/print_font_links/text', function($link) {
    $link .= '<link rel="stylesheet" href="https://example.com/v1/font.css?v=2">';
    return $link;
});

このコードは、バージョン管理を行いながら特定のフォントのスタイルシートを読み込む方法を示しています。

サンプル 5: フォントの条件付き読み込み

add_filter('elementor/fonts/print_font_links/text', function($link) {
    if (is_page('contact')) {
        $link .= '<link href="https://example.com/contact-font.css" rel="stylesheet">';
    }
    return $link;
});

このコードは、「contact」ページでのみ特定のフォントを読み込む条件を設定しています。

概要