WordPressのhead内にソースコードを挿入する方法【functions.php】

ヨッチ

こんにちは。代表のヨッチです。
ミライヨッチにお越しいただき、ありがとうございます。

WordPressを使っていると、head内に埋め込みコードを挿入したくなることってありますよね。

代表的なのは、やはりGoogleアナリティクスでしょう。
ほかにも、ヒートマップなどの解析ツールはhead内に埋め込むことが多いと思います。

この記事では、WordPressのhead内にソースコードを挿入する方法をわかりやすく紹介します。
テーマの設定だけでなく、functions.phpから挿入することが可能です。

やり方を覚えておけば、幅広いサイトに対応できますよ。

WordPressのhead内にソースコードを挿入する方法

それでは、functions.phpを使ってhead内にソースコードを挿入する方法をお伝えします。

すべての記事を対象にする

まずは、すべての記事でhead内にソースコードを挿入する場合です。
以下のコードをコピー・編集したうえで、functions.phpの一番下の行に貼り付けましょう。

// head内にソースコードを挿入する
function meta_headcustomtags() {
$headcustomtag = <<<EOM
<!-- head内に挿入するコードを入力-->
EOM;
	echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);

4行目のコメントアウトした部分に、ソースコードを入力します。

<!-- head内に挿入するコードを入力-->

指定した記事のみ対象にする

次に、指定した記事のみ対象にする場合です。

以下のコードをコピー・編集したうえで、functions.phpの一番下の行に貼り付けましょう。

// head内にソースコードを挿入する
function meta_headcustomtags() {
	if (is_page(array('3,31,73'))) {
$headcustomtag = <<<EOM
<!-- head内に挿入するコードを入力-->
EOM;
		echo $headcustomtag;
	}
}
add_action( 'wp_head', 'meta_headcustomtags', 99);

編集するのは、3行目と5行目です。

	if (is_page(array('3,31,73'))) {

3行目では、「array()」内の文字列を変更します。

記事ID・スラッグ・タイトルのいずれかで記事を指定して、カンマで区切ります。
サンプルでは、記事IDを入力しました。

<!-- head内に挿入するコードを入力-->

5行目のコメントアウトした部分には、head内に挿入するコードを入力します。

テーマによっては埋め込みコードを挿入する機能がある

ワードプレスのテーマによっては、埋め込みコードを挿入する機能があります。
たとえば僕が使っている「賢威」だと、設定からそのままコードを入力可能です。

テーマごとに機能が違うので、設定を確認してみましょう！

【まとめ】テーマの機能をチェックして実装しよう

ワードプレスのテーマによっては、設定からそのままコードを挿入できます。
なので、まずはあなたが使っているテーマが対応しているか確認しておきましょう。

もしテーマにソースコードを挿入する機能がなければ、「functions.php」を編集します。

僕の場合だと、「Hello Elementor」というテーマがhead内に挿入する機能がありませんでした。
Elementor用の最速テーマなので、余分な機能はすべてそぎ落としているようです。

【Hello Elementor】詳細を見る

テーマにない機能も、functions.phpから追加できるのがワードプレスの良いところですよね。
あなたが使っているテーマにあわせて、活用してみてはどうでしょうか？