プラグインElementorのelementor/frontend/print_google_fonts関数の使用方法・解説

概要

elementor/frontend/print_google_fonts 関数は、WordPress上でのElementorプラグインの動作に関連する重要な機能を提供します。この関数はGoogle Fontsを利用したフォントスタイルをページに適用するため、特に以下のような場合に頻繁に使用されます：

カスタマイズしたタイポグラフィのスタイルを適用するため
ウェブサイトのデザインを改善するためのフォント選定
レスポンシブデザインにおけるフォントの調整
特定のページや投稿におけるスタイルの一貫性を保つため
CSSが直接変更できない場合に、グローバルにフォント設定を行うため
ユーザーが選択したフォントを簡単に反映させるため

構文

function print_google_fonts();

パラメータ

なし

戻り値

なし。フォントをHTMLヘッダーに追加する

使用可能なWordPressおよびElementorのバージョン

WordPressバージョン: 5.0以上
Elementorバージョン: 2.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: Google Fontsの読み込み

このコードは、カスタムのGoogle Fontsをサイトに追加するためのものです。

add_action('wp_head', function() {
    ?>
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">
    <?php
});

引用元: https://developer.wordpress.org/

サンプルコード2: 特定の条件でGoogle Fontsを読み込む

指定した条件が満たされた場合にのみGoogle Fontsを読み込むサンプルです。

add_action('wp_head', function() {
    if (is_page('contact')) {
        echo '<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">';
    }
});

引用元: https://www.wpbeginner.com/

サンプルコード3: カスタムフォントを使用する

このコードは特定のカスタムフォントを使用するためのもので、必要なスタイルのリンクを挿入します。

add_action('wp_head', function() {
    ?>
    <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap" rel="stylesheet">
    <?php
});

引用元: https://www.smashingmagazine.com/

サンプルコード4: 複数のフォントを読み込む

このコードは、複数のフォントを同時に読み込む例です。

add_action('wp_head', function() {
    echo '<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Raleway:400,600&display=swap" rel="stylesheet">';
});

引用元: https://www.w3schools.com/

サンプルコード5: ローカル環境でのフォントの条件付け

ローカル環境でのみにGoogle Fontsを読み込むコードです。

add_action('wp_head', function() {
    if ($_SERVER['SERVER_NAME'] === 'localhost') {
        echo '<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">';
    }
});

引用元: https://css-tricks.com/

概要

構文