頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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

[rakuten]001:9784798037370[/rakuten]

はじめに

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

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

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

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

リンクシェア アフィリエイト紹介プログラム

 

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

環境

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

使い方

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

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

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

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


--------

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

設定

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

01_WP Headmasterサイドメニュー

WP Headmasterサイドメニュー

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

  • Inline Scripts
  • Icons
  • Scripts & Styles
  • Meta Data

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

Inline Scriptsタブ

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

02_WP Headmaster設定画面

WP Headmaster設定画面

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

Google Analytics

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

 

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

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

03_Google Analytics設定

Google Analytics設定

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

WP Headmasterによる出力コード

2013/08/20追記

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

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

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

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

05_Google Analyticsの出力

Google Analyticsの出力

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

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

25_Google Analytics接続確認

Google Analytics接続確認

--------

JavaScript

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

04_JavaScript設定

JavaScript設定

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

06_JavaScriptの実行

JavaScriptの実行

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

07_JavaScriptの出力

JavaScriptの出力

Iconsタブ

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

23_Icons設定

Icons設定

Favicon

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

08_Favicon設定

Favicon設定

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

 

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

09_Favicon設定の表示

Favicon設定の表示

WP Headmasterによる出力コード

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

10_各ブラウザの表示確認

各ブラウザの表示確認

Apple Touch Icon

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

11_Apple Touch Icon設定

Apple Touch Icon設定

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

12_Apple Touch Icon設定の表示

Apple Touch Icon設定の表示

WP Headmasterによる出力コード

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

iOS(iPhone 4S)
13_iOSのタッチアイコン表示

iOSのタッチアイコン表示

Android(FJL21)
14_AndroidOSのタッチアイコン表示

AndroidOSのタッチアイコン表示

[rakuten]001:9784798031743[/rakuten]

Scripts & Stylesタブ

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

24_Scripts and Styles設定

Scripts and Styles設定

jQuery

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

JetPackによるjQuery読み込み例

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

15_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を読み込んでいます。

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

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

Responsive Polyfills

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

16_Responsive Polyfillsの設定

Responsive Polyfillsの設定

Respond.js

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

css3-mediaqueries.js

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

 

Web Fonts

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

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

17_GoogleFontsのコード取得

GoogleFontsのコード取得

GoogleFontコードの取得

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

CSSの指定

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

18_CSS設定

CSS設定

フォントの表示確認

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

19_GoogleFontsの表示確認

GoogleFontsの表示確認

Meta Dataタブ

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

20_Author Tag設定

Author Tag設定

Author Tag

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

21_meta指定

meta指定

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

22_Dynamic指定

Dynamic指定

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

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

プロモーション(btm)

Google or AdMax Promotion (it)

総括

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

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

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

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

Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。
Google Analytics™はGoogle Inc. の商標です。
WP Headmaster Copyright 2013 BAVINGTON, CREAREGROUP(GNU General Public License)

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - WordPress, プラグイン , , , , ,

Comment

  1. James Bavington より:

    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.

  関連記事