WPBeginner - 初心者向けWordPressチュートリアル

最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16歳以上
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WordPressテーマにGoogle Webフォントを「正しく」追加する方法

By Editorial Staff | | Reader Disclosure

Shares 136 ChatGPT Perplexity X LinkedIn WhatsApp

WordPressテーマにGoogleウェブフォントを追加したいですか？

Googleフォントを使用すると、WordPressウェブサイトで美しいウェブフォントを簡単に使用できます。これらを使用して、ウェブサイトのタイポグラフィ、ユーザーエクスペリエンス、および美観を向上させることができます。

この記事では、Google WebフォントをWordPressテーマに正しく追加する方法を紹介します。

WordPressテーマにGoogle Web Fontsを追加する

このガイドで取り上げるトピックの簡単な概要を以下に示します。

WordPressテーマに最適なGoogleフォントを見つける

ここで最初にやるべきことは、気に入ったGoogleフォントを見つけることです。Google Fontsのウェブサイトにアクセスして、ライブラリを閲覧してください。

Googleフォント

気に入ったWebセーフフォントを見つけたら、クリックして利用可能なさまざまなスタイルを表示してください。

ウェブサイトで使用したいスタイルを選択できます。

フォントスタイルを選択

次に、「選択したファミリーを表示」ボタンをクリックすると、サイドバーが開きます。

ここから、「ウェブでの使用」セクションの下に使用方法が表示されます。

使用方法

サイトにフォントを追加するための2つの異なるタブが表示されます

1つ目はリンク方法で、Webフォントを追加する推奨される標準的な方法です。

2番目のタブは、CSSスタイルシートを介してフォントを読み込むことができる@import CSSメソッドを使用しています。

これらの各方法の使い方と、それぞれの長所と短所を説明します。

注意: これらの方法のいくつかは、WordPressテーマファイルを編集する必要があります。FTPクライアントまたはホスティングコントロールパネルのファイルマネージャーアプリを使用して、ウェブサイトに接続することで編集できます。

接続後、/wp-content/themes/Your-Theme-Name/ フォルダにアクセスする必要があります。そこには、このチュートリアルで編集が必要になる可能性のあるテーマファイルがあります。

テーマフォルダ

詳細については、WordPressにウェブ上のスニペットをコピー＆ペーストする方法に関するチュートリアルをご覧ください。

方法1. プラグインを使用してGoogleフォントをテーマに追加する

この方法では、Googleフォントを読み込むためにWordPressプラグインを使用します。

まず、Fonts Pluginをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

アクティベート後、外観 » カスタマイズページにアクセスしてテーマカスタマイザーを起動する必要があります。ここから、新しいフォントプラグインタブが表示されます。

フォントプラグインタブ

これをクリックすると、プラグインオプションが表示されます。

ウェブサイトのさまざまな領域にGoogleフォントを使用することを選択できます。

フォント設定

あるいは、WordPressテーマ用にフォントを読み込むだけを選択することもできます。

単純に 高度な設定 » フォントのみ読み込む タブに切り替えます。

フォントのみを読み込む

ここから、WordPressテーマに読み込みたいGoogleフォントを選択できます。

フォント名を入力して選択するだけです。

フォントを選択

終了したら、変更を保存するために公開ボタンをクリックすることを忘れないでください。

プラグインの高度な機能を使用してウェブサイトのさまざまな領域にフォントを割り当てた場合、それらは自動的に機能します。

一方、フォントのみを読み込むことを選択した場合は、それらのためのカスタムCSSルールを追加する必要があります。たとえば、ウェブサイト全体で段落要素にフォントを読み込む方法は次のとおりです。

p { 
font-family: 'Open Sans', sans-serif;
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

方法2. テーマのヘッダーにGoogle Webフォントを追加する

この方法は、GoogleフォントをWordPressテーマに直接追加する最も簡単な方法です。

WordPressテーマまたは子テーマのheader.phpファイルを編集するだけです。その後、WordPressテーマのスタイルシートリンクコードの前にLinkコードをコピーして貼り付けます。

このようになります。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">
Hosted with ❤️ by WPCode
1-click Use in WordPress

基本的な目標は、フォントリクエストをできるだけ早く配置することです。これにより、ユーザーのブラウザはページをレンダリングする前にフォントをダウンロードできます。

それが完了したら、テーマのCSSファイルでフォントを使用できます：

h1 {
    font-family: 'Open Sans',  sans- serif;
}
Hosted with ❤️ by WPCode
1-click Use in WordPress

方法3. テーマのスタイルシートにGoogleフォントを追加する

この方法では、WordPressテーマのメインCSSファイルにフォントCSSをインポートします。

WordPressテーマのルートフォルダにあるstyle.cssファイルを編集し、「@import」タブのコードをCSSファイルの上部に追加するだけです。

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;800&display=swap');
Hosted with ❤️ by WPCode
1-click Use in WordPress

これは、デモウェブサイトの style.css ファイルでの表示方法です。

フォントCSSをインポート

重要: CSSファイルの先頭に@import行を追加してください。

方法4. WordPressでGoogleフォントを適切にエンキューする

先ほど説明した最初の2つの方法は、WordPressのテーマファイルを編集して直接フォントを追加する必要があります。

これは、子テーマを使用してすべての変更を行う場合にうまく機能します。

一方で、メインテーマに変更を加える場合、テーマを更新するたびに変更が失われます。

WordPressテーマで使用するために、Googleフォントを自動的に読み込むコードをプログラムで追加する方が簡単な修正方法です。

これを行うには、サイト固有のプラグインにカスタムコードスニペットを追加するか、カスタムコードプラグインを使用します。詳細は、WordPressにカスタムコードを追加する方法に関するチュートリアルを参照してください。

次のコードスニペットをWordPressウェブサイトに追加するだけです。

function wpb_add_google_fonts() {
 
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
Hosted with ❤️ by WPCode
1-click Use in WordPress

注意：追加したいGoogleフォントのURLを必ずGoogleフォントのURLに置き換えてください。

これで完了です。WordPressは、追加したGoogleフォントを自動的に取得するためにリンクメソッドを使用するようになります。

ウェブサイトのソースコードを表示することで確認できます。そこには、Googleフォントのスタイルシートがウェブサイトのフッターセクションに追加されているのが表示されます。

フォントを読み込みました

ボーナスセクション：WebフォントがWordPressの速度にどのように影響するか

Googleフォントは、世界中にサーバーロケーションを持つGoogleの巨大なCDNネットワーク経由で配信されるため、非常に高速に読み込まれます。

これらのフォントは数百万のウェブサイトで使用されているため、ユーザーはすでにブラウザのキャッシュに保存している可能性が高いです。

これにより、ウェブサイトの速度へのパフォーマンスへの影響が軽減されます。デザインで1つまたは2つのウェブフォントのみを使用することで、この影響をさらに軽減できます。

その他のヒントについては、初心者向けのWordPressのパフォーマンスと速度に関する完全ガイドをご覧ください。

このガイドが、WordPressテーマにGoogle Webフォントを簡単に追加する方法を学ぶのに役立ったことを願っています。また、コーディングなしでカスタムWordPressテーマを簡単に作成する方法に関するガイドや、最高の無料ウェブサイトホスティングサービスのリストも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。

WPBeginnerで今すぐ人気！

開示：当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです！

今すぐダウンロード

読者とのインタラクション

82 CommentsLeave a Reply

  1. ウェブサイトにフォントをローカルに読み込む方法についての情報を提供していただき、ありがとうございます。長年スピードに苦労し、すべてを最適化しようとしました。ローカルにフォントを読み込むようにアドバイスされたのはこれが初めてのサイトで、本当に効果がありました。わずかミリ秒でしたが、それでもサイトのスピードは向上しました。PageSpeed InsightsやGoogle Search Consoleで、緑とオレンジの違いを生むのは、時にはそのミリ秒です。

    Reply

  2. このビデオ/手順は2015年のもので、スクリーンショットなどが異なっていることに気づきました。指示通りにヘッダー.phpファイルにGoogleフォントのコードを埋め込もうとすると、エラーが発生しました。このチュートリアルは更新が必要なのでしょうか？よくわかりませんが…ありがとうございます。

    Reply

    • フィードバックありがとうございます。可能であれば、この記事の更新を検討いたします。

      Reply

      管理者

  3. 記事ありがとうございます！Googleフォントをエンキューする関数で、fonts.googleapis.com/css… の http: を https: に置き換えて、googleapis.com… への暗号化されたリンクを有効にしてください。

    Reply

  6. フォントは表示されましたが、太字にする方法がわかりません。
    CSSでやったことの例を以下に示します。

    font-family:”Open Sans”, sans-serif;
    font-weight:bold;

    header.phpに追加したリンクに、これを追加しました：

    700を太字に置き換えてみましたが、うまくいきませんでした…
    何かアイデアはありますか？

    事前に感謝します

    Reply

    • 「カスタマイズ」タブでフォントを選択した後、Googleフォントで希望するフォントの太さを必ず確認してください。

      Reply

  8. は？これのどれが何を意味するのか？投稿やページにGoogleフォントを追加できるようにするにはどうすればすればいいですか？

    Reply

  9. ここで説明されているように、Google WebフォントをJavaScriptで非同期にインポートすることについてどう思いますか？

    ありがとうございます
    Shubham

    Reply

  10. 簡単な質問です – wp_enqueue_style() のコードリファレンスを確認しました。最初の引数は、スタイルシートの名前を示す文字列です。あなたの例では、最初の引数に 'wpb-google-fonts' を使用しています。私のサイトでは、ここに何を入れるべきかどうすればわかりますか？

    Reply

  11. ヘッダーのどこにコードを貼り付ければいいですか？いつもそう書いてありますが、正確な場所を誰も説明してくれません。

    Reply

  12. この関数で「false」は何をしますか？他のエンキューされた関数には含まれていません。

    ありがとうございます。

    Reply

    • それがヘッダーまたはフッターの引数です。ベストプラクティスとして[ほぼ]すべてのスクリプトをヘッダーに配置するため、デフォルトで「true」=>フッターになりますが、「false」はフッターではなくヘッダーに配置することを意味します。

      残念ながら、フォントスクリプトは他のすべての読み込みを停止するため、ヘッダーに配置すると少し厄介です。そのため、この記事では実際に使用するフォントのみを含めるようにすることについて説明しています。逆に、フッターに配置すると、Webフォントが読み込まれるまで、画面の描画中にArialのようなデフォルトフォントが一瞬読み込まれる可能性があります。これはひどい欠点ですが、それが現実です。

      サイトでの使用状況に基づいてフォントを条件付きで読み込むという実践をワークフローに取り入れています。たとえば、「太字」がブログ投稿テンプレート（single.php）のh2およびh3でのみ使用される場合、太字スクリプトがsingle.phpテンプレートでのみエンキューされるように条件付きエンキューを記述します。

      お役に立てば幸いです。

      Reply

      • また、注意点として。

        「太字」とは、特定の太字バージョンのフォントファミリーのことです。<= 参考までに。

        Reply

  14. Googleフォントを追加するためにPunch Fontsプラグインを使用していますが、見出し1だけを目的のフォントにする方法がわかりません。見出し2〜6にはこのフォントが必要ないので、見出し1にのみGoogleフォントを使用したいです。パラメータにはどのように記述すればよいですか？

    現在使用しているのは次のとおりです。Oleo+Script+Swash+Caps:400

    Reply

  15. さて、もし誰かが行き詰まっているなら、Easy Google Fontsというプラグインもあります。非常に役立ちます。

    Reply

  16. Hello,

    3つの方法すべてを試しましたが、どれも完全に効果がありませんでした。スタイルシートで指定した他の要素ではなく、一部の要素にのみ適用されるようです。

    Googleフォントが適用されていない要素で要素インスペクタを使用すると、次のようになります。
    #site-title {
    font-family: \’Questrial\’, Helvetica, Arial, sans-serif;

    フォントの周りの\\は何を意味しますか？エラーを示しているようですが、何が間違っているのかわかりません。何が原因でしょうか？優先度の高いコードが私のコードを上書きしているのでしょうか？しかし、どこで？どのように？ああ、気が狂いそうです。

    Reply

  17. 編集部様、このサイトのすべてのGoogle Webフォントを追加し、それを私の意味で使用したいのですが、

    でもヘッダーファイルにリンクをたくさん使いたくないんです。他に方法はありますか？

    Reply

  18. 私はブログを持っています（ http://www.goingtechy.com/ ）。私が抱えている問題は、サイトがすでに使用しているGoogleフォントのCSS配信を最適化したいということです。つまり、サイトにはすでにGoogleフォントがあります。どのように最適化できますか？

    Reply

  19. この投稿を本当にありがとうございます！正式なHTML/CSSトレーニングを受けていない者にとって、この投稿のシンプルさに感銘を受けました。

    Reply

  21. こんにちは。

    GenesisとParallax Proテーマを使用しています…
    しかし、phpなどの初心者です

    指示通り、このコードをfunctions.phpファイルに追加しました：
    add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);

    function wpb_add_google_fonts() { echo ”; }

    上記のフォントを使用しているヘッダーは変更されません。

    質問：
    1. 上記のコードを追加するだけでよいと仮定してよろしいでしょうか？
    2. コードは具体的にどこに追加すればよいですか？functions.phpの最初ですか、それとも最後ですか？
    2. コードに不足しているものはありますか？
    3. style.cssファイルにも何か追加する必要がありますか？

    ご協力ありがとうございます。
    敬具
    グレッグ

    Reply

    • Greg、私たちには問題ないようです。WordPressはおそらく、あなたがフォントリンクをエコーしたコードの部分を省略したのでしょう。はい、Googleフォントを使用したいセレクターのスタイルルールを設定するにはCSSを使用する必要があります。

      Reply

      管理者

  22. 上記のいずれも十分ではありません。私たちは皆、「wp_enqueue_style( ‘google-font’)」が「スクリプトを呼び出すための技術的に正しい方法」であることを知っていますが、この場合、あなたの<headerは次のようになります。

    フォント1:
    フォント2:
    フォント3:
    フォント4:

    ダメです、こうする必要があります：

    Reply

  23. 上記のコードはどこに貼り付ければよいですか？ header.php ファイルのどこにもコードの最後の行が見つかりませんでした。段階的に教えていただけますか？
    ありがとうございます。

    Reply

  24. 以下を再入力しましたが、何も変更されません。

    /* フォントのインポート
    ———————————————————— */

    add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);

    function wpb_add_google_fonts () {
    echo ‘’;
    }

    /* デフォルト

    一度でうまくいきました。とても混乱しています！
    助けてくれてありがとう。

    Reply

  25. こんにちは、

    コードをコピーしてフォントを変更したことにとても満足していました。フォントが大きすぎると感じたからです。別のものに変更しようとしたとき、何かを間違えたようで、コードをいじっても1つのフォントスタイルしか表示されなくなりました。技術的なことはわからないので、バカみたいに感じています。誰か助けてもらえませんか？数字が含まれている場合と含まれていない場合の両方で試しました。ありがとうございます。これが私が最後に入力したものです…

    /* フォントのインポート
    ———————————————————— */

    1 add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);
    2
    3 function wpb_add_google_fonts() {
    4 echo ”;
    5 }

    /* デフォルト
    ———————————————————— */

    Reply

      • 数字はありませんが、今回は何か足りないようです。これは私のテーブルにあるものとまったく同じです。

        add_action( ‘genesis_meta’, ‘wpb_add_google_fonts’, 5);

        function wpb_add_google_fonts() { echo ""; }

        Reply

      • コードは…1台のコンピューターでは機能したようです。私が使用している他の2台では機能しませんでした。
        その理由として考えられることをいくつか提案していただけますか？

        本当にありがとう

        Reply

  26. functions.phpで複数のGoogleフォントを使用するにはどうすればよいですか？

    これがありました：

    //* Enqueue Google fonts
add_action( 'wp_enqueue_scripts', 'executive_google_fonts' );
function executive_google_fonts() {
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), CHILD_THEME_VERSION );
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), CHILD_THEME_VERSION );
}

    しかし、ダンシングスクリプトが2台目のコンピューターやiPhone、タブレットでフォントとして表示されませんでした。
    Open Sansを削除したところ、動作し始めました。

    Reply

    • @Karissa、wp_enqueue_style関数の最初の引数は、読み込んでいるスタイルスクリプトのハンドルです。代わりにこのコードを試してください：

      //* Enqueue Google fonts
add_action( 'wp_enqueue_scripts', 'executive_google_fonts' );
function executive_google_fonts() {
	wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700', array(), 20131111 );
	wp_enqueue_style( 'google-font-2', '//fonts.googleapis.com/css?family=Dancing+Script:400italic,700italic,400,700', array(), 20131111 );
}
      Hosted with ❤️ by WPCode

      1-click Use in WordPress

      Reply

      管理者

      • 気にしないでください。次のようなリンクを使用する必要があることがわかりました。

        ‘//fonts.googleapis.com/css?family=Euphoria+Script|Rouge+Script|Montez|Federo|Great+Vibes|Clicker+Script|Dancing+Script:400,700|Satisfy|Ruthie|Rochester|Open+Sans|Open+Sans+Condensed:300’

        Reply

      • ああ、わかりました。ページをリフレッシュしてあなたの返信を見る前に、上に返信しました。

        Googleが複数のフォントを選択した際に提供するリンクを使用すると、そのように生成され、サイト上で異なるフォントをライブで簡単に試すことができます。

        Reply

  27. Thank you so much!! Whenever I need any WordPress help, I come directly to wpbeginner as I know I would find a best solution here. You guys don’t know how much you have helped beginners like me, Appreciate you support :)
    Long Live WPBeginner…

    Cheers,
    Chaitanya

    Reply

    • ここで、各メソッドで作業量が多すぎます。スタイルシートに何かを追加する必要はないはずです。プラグインを見つけてください。

      Reply

  30. ここで私がいくつか見落としていたのは、IE8以下のバージョンでGoogleのWebフォントを機能させるための条件付きコメントです。これは、複数のフォントウェイトをリクエストする場合に必要になります。例として以下のようなものがあります。

    <link href=”http://fonts.googleapis.com/css?family=Cabin:400,700″ rel=”stylesheet” type=”text/css” />

    そのため、フォントを読み込むための関数を作成しました：https://github.com/mzilverberg/LoadGoogleWebfonts

    私のスクリプトは、条件付きコメント内に適切なフォールバックURLも配置します。
    数行のコードで、WordPressテーマのfunctions.phpでも同様に動作させることができます。

    Reply

      • 管理画面のコンテンツエディタでWYSIWYGを維持するため。ウェブサイトと同じフォントフェイスを管理画面エディタで確認できるようにするため。

        Reply

        • 実は私も同じことをどうやるのか疑問に思っていました（そしてこれはGoogleで最初に表示された結果です）。

          WYSIWYG エディタに Google Web フォント機能を追加するプラグインが存在することは知っていますが、それらは非常に重くなります。さらに調査して、フォントを1つか2つ簡単に追加する方法があるかどうかを確認します。

  32. 共有いただきありがとうございます。大変満足しております。私はGenesisユーザーで、スタイルシートで既に実装されているため@importを使用し始めました。このソリューションについて、より良い気分になりました。
    Happy 2013!

    Reply

  33. コードの「YOUR THEME STYLESHEET」は何かで置き換えるのですか？
    私のものはSTYLE.CSSですが、URLである必要がありますか？
    よろしくお願いします。
    Jeff

    Reply

  34. これが私が使うものです….

    これをテーマのfunctions.phpファイルに追加してください：

    /*----------------------------------*/
/* Load CSS Files
/*----------------------------------*/	
	if(!function_exists('load_theme_styles'))
	{
		function load_theme_styles()
		{		
			if (!is_admin()) {
				
				$cssURL = get_template_directory_uri().'/css/';
				$fontURL = 'http://fonts.googleapis.com/css?family=Lora|Oswald';
				
				// Registering New Styles	
				wp_register_style('googleFont', $fontURL);					
				wp_register_style('style', $cssURL.'/style.css', 'googleFont', '1.0', 'screen');
				wp_register_style('print', $cssURL.'/print.css', 'googleFont', '1.0', 'print');
				
				// Enqueing Styles
				wp_enqueue_style('googleFont');	
				wp_enqueue_style('style');
				wp_enqueue_style('print');			
				
			}
		}
	}
	add_action('wp_enqueue_style', 'load_theme_styles');

    これについてどう思いますか？

    Reply

    • これがGoogleフォントを追加する正しい方法です。常にwp_register_style/wp_enqueue_styleを使用してください

      Reply

  37. JSオプションはどうですか？それはより速いオプションですか、それともこちらの方が良いですか？ありがとう

    Reply

  38. 素晴らしい記事です！WordPressがデフォルトでGoogleフォントを組み込んでいれば素晴らしいと思いますが、これは十分に簡単そうです。説明してくれてありがとう！

    Reply

    • Google Fonts are great, but not everyone uses it (considering the amount of folks who use WordPress). WordPress has a 95% rule. If the feature would not satisfy 95% of the audience, then it is usually falls in the plugins category. However, sometimes exceptions are made. We can assure you that the Core WP team, will not make this into an exception though :)

      Reply

      管理者

  39. すごい！まさに探していたものです！この投稿をアップしてくれてありがとう…テーマにこれを追加する方法について、ずっと探していました。あなたのページを見つけられて嬉しいです。

    Reply

  40. 素晴らしい投稿です。これを行うプラグインがあっても、プラグインを使わない方法を学ぶことも常に良いことです。

    Reply

  41. ということは、複数のGoogleフォントプラグインを使用することは受け入れられないということですね。その場合は、CSSファイルを再確認する必要があります。

    Reply

  42. 2番目の部分、つまりGenesisの追加アクションにフォントを追加するという部分が理解できません。これはGoogle Webフォントを追加する別の方法ですか？

    フォントのスタイルをすべて含める必要はないことはわかっていますが、推奨される方法は http://fonts.googleapis.com/css?family=Lora|Oswald です

    例えば、Lora のボールドスタイルと Oswald のライトスタイルだけが必要な場合、フォントスタイルをどのように組み合わせればよいですか？

    ありがとう

    Reply

      • Google Webフォントのように、ここで示したようにGenesis Frameworkで@font-faceを使用したい場合はどうすればよいですか。解決策はありますか。
        フォントの読み込みが信じられないほど遅いため、一日中検索しています！
        Cheers

        Reply

  43. 素晴らしいチュートリアルです…実際にWP Google Fontsプラグインを使用しています…そのプラグインをお勧めしますか、それとも上記で説明した手動の方法の方がパフォーマンス的には効率的ですか？

    Reply

    • そのプラグインは試したことがありません。しかし、テーマファイルで簡単にできるため、そのような種類のプラグインはほとんど避けるようにしています。

      Reply

      管理者

        • プラグインであるという理由だけでGoogleフォントプラグインを避けるのは、まったく良い理由ではありません。プラグインを使用すると、テーマに含めるよりもはるかに多くの柔軟性が得られます。特にテーマを変更する場合に便利です。

    • コンスタンチン、全く同感です。wp_enqueue_style関数は常に使用すべきです。StudioPressの記事でNathan Rice氏が提案していたように、Googleフォントのために最初に試みたのもそれでした。ただし、Googleはフォントスタイルは他の何よりも先に読み込まれるべきだと明確に述べています。wp_enqueue_styleを使用してからwp_print_stylesでそれらを出力すると、メインのスタイルシートがすでに読み込まれた後にアイテムが出力されていました。それがgenesis_meta()フックにフックする必要があった理由です。いずれにせよ、あなたの記事の考えには全く同意します。

      Reply

      管理者

      • I’m a little late to this, but I wanted to mention that you could still use wp_enqueue_style, just set the priority higher so that they are loaded first :)

        Reply

    • 素晴らしいチュートリアルです。ただ一点、記事の最初の画像は「@import」タブを示すべきだったのではないでしょうか？

      Reply

返信する

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。

Copyright © 2009 - 2025 WPBeginner LLC. All Rights Reserved. WPBeginner® は登録商標です。

Awesome Motive が管理 | SiteGround による WordPressホスティング

WordPress® の商標は WordPress Foundation の知的財産です。このウェブサイトでの WordPress® およびその名称の使用は、識別目的のみであり、WordPress Foundation による承認を意味するものではありません。WPBeginner は WordPress Foundation によって承認、所有、または提携されていません。

私は…について助けが必要です

人気の検索:

ブログの始め方 WordPress SEO WordPressのパフォーマンス WordPressのエラー WordPressセキュリティ オンラインストアの構築