functions.phpを編集してheadタグにコードを挿入する方法【WordPress初心者向け】

WordPressサイトのカスタマイズで、headタグ内に独自のコードを挿入したいことはありませんか?
例えば、Google Analyticsのトラッキングコードやメタタグ、カスタムCSSなどを追加する際に役立つ方法をご紹介します。
この記事では、テーマのfunctions.php
を使って安全にheadタグにコードを追加する方法を、初心者向けにわかりやすく解説します。
Contents
1. functions.phpでheadタグにコードを追加する理由
WordPressのテーマファイルを直接編集する方法もありますが、テーマのアップデート時に変更が消えてしまうリスクがあります。functions.php
を編集してコードを追加することで、より管理しやすく安全にカスタマイズ可能です。
また、WordPressの公式なフック機能であるwp_head
を使うため、推奨される方法でもあります。
テーマ編集の基礎知識については、WordPress初心者でも安心!functions.phpの使い方と注意点をわかりやすく解説の記事もぜひご覧ください。
2. functions.phpにコードを追加する手順
2-1. テーマ編集画面を開く
- WordPress管理画面の「外観」→「テーマファイルエディター」をクリック
- 右側のファイルリストから
functions.php
を選択
ポイント
編集前に必ずバックアップを取るか、子テーマの作成方法を確認しましょう。
2-2. headタグにコードを追加する関数を作成
以下のコードをfunctions.php
の最後に追記します。
function my_custom_code_in_head() {
?>
<!-- headタグ内に挿入したいコードをここに記述 -->
<meta name="description" content="あなたのサイトの説明文">
<?php
}
add_action('wp_head', 'my_custom_code_in_head');
2-3. 変更を保存し、動作確認
- 「ファイルを更新」ボタンをクリック
- ブラウザでサイトを表示し、ソースコード内の
<head>
タグ内にコードが反映されているか確認
3. よく使われるheadタグへのコード例
3-1. Google Analyticsトラッキングコードの追加例
function add_google_analytics() {
?>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXX-X');
</script>
<?php
}
add_action('wp_head', 'add_google_analytics');
詳細な解析やSEO効果を高めるためのメタタグの追加については、構造化データ(schema.org)とは?SEOに効くマークアップの基本の記事も参考にしてください。
4. 編集時の注意点とおすすめの管理方法
- バックアップは必須
functions.phpの編集ミスはサイトの表示エラーを引き起こします。作業前に必ずバックアップを取りましょう。 - 子テーマでの編集がベスト
テーマのアップデートで変更が上書きされるのを防ぐため、子テーマのfunctions.php
で管理するのがおすすめです。 - プラグインとの使い分け
headタグのカスタムコード追加用プラグインもありますが、サイトを軽量化したい場合や管理を一元化したい場合はfunctions.php
を使う方がシンプルです。
プラグインによるSEO対策については、All in One SEO / Yoast SEO の設定手順と使い分け【WordPress初心者向け】の記事を参考にしてください。
まとめ
wp_head
アクションフックを使い、functions.php
にコードを追加するのが安全で推奨される方法- 編集は必ずバックアップを取り、できれば子テーマで行う
- Google Analyticsやメタタグの追加など様々な用途に応用可能
WordPressのカスタマイズに慣れてきたら、ぜひこの方法でheadタグを自由に編集して、サイトの機能アップやSEO対策に役立ててくださいね。