Head領域のカスタマイズを簡単にしてくれる－wordpressプラグイン
wordpressを利用したサイトでheadタグの領域に対して、
テーマファイルのソースを変更することなく、任意のタグを挿入する方法をまとめてご紹介します。
皆さんはどのようにカスタマイズされていますか。
はじめに
ブログを運営していて外部のプログラムや、
アクセス解析などを組み込もうと思うと、
以下の meta タグをコピーして、サイトのホームページにある <head> セクション内の、最初の <body> セクションの前に貼り付けます。
(google webmasters toolsより)
のように、インストール方法を指示されることがあります。
google webmasters toolsのサイト所有者確認方法などが、
よく直面するケースではないでしょうか。
こうしたheadタグ内に対して、任意のコードを組み込む際に、
wordpressではheader.php自体の編集を行ってしまえば済む話です。
※他の認証方法(.htmlを配置など)を採用するというのは別として。
しかしこうしたソースの直接編集では、
テーマのアップデートを適用したり、テーマを変更した際には、
せっかくのカスタマイズが上書きされてしまいます。
テーマを最初から自分で作ったのではない限りは、
極力テーマファイルには手を加えたくないものです。
そんなソース変更を行うことなく、
HTMLの文書構造を守りつつも<head>領域に、
任意のソースを挿入することができるプラグインをご紹介します。
尚、本投稿はwordpressプラグイン人柱の１コンテンツです。
プラグイン例
head領域に対して何かしらのカスタマイズを行うプラグインは様々ありますが、
私が今回ご紹介するのは以下のプラグインです。
この他にもGoogle Analyticsに特化したプラグインなども多く存在していますので、
そうしたものを利用されるのもいいと思います。
ですが、Google AnalyticsもGoogle WebMastersToolsもファビコンもogpタグも・・・
なんでも自分で貼り付けて利用したいとなった時には、
より自由度の高いプラグインの方が後々の
メンテナンスが楽なのではないかと私は考えています。
- Add Text To Head(Add Code to Head)
- Insert Headers and Footers
- Per page add to head（Per page head） （2014/07/30追加） お勧め！
- WP Headmaster
- Header and Footer
- Post6WidgetArea（2013/10/15追加） お勧め！
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>に挿入されるというシンプルなものです。
こうしたプラグインを探していると、
様々な機能が付加されて、使わない機能がいっぱい載った状態で、
利用しがちになりますが、これはそうした無駄がないと言えます。
設定画面もとてもシンプルで迷う余地なく設定ができると思います。
設定画面
簡単に機能を図式にすると以下のようになります。
Add Text To Head(Add Code to Head)
とてもシンプルです。
こうしたプラグインを使う場合には、その他のogp出力用のプラグインや、
投稿の前後に指定のタグを出力するプラグインを併用し、
自分に必要なものを個々に導入することにはなります。
しかし影響が個別に分かれている方が、
何か障害や体裁の乱れが発生した際にも、
原因の特定が容易になりますし、代替手段を探すことも簡単になると思います。
Insert Headers and Footers
このプラグインの詳細は以下でご紹介しています。
このプラグインは<head>部に挿入するコードと、
<body>内のページの最下部に任意のソースを挿入するコードが指定できます。
設定画面もシンプルで、直感的に設定をすることができると思います。
設定例
入力したHTMLやJavaScriptなどのソースがそのまま出力されますので、
無駄がなくシンプルなプラグインだと思います。
簡単に機能を図式にすると以下のようになります。
Insert Headers and Footers
他のプラグインでよくあるような(“:ダブルクォテーション)や(‘シングルクォテーション)が、
エスケープされて正しく動作しないといった症状もなく、
特に迷うことなく使うことができます。
Per page add to head（Per page head）
このプラグインの詳細は以下でご紹介しています。
新しく追記してご紹介したい<head>挿入プラグインに出会いました。
このPer page add to head（Per page head）プラグインは他のプラグインとは少し異なって、
<head>タグへの挿入を、個別投稿、個別固定ページの単位で設定できます。
もちろん、すべてのページに対して共通で出力する設定も行えます。
設定画面は共通の設定は以下のように行います。
すべてのページ共通タグ（Insert HTML on every page）
個別投稿や固定ページでは以下のようなウィジェットが追加され、
投稿ごとに出力するタグを指定することができます。（以下は個別投稿の例）
個別投稿タグ（Add to head POST）
設定する項目はこれだけで、入力したものがそのまま出力されるシンプルさで、
HTMLタグ、JavaScript、CSSなどを自由に記述できます。
※PHPはHTMLでエスケープされ実行されません。
簡単に処理を図示すると以下のようになります。
Per page add to head
設定がとてもシンプルで投稿や固定ページごとに出力を変えられる点は、
非常に便利ではないでしょうか。
但し、投稿の数だけ設定が行えることはメンテナンス性は低下します。
共通化可能な出力を投稿ごとに設定する方法はお勧めしません。
設定のしすぎには注意しましょう。
WP Headmaster
このプラグインの詳細は以下でご紹介しています。
このプラグインはHTMLに対して、直接記載したコードを挿入するという形のプラグインではなく、
あらかじめ設定が可能な項目が決められているタイプのプラグインです。
すこし設定が多く迷う部分もありますが、
用途がはっきりしていてマッチするならば使いやすいかもしれません。
設定画面については複数タブに分かれていますので、
投稿の詳細を見て頂けたらと思いますが、以下のような設定画面です。
WP Headmaster設定画面
簡単に機能を図式にすると以下のようになります。
WP Headmaster
このプラグインでは、<head>～</head>間に出力を行いたい内容の、
多くをカバーしてくれていると思います。
ただし、wordpressサイトで個別のJavaScriptの外部ファイルを読み込ませるといった、
利用方法には向いていないと思います。
正直なところGoogleAnalyticsのトラッキングIDなどは、
貼り付け用のJavaScriptがGoogleから提供されますし、
favicon用のタグに関しても自ら記載して挿入しても同じかなと思ったりします。
個人的にはより自由度のある挿入が出来た方が便利かなと思うところです。
Header and Footer
このプラグインの詳細は以下でご紹介しています。
<head>部に対する出力を、HOMEのページと各投稿のページで異なるものを表示させたり、
<body>内のページの最下部に任意のソースを挿入するコードが指定できます。
また、各投稿や固定ページの記事の前後に対してコードを挿入する機能もあります。
このプラグインのとても便利な点として、PHPの実行が可能という大きなメリットがあります。
設定画面については複数タブに分かれていますので、
投稿の詳細を見て頂けたらと思いますが、以下のような設定画面です。
Page head and footerの設定
簡単に機能を図式にすると以下のようになります。
Header and Footer
この手の挿入プラグインはPHPの実行が出来ないものが結構あり、
<?php ・・・ ?>で記述すれば、投稿の前後やページ最下部で
PHPによってHTMLを組み立てて出力させるといった処理が可能になります。
これはJavaScriptでも構わないし実現できると言ってしまえばその通りです。
しかし、JavaScriptでもできるし、PHPでもできるという幅が広がるという意味では便利だと思います。
Post6WidgetArea
このプラグインの詳細は以下でご紹介しています。
このプラグインは斬新な発想のプラグインでウィジェットを利用します。
ウィジェットを利用して<head>部に挿入する機能と投稿の前後に挿入する機能を実現しています。
固定ページ記事本文の前後に対してコードを挿入する機能はありませんが、
ホーム(TOP)ページ、固定ページ、投稿、各アーカイブ(カテゴリ・タグ・月別)の
ページの開始と終了の位置に対して、定型文を挿入することができます。
このプラグインのとても便利な点として、ウィジェットとしてインストールされているものならば、
挿入したいエリアに対して、設定することができる点です。
[Executable PHP widget]などをインストールすることで、
投稿の前後でPHPを利用したプログラムを挿入することも可能です。
設定画面
設定の方法は少し特殊でheadタグに挿入するウィジェットエリアに対して、
テキストウィジェットなどを追加し、ウィジェット内に挿入したいタグを設定します。
Post6 head タグ要素内の設定
簡単に機能を図式にすると以下のようになります。
ホームページ・アーカイブの場合
ホーム・アーカイブ概念
※ホームページ、アーカイブ以外の投稿や固定ページにおいて、
挿入処理の違いはありますがHead領域に対する挿入は共通です。
いかがでしたでしょうか。
単にhead内にタグを挿入するという用途に絞ってプラグインを様々試してみました。
他のプラグインでもAnalyticsに特化したものや、
ogpタグ出力、favicon表示とそれぞれの特色があるものがあると思います。
そうしたものの中にも、自由度が高いものがある場合もあると思います。
今後は、そうした自由度が高いものが見つかり次第、
本投稿に追記していこうと思っています。
何かのお役に立てましたら幸いです。
Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。
WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。
WordPress.com、WordPress.net、WordPress.org、WordPress.tv、
WordPressFoundation.orgはWordPress Foundationが
管理運営を行なう正式なトップレベルドメインであるとともに、
WordPress Foundationが運営を行うサービスの名称です。
wordpressはFree Software Foundation, Inc.によってGPL2+でライセンスされています。
公開日：
最終更新日：2014/12/04
Rakuten Promotion