WordPressでFont AwesomeとGoogleフォントを外部ファイルから読み込む方法を徹底解説!サイトデザインを一新する最新テクニック

あなたのサイトを格上げ!WordPressでFont AwesomeとGoogleフォントを活用する方法

WordPressサイトのデザインを一歩上のレベルに引き上げるために、Font AwesomeとGoogleフォントを導入する方法を詳しく解説します。これらのツールを活用することで、サイトの見栄えが劇的に向上し、訪問者を引き付ける魅力的なデザインを実現できます。

Googleフォントを外部ファイルから読み込む方法

Googleフォントは、美しい文字を簡単に取り入れることができる便利なサービスです。さまざまなフォントを活用することで、サイト全体の統一感とプロフェッショナルな印象を演出できます。

1. Googleフォントの選択

まずは、Google Fontsの公式サイトにアクセスしてください。豊富なフォントライブラリの中から、サイトの雰囲気に合ったものを選びましょう。たとえば、日本語サイトには「Noto Sans JP」や「Roboto」が人気です。

2. 埋め込みコードの取得

使用したいフォントを選択すると、右側に「Embed」セクションが表示されます。以下のような<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=Roboto:wght@400;700&display=swap" rel="stylesheet">

3. WordPressへの追加方法

方法1: header.phpに直接追加

テーマのheader.phpファイルを開き、<head>タグ内にコピーしたコードを貼り付けます。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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=Roboto:wght@400;700&display=swap" rel="stylesheet">
    <?php wp_head(); ?>
</head>

方法2: functions.phpを使用してエンキュー

functions.phpに以下のコードを追加することで、Googleフォントを効率的に読み込むことができます。

function enqueue_google_fonts() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', false);
}
add_action('wp_enqueue_scripts', 'enqueue_google_fonts');

Font Awesomeを外部ファイルから読み込む方法

Font Awesomeを使えば、簡単におしゃれなアイコンを追加できます。ボタンやメニューにアイコンを加えることで、視覚的な魅力が大幅にアップします。

1. Font Awesomeのリンク取得

Font Awesomeの公式サイトにアクセスし、最新のCDNリンクを取得します。以下のようなコードをコピーしてください。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

2. WordPressへの追加方法

方法1: header.phpに直接追加

Googleフォントと同じく、header.phpの<head>タグ内にコピーしたコードを貼り付けます。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <?php wp_head(); ?>
</head>

方法2: functions.phpを使用してエンキュー

以下のコードをfunctions.phpに追加します。

function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css', false);
}
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');

3. Font Awesomeアイコンの活用例

Font Awesomeを導入すると、以下のように簡単にアイコンを使用できます。

<i class="fas fa-home"></i> ホーム
<i class="fas fa-envelope"></i> メール
<i class="fas fa-phone-alt"></i> お問い合わせ


これらのアイコンは、ナビゲーションやコンテンツ内に活用することで、サイトのデザインを格段に向上させます。

Font AwesomeとGoogleフォントを活用するメリット

デザイン性向上:フォントやアイコンの選択肢が広がり、サイトがより洗練された印象に。

ユーザー体験の向上:デザインが良いサイトは訪問者にとって見やすく、快適です。

SEO効果:優れたデザインは直帰率を下げ、SEOにもプラスの影響を与えます。

特定のページでのみ外部ファイルを読み込む方法

特定のページでのみ外部ファイルを読み込みたい場合は、以下のコードを使用します。

function enqueue_assets_conditionally() {
    if (is_page('contact')) {
        wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css', false);
        wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap', false);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_assets_conditionally');


これにより、「お問い合わせ」ページなど特定のページのみで読み込みが行われ、無駄なリソース消費を防げます。

まとめ:Font AwesomeとGoogleフォントで魅力的なサイトを作ろう

WordPressでFont AwesomeとGoogleフォントを活用することで、デザイン性とユーザー体験が大幅に向上します。外部ファイルの読み込みは初心者にも簡単に実現できるので、この機会にぜひ試してみてください。最新のデザインを取り入れ、訪問者を惹きつけるサイトを構築しましょう!

(Visited 5 times, 1 visits today)