headタグ挿入にWP Headmaster_v0.1－wordpressプラグインを利用

2013/07/17 2014/11/22

wordpressプラグインのWP Headmasterは、
テーマのheader.phpを編集することなく<head>タグ内に、
GoogleAnalytics™コードやブックマークアイコン(Favicon)タグ、
JavaScriptなどを挿入するプラグインです。

[rakuten]001:9784798037370[/rakuten]

はじめに

皆さんはどのようなプラグインをいつも利用していますか？
こうして１つのテーマに絞って、プラグインを使って見ていると、
本来の目的を超えて新しい発見があったりします。

今回のテーマはプラグインで<head>タグに対して任意のコードを挿入することですが、
<head>タグに対して挿入したいコードといってもある程度は限られてきます。

自分ですべて記述したい人もいれば、
ある程度は事前に設定項目が決められている方が、
分からない人には使いやすかったりもします。

いろいろなプラグインを試すことで、
自分が知らなかったことに出逢うことができるのも面白いところです。
とはいえ、使い方の分からないまま放置しては知らないままになってしまうんですがｗ

さてそれでは、本題のWP Headmasterの設定から使い方までご紹介していきます。

環境

wordpress:3.5.1
利用テーマ:Twenty Twelve
WP Headmaster:0.1

使い方

プラグインインストール・有効化

プラグインはインストールして有効化することですぐに利用できます。

このWP Headmasterというプラグインですが、
バージョンが0.1で最終アップデート(2013-6-13)ですから、
まだ出来たてホヤホヤな感じはします。

2013/08/20追記
その後、バージョンが0.2となり機能が追加されています。
追加された機能については以下でご紹介しています。

headタグ挿入にWP Headmaster_v0.2－wordpressプラグインを利用

－－－－－－－－

処理的には難しい処理はしていないでしょうし、
実際に動作確認したうえでご紹介していきます。

設定

インストールから有効化を行うと、
サイドバーの設定メニューに[WP Headmaster]が表示されます。

WP Headmasterサイドメニュー

設定画面を開くと４タブ構成のメニューが表示されます。

Inline Scripts
Icons
Scripts & Styles
Meta Data

各タブの構成を順を追ってご説明します。

Inline Scriptsタブ

このタブではGoogle Analyticsのトラッキングコードの設定と、
JavaScriptのコード挿入が行えます。

WP Headmaster設定画面

設定を行ったら、[Save all Headmaster Setting]をクリックして保存をします。

Google Analytics

この投稿の内容はバージョンアップにて更新されています。
新しい投稿も併せてお読みください。

headタグ挿入にWP Headmaster_v0.2－wordpressプラグインを利用

GoogleAnalyticsの設定ではアクセス解析用のトラッキングコードを、
トラッキングIDを指定することによって~~APIによる~~トラッキング設定を行っています。

トラッキングIDとは「UA-XXXXXXXX-N」のような形式の、
Google Analyticsで取得したコードです。

Google Analytics設定

実際に設定を行って出力を行った結果、~~Google Analyticsで表示される、~~
~~トラッキング用JavaScriptコードとは異なった処理になっていますが、~~
~~トラッキングコードが指定されて出力されています。~~
“標準アナリティクス”のトラッキングコードが出力されます。

WP Headmasterによる出力コード

<script type="text/javascript">
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', "UA-XXXXXXXX-1"]);
	  _gaq.push(['_trackPageview']);

	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
</script>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', "UA-XXXXXXXX-1"]);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

2013/08/20追記

Google Analyticsにて指定されるトラッキングコード(標準アナリティクス)

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-41XXXX24-3']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-41XXXX24-3']);

_gaq.push(['_trackPageview']);

(function() {

var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

※Universal Analytics(beta)を既にお使いの場合には、
推奨コードが異なっていますので、WP Headmaster_v0.2で対応が可能です。
－－－－－－－－

Google Analyticsにて指定されるトラッキングコード(Universal Analytics)

<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','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-1', 'algorhythnn.com');
  ga('send', 'pageview');
</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','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-1', 'algorhythnn.com');

ga('send', 'pageview');

</script>

出力が行われる位置は適切に<head>タグ内に出力されています。

Google Analyticsの出力

Google Analytics自体はリアルタイムでデータの確認ができませんので、
実際のトラッキング結果は追ってご報告します。

2013/07/19：追記
Google Analyticsとの接続が確認できましたので、
上記pluginでも正しくトラッキングされていると思います。

Google Analytics接続確認

－－－－－－－－

JavaScript

JavaScriptの設定では、
<script type=”text/javascript”>と</script>が固定で設定されていますので、
直接実行部ソースを記述する形で指定が可能です。

JavaScript設定

実際に設定し実行を行うと正しく実行されます。

JavaScriptの実行

出力が行われる位置は適切に<head>タグ内に出力されています。

JavaScriptの出力

Iconsタブ

Icon設定ではブラウザ用のブックマークアイコンの設定と、
スマートフォン用のタッチアイコン(ブックマークをホーム画面に表示する)のアイコン指定が行えます。

Icons設定

Favicon

faviconの画像指定にはicoファイルを指定して行います。

Favicon設定

備考に記述の通り32pxサイズの画像を含むicoファイルをアップロードし設定します。
尚、Convertico.com にてアイコン化できるとの記述がありますが、
icoファイルのアイコン化については、過去記事を参考にしていただけると幸いです。

１つのアートボードを使ったIllustratorによるFavicon画像の作成

複数アートボードを使ったIllustratorによるFavicon画像の作成

画像ファイル(PNG、GIF、JPEG)ファイルからのアイコン(ico)ファイル化

実際にアイコンを指定すると、アップロードしたアイコン画像が表示されます。

Favicon設定の表示

WP Headmasterによる出力コード

<link rel="apple-touch-icon" href="http://algorhythnn.jp/TEST/wp/wp-content/uploads/2013/07/logo_p01-72px_orange.png">

1	<link rel="apple-touch-icon" href="http://algorhythnn.jp/TEST/wp/wp-content/uploads/2013/07/logo_p01-72px_orange.png">

各ブラウザからの表示は以下のようになります。
各ブラウザで適切に表示されるようになります。

各ブラウザの表示確認

Apple Touch Icon

Apple Touch Icon設定ではスマートフォン用の
タッチアイコン(ブックマークをホーム画面に表示する)アイコン指定を行います。

Apple Touch Icon設定

実際にアイコンを指定すると、アップロードしたアイコン画像が表示されます。
※画面の備考には144px画像をアップロードするとの記述がありますが、
今回は72pxの画像を利用しています。

Apple Touch Icon設定の表示

WP Headmasterによる出力コード

<link rel="apple-touch-icon" href="http://algorhythnn.jp/TEST/wp/wp-content/uploads/2013/07/logo_p01-72px_orange.png">

1	<link rel="apple-touch-icon" href="http://algorhythnn.jp/TEST/wp/wp-content/uploads/2013/07/logo_p01-72px_orange.png">

スマートフォンからの表示は以下のようになります。

iOS（iPhone 4S）

iOSのタッチアイコン表示

Android（FJL21）

AndroidOSのタッチアイコン表示

[rakuten]001:9784798031743[/rakuten]

Scripts & Stylesタブ

外部スクリプトの読み込みとWebフォントに関する設定が行えます。

Scripts and Styles設定

jQuery

jQueryの設定ではjQueryのライブラリ読み込みの設定を行います。
JetPackなどを有効にしている場合には、jQueryの読み込みが行われ、
既に設定されていると思いますが、個別に指定する場合にはここで設定します。

JetPackによるjQuery読み込み例

<script type="text/javascript" src="http://algorhythnn.jp/TEST/wp/wp-content/plugins/jetpack/_inc/jquery.spin.js?ver=3.5.2"></script>

1	<script type="text/javascript" src="http://algorhythnn.jp/TEST/wp/wp-content/plugins/jetpack/_inc/jquery.spin.js?ver=3.5.2"></script>

ここで設定を行うことによって、サイト上でjQueryを使用できるようになります。

jQueryの設定

Have no influence
- WP HeadmasterはjQueryに対して何も行わない設定
Load WordPress’ jQuery
- wordpress上のjQueryを読み込みます
Use Google’s API to run jQuery version
- バージョンを指定してGoogleAPIからjQuery指定バージョンを読み込みます。

Have no influence設定時

jQueryに関する出力は行われません。

Load WordPress’ jQuery設定時

wordpress上のjQueryを読み込んでいます。

<script type="text/javascript" src="http://algorhythnn.jp/TEST/wp/wp-includes/js/jquery/jquery.js?ver=1.8.3"></script>

1	<script type="text/javascript" src="http://algorhythnn.jp/TEST/wp/wp-includes/js/jquery/jquery.js?ver=1.8.3"></script>

Use Google’s API to run jQuery version設定時

GoogleAPIからjQuery指定バージョンのjQueryを読み込んでいます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js?ver=2.0.0"></script>

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js?ver=2.0.0"></script>

Responsive Polyfills

私はあまり詳しくありませんが、Responsive Polyfillsの考え方に基づいた、
リッチな表現をJavaScriptにて再現を行う思想で擬似CSS3表現を行うために、
利用されるスクリプトライブラリの設定かと思います。
必要だと思われる方は、お使いください。

Responsive Polyfillsの設定

Respond.js

Respond.js（Respond.js）にチェックを付与すると、
以下のようにライブラリの読み込みが出力されます。

<script type="text/javascript" src="http://algorhythnn.jp/TEST/wp/wp-content/plugins/wp-headmaster/js/respond.min.js?ver=1.1.0"></script>

1	<script type="text/javascript" src="http://algorhythnn.jp/TEST/wp/wp-content/plugins/wp-headmaster/js/respond.min.js?ver=1.1.0"></script>

css3-mediaqueries.js

css3-mediaqueries.js(Respond.js)にチェックを付与すると、
以下のようにライブラリの読み込みが出力されます。

<script type="text/javascript" src="http://algorhythnn.jp/TEST/wp/wp-content/plugins/wp-headmaster/js/css3-mediaqueries.js"></script>

1	<script type="text/javascript" src="http://algorhythnn.jp/TEST/wp/wp-content/plugins/wp-headmaster/js/css3-mediaqueries.js"></script>

Web Fonts

Web Fonts設定では、GoogleFonts（Google Fonts）のフォント名を指定し読み込みを行います。
フォント名を指定すると以下のように出力されます。

<link rel="stylesheet" id="googlefont-css" href="http://fonts.googleapis.com/css?family=Knewave" type="text/css" media="all">

1	<link rel="stylesheet" id="googlefont-css" href="http://fonts.googleapis.com/css?family=Knewave" type="text/css" media="all">

ただし、上記の読み込みとは別に、このフォントを利用するようにCSSを設定する必要があります。
CSSの指定方法に関しては、GoogleWebFontのサイトから指定されるコードを利用します。

GoogleFontsのコード取得

GoogleFontコードの取得

GoogleFontsからコードを取得し、WP Headmasterに設定したのちに、
装飾を行いたいタグに対してCSSにてフォント指定を行います。

CSSの指定

例としてJetPackが有効な場合、追加のCSSを編集することができますので、
以下のように記述します。

p {
	font-family: 'Knewave', cursive;
}

p {

font-family: 'Knewave', cursive;

}

CSS設定

フォントの表示確認

指定したフォントで表示することができます。

GoogleFontsの表示確認

Meta Dataタブ

Meta Dataでは著者情報のmetaタグの出力を行う設定です。

Author Tag設定

Author Tag

Author Tagにて直接著者情報の出力方法を選択できます。
<meta name=”author” content=”[ ]” /> に指定した際には、
一律で指定した著者情報が出力されます。

meta指定

Dynamic Meta Authorにチェックを付与すると、
wordpressで投稿したユーザー名を元に著者情報が出力されます。

Dynamic指定

[amazonjs asin=”4798034711″ locale=”JP” tmpl=”Small” title=”オープンソースブログ&ウェブサイト構築ソフト WordPressガイドブック Ver.3.X対応”]

やっぱりこの本があると助かりますね。

総括

とりあえず簡単に最低限の設定が行えるプラグインではないかと思います。
ただ、JavaScriptが実行部の記述であることから、
このエリアがフリーな入力に対応していたら・・・と思いました。

フリーなエリアにしてくれれば、任意のJsファイルもCSSも読み込めるように、
自在に記述ができてより便利だったかなと感じています。

ただ、headタグ内の情報がさっぱり分からないけど、
お任せで出力はして欲しいといった方には便利なのかなと思います。
ただ、こうしたスキルの方がjQueryやRespond.jsなどを、
読み込んだりしてカスタマイズするかな・・・と思うところでもあります。

どうでしたでしょうか、貴方の使いたいプラグインだったでしょうか。
何かの検討材料になれば幸いです。

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。
Google Analytics™はGoogle Inc. の商標です。
WP Headmaster Copyright 2013 BAVINGTON, CREAREGROUP(GNU General Public License)

- WordPress, プラグイン head-tag, insert, plugin, WordPress, WP Headmaster, プラグイン

Comment

James Bavington より:

2013/08/20 1:47 AM

Arugorizun, thank you for reviewing my plugin. I notice you compare how the GA tracking code displays differently to how Google Recommend. In the recently published 0.2 version of my plugin, you can now choose the new Universal Tracking code over the Classic Tracking code. I’m struggling to read the translation of your review in English, but I’d love to hear any feedback or recommendations as to how I can make WP Headmaster better.

James.
- アルゴリズンより:
  
  2013/08/21 6:47 AM
  
  Hello James. How do you do.
  Thank you for your comment, and visit, view and read my blog,
  Therewith thank you for making a good plug-in.
  I understand about the plug-in has been updated.
  
  I tried using your plugin 0.2 version, and I have a new post.
  Please try to read if there is time. But is Japanese. sorry…
  http://algorhythnn.jp/blg/2013/08/21/wp-headmaster02-wp_plugin/
  
  algorhythnn