WordPressオリジナルテーマ開発④｜Search Console・GA4タグの設置と本番環境へのアップロード手順

はじめに

前回の記事ではWordPressオリジナルテーマ開発の第3弾として、カスタム投稿タイプ（制作実績）とカスタムタクソノミー・ACFを使ったカスタムフィールドの設定方法を解説しました。今回は第4弾・最終回としてSearch ConsoleとGA4のタグをWordPressテーマに設置する方法と、テーマ全体の最終確認チェックリスト・本番環境へのアップロード手順をお届けします。開発したテーマをいよいよ世界に公開するまでの仕上げ作業です。

1. Search ConsoleとGA4をWordPressに設置する

1.1 2つのツールの役割の違い

ツール提供元主な役割
Google Search ConsoleGoogle検索エンジンからのアクセスを分析する・インデックス状況を確認する
Google Analytics 4（GA4）Googleサイト訪問者の行動・流入元・コンバージョンを分析する

どちらもタグ（コード）をサイトに設置することで計測が始まります。WordPressオリジナルテーマでは header.php または functions.php を使って設置します。

2. Google Search Consoleの設定

2.1 Search Consoleにサイトを登録する

  1. search.google.com/search-console にアクセスします。
  2. 「プロパティを追加」をクリックします。
  3. 「URLプレフィックス」を選択してサイトのURLを入力します。
  4. 所有権の確認方法を選択します。

2.2 所有権確認の方法（HTMLタグが最もシンプル）

Search Consoleの所有権確認にはいくつかの方法がありますが、WordPressオリジナルテーマではHTMLタグ方式が最もシンプルです。

所有権確認の選択肢：
・HTMLファイル → ファイルをサーバーにアップロードする
・HTMLタグ     ← 今回使う方法（<head>にmetaタグを追加する）
・Google Analytics → GA4を先に設置している場合に使える
・Googleタグマネージャー → GTMを使っている場合
・ドメイン名プロバイダ → DNSレコードを追加する

2.3 HTMLタグをheader.phpに設置する

Search ConsoleのHTMLタグ確認を選択するとMetaタグが発行されます。

<!-- header.php の <head> 内・wp_head()の直前に追加する -->
<meta name="google-site-verification" content="（Search Consoleから発行された確認コード）">

<?php wp_head(); ?>
</head>

⚠️ content の値はサイトごとに異なります： Search Consoleの画面に表示されるコードをそのままコピーしてください。「（）」の部分を自分のコードに置き換えます。

2.4 functions.phpから設置する方法（推奨）

header.php を直接編集する方法でも動作しますが、functions.php からwp_headフックに差し込む方法の方がテーマのファイル構造をすっきり保てます。

// functions.phpに追加する
function my_theme_google_site_verification() {
    echo '<meta name="google-site-verification" content="（確認コード）">' . "\n";
}
add_action( 'wp_head', 'my_theme_google_site_verification' );

3. Google Analytics 4（GA4）の設定

3.1 GA4プロパティを作成する

すでに第十一弾でGA4の設定を解説しましたが、WordPressオリジナルテーマへの設置方法を改めて整理します。

  1. analytics.google.com にアクセスします。
  2. 「管理」→「プロパティを作成」をクリックします。
  3. プロパティ名・タイムゾーン（日本）・通貨（日本円）を設定します。
  4. 「ウェブ」を選択してサイトのURLを入力します。
  5. 「測定ID」（G-XXXXXXXXXX という形式）をコピーします。

3.2 GA4タグをfunctions.phpで設置する

// functions.phpに追加する
function my_theme_ga4_tag() {
    // 管理者がログイン中は計測しない（自分のアクセスを除外する）
    if ( current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){ dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'G-XXXXXXXXXX');
    </script>
    <?php
}
add_action( 'wp_head', 'my_theme_ga4_tag' );

💡 current_user_can('manage_options') で管理者のアクセスを除外しましょう： 自分がサイトを確認するたびにページビューが増えてしまうのを防ぐため、WordPress管理者権限でログイン中はGA4のタグを出力しないようにしています。正確な計測データを得るために大切な設定です。

⚠️ G-XXXXXXXXXX の部分を自分の測定IDに書き換えてください： 測定IDはGA4の管理画面「データストリーム」→「ウェブ」から確認できます。

3.3 Googleタグマネージャー（GTM）経由で設置する方法

GA4だけでなく他の計測タグも将来的に追加する予定がある場合は**Googleタグマネージャー（GTM）**経由で設置するとコード管理が楽になります。

// functions.phpに追加する（GTMを使う場合）
function my_theme_gtm_head() {
    if ( current_user_can( 'manage_options' ) ) {
        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','GTM-XXXXXXXX');</script>
    <!-- End Google Tag Manager -->
    <?php
}
add_action( 'wp_head', 'my_theme_gtm_head' );

// <body>タグの直後にも設置が必要（noscript用）
function my_theme_gtm_body() {
    if ( current_user_can( 'manage_options' ) ) {
        return;
    }
    ?>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <?php
}
add_action( 'wp_body_open', 'my_theme_gtm_body' );

💡 wp_body_open フックを使うには header.php の <body> タグの直後に <?php wp_body_open(); ?> を追加する必要があります：

<!-- header.php -->
<body>
<?php wp_body_open(); ?>  <!-- この1行を追加する -->
<header class="site-header">

4. Search ConsoleとGA4の連携

4.1 連携の設定手順

GA4とSearch Consoleを連携すると、GA4のレポート画面でSEO関連のデータ（検索クエリ・クリック数・表示回数）を確認できます。

  1. Search Consoleにログインして「設定」→「アソシエイト」を開きます。
  2. 「アソシエーション」→「アソシエイトを追加」をクリックします。
  3. 連携するGA4プロパティを選択して「確認して続行」をクリックします。
  4. GA4側でも「管理」→「プロダクトのリンク」→「Search Consoleのリンク」から連携確認をします。

5. テーマ全体の最終確認

5.1 表示・機能の確認

本番環境へアップロードする前に、ローカル環境（Local by Flywheelなどの開発環境）で最終確認を行います。

ページの表示確認：

確認項目URL（例）
トップページhttps://example.com/
投稿一覧https://example.com/blog/
個別投稿https://example.com/blog/記事のスラッグ/
固定ページ（About）https://example.com/about/
制作実績一覧https://example.com/works/
制作実績詳細https://example.com/works/制作実績のスラッグ/
404ページ存在しないURLにアクセスする

5.2 Chrome DevToolsで確認する

F12で開発者ツールを開いて確認する項目：

① Consoleタブ
   → JavaScriptのエラーが0件であること

② Networkタブ
   → CSSと画像が正しく読み込まれていること（404エラーがないこと）

③ Lighthouseタブ
   → パフォーマンス・アクセシビリティ・SEOのスコアを確認する

④ Elementsタブ
   → <head>内にGA4タグとSearch Consoleの確認タグが出力されているか

5.3 スマートフォン・複数ブラウザで確認する

前回の連載でも解説した通り、デバイスツールバーでの確認だけでなく実機での確認も行います。

確認対象確認内容
iPhone（iOS Safari）レイアウト崩れ・フォントサイズ・タップ領域
Android（Chrome）全体の表示・スクロールの動作
PC Chromeメインの表示・ホバーエフェクト
PC Safariベンダープレフィックスの動作確認
PC FirefoxFlexbox・Gridのレイアウト確認

5.4 WordPressのデバッグモードをオフにする

開発中は wp-config.php でデバッグモードを有効にしていた場合、本番環境ではオフにします。

// wp-config.php の設定を確認する

// 開発中：trueにしてエラーを表示させる
define( 'WP_DEBUG', true );

// 本番環境：falseに変更してエラーを非表示にする
define( 'WP_DEBUG', false );

⚠️ 本番環境で WP_DEBUG が true のままだとPHPのエラーや警告がユーザーに見えてしまいます： セキュリティ上のリスクにもつながるため、必ず false に変更してから公開しましょう。

6. 本番環境へのアップロード手順

6.1 アップロード方法の選択肢

方法難易度向いているケース
FTPクライアント（FileZilla）★☆☆テーマファイルのみを更新する場合
サーバーのファイルマネージャー★☆☆少数ファイルを更新する場合
All-in-One WP Migration（プラグイン）★★☆サイト全体を丸ごと移行する場合
WP CLI★★★コマンドラインで操作できるエンジニア向け

初めて本番環境にアップロードする場合はFTPクライアント（FileZilla）またはAll-in-One WP Migrationが扱いやすい選択肢です。

6.2 FTPを使ったテーマファイルのアップロード

手順：

1. FileZillaをインストールして起動する
   → 公式サイト（filezilla-project.org）からダウンロードする

2. サーバーへの接続情報を入力する
   → ホスト：サーバーのホスト名（例：sv1234.xserver.jp）
   → ユーザー名：FTPアカウントのユーザー名
   → パスワード：FTPアカウントのパスワード
   → ポート：21（エックスサーバーは21）

3. 接続後、サーバー側のディレクトリを開く
   → /public_html/wp-content/themes/

4. ローカルのテーマフォルダをドラッグ&ドロップでアップロードする
   → my-portfolio-theme/ フォルダごとアップロードする

5. WordPress管理画面で新しいテーマを有効化する

6.3 All-in-One WP Migrationでサイト全体を移行する

ローカル環境のWordPressをそのまま本番サーバーに移す場合はAll-in-One WP Migrationプラグインが便利です。

エクスポート（ローカル環境）の手順：
1. ローカルのWordPress管理画面で「All-in-One WP Migration」をインストール・有効化する
2. 「エクスポート」→「エクスポート先」→「ファイル」をクリックする
3. .wpress形式のファイルがダウンロードされる

インポート（本番サーバー）の手順：
1. 本番サーバーにWordPressを新規インストールする
2. All-in-One WP Migrationをインストール・有効化する
3. 「インポート」→「インポート元」→「ファイル」から.wpressファイルをアップロードする
4. インポートが完了したらパスワードを再設定する
5. Search ConsoleでURLを再確認・サイトマップを再送信する

⚠️ 無料版のAll-in-One WP Migrationはインポートできるファイルサイズに上限があります： 無料版では512MBまでとなっています。画像が多くてこのサイズを超える場合は「Extension」を追加購入するか、FTPを使った方法を選びましょう。

6.4 本番環境アップロード後の確認作業

アップロード後に必ず行う確認：

① サイトURLにアクセスして表示を確認する
   → 画像・CSS・JavaScriptが正しく読み込まれているか

② WordPressのURLが正しいか確認する
   → 管理画面「設定」→「一般」でサイトアドレスを確認する

③ パーマリンクを再保存する
   → 「設定」→「パーマリンク」→「変更を保存」をクリックする

④ Search Consoleで所有権確認を完了する
   → metaタグが正しく出力されているか確認してから「確認」をクリックする

⑤ GA4でリアルタイムレポートを確認する
   → 自分のアクセスが計測されていることを確認する（管理者除外を無効にして確認後に戻す）

⑥ sitemap.xmlをSearch Consoleに送信する
   → RankMathやYoast SEOが自動生成したサイトマップのURLを登録する

7. 最終チェックリスト（公開前総まとめ）

📋 テーマファイル

✓ style.css の先頭にテーマ情報が正しく記載されているか

✓ wp_head() と wp_footer() が適切な場所にあるか

✓ wp_body_open() が <body> タグの直後にあるか

✓ WP_DEBUG が false になっているか

✓ 不要なコメントや console.log が残っていないか

📋 計測タグ

✓ Search Consoleの確認metaタグが <head> 内に出力されているか

✓ GA4タグが <head> 内に出力されているか

✓ 管理者ログイン中はGA4タグが出力されない設定になっているか

✓ Search ConsoleとGA4の所有権確認が完了しているか

✓ Search ConsoleとGA4が連携されているか

📋 SEO・パフォーマンス

✓ 各ページのtitleタグが正しく出力されているか

✓ meta descriptionが設定されているか

✓ OGPタグが設定されているか

✓ sitemap.xmlが生成されてSearch Consoleに送信済みか

✓ PageSpeed InsightsでモバイルスコアがGreen（70点以上）か

📋 表示・機能

✓ 全ページのリンクが機能しているか（404が出ていないか）

✓ 画像がすべて表示されているか

✓ お問い合わせフォームが正常に送信できるか

✓ スマートフォン・タブレット・PCで表示崩れがないか

✓ Chrome・Safari・Firefoxで表示を確認したか

まとめ

今回はWordPressオリジナルテーマ開発の第4弾・最終回として、Search ConsoleとGA4タグの設置方法と本番環境へのアップロード手順を解説しました。ポイントをまとめると：

  • Search Consoleの所有権確認はHTMLタグ方式が最もシンプルで functions.php の wp_head フックで設置する
  • GA4タグも functions.php から設置して current_user_can('manage_options') で管理者アクセスを除外する
  • GTM経由で設置する場合は wp_body_open フックを使って <body> 直後にもタグを追加する
  • WP_DEBUG を false にしてから公開することが必須
  • テーマファイルのアップロードは FileZilla（FTP）またはAll-in-One WP Migrationプラグインが扱いやすい
  • アップロード後はパーマリンクの再保存・Search Consoleの所有権確認・サイトマップ送信を忘れずに行う

この連載ではHTMLサイトの作成からWordPressオリジナルテーマへの変換・カスタム投稿タイプの実装・本番公開まで一通りの流れを解説しました。学んだ技術を活かして自分だけのサイトを育てていただければ嬉しいです。今後も実践的なWeb制作のノウハウをお届けしていきます。お楽しみに！

スポンサーリンク

コメント

タイトルとURLをコピーしました