こんにちは。@tomicciです。
最近WordPressのテンプレを巷で話題のSTORK（ストーク）にしたんだけど、今までWordPressのカスタマイズに費やした時間はなんだったんだろうと思う日々。
今まで何百時間とWordPressと格闘してカスタムしてきたけれど、最初からこういう素晴らしいテンプレでブログを書き始めていれば、こんなに苦労しなかったなーなんて。
ちなみにSTORKは7月に販売が開始されたばかり。これからブログ投稿を頑張りたい人は、是非とも最初からSTORKを購入することをオススメしますw
WordPressと格闘した時間が膨大だったとはいえ、WordPressの勉強になって良かった部分もあるので、発信できる役に立ちそうな情報はどんどん発信していきたい。
さて、前置きが長くなりました。
今回はGoogle Tag Manager（タグマネージャー）のテンプレに仕込む方法を書くよ。
超簡単なので是非チャレンジしてみてください。
目次
Google Tag Managerとは
Googleタグマネージャーとは、タグ運用の負荷を軽減するさまざまな優れたツールを提供するサービス。
以前記事を書いたことがあるので、こちらも読んでほしい。
STORKにタグを追記する
HTMLやWordPressのソースをテキストエディタで開いて、Javascriptなどのタグを入力する必要がなくなるGoogleタグマネージャーだけど、さすがにタグマネージャー自体のタグは追記しなければならんのです。
既にSTORKを購入していて、自分でカスタマイズしようとしている人は、子テーマを導入していると思うけど、もしまだの人は、まずSTORKの子テーマを導入しよう。
子テーマの導入
子テーマを導入しないとSTORKのテーマそのものをいじってしまうと、後でアップデートした際などに変更が消えてしまうので注意！
ヘッダーをいじる
テキストエディタでヘッダーにタグを追記するよ。
■header.php
オフィシャルサイトにならって、僕は「STORK」のテーマファイル「jstork」から子テーマ「jstork_custom」としている。
内のbody開始タグ直下に下記のようにタグマネージャーのタグを記述。
<body <?php body_class(); ?>>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=XXX-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E(function(w%2Cd%2Cs%2Cl%2Ci)%7Bw%5Bl%5D%3Dw%5Bl%5D%7C%7C%5B%5D%3Bw%5Bl%5D.push(%7B'gtm.start'%3A%0Anew%20Date().getTime()%2Cevent%3A'gtm.js'%7D)%3Bvar%20f%3Dd.getElementsByTagName(s)%5B0%5D%2C%0Aj%3Dd.createElement(s)%2Cdl%3Dl!%3D'dataLayer'%3F'%26l%3D'%2Bl%3A''%3Bj.async%3Dtrue%3Bj.src%3D%0A'%2F%2Fwww.googletagmanager.com%2Fgtm.js%3Fid%3D'%2Bi%2Bdl%3Bf.parentNode.insertBefore(j%2Cf)%3B%0A%7D)(window%2Cdocument%2C'script'%2C'dataLayer'%2C'XXX-XXXXXX')%3B%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<!-- End Google Tag Manager -->
<div id="container" class="<?php echo esc_html(get_option('post_options_ttl'));?> <?php echo esc_html(get_option('side_options_sidebarlayout'));?> <?php echo esc_html(get_option('post_options_date'));?>">
<?php if(!is_singular( 'post_lp' ) ): ?>
<!-- Google Tag Manager -->から<!-- End Google Tag Manager -->までの間のタグっすね。
Google Tag Managerの管理画面から、自分のタグをコピペしてください。
タグマネージャーのタグを外部ファイルにしてこんな風にしてもOK。
※incってディレクトリを作って、includeするファイルをまとめてます。
<!-- Google Tag Manager --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=XXX-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E(function(w%2Cd%2Cs%2Cl%2Ci)%7Bw%5Bl%5D%3Dw%5Bl%5D%7C%7C%5B%5D%3Bw%5Bl%5D.push(%7B'gtm.start'%3A%0Anew%20Date().getTime()%2Cevent%3A'gtm.js'%7D)%3Bvar%20f%3Dd.getElementsByTagName(s)%5B0%5D%2C%0Aj%3Dd.createElement(s)%2Cdl%3Dl!%3D'dataLayer'%3F'%26l%3D'%2Bl%3A''%3Bj.async%3Dtrue%3Bj.src%3D%0A'%2F%2Fwww.googletagmanager.com%2Fgtm.js%3Fid%3D'%2Bi%2Bdl%3Bf.parentNode.insertBefore(j%2Cf)%3B%0A%7D)(window%2Cdocument%2C'script'%2C'dataLayer'%2C'XXX-XXXXXX')%3B%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <!-- End Google Tag Manager -->
そんで、header.phpは、
<body <?php body_class(); ?>>
<?php include_once("inc/google_tag_manager.php"); ?>
<div id="container" class="<?php echo esc_html(get_option('post_options_ttl'));?> <?php echo esc_html(get_option('side_options_sidebarlayout'));?> <?php echo esc_html(get_option('post_options_date'));?>">
<?php if(!is_singular( 'post_lp' ) ): ?>
としている。
これだとheader.phpがすっきりするし、好きな書き方でどうぞ！
アクセス解析タグの設置はタグマネージャー側で
Googleタグマネージャーで、Gooleアクセス解析（ユニバーサルアナリティクス）が設定できるんで、そっちでやろう。
Googleタグマネージャー
STORK（WordPress）の管理画面
タグマネージャーの管理画面でアクセス解析の設定ができたら、STORK管理画面にあるアクセス解析欄のタグ入力は空にしておいて問題ないよー！
STORKをカスタマイズしまくりたい
STORKはめっちゃ便利なんだけど、デザインが似通っているアルバトロスやハミングバードを使っているブログは既に多いし、これからSTORKを使ったブログもどんどん増えていくだろうし、とことんカスタマイズして差別化していきたい。
あと、半月くらい使っていて、この機能がこうだったらなーっていうのが幾つかあるので、その辺りもいじり倒したいところ。
STORKを使い倒す人になっていきたいっす。
良さげなカスタマイズは紹介していきますよ〜。
