word press

ワードプレスの子テーマにグーグルアナリティクスを入れる方法
【アルバトロス】を使用

取得したグーグルアナリティクスをワードプレスのテーマ【アルバトロス】の
子テーマの どこに、どのように設定すれば良いのか?
【プラグインを使わずに設定する場合】

ネットのハウツーでは分かりにくかったところだけを抜粋してみました。

基本的にワードプレス【WP】は常に更新をしていく為、親テーマを
カスタマイズしても、更新の際に上書きをされて、消されてしまうので、
提供されている子テーマをカスタマイズする、 但し【子テーマ】には、
取得したアナリティクスのトラッキングコードを入れるための
ヘッダーが無い為、子テーマの中にヘッダーファイルを新たに作ります

工程順序   

アナリティクスの取得 ⇒ 子テーマにヘッダーファイルを作る ⇒ 

⇒ 親テーマの【heade.php】をコピー ⇒ 子テーマにペースト ⇒

⇒ トラッキングコードをペースト ⇒ トラッキングID設定

※ グーグルアナリティクスの申請・取得
【ここでは既に取得済みの前提で進みます】

グーグルアナリティクスのトラッキングコードの取り方はわかりやすいサイトが沢山あるのでそれを見て下さい。

トラッキングコードやトラッキングIDは別々に、メモにコピーしておくと便利です。

ブラウザでワードプレスの操作画面と レンタルサーバーのコントロールパネルを開いておく
【作業効率を上げる為】

1 レンタルサーバーのFTPで【子テーマ】中にヘッダーファイルを作る

  FTPの使い方【ここではサーバーのコントロールパネルに有るFTPを使う】
  画像はロリポップサーバーの画像です。

ロリポップサーバーロリポップFTPをクリック

 レンタルサーバーのコントロールパネルに有るFTPを開く

ロリポップFTP

入れるファイル【ヘッダーファイル作り方】

※ファイルを作るアルバトロス 子テーマのフォルダー
【意外とわからない点】

WPフォルダー【1】クリック⇒contentフォルダー【2】クリック ⇒
themesフォルダー【3】クリック ⇒albatros_custom【4】クリック⇒
開いたalbatros_customフォルダー内に、新しいファイルを作り
【head.php】と名前を付け閉じる【5】

この時【heade.php】と書いてはダメ、WPの親テーマのファイルが
【heade.php】なのでWPの更新の際に消されてしまう
くれぐれも head.php と名前を付けて保存すること

これで子テーマ内に白紙のヘッダーファイルが出来ました。

ロリポップFTP開く

ここまで出来たら次はワードプレスの画面に移る

2  親テーマからヘッダーをコピーする

WordPressの管理画面左サイドメニューの「外観」 → 「テーマ」から、
【親テーマ】を有効にします。

「外観」 → 「テーマ編集」から、右サイドにある「heade.php」メニューをクリックします。

出てきた「heade.php」ファイルの内容を全選択して、※?メモにコピーします。
直接コピペも出来るが、メモに取ることをお勧めします。

WP-親テーマ

 

3 親テーマから子テーマへのヘッダーファイルのコピー

子テーマに移動【子テーマを有効化】

WordPressの管理画面左サイドメニューの「外観」 → 「テーマ」から、子テーマを有効にします。

※コピーしたヘッダーファイルのどの場所にグーグルアナリティクスをペーストするのか

「外観」 → 「テーマ編集」から、右サイドにある「head.php」メニューをクリックします。
これが先ほどFTPで作った「head.php」ファイルです。

WP-子テーマhead

これを開いて親テーマからコピーした メモから「heade.php」ファイルの
内容を全選択して、この中にペーストします。

コピーした子テーマ側のhead.phpをカスタマイズ

コピーを済ませた【head.php】内には下記のようにコードが記載されてますので、
このコードを残したまま最上部(※※ここにコードを追記※※の部分)
にアクセス解析コード【トラッキングコード】を入力【ペースト】してください。

※? <?php if ( get_option(~~~~~~~ の内部に記載しないようにご注意下さい。


<!– ※※ここにコードを追記①※※ –>

<?php if ( get_option( ‘other_options_ga’ ) ) : ?>
<!– GAタグ –>
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘<?php echo get_option( ‘other_options_ga’ ); ?>’, ‘auto’);
ga(‘send’, ‘pageview’);

</script>
<?php endif; ?>

<!– ※※ここにコードを追記②※※ –>


※Google アナリティクスのコードの前後を、HTMLのコメントで囲っておくと、
いざというときにわかりやすいかもしれません。


<!?? google_analytics ??>
Google アナリティクスコード
<!?? /google_analytics ??>


WP-headペースト

上の図の位置にペーストが出来たら
【ファイルを更新】ボタンをクリックすれば、
トラッキングコードの作業は終了です。


次にテーマ アルバトロスの場合 アナリティクスのユーザーIDを入れる場所があるので
その方法も記載しておきます。

 

4 アナリティクスのユーザーID【ユーザーキー】を入れる方法

子テーマのダッシュボードから
外観→カスタマイズ→カスタマイズ画面の左側のアクセス解析コードをクリックして
出てきた左側のGoogle Analyticsタグの入力スペース(白い部分)の
メモに取ってある【ユーザーキー】UA-********-** をコピペして入力

入力が済んだら公開済みにして保存

以上でグーグルアナリティクスのワードプレスへの実装【設定】は終了です。