WordPress のカスタマイズを行う際、<head> タグ内や <body> タグの前後にコードを挿入することがよくあります。この記事では、それぞれの位置に応じた正しいフックを解説します。
wp_head:</head>直前wp_body_open:<body>タグの直後(Google Tag Manager設置などで頻出)wp_footer:</body>の閉じタグ直前
wp_headでhead内にコードを挿入する
wp_head アクションフックを使用すると、テーマの <head> タグ内にコードを追加できます。主に、CSS や JavaScript のリンクを追加するのに便利です。
function my_custom_code_in_head() {
?>
<script src="https://example.com/script.js"></script>
<link rel="stylesheet" href="https://example.com/styles.css">
<?php
}
add_action( 'wp_head', 'my_custom_code_in_head' );
add_action() の第3引数(優先度)を指定すると、他のプラグイン・テーマが出力するコードより先/後に表示する順序を調整できます。数値が小さいほど先に実行されます。
add_action( 'wp_head', 'my_custom_code_in_head', 5 ); // 既定の10より早く出力
wp_body_openでbodyタグ直後にコードを挿入する
wp_body_open フックを使うと、<body> タグの開きタグ直後にコードを挿入できます。Google Tag Managerの <noscript> タグなど、body直後への設置が指定されているコードを入れる際に使います。
function my_custom_code_after_body_open() {
?>
<!-- Google Tag Manager (noscript) など、bodyの直後に置きたいコード -->
<?php
}
add_action( 'wp_body_open', 'my_custom_code_after_body_open' );
このサイトが使用しているCocoonテーマでもwp_body_openがサポートされています(
header.phpがtmp/body-top.phpを読み込み、その中でwp_body_open()が実行される実装を確認済みです)。子テーマのfunctions.phpに上記コードを追加するだけで利用できます。wp_footerでbodyタグの閉じタグ直前にコードを挿入する
wp_footer アクションフックを利用すると、</body> の閉じタグ直前にコードを追加できます。主に、トラッキングコードや追加の JavaScript を挿入するのに使用されます。
function my_custom_code_before_closing_body() {
?>
<script src="https://example.com/footer-script.js"></script>
<?php
}
add_action( 'wp_footer', 'my_custom_code_before_closing_body' );
カスタムプラグインを使用する
テーマの変更を避けたい場合や、複数のサイトで同じ変更を適用したい場合は、カスタムプラグインを作成してコードを挿入するのも良い方法です。wp-content/plugins フォルダーに新しいフォルダーを作成し、その中にPHPファイルを作成します。
<?php
/*
Plugin Name: Custom Code Inserter
Description: Insert custom code into head, after body, and footer.
Version: 1.0
*/
add_action( 'wp_head', function () {
?>
<script src="https://example.com/script.js"></script>
<?php
} );
add_action( 'wp_body_open', function () {
?>
<!-- bodyの直後に置きたいコード -->
<?php
} );
add_action( 'wp_footer', function () {
?>
<script src="https://example.com/footer-script.js"></script>
<?php
} );
WordPress管理画面の「プラグイン」セクションで新しいプラグインを有効化します。カスタムプラグインを使用すると、テーマの更新に影響されることなくコードの挿入が可能です。
よくある質問(FAQ)
add_action('wp_head', 'my_custom_head_code')でコールバック関数を登録し、その中でHTMLを出力します。優先度(第3引数)を変えることで出力順をコントロールできます。add_action('wp_body_open', 'my_body_code')を使います。Cocoonテーマはwp_body_openをサポートしているため、bodyタグの直後に挿入できます。add_action('wp_footer', 'my_footer_code')で登録します。Google Tag Manager本体のscriptタグなど、フッターに挿入する際によく使われます。まとめ
- head内:
wp_head - bodyタグ直後:
wp_body_open(Cocoonでも利用可能) - bodyの閉じタグ直前:
wp_footer - テーマ更新の影響を避けたい場合:カスタムプラグインにまとめる
挿入したいコードの種類(GTMのnoscriptタグ・トラッキングコード等)に応じて適切なフックを選んで、効果的なカスタマイズを行ってください。
