WordPressの子(カスタム)テーマのHEADにGoogleアナリティクスやWEBフォントのコードを追加する方法

この記事は公開から3年以上経過しています。

WordPressの子(カスタム)テーマを利用しているとき、HEADタグにGoogleアナリティクスやWEBフォントを埋め込む方法。

インターネット上には、親テーマのheader.phpを子テーマディレクトリにコピーしたものを編集する対応が多く紹介されていますが、子テーマでheader.phpを固定してしまうと親テーマがアップデートされた場合に問題が発生する恐れがありますので、あまりオススメできません。

対応方法

wp_headアクションフックを使い、独自ヘッダに追加したいコードをインクルードする。

例えば、私が利用している「さくらのレンタルサーバ」が提供しているWEBフォントと、サーバー上に配置したFontAwesomeを適用するためのコードを子テーマのHEADタグに埋め込みたい場合の手順は以下のとおり。

1. 子テーマのfunctions.phpと同じディレクトリ内に新規でcustom_header.phpファイルを作成して以下のコードを記述する。
   (HTMLのHEADタグ内に記載したい内容をそのまま記載する)

   <!-- FontAwesomeのCSS -->
   <script type="text/javascript" src="//webfonts.sakura.ne.jp/js/sakurav3.js"></script>
   <link href="/fontawesome-free/css/all.css" rel="stylesheet">
   <!-- 〜〜 Googleアナリティクスのコードや他のWEBフォントのコードなどの記述 〜〜 -->

2. 子テーマのfunctions.phpに、以下の項目を追加する。
   (この処理により手順1の記載内容がHEADタグに展開される)

   add_action('wp_head', function(){ include(dirname(__FILE__).'/custom_header.php'); });

3. サイトのトップページなどをリロードして、HTMLソースに手順1のHEADタグが意図したとおりに出力されることを確認する。

例のcustom_header.phpというファイル名は任意ですが、変更する場合は手順1と2で揃えてください。

この方法であれば、

• wp_head()は基本的に必ず親テーマのHEADから呼ばれるため親テーマが更新されても安心。
• 外部ファイルを直接取り込むことでecho()などで1行ずつ書く方法よりもリスクやコストを抑えることができる。
• テーマを変更するとき再利用可能。

といったメリットがあります。

参考ウェブサイトなど

• WORD PRESS Code Reference
  do_action( ‘wp_head’ )

• WORDPRESS Codex日本語版
  プラグイン API/アクションフック一覧/wp head

以上です。