2026年5月20日

WordPressのwp_headとwp_footerフックを正しく使う方法

テーマ・デザイン

はじめに

wp_head と wp_footer は内と直前にコードを挿入するフックです。スクリプト・スタイルは wp_enqueue_scripts で登録するのが基本ですが、インラインコードやメタタグなど wp_enqueue では対応しにくいものは直接フックを使います。

症状・原因

内にメタタグを追加したい
Google Analytics・GTMタグを追加したい
条件によってスクリプトを切り替えたい
wp_head() を呼び忘れてプラグインが動かない

解決手順

ステップ1：wp_headとwp_footerの基本

// header.php の必須構造
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?> <!-- ← 必須！ここにプラグインとテーマのheadコードが出力される -->
</head>
<body <?php body_class(); ?>>

// footer.php の必須構造
<?php wp_footer(); ?> <!-- ← 必須！ここにスクリプトが出力される -->
</body>
</html>

ステップ2：メタタグをwp_headに追加する

// functions.php
function mytheme_add_meta_tags(): void {
    // OGPメタタグ
    if (is_singular()) {
        global $post;
        $description = has_excerpt() ? get_the_excerpt() : wp_trim_words(get_the_content(), 50);
        $image       = get_the_post_thumbnail_url(null, 'large') ?: get_site_icon_url();
        ?>
        <meta property="og:title" content="<?php echo esc_attr(get_the_title()); ?>">
        <meta property="og:description" content="<?php echo esc_attr(wp_strip_all_tags($description)); ?>">
        <meta property="og:url" content="<?php echo esc_url(get_permalink()); ?>">
        <meta property="og:type" content="article">
        <?php if ($image) : ?>
        <meta property="og:image" content="<?php echo esc_url($image); ?>">
        <?php endif; ?>
        <?php
    }
}
add_action('wp_head', 'mytheme_add_meta_tags', 5); // priority 5: 早めに出力

ステップ3：Google Tag Managerを追加する

// functions.php
function mytheme_gtm_head(): void {
    $gtm_id = get_option('mytheme_gtm_id');
    if (empty($gtm_id)) {
        return;
    }
    ?>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','<?php echo esc_js($gtm_id); ?>');</script>
    <!-- End Google Tag Manager -->
    <?php
}
add_action('wp_head', 'mytheme_gtm_head', 1); // priority 1: 最優先で出力

function mytheme_gtm_body(): void {
    $gtm_id = get_option('mytheme_gtm_id');
    if (empty($gtm_id)) {
        return;
    }
    ?>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo esc_attr($gtm_id); ?>"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <?php
}
add_action('wp_body_open', 'mytheme_gtm_body', 1); // <body>直後に出力

ステップ4：条件付きでスクリプトを出力する

// functions.php
function mytheme_enqueue_conditional_scripts(): void {
    // 投稿詳細ページのみ
    if (is_singular('post')) {
        wp_enqueue_script(
            'mytheme-share-buttons',
            get_template_directory_uri() . '/js/share.js',
            [],
            '1.0.0',
            true // フッターに出力
        );
    }

    // WooCommerceショップページのみ
    if (function_exists('is_shop') && (is_shop() || is_product())) {
        wp_enqueue_script(
            'mytheme-woo-enhance',
            get_template_directory_uri() . '/js/woo.js',
            ['jquery'],
            '1.0.0',
            true
        );
    }
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_conditional_scripts');

ステップ5：インラインスクリプトをフッターに追加する

// functions.php
function mytheme_inline_footer_script(): void {
    $localized_data = [
        'ajaxUrl' => admin_url('admin-ajax.php'),
        'nonce'   => wp_create_nonce('mytheme_nonce'),
        'homeUrl' => home_url('/'),
    ];
    ?>
    <script>
    var mythemeData = <?php echo wp_json_encode($localized_data); ?>;
    </script>
    <?php
}
add_action('wp_footer', 'mytheme_inline_footer_script', 5);

推奨方法：wp_add_inline_scriptを使う

// functions.php: wp_add_inline_script を使ったインラインスクリプト
function mytheme_localize_script(): void {
    wp_enqueue_script('mytheme-main', get_template_directory_uri() . '/js/main.js', [], '1.0.0', true);

    wp_add_inline_script(
        'mytheme-main',
        'var mythemeData = ' . wp_json_encode(['ajaxUrl' => admin_url('admin-ajax.php')]) . ';',
        'before' // スクリプトの前に出力
    );
}
add_action('wp_enqueue_scripts', 'mytheme_localize_script');

注意事項

wp_head() と wp_footer() をテーマから削除・コメントアウトすると、プラグインのスクリプト・スタイルが動かなくなります。絶対に省略しないでください
Google AnalyticsやGTMなどのサードパーティスクリプトは管理者・ログインユーザーには読み込まない設定にすると、アクセス解析データが汚染されません（!current_user_can('manage_options') で条件分岐）
インラインスクリプトで動的データを出力する場合は必ず wp_json_encode() を使い、XSSを防いでください

まとめ

wp_head() と wp_footer() はテーマに必須の関数です。スクリプト・スタイルは wp_enqueue_scripts で登録し、メタタグやGTMは wp_head フックに追加します。インラインデータは wp_add_inline_script または wp_json_encode を使って安全に出力します。

Post Views: 28