MENU
HOME
TOP

AnalyticsやSearch Console等のタグ管理をWordPressに追加する方法

どうも!相変わらず管理とか整理整頓が苦手な私です(‘ω’)

AnalyticsやSearch Consoleのタグをheader.phpに直接ぺったんこしてると、タグが増えたり新しくなった時に、管理がやりにくい気がしませんか?(多分私だけ

ということで、タグの管理設定ページを管理メニューの設定に追加してみました。という紹介です。

設定ページの追加

まずは管理画面に設定ページを追加します。functions.phpに追加します。

//設定にタグ管理サブメニュー追加
add_action('admin_menu', 'tag_menu');
function tag_menu() {
  add_options_page('タグ管理', 'タグ管理', 8, 'tag_menu', 'tag_options_page');
  add_action( 'admin_init', 'register_tag_settings' );
}
function tag_options_page() {
  get_template_part('tag_menu_temp');
}
function register_tag_settings() {
  register_setting( 'tag_settings_group', 'tag_settings1' );
  register_setting( 'tag_settings_group', 'tag_settings1_1' );
  register_setting( 'tag_settings_group', 'tag_settings01' );
  register_setting( 'tag_settings_group', 'tag_settings02' );
  register_setting( 'tag_settings_group', 'tag_settings03' );
}

テンプレート追加

ちょっと多くなるので、テンプレートに分けます。tag_menu_temp.phpという名前で保存して下さい。

<div class="postbox">
<h2 class="hndle">アクセス解析などタグの管理</h2>
<div class="inside">
<p>Googleアナリティクスやサーチコンソールの設定ができます。</p>
<form method="post" action="options.php">
<?php 
settings_fields( 'tag_settings_group' );
do_settings_sections( 'tag_settings_group' );
?>
<table class="form-table">
  <tbody>
      <tr>
      <th class="tag_settings" scope="row">
        <label for="tag_settings1">Google tagmanagerのIDを入力してください。</label>
      </th>
      <td>
        <input name="tag_settings1" type="text" id="" value="<?php echo get_option('tag_settings1'); ?>" class="regular-text">
      </td>
    </tr>
    <tr>
      <th class="tag_settings" scope="row">
        <label for="tag_settings01">Google AnalyticsのトラッキングIDを入力してください。</label>
      </th>
      <td>
        <input name="tag_settings01" type="text" id="" value="<?php echo get_option('tag_settings01'); ?>" class="regular-text">
      </td>
    </tr>
    <tr>
      <th class="tag_settings" scope="row">
        <label for="tag_settings02">Google Search Consoleのサイト認証IDを入力してください。</label>
      </th>
      <td>
        <input name="tag_settings02" type="text" id="" value="<?php echo get_option('tag_settings02'); ?>" class="regular-text">
      </td>
    </tr>
    <th class="tag_settings" scope="row">
      <label for="tag_settings03">その他のアクセス解析など</label>
    </th>
    <td>
      <textarea  class="medium-text code" name="tag_settings03" rows="10" cols="50" value="<?php echo get_option('tag_settings03'); ?>"></textarea>
    </td>
  </tr>
</tbody>
</table>
<?php submit_button('設定を保存します'); ?>
</form>
</div>
</div>

出力コードの記述

データベースに保存された物を呼び出します。wp_headで出力してもいいんですが、コードが複雑になるので、今回はheader.phpに書いちゃいます。

ようするに先ほどのオプションを入れて、head内に追記するということ。

以下をhead内に追記

<?php
    $get_tag_manager = get_option('tag_settings1');    
    $get_analytics = get_option('tag_settings01');
    $search_console = get_option('tag_settings02');
?>
    <?php
    if ( $search_console ) : ?>
    <!--Search Console-->
    <meta name="google-site-verification" content="<?php echo get_option('tag_settings02'); ?>" />
    <?php endif; ?>    
    <?php
    if ( $get_analytics ) : ?>
    <!-- Google Analytics -->
    <script>
    window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
    ga('create', '<?php echo get_option('tag_settings01'); ?>', 'auto');
    ga('send', 'pageview');
    </script>
    <script async src='https://www.google-analytics.com/analytics.js'></script>
    <!-- End Google Analytics -->    
    <?php endif; ?>
    <?php
    if ( $get_tag_manager ) : ?>    
    <!-- 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','<?php echo get_option('tag_settings1'); ?>');</script>
    <!-- End Google Tag Manager -->
    <?php endif; ?>    

で、noscriptの方はよくわからんけど、bodyのはじめに入れます。以下をbodyタグの直後に追記

<?php
    if ( $get_tag_manager ) : ?>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=<?php echo get_option('tag_settings1'); ?>"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <?php endif; ?

動作の確認

これで、管理メニューの設定からタグ管理を選択。

すると以下のようなページがあるはずです。ここでIDなものを入力してみます。

先ほど入力されたもの、オプションの保存が確認できます。

そんでもって、出力も大丈夫ですん。

あ、あと「その他のアクセス解析など」はおまけ。呼び出しは これです。

<?php echo get_option('tag_settings03'); ?>

また、項目も増やしてやれば、OGPやTwitterカードなども管理が楽です。

長くなるので、その辺の項目の追加方法は次回にします。ではまた(`・ω・´)ゞ

スポンサーリンク

Profile

閲覧どうもありがとうございます。 ネット系で気になったことや、やってみたことをゆる~く配信してます。 まだまだ初心者なので、、お見苦しいとこがありますが、どうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。