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

Google or AdMax Promotion(page)

Head領域のカスタマイズを簡単にしてくれる-wordpressプラグイン

wordpressを利用したサイトでheadタグの領域に対して、
テーマファイルのソースを変更することなく、任意のタグを挿入する方法をまとめてご紹介します。
皆さんはどのようにカスタマイズされていますか。

はじめに

ブログを運営していて外部のプログラムや、
アクセス解析などを組み込もうと思うと、

以下の meta タグをコピーして、サイトのホームページにある <head> セクション内の、最初の <body> セクションの前に貼り付けます。
(google webmasters toolsより)

のように、インストール方法を指示されることがあります。
google webmasters toolsのサイト所有者確認方法などが、
よく直面するケースではないでしょうか。

こうしたheadタグ内に対して、任意のコードを組み込む際に、
wordpressではheader.php自体の編集を行ってしまえば済む話です。
※他の認証方法(.htmlを配置など)を採用するというのは別として。

しかしこうしたソースの直接編集では、
テーマのアップデートを適用したり、テーマを変更した際には、
せっかくのカスタマイズが上書きされてしまいます。

テーマを最初から自分で作ったのではない限りは、
極力テーマファイルには手を加えたくないものです。

そんなソース変更を行うことなく、
HTMLの文書構造を守りつつも<head>領域に、
任意のソースを挿入することができるプラグインをご紹介します。

尚、本投稿はwordpressプラグイン人柱の1コンテンツです。

 

プラグイン例

head領域に対して何かしらのカスタマイズを行うプラグインは様々ありますが、
私が今回ご紹介するのは以下のプラグインです。

この他にもGoogle Analyticsに特化したプラグインなども多く存在していますので、
そうしたものを利用されるのもいいと思います。

ですが、Google AnalyticsもGoogle WebMastersToolsもファビコンもogpタグも・・・
なんでも自分で貼り付けて利用したいとなった時には、
より自由度の高いプラグインの方が後々の
メンテナンスが楽なのではないかと私は考えています。

2013/10/15追記
新たに<head>挿入に対応したプラグインがありましたので追記いたしました。
Post6WidgetAreaです。

 

2014/07/30追記
新たにご紹介したい<head>タグ挿入プラグインがありましたので追記いたします。
Per page add to head(Per page head) です。

 

どれを使うかという点では何がしたいのかという目的によると思います。
ただプラグインという特性上、必要のない機能は実装しないというスタンスも重要だと思います。

それでは順を追ってご紹介していきます。

Add Text To Head(Add Code to Head)

このプラグインの詳細は以下でご紹介しています。

 

このプラグインは<head>部に挿入するコードのみが指定できるプラグインです。
正直なところ、私はこのようなシンプルなプラグインを探していました。

head領域に対して、そのまま記述したHTMLコードが、
<head>~</head>に挿入されるというシンプルなものです。

こうしたプラグインを探していると、
様々な機能が付加されて、使わない機能がいっぱい載った状態で、
利用しがちになりますが、これはそうした無駄がないと言えます。

設定画面もとてもシンプルで迷う余地なく設定ができると思います。

05_テストソース

設定画面

簡単に機能を図式にすると以下のようになります。

01_Add Text To Head(Add Code to Head)

Add Text To Head(Add Code to Head)

とてもシンプルです。
こうしたプラグインを使う場合には、その他のogp出力用のプラグインや、
投稿の前後に指定のタグを出力するプラグインを併用し、
自分に必要なものを個々に導入することにはなります。

しかし影響が個別に分かれている方が、
何か障害や体裁の乱れが発生した際にも、
原因の特定が容易になりますし、代替手段を探すことも簡単になると思います。

 

Insert Headers and Footers

このプラグインの詳細は以下でご紹介しています。

 

このプラグインは<head>部に挿入するコードと、
<body>内のページの最下部に任意のソースを挿入するコードが指定できます。

設定画面もシンプルで、直感的に設定をすることができると思います。

03_設定例

設定例

入力したHTMLやJavaScriptなどのソースがそのまま出力されますので、
無駄がなくシンプルなプラグインだと思います。
簡単に機能を図式にすると以下のようになります。

02_Insert Headers and Footers

Insert Headers and Footers

他のプラグインでよくあるような(“:ダブルクォテーション)や(‘シングルクォテーション)が、
エスケープされて正しく動作しないといった症状もなく、
特に迷うことなく使うことができます。

 

Per page add to head(Per page head)

このプラグインの詳細は以下でご紹介しています。

 

新しく追記してご紹介したい<head>挿入プラグインに出会いました。

このPer page add to head(Per page head)プラグインは他のプラグインとは少し異なって、
<head>タグへの挿入を、個別投稿、個別固定ページの単位で設定できます。

もちろん、すべてのページに対して共通で出力する設定も行えます。

設定画面は共通の設定は以下のように行います。

08_すべてのページ共通タグ(Insert HTML on every page)

すべてのページ共通タグ(Insert HTML on every page)

 

個別投稿や固定ページでは以下のようなウィジェットが追加され、
投稿ごとに出力するタグを指定することができます。(以下は個別投稿の例)

09_個別投稿タグ(Add to head POST)

個別投稿タグ(Add to head POST)

 

設定する項目はこれだけで、入力したものがそのまま出力されるシンプルさで、
HTMLタグ、JavaScript、CSSなどを自由に記述できます。
※PHPはHTMLでエスケープされ実行されません。

簡単に処理を図示すると以下のようになります。

05_Per page add to head

Per page add to head

設定がとてもシンプルで投稿や固定ページごとに出力を変えられる点は、
非常に便利ではないでしょうか。

但し、投稿の数だけ設定が行えることはメンテナンス性は低下します。
共通化可能な出力を投稿ごとに設定する方法はお勧めしません。

設定のしすぎには注意しましょう。

 

 

WP Headmaster

このプラグインの詳細は以下でご紹介しています。

 

このプラグインはHTMLに対して、直接記載したコードを挿入するという形のプラグインではなく、
あらかじめ設定が可能な項目が決められているタイプのプラグインです。
すこし設定が多く迷う部分もありますが、
用途がはっきりしていてマッチするならば使いやすいかもしれません。

設定画面については複数タブに分かれていますので、
投稿の詳細を見て頂けたらと思いますが、以下のような設定画面です。

02_WP Headmaster設定画面

WP Headmaster設定画面

 

簡単に機能を図式にすると以下のようになります。

03_WP Headmaster

WP Headmaster

このプラグインでは、<head>~</head>間に出力を行いたい内容の、
多くをカバーしてくれていると思います。

ただし、wordpressサイトで個別のJavaScriptの外部ファイルを読み込ませるといった、
利用方法には向いていないと思います。

正直なところGoogleAnalyticsのトラッキングIDなどは、
貼り付け用のJavaScriptがGoogleから提供されますし、
favicon用のタグに関しても自ら記載して挿入しても同じかなと思ったりします。

個人的にはより自由度のある挿入が出来た方が便利かなと思うところです。

 

Header and Footer

このプラグインの詳細は以下でご紹介しています。

 

<head>部に対する出力を、HOMEのページと各投稿のページで異なるものを表示させたり、
<body>内のページの最下部に任意のソースを挿入するコードが指定できます。

また、各投稿や固定ページの記事の前後に対してコードを挿入する機能もあります。
このプラグインのとても便利な点として、PHPの実行が可能という大きなメリットがあります。

設定画面については複数タブに分かれていますので、
投稿の詳細を見て頂けたらと思いますが、以下のような設定画面です。

02_Page head and footerの設定

Page head and footerの設定

簡単に機能を図式にすると以下のようになります。

04_Header and Footer

Header and Footer

この手の挿入プラグインはPHPの実行が出来ないものが結構あり、
<?php ・・・  ?>で記述すれば、投稿の前後やページ最下部で
PHPによってHTMLを組み立てて出力させるといった処理が可能になります。

これはJavaScriptでも構わないし実現できると言ってしまえばその通りです。
しかし、JavaScriptでもできるし、PHPでもできるという幅が広がるという意味では便利だと思います。

 

Post6WidgetArea

このプラグインの詳細は以下でご紹介しています。

 

このプラグインは斬新な発想のプラグインでウィジェットを利用します。
ウィジェットを利用して<head>部に挿入する機能と投稿の前後に挿入する機能を実現しています。

固定ページ記事本文の前後に対してコードを挿入する機能はありませんが、
ホーム(TOP)ページ、固定ページ、投稿、各アーカイブ(カテゴリ・タグ・月別)の
ページの開始と終了の位置に対して、定型文を挿入することができます。

このプラグインのとても便利な点として、ウィジェットとしてインストールされているものならば、
挿入したいエリアに対して、設定することができる点です。

[Executable PHP widget]などをインストールすることで、
投稿の前後でPHPを利用したプログラムを挿入することも可能です。

17_設定画面

設定画面

設定の方法は少し特殊でheadタグに挿入するウィジェットエリアに対して、
テキストウィジェットなどを追加し、ウィジェット内に挿入したいタグを設定します。

01_Post6 head タグ要素内の設定

Post6 head タグ要素内の設定

簡単に機能を図式にすると以下のようになります。

ホームページ・アーカイブの場合

10_ホーム・アーカイブ概念

ホーム・アーカイブ概念

※ホームページ、アーカイブ以外の投稿や固定ページにおいて、
挿入処理の違いはありますがHead領域に対する挿入は共通です。

 


いかがでしたでしょうか。
単にhead内にタグを挿入するという用途に絞ってプラグインを様々試してみました。

他のプラグインでもAnalyticsに特化したものや、
ogpタグ出力、favicon表示とそれぞれの特色があるものがあると思います。
そうしたものの中にも、自由度が高いものがある場合もあると思います。

今後は、そうした自由度が高いものが見つかり次第、
本投稿に追記していこうと思っています。

何かのお役に立てましたら幸いです。

 


プロモーション(btm)

Google or AdMax Promotion (it)

公開日:
最終更新日:2014/12/04

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


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

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

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

ページ
すべて展開 | すべて省略

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

Rakuten Promotion