AMP for WordPress にFont Awesomeリンクコードを挿入する方法

AMPページでFont Awesomeを利用するには、AMPページの<head> タグ内に、Font Awesomeのアイコンフォントが格納されたCDNのURLが含まれた<link>タグを含める作業が必要となります。

AMP for WordPress にFont Awesome CDNへのリンクコードを加える方法

WordPressプラグイン、AMP for WordPressを使用してAMP化している場合、Font AwesomeのCDNへのリンクコードを加える方法は以下の様なやり方があります。

どの方法を選ぶかの判断ポイント・参考情報

AdSense AMP 自動広告を利用している、利用することを検討している場合は、AMPテンプレートファイルを編集して設置する方法が、プラグインの関数を利用した方法と並んで、有力な選択肢となります。AMP自動広告のコードは、<head>タグ内と<body>タグの先頭に設置する必要があります。そのため、AMP自動広告の設置は、テンプレートファイルを編集して行う方法が適しています。

Font Awesomeに加えてGoogleフォントなどを利用するような簡単な機能追加のみお考えの場合は、プラグインの関数を利用してコードを挿入する方法は、簡単に設置でき保守性も高いのでお勧めです。特に子テーマを既に利用している場合は、子テーマのfunctions.phpに関数を追加するだけで設置でき、プラグインの更新をしても設定は維持できるので保守性に優れています。

3番目のGlue for Yoast SEO & AMPは、SEOのプラグインYoastのAMP設定補助コンパニオンプラグインです。サイトのSEO設定をYoastで行っている場合は、Glue for Yoast を利用すると簡単にAMPの基本設定ができて便利です。しかし、他の方法も比較的簡単にできるので、Yoastを使用していない場合は、1番目か2番目（または4番目）の方法をお勧め致します。無理にYoastを使う必要はありません。プラグインを必要以上に使うと、プラグイン同士の機能の衝突や干渉などが発生するリスクもあります。

Ad Inserterを使用して、AMPページの<head>タグ内にFont Awesomeのリンクコードを挿入するのも選択肢の一つです。この方法は、AMPページについては、ほぼデフォルトの状態で使うだけの場合に適しています。

Font Awesomeの使い方などについては、以下のページをご参照下さい。

AMPページでFont Awesomeを利用する設定方法

AMPテンプレートファイルを編集してリンクコードを設置

AMP for WordPressを使用してAMP化する場合、AMPのページはプラグインが提供するテンプレートを使用することになります。Font Awesomeのリンクコードを、プラグインのテンプレートファイルを編集して設置する手順を以下に紹介します。

①　WordPressのダッシュボードから、「プラグイン」のサブメニュー「プラグイン編集」クリックし、プラグインの編集ページを表示させます。

②　ページ右上の「編集するプラグインを選択」の右をクリックし表示されるプラグインのリストの中から、AMPを選びい、［選択］ボタンを押します。

③　プラグインファイルの下に、プラグインのファイルがリスト表示されます。その中の”templates”（ディレクトリー）をクリックし表示されるファイルの中から”html-start.php”をクリックします。html-start.phpの内部コードが表示されます。

④　表示されるソースコードの中の<head>タグ内に以下のFont Awesomeのリンクコードを貼り付けます。

⑤　ページ下の［ファイルを更新］のボタンを押して編集内容を保存します。

以上で作業完了です。

備考：
上で紹介したようなプラグインファイル内のテンプレートファイルを直接編集する場合は、プラグインの更新のたびに修正を行う必要があります。更新しても、編集したテンプレートファイルを維持する方法については、以下の記事をご覧下さい。
編集したAMP for WordPress のテンプレートファイルの保管方法

プラグインの関数を利用してコードを挿入する

AMP for WordPressは、カスタマイズ用の関数が予め定義されています。提供されるプラグインの関数を使うことで、比較的手軽に機能追加や設定の変化を行うことができます。以下、AMPページの<head> タグ内にコードを挿入するプラグインの関数を使用した設定手順です。

①　WordPress ダッシュボードから「外観」-「テーマの編集」をクリックします。右側に表示されるテーマファイルのリストの中から、テーマのための関数（functions.php ）をクリックします。

②　表示されるfunctions.phpのソースコードの最後に以下のコードを追加（コピーペースト）します。

add_action( 'amp_post_template_head', 'xyz_amp_add_pixel' );

function xyz_amp_add_pixel( $amp_template ) {
?>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<?php
}

③　［ファイルを更新］ボタンを押して、編集したファイルを保存します。

以上で作業完了です。

Glue for Yoast SEO & AMP設定機能を利用する

プラグイン Glue for Yoast SEO & AMPをインストールします。

WordPressダッシュボードのメニューから「SEO」をクリックし、「AMP」を選びます。AMP – Yoast SEOの設定ページが表示されます。タブの”Design”をクリックし、画面を下にスクロールしていき”Extra code in <head>”の入力欄にFont AwesomeのCDN URLへのリンクコードを貼り付けます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

［変更を保存］のボタンを押して設定を保存します。

作業は以上です。

Ad Inserterを使用して、AMPページの<head> タグ内にコードを挿入する

広告の管理制御のプラグイン、Ad Inserterは、広告コードをAMPページの<head>タグ内に設置する機能を備えています。この機能を使用して、Font AwesomeのCDNへのリンクコードをAMPページの<head>タグ内に挿入することもできます。

以下、Ad Inserterを使用したAMPページの<head> タグ内にコードを挿入するプラグインの関数を使用した設定手順です。

WordPress ダッシュボードのメニュー「設定」から「Ad Inserter」を選びます。

①　Ad Inserterの設定ページ上部に表示されるタブリストの右端のギアアイコンタブをクリックします。

②　コード入力欄の上に表示されるタブリストの中から”Header”を選びます。

③　タブリストの右下に表示される丸（○）をクリックして緑色にします。（<head>タグ内へのコード挿入機能を有効にします。）

④　以下のコードを、コード入力欄に貼り付けます。

|amp|

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

⑤　［Save Settings］を押して設定を保存します。