WordPress│特定のページだけFontAwesomeを読み込む方法

2023.03.312026.10.02

既存のFont Awesome 5用アイコンを一部のページで使う場合に、CSSの読み込みを対象ページだけへ限定する例です。旧記事の同名関数2つは併用せず、次の1つの関数へ置き換えます。バージョン5.15.4を固定した互換例で、最新版への移行手順ではありません。

対象IDとトップ・投稿一覧を選ぶ

子テーマのfunctions.phpなどへ一度だけ追加します。投稿のIDはpost_ids、固定ページのIDはpage_idsに設定し、使わない配列は空にします。サイトのトップと投稿一覧は別々のフラグです。functions.phpの既存PHPタグ内へ貼る場合は開始タグを追加しません。

function waza_enqueue_fontawesome5_on_targets() {
    // 使用する投稿・固定ページのIDへ変更する。
    $post_ids = array(23, 35);
    $page_ids = array();
    $include_front = false; // サイトのトップページ
    $include_posts_page = false; // 投稿一覧
    $target = (!empty($post_ids) && is_single($post_ids))
        || (!empty($page_ids) && is_page($page_ids))
        || ($include_front && is_front_page())
        || ($include_posts_page && is_home());
    if (!$target) { return; }
    wp_enqueue_style(
        'waza-fontawesome-5',
        'https://use.fontawesome.com/releases/v5.15.4/css/all.css',
        array(), '5.15.4'
    );
}
add_action('wp_enqueue_scripts', 'waza_enqueue_fontawesome5_on_targets');

既存の読み込みとアイコンを確認する

テーマや別プラグインがすでにFont Awesomeを読み込んでいる場合、このコードを重ねるとバージョンの混在や二重読み込みになります。開発者ツールのNetworkと既存の設定を先に確認してください。今回のコードは他の読み込みを解除しません。

既存の5系アイコンのクラスと、必要なフォントファイルの取得を対象ページで確認します。対象外ページでは、このコードによるCSSリクエストがないことを確認します。CDNを利用できない環境や外部通信を制限するサイトでは、ライセンスを確認したうえで配布物を自サイトへ配置する設計が必要です。

Networkで403やブロック表示になる場合は、閲覧環境の拡張機能や通信制限の影響を切り分けてから判断してください。

表示を確認するHTML

CSSを読み込む対象にした記事のカスタムHTMLブロックへ、次を貼ります。Font Awesome 5の無料・Solidアイコンを使う例です。アイコンの横にも文字を置くため、フォントを取得できない場合も「コードの確認」という内容は残ります。

<p><i class="fas fa-code" aria-hidden="true"></i> コードの確認</p>

アイコンを装飾として使うため、i要素はaria-hidden=”true”にしています。アイコンだけのリンクやボタンに置き換える場合は、操作内容を表す名前をリンク・ボタン側へ付けてください。Font Awesome 5のアクセシビリティ仕様も参照できます。

CSSとフォントの取得を分けて確認する

スクロールできます

症状	確認する要求	次の確認
CSSが読み込まれない	all.cssのHTTP状態	URL・通信制限・既存の読み込み設定
CSSはあるがアイコンが四角になる	fa-solid-900.woff2などのフォント	フォントのURL・CSSとの版の一致
別のアイコンや字体になる	複数版のCSSやフォント	使用クラスと上書きするCSSの有無

2026年10月2日に公式配布元の5.15.4のCSS・フォントを隔離環境へ配置し、掲載例のfas fa-codeが表示されることを確認しました。

対象投稿ではCSSとfa-solid-900.woff2の要求があり、対象外投稿にはこの例のCSSが出力されませんでした。

この比較では検証用に配布元URLをローカルURLへ置き換えたため、掲載CDNの外部通信が成功した証拠にはなりません。

CDNが利用できない場合に自サイト配信へ切り替えるなら、CSSとwebfontsの相対位置を保ち、配布物のライセンスも確認してください。

適用範囲と戻し方

フロントページと投稿一覧が同じ構成なら、条件が重なっても同じハンドルのCSSは一度だけ登録されます。エディタ表示は別の読み込み経路なので、この例だけでは対象にしません。戻す場合は今回のフック登録と関数を外し、旧例も残っていないか確認します。読み込み限定による速度改善は、変更前後を測定して判断してください。

参照：wp_enqueue_style。文字フォントの指定はWebフォントの読み込み例で扱っています。