【WordPress】head内・bodyタグ直後・直前にコードを挿入する方法|wp_body_openも解説

WordPress のカスタマイズを行う際、<head> タグ内や <body> タグの前後にコードを挿入することがよくあります。この記事では、それぞれの位置に応じた正しいフックを解説します。

この記事でわかること

  • wp_head</head>直前
  • wp_body_open<body>タグの直後(Google Tag Manager設置などで頻出)
  • wp_footer</body>閉じタグ直前
スポンサーリンク

wp_headでhead内にコードを挿入する

wp_head アクションフックを使用すると、テーマの <head> タグ内にコードを追加できます。主に、CSS や JavaScript のリンクを追加するのに便利です。

functions.php:head内にコードを挿入
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引数(優先度)を指定すると、他のプラグイン・テーマが出力するコードより先/後に表示する順序を調整できます。数値が小さいほど先に実行されます。

functions.php:優先度を指定して出力順を制御
add_action( 'wp_head', 'my_custom_code_in_head', 5 ); // 既定の10より早く出力

wp_body_openでbodyタグ直後にコードを挿入する

wp_body_open フックを使うと、<body> タグの開きタグ直後にコードを挿入できます。Google Tag Managerの <noscript> タグなど、body直後への設置が指定されているコードを入れる際に使います。

functions.php: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は利用できる
このサイトが使用しているCocoonテーマでもwp_body_openがサポートされていますheader.phptmp/body-top.phpを読み込み、その中でwp_body_open()が実行される実装を確認済みです)。子テーマのfunctions.phpに上記コードを追加するだけで利用できます。

wp_footerでbodyタグの閉じタグ直前にコードを挿入する

wp_footer アクションフックを利用すると、</body>閉じタグ直前にコードを追加できます。主に、トラッキングコードや追加の JavaScript を挿入するのに使用されます。

functions.php:bodyの閉じタグ直前にコードを挿入
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ファイルを作成します。

カスタムプラグイン:head・body直後・footerへの挿入をまとめて管理
<?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)

QWordPressのheadタグの中にカスタムコードを追加するには?
Aadd_action('wp_head', 'my_custom_head_code')でコールバック関数を登録し、その中でHTMLを出力します。優先度(第3引数)を変えることで出力順をコントロールできます。
Qbodyタグの直後にコードを挿入するには?
Aadd_action('wp_body_open', 'my_body_code')を使います。Cocoonテーマはwp_body_openをサポートしているため、bodyタグの直後に挿入できます。
Qフッター閉じタグの直前にコードを挿入するには?
Aadd_action('wp_footer', 'my_footer_code')で登録します。Google Tag Manager本体のscriptタグなど、フッターに挿入する際によく使われます。

まとめ

  • head内wp_head
  • bodyタグ直後wp_body_open(Cocoonでも利用可能)
  • bodyの閉じタグ直前wp_footer
  • テーマ更新の影響を避けたい場合:カスタムプラグインにまとめる

挿入したいコードの種類(GTMのnoscriptタグ・トラッキングコード等)に応じて適切なフックを選んで、効果的なカスタマイズを行ってください。