MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

HeaderとFooterにコードの出力が出来るWordPressプラグインが便利!

以前、管理画面の設定にアナリティクスの解析コードやサーチコンソールの所有権のメタタグを管理するメニューの設け方を紹介しました。

AnalyticsやSearch Console等のタグ管理をWordPressに追加する方法
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');?><?phpif ( $search_console ) : ?> <!--Search Console--> <meta name="google-site-verification" content="<?php echo get_option('tag_settings02'); ?>" /><?php endif; ?> <?phpif ( $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; ?><?phpif ( $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カードなども管理が楽です。 長くなるので、その辺の項目の追加方法は次回にします。ではまた(`・ω・´)ゞ
でもこの方法だとfunctions.phpを直接編集になるので、あまりコード編集になれてない方だと少し抵抗があります。(ここだけの話。実は私PHP苦手なんです(゚Д゚;)

そういうことで、もう少し簡単にタグの管理ができるプラグインがあればと探しました。WordPressはあるもんです。(^^♪

プラグインのインストール

まず、お決まりのプラグインのインストールですん。(‘ω’)

プラグインは「Insert Headers and Footers」で検索してインストールします。

 

それでプラグインを有効化すると、なにやら見知らぬ項目が ひょっこりひょうたん島ですね。

使い方

特にひねりもなんも無しです。見たまんまHeaderとFooterに出力できます。

上側がHeadrで下側がFooterですね。

これで面倒なGoogle系統のタグやスクリプト、アナリティクスとかサーチコンソールの所有権をぺったんこし放題!!

ありがとう!Insert Headers and Footers(・∀・ )

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

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


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください