概要
elementor/fonts/additional_fonts フィルタは、Elementorプラグインにおいてカスタムフォントを追加するために使用されます。このフィルタを使用することで、デフォルトのフォント以外にも独自のフォントをサイトに組み込むことができます。このフィルタは、特にデザインやブランディングの要件に応じたフォントを使用したい場合に役立ちます。
以下はこのフィルタがよく使われる機能の例です：
1. ウェブフォントサービス（Google Fontsなど）からのフォント追加
2. 自社製のカスタムフォントファイルを追加
3. 特定のページや投稿に対して異なるフォントスタイルを設定
4. フォントのスタイルやウェイトを柔軟に指定
5. CSSを通じた独自のフォントファミリーの指定
6. フォントロードの最適化に基づく条件付きフォントの読み込み
フィルタ概要
- 構文:
php
add_filter('elementor/fonts/additional_fonts', 'custom_fonts_function'); - パラメータ:
$fonts: 追加されるフォントの配列。
- 戻り値: フィルタが適用された後のフォントの配列。
- 使用可能なプラグインバージョン: Elementor 2.0 以降
- 使用可能なWordPressバージョン: WordPress 5.0 以降
サンプルコード
サンプル1: Google Fontsの追加
このサンプルコードでは、Google Fontsから’Roboto’フォントを追加しています。
add_filter('elementor/fonts/additional_fonts', function($fonts) {
$fonts[] = [
'font_family' => 'Roboto',
'font_weight' => '400',
];
return $fonts;
});
引用元: https://elementor.com
サンプル2: 自社フォントの追加
このコードは、サーバー上のカスタムフォントを追加する例です。
add_filter('elementor/fonts/additional_fonts', function($fonts) {
$fonts[] = [
'font_family' => 'My Custom Font',
'font_weight' => '700',
'font_url' => 'https://example.com/fonts/my-custom-font.woff2',
];
return $fonts;
});
引用元: https://elementor.com
サンプル3: フォントスタイルの条件付け
ここでは、特定の投稿タイプにフォントを適用する例です。
add_filter('elementor/fonts/additional_fonts', function($fonts) {
if (is_singular('portfolio')) {
$fonts[] = [
'font_family' => 'Montserrat',
'font_weight' => '600',
];
}
return $fonts;
});
引用元: https://elementor.com
サンプル4: 複数のフォントを一度に追加
このコードでは、複数のフォントを一度に追加しています。
add_filter('elementor/fonts/additional_fonts', function($fonts) {
$fonts[] = ['font_family' => 'Open Sans', 'font_weight' => '400'];
$fonts[] = ['font_family' => 'Lato', 'font_weight' => '700'];
return $fonts;
});
引用元: https://elementor.com
サンプル5: フォントの読み込み
ここでは、特定のフォントスタイルを条件付きで読み込む例です。
add_filter('elementor/fonts/additional_fonts', function($fonts) {
$fonts[] = ['font_family' => 'Poppins', 'font_weight' => '300'];
return $fonts;
});
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('poppins-font', 'https://fonts.googleapis.com/css?family=Poppins:300');
});
引用元: https://elementor.com
この関数のアクションでの使用可能性
| アクション名 | 使用可能性 |
|---|---|
| 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/fonts/additional_fonts フィルタがどのアクションで使用可能かを示しています。現時点では、特定のアクションでの使用例はありません。