head内にソースコードを追加する手順(子テーマのfunctions.phpを使った方法)

ブログをやっているとよく遭遇するカスタマイズで、広告の設置の際に<head>内に特性のコードを記載するように求められることがあります。

アクセス解析コードの設置や、

例えばAdSenseの審査コードの設置の場合、「http://xxxx.com のHTMLでタグを探し、その直後に貼り付けてください。」といった具合に。

色々なブログでよく紹介されているカスタマイズ方法が、「header.phpというファイルを探してそこに記載しましょう。」

、header.phpを編集する場合その後のテーマアップデートで問題となる可能性が高まってしまうので、header.phpを編集せずにコードを追加する方法をご紹介します。

functions.phpに記載してhead内にコードを追記する

header.phpをカスタマイズすることなく、head内にコードを記載するには、子テーマのfunctions.phpを利用します。

子テーマ内にはほとんどの場合functions.phpというファイルが存在するので、このカスタマイズ内容が使えるはずです。

追記するコード

headタグ内に何らかのコードを記載する場合、以下のような書き方をします。

functions.phpの下の方に記載します。(特に理由がなければ、記載場所は一番下で。※一番下の行に ?> というコードがある場合はその上に。)

// head内にカスタム用のコードを追加する
function meta_headcustomtags() {
$headcustomtag = <<<EOM

<!-- headに表示させたいコードをここに!(この行は消してね)-->

EOM;
echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);

【headに表示させたいコードをここに!】の場所に記載します。

記載例

例えばAdSenseの審査コードを設置する場合は、下記のように記載します。

// 【記載例】
function meta_headcustomtags() {
$headcustomtag = <<<EOM

<script async src="xxxxxx/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "xxxxxxxxxxx",
enable_page_level_ads: true
});
</script>


EOM;
echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);

実際のページで確認する

コードを貼り付けたらちゃんと記載されたかどうかを実際のページで確認します。

headタグ内のコードは、貼り付けても実際の見た目には変化がないので、ブラウザでソースコードを表示して確認します。

右クリックで「ページのソースを表示」(Mac版GoogleChromeの場合)

Mac版GoogleChromeの場合、ページの何もないところで 右クリック > ページのソースを表示 を押すとソースコードを確認できます。

表示が確認できない場合
うまく保存できたはずなのに表示されないという場合は、ブラウザキャッシュやプラグインのキャッシュが影響している可能性があります。キャッシュクリアをお試しください。

おまけ:footer部分にコードを読み込む方法(functions.php記載)

最後にhead内ではなく、footer部分(</body>タグの直前)にコードを記載する場合の方法もご紹介します。javaScriptなどはこちらに記載した方が良い場合もあるので、状況によって使い分けてください。

下記のコードをheadタグのときと同じように、子テーマのfunctions.phpに記載して保存します。

// 【記載例】フッターにコードを読み込む
function foot_customtags() {
echo <<< EOM

</body>タグの直前に表示させたいコードをここに!(この行は消してね)

EOM;
}
add_action( 'wp_footer', 'foot_customtags' );

こちらも記載後、ソースコードを表示して貼り付けれたかを確認してください。

以上、functions.phpを使ったタグの記載方法でした。

この方法であれば(子テーマに記載している場合に限る)、テーマのアップデートで上書きされたり影響が少ないのでおすすめです。

新作!いさぎよく、シンプル。
WPテーマ「スワロー」

SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。

「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。

新作!究極のモバイルファースト
WPテーマ「ストーク」

「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。

インパクトのあるアニメーション
WPテーマ「ハミングバード」

インパクトのあるアニメーションでブログを演出します。

誰が使っても美しいデザイン
WPテーマ「アルバトロス」

シンプルかつ正統派のブログテーマです。