WordPress(WooCommerce)のheadにタグを追加する方法｜子テーマとブロックテーマ

WordPressの<head>はどう作られているか

WooCommerceはWordPressのプラグインなので、ショップ、商品、カート、チェックアウトといったページも、WordPressのテーマを通して表示されます。WooCommerceのドキュメントによると、ショップ・カート・チェックアウト・マイアカウントのページは、初期設定のときに自動で作られます。

WordPressでは、ページごとに<head>を手で書くのではなく、テーマが<head>の中でwp_head()という関数を呼び、そこで「wp_head」というフック(処理を差し込める場所)が動きます。開発者向けリファレンスでは、wp_headは「フロントエンドのheadタグの中にスクリプトやデータを出力する」アクションと説明されています。WordPress本体も、多くの既定の処理をこのフックにつないでいます。

つまり、「wp_headが動いたら、自分のタグも出力する」という数行のPHPを書けば、テーマのファイルを書き換えずに全ページの<head>へタグを入れられます。この考え方は、テーマの種類が違っても同じです。

ブロックテーマについて、WordPressのテーマハンドブックは、テンプレートはブロックのマークアップを書いたHTMLファイルで、<html>や<head>などはWordPressが自動で出力し、ブロックテーマはPHPのフックを足す役目を持たない、と説明しています。WordPress本体のtemplate-canvas.phpを見ると、<head>の中でwp_head()が呼ばれています。ブロックテーマでも、タグはwp_headフックから入れるのが自然な方法です。

してはいけないこと：親テーマのファイルを直接編集する

いちばん多い失敗は、管理画面の[外観] > [テーマファイルエディター]で、使っているテーマのheader.phpやfunctions.phpに直接タグを書き足すことです。WordPressの公式ドキュメントには、次の注意が書かれています。

1. テーマを更新すると変更はすべて失われる。この方法での変更は勧められておらず、避けるには子テーマを使うよう案内されています。WooCommerceのドキュメントも、更新でテーマのファイルが上書きされると変更はすべて失われると書いています。
2. エディターはバックアップを作らない。元に戻すための控えは自分で用意する必要があります。
3. サイトが落ちるとエディターでは直せない。PHPの誤りでサイトが表示されなくなった場合は、FTPで正常なファイルを上げ直すか、テーマのフォルダ名を変えてWordPressに別のテーマを使わせるしかない、とされています。

安全な置き場所は2つ

WordPressのテーマハンドブックによると、functions.phpはプラグインのように働きますが、動くのは有効なテーマのものだけで、テーマを変えるとその機能は使えなくなります。デザインに関係なく動かしたい機能はプラグインに置くのがよい、ともされています。計測タグはサイトのリニューアル後も動いてほしいものなので、子テーマがまだない場合はプラグインのほうが扱いやすいはずです。

もう一つ、子テーマにheader.phpを丸ごとコピーして編集する方法も紹介されています(WooCommerceのドキュメントでは、子テーマのheader.phpが親のheader.phpの代わりに使われると説明)。ただ、親テーマが更新でheader.phpを直しても、コピーは古いまま残ります。ブロックテーマにはそもそもこの方法が使えません。タグを1本入れるだけなら、フックを使う方法を選んでください。

作業の前に準備すること

1. サイトのバックアップを取る。WooCommerceの子テーマの手順も、まずバックアップを確保するところから始まっています。レンタルサーバーのバックアップ機能などを使います。
2. WordPressの外からファイルを触れるようにする。サーバーのファイルマネージャーかSFTPで、wp-contentフォルダを開けることを確かめます。PHPの誤りでサイトが落ちたときは、ここから元に戻します。
3. タグはコピーして用意する。打ち直すと1文字の違いで動きません。

方法1：子テーマのfunctions.phpに書く

WordPressの子テーマのドキュメントでは、子テーマは親テーマのコードを直接触らずに変更を加える仕組みで、親テーマを更新しても変更が消えないと説明されています。子テーマのfunctions.phpは親のものを置き換えず、両方が読み込まれます(子が先)。

子テーマがまだない場合、必要なのはstyle.cssだけです。ヘッダーのTemplateには、親テーマのフォルダ名と完全に一致する値を書きます。

/*
 Theme Name: My Store Child
 Template: 親テーマのフォルダ名
*/

同じフォルダにfunctions.phpを作り、次のように書きます。

<?php
add_action( 'wp_head', function () {
	?>
	<!-- 計測タグ(2026-10-12追加) -->
	<script src="https://...(お使いのタグ)..."></script>
	<?php
}, 99 );

1. wp-content/themes/に子テーマのフォルダ(例：my-store-child)を作り、style.cssとfunctions.phpを入れます。ZIPにして[外観] > [テーマ] > [新規追加]から上げても構いません。
2. [外観] > [テーマ]で子テーマの[有効化]を押します。
3. 主なページを開き、見た目が変わっていないか確かめます。

コードの意味は次のとおりです。add_actionで「wp_headが動いたらこの処理を実行する」と登録しています。?>と<?phpのあいだはPHPの外になるので、タグを貼ったとおりに出力でき、引用符をエスケープする必要もありません。最後の99は優先度です。リファレンスによると、数字が小さいほど先に実行され、既定は10です。大きい数字にしておくと、<head>の後ろのほう、つまり</head>の近くに出力されます。

注意点が二つあります。親テーマのfunctions.phpの中身を子テーマにコピーしないでください。関数名が重なって致命的なエラーになると公式ドキュメントが警告しています。また、テーマの販売元が配っている子テーマを使っている場合、WooCommerceのドキュメントは「購入した子テーマにカスタムコードを足さない」よう勧めています。その子テーマの更新で上書きされるためです。この場合は方法2を使います。

方法2：小さなプラグインにする

WordPressのプラグインハンドブックによると、プラグインは最低限「プラグイン名を書いたヘッダーコメントのあるPHPファイル」で、wp-content/pluginsの中に専用のフォルダを作って置くのが勧められています。計測タグ用なら、次の1ファイルで足ります。

<?php
/**
 * Plugin Name: Site Tracking Tag
 * Description: 全ページの<head>に計測タグを出力します。
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

add_action( 'wp_head', function () {
	?>
	<!-- 計測タグ(2026-10-12追加) -->
	<script src="https://...(お使いのタグ)..."></script>
	<?php
}, 99 );

1. ファイルマネージャーかSFTPで、wp-content/plugins/site-tracking-tag/を作り、上のファイルをsite-tracking-tag.phpという名前で入れます。
2. 管理画面の[プラグイン]を開くと「Site Tracking Tag」が一覧に出るので、[有効化]を押します。
3. 外すときは無効化するだけです。テーマを変えても計測は続きます。ABSPATHの行は、ファイルを直接開かれたときに何もしないための決まり文句です。

貼ったあとに確かめる

1. キャッシュを消す。キャッシュ系のプラグインやサーバーのキャッシュがあると、古いHTMLが表示されます。
2. シークレットウィンドウでサイトを開き、ソースを表示する。タグの一部(読み込み先のドメインなど)で検索し、</head>の手前にあるかを見ます。
3. WooCommerceのページを順に見る。ショップ、商品ページ、カート、チェックアウトで同じように確かめます。
4. ツール側で確かめる。marketingLABOでは、サイトを1ページ開いてから管理画面の「計測を確かめる」を押します。届いていなければ、タグがすべてのページの</head>の直前に入っているか、保存(公開)し忘れていないかを確かめ、サイトを開き直してもう一度押すよう案内が出ます。

WooCommerceのカートと注文完了ページにも入る

WooCommerceのカートとチェックアウトは、WooCommerceが作るWordPressの固定ページで、カートブロックやチェックアウトブロックが置かれています。注文完了(サンキュー)ページは、チェックアウトのURLに「/checkout/order-received/」のようなエンドポイントが付いた形で表示されます。どれもテーマを通して表示されるので、wp_headで入れたタグはここにも入ります。外部の決済サービスの画面には入りません。

テーマの外にあるチェックアウトにタグが届かない<a href="/ja/blog/add-tracking-code-to-shopify/">Shopify</a>とは、ここが違います。そのため、marketingLABOでは次のような使い方ができます。

注文完了ページのURLの後ろには注文番号などが付きます。条件にURLを使うときは、どこまで一致させるかを管理画面で確かめてください。売上や注文数はWooCommerceのレポートで見て、marketingLABOでは来店から注文までの動きを見る、と分けるのが現実的です。カートまで来た人への案内の考え方は<a href="/ja/blog/cart-abandonment/">カゴ落ちの原因と対策</a>にまとめました。

よくある失敗と直し方

作業のチェックリスト

1. サイトのバックアップを取り、SFTPかファイルマネージャーで入れることを確かめた。
2. 親テーマのファイルには手を加えていない。
3. 子テーマのfunctions.phpか小さなプラグインで、wp_headから出力した。
4. タグは管理画面からコピーし、ツール名と日付のコメントを添えた。
5. キャッシュを消し、ショップ・商品・カート・チェックアウトのソースで確認した。
6. ツール側の確認(marketingLABOなら「計測を確かめる」)で計測が届いた。

よくある質問

wp_enqueue_scriptを使うべきではありませんか？ リファレンスでは、WordPressのページにJavaScriptをつなぐ推奨の方法とされていて、自分で作ったスクリプトにはそれが適しています。外部ツールのタグは、提供元が渡した形のまま、指定された場所に入れることが大事なので、この記事ではwp_headでそのまま出力する方法にしました。提供元がWordPress向けの手順を出している場合は、そちらに従ってください。

コードを書くのが不安です。 WooCommerceのベストプラクティスのページは、functions.phpに貼る代わりにPHPの断片を追加できるプラグイン(Code Snippets)を勧めています。その場合も中身は同じadd_actionのコードです。使い方はそのプラグインの説明に従ってください。

ヘッドレス構成でも同じですか？ いいえ。この記事はWordPressのテーマでページを表示するサイトが対象です。表示側を別の仕組みで作っているサイトは、marketingLABOの設置先としては扱っていません。

ほかのカートシステムでは？ Shopify、BASE、カラーミーショップなどの貼り場所はカートシステム別、計測タグを貼る場所の一覧にあります。

marketingLABOのフリープランは0円で、期限はなく、カードの登録も要りません。サイト1つのアクセス解析・ヒートマップ・行動履歴と、フォーム・ポップアップバナー各1つが使えます。料金を見るか、無料登録をしてタグを取得してください。

参考にした資料

2026年10月12日に確認しました。

1. WordPress Developer Resources「wp_head」(英語)
2. WordPress Developer Resources「add_action()」(英語)
3. WordPress Theme Handbook「Child Themes」(英語)
4. WordPress Theme Handbook「Theme Functions」(functions.phpとプラグインの違い、英語)
5. WordPress Developer Resources「wp_enqueue_script()」(英語)
6. WordPress Theme Handbook「Introduction to Templates」(英語)
7. WordPress Plugin Handbook「Plugin Basics」(英語)
8. WordPress.org Documentation「Appearance Theme File Editor Screen」(英語)
9. WordPress本体のtemplate-canvas.php(ブロックテーマの<head>の出力)
10. WooCommerce「Customizing WooCommerce: Best Practices」(英語)
11. WooCommerce Developer Docs「How to set up and use a child theme」(英語)
12. WooCommerce「WooCommerce Pages」(英語)
13. WooCommerce Developer Docs「Understanding WooCommerce endpoints」(英語)