Google Analytics トラッキング コードの設定 方法

今回は子テーマをせっかく作ったのでそれを利用してGoogle Analytics トラッキング コードの設定 をします。

ちなみに良く見かける方法は、親テーマの「header.php」へ直接書き込んだりする方法です。
もちろん手軽ではありますが、親テーマのアップデートでコードが無くなってしまいます。

それから、プラグインでGoogle Analytics トラッキング コードを設定する方法もありますが、プラグインって何かと問題を起こすし重くなるので、ほんとうに使いたい機能以外は極力避けたいと思っています。
これは好みの話なので、プラグインを使ってももちろんOKだと思います。
検索してみると下の2つが良く使われているプラグインみたいです。
・Google Analytics by Yoast
・All in One SEO Pack

子テーマを使った Google Analytics トラッキング コードの設定

では、初心者にもわかる「子テーマを使ったトラッキング コードの設定」を紹介します。
子テーマに便利な「functions.php」ファイルがあります。
このファイルには自分で関数を定義追加することができます。
なので、自分でGoogle Analytics トラッキング コードをheadに貼り付ける関数を登録してしまおうという方法です。

『twentyelevenの子テーマの作り方』や『twentyseventeenの子テーマの作り方』の方法で子テーマを作ってあると「functions.php」が作ってあるはずです。
親テーマのスタイルシートを読み込む際に以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんと言われています。
親テーマのスタイルシートを読み込む正しい方法は、子テーマの 「functions.php」 で wp_enqueue_script()を使用する方法です。したがって子テーマには 「functions.php」 を作成する必要があります。

で、その「functions.php」にしたのコードのようにコピペするだけです。

//Gole Analytics Code設定
function set_gac() { ?>
    <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','https://www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-XXXXXXXX-X', 'auto');
        ga('send', 'pageview');

    </script> 
<?php }
add_action('wp_head', 'set_gac');

これで親テーマがアップデートされても上書きされないのでメンテナンスが楽になります。

以上、子テーマを使ったGoogle Analytics トラッキング コードの設定方法でした。

WordPress Twenty Seventeen の子テーマの作り方

今回は、twentyseventeenの子テーマの作り方 を紹介します。
「twentyelevenの子テーマの作り方」はこちらまで

今回はサクッと一番簡単な作り方を紹介します。

子テーマ設置方法

子テーマ設置場所

子テーマを作成する最初の行程は、子テーマディレクトリの作成です。
wp-content/themes ディレクトリ下に作成します。
子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されます。

今回は、「twentyseventeen-child」という名前のディレクトリを「wp-content/themes」ディレクトリに作ります。
作り方は、FTPアプリやレンタルサーバのファイル管理アプリで作ります。
※子テーマディレクトリの名前には空白を含めないでください。エラーが発生します。

子テーマ設置必須ファイル

子テーマは、2つのファイル「style.css」と「functions.php」を作成する必要があります。

まずは、「style.css」から作ります。

/*
 Theme Name:   Twenty SeventeenChild
 Template:     twentyseventeen
*/

Theme Name:Twenty SeventeenChild
テーマの名称。全角可。ここに書いた名称が管理画面のテーマ選択画面に表示される。
Template:twentyseventeen
親テーマのディレクトリ名。大文字小文字を区別するのできっち書くこと。
※全角文字を入れたときにはエディタの文字コードを UTF-8 にする必要があります。

次に、「functions.php」を作ります。
以前は「style.css」の中で @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではないそうです。
親テーマのスタイルシートを反映させる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。
したがって子テーマには functions.php を作成する必要があります。

私も初心者なので理解できないこともありますが、言われたとおりに作っておきます。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

普通はこれで親のスタイルシート（「style.css」）を読み込んだ後に、子テーマのスタイルシート（「style.css」）を読み込み上書きされることになります。
しかし、なぜかうまく子テーマのスタイルシート（「style.css」）が読み込まれないパターンがあるそうです。
その際は、下のようにすると良いらしいです。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
?>

各々ファイルを保存したら、先ほど作った子テーマディレクトリへファイルをアップロードします。
と言うか、どんな方法でも良いので、先ほど作った子テーマディレクトリに２つのファイルを置ければOKです。
なお、エディタの文字コードを UTF-8 で保存しましょう。

子テーマの有効化

正常にアップロード出来たら、子テーマを有効化できる準備ができました。
サイトの管理画面にログインし、管理画面 > 外観 > テーマに移動してください。
子テーマが表示され、有効化できる状態になっています。

なお、 子テーマを有効化したあとは、メニュー (外観 > メニュー または 外観 > カスタマイズ > メニュー) およびテーマのオプション (背景やヘッダイメージ) を保存し直す必要があります。
今まで触って居なければそのままでもOKです。
以上でtwentyseventeenの子テーマの設定ができます。
後は、自由にカスタマイズすればOKですので学習してカスタマイズしてください。

WordPress TwentyEleven の 子テーマ の作り方

今回は「twentyeleven」の子テーマの作り方を紹介します。
そもそも 子テーマ とは、親テーマ（今回はtwentyeleven）と呼ばれる別のテーマの機能とスタイルを継承して、必要な部分だけ変更するテーマです。
既存のテーマを変更する方法として、子テーマが推奨されています。

子テーマ の有用性

子テーマの有用性は、親テーマがアップデートされてもカスタマイズ（変更）が消えない点にあります。

親テーマ（twentyeleven）は頻繁にアップデートされます。
それはとてもありがたいことですが。。。しかし、、、
自分で編集したファイルも上書きされてしまい、カスタマイズも無かったことにされてしまいます。

子テーマはそれを防いでくれる良い方法なのです。
子テーマがすべてを防いでくれるわけではありませんが、初心者レベルのカスタマイズなら問題ないでしょう。

子テーマ設置方法

子テーマ設置場所

子テーマを作成する最初の行程は、子テーマディレクトリの作成です。
wp-content/themes ディレクトリ下に作成します。
子テーマディレクトリの名前には最後に ‘-child’ を付けることが推奨されます。

今回は、「twentyeleven-child」という名前のディレクトリを「wp-content/themes」ディレクトリの中に作ります。

wp-content＞themes＞twentyeleven-child

作り方は、FTPアプリやレンタルサーバのファイル管理アプリで作ります。
※子テーマディレクトリの名前には空白を含めないでください。エラーが発生します。

子テーマ設置必須ファイル

子テーマは、2つのファイル「style.css」と「functions.php」を作成する必要があります。

まずは、「style.css」から作ります。

/*
 Theme Name:   Twenty ElevenChild
 Template:     twentyeleven
*/

Theme Name:Twenty ElevenChild
テーマの名称。全角可。ここに書いた名称が管理画面のテーマ選択画面に表示される。
Template:twentyeleven
親テーマのディレクトリ名。大文字小文字を区別するのできっち書くこと。
※全角文字を入れたときにはエディタの文字コードを UTF-8 にする必要があります。

次に、「functions.php」を作ります。
以前は「style.css」の中で @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではないそうです。
親テーマのスタイルシートを反映させる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。
したがって子テーマには functions.php を作成する必要があります。

私も初心者なので理解できないこともありますが、言われたとおりに作っておきます。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

普通はこれで親のスタイルシート（「style.css」）を読み込んだ後に、子テーマのスタイルシート（「style.css」）を読み込み上書きされることになります。
しかし、なぜかうまく子テーマのスタイルシート（「style.css」）が読み込まれないパターンがあるそうです。
その際は、下のようにすると良いらしいです。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
?>

各々ファイルを保存したら、先ほど作った子テーマディレクトリへファイルをアップロードします。
と言うか、どんな方法でも良いので、先ほど作った子テーマディレクトリに２つのファイルを置ければOKです。
なお、エディタの文字コードを UTF-8 で保存しましょう。

子テーマの有効化

正常にアップロード出来たら、子テーマを有効化できる準備ができました。
サイトの管理画面にログインし、管理画面 > 外観 > テーマに移動してください。
子テーマが表示され、有効化できる状態になっています。

なお、 子テーマを有効化したあとは、メニュー (外観 > メニュー または 外観 > カスタマイズ > メニュー) およびテーマのオプション (背景やヘッダイメージ) を保存し直す必要があります。
今まで触って居なければそのままでもOKです。