こんにちは。とみっちです。
最近WordPressのテンプレを巷で話題のSTORK（ストーク）にしたんですが、あまりの完成度の高さに驚くとともに、今までWordPressのカスタマイズに費やした時間はなんだったんだろうと思う日々を過ごしています。
今まで何百時間とWordPressと格闘してカスタムしてきたんですが、最初からこういう素晴らしいテンプレでブログを書き始めていれば、こんなに苦労はしなかったなーなんて思っています（泣）
ちなみにSTORKは今年（2016年）7月に販売が開始されたばかりです。これからブログ投稿を頑張りたい人は、ぜひ最初からSTORKを購入することをオススメします。
さて、今回はGoogle Tag Manager（タグマネージャー）をSTORKテーマで使用する方法を書いてみます。
簡単なのでチャレンジしてみてくださいね。
目次
Google Tag Managerとは
Googleタグマネージャーとは、タグ運用の負荷を軽減するさまざまな優れたツールを提供するサービスです。
以前記事を書いたことがあるので、こちらもあわせて読んでください。
STORKにタグマネージャーのタグを追記する
HTMLやWordPressのソースをテキストエディタで開いて、Javascriptなどのタグを入力する必要がなくなるGoogleタグマネージャーなんですが、さすがにタグマネージャー自体のタグは追記する必要があります。
既にSTORKを購入していて、子テーマを導入している人もいるかと思うのですが、もしまだの人は、まずSTORKの子テーマを導入しましょう。
子テーマの導入
子テーマを導入しないとSTORKのテーマそのものをいじってしまうと、後でアップデートした際などに変更が消えてしまうので注意が必要です！
ヘッダーをいじる
テキストエディタでヘッダーにタグを追記します。
header.php
オフィシャルサイトにならって、僕は「STORK」のテーマファイル「jstork」から子テーマ「jstork_custom」を作成しました。
以下のファイルをテキストエディタか、WordPressの管理画面で開きます。
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固定フッタープラグインをリリース
当ブログでも使用している、人気WordPressテーマ「STORK（ストーク）」に関し、スマホで閲覧した際に以下のような固定フッターメニューを表示できるプラグインをリリースしました。
年々大型化するスマホの画面では、もはやページ上部のハンバーガーメニューはイマイチ使いづらくなってきたと言えます。
ページ下部、スマホホームボタンのそばに固定フッターメニューが表示されるとかなり使いやすくなります。
STORKテーマ限定の機能とはなりますが、ユーザービリティの向上やSNSでの拡散、他の記事への誘導などに、このプラグインをぜひ使ってみてください。
