あなたのサイトを格上げ！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フォントを活用することで、デザイン性とユーザー体験が大幅に向上します。外部ファイルの読み込みは初心者にも簡単に実現できるので、この機会にぜひ試してみてください。最新のデザインを取り入れ、訪問者を惹きつけるサイトを構築しましょう！