headタグ挿入にHeader and Footer－wordpressプラグインを利用

2013/07/14 2014/11/22

wordpressプラグインのHeader and Footerは、
テーマのheader.phpを編集することなく<head>タグ内に、
任意のコードを挿入するプラグインです。
homeのページのみに挿入したり、すべてのページに挿入したりする機能や、
投稿の前後に指定のコードを出力するといったことが出来るようになります。

はじめに

皆さんはどのようなプラグインをいつも利用していますか？
プラグイン嫌いの方も結構いるようで、プラグインゼロ思想のページもたまに見かけます。

今回は、Header and Footerというプラグインです。
ヘッダー領域は基本的にはheader.phpを編集して、
目的のタグを挿入する方法が一般的のようです(検索した感じは)
とにかくheader.phpやら、functions.phpのカスタマイズをよく見かけます。

そうしたソース改変を行わずにヘッダー領域に対してタグを挿入することが出来るようになります。

環境

wordpress:3.5.1
利用テーマ:Twenty Twelve
Header and Footer:1.4.0(プラグインオフィシャルサイト)

使い方

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

このHeader and Footerというプラグインは、
インストールし有効化すると設定メニューに[Header and Footer]が表示されます。

Header and Footerの設定

設定画面を開き各タブに対して設定を行っていきます。

動作

テストソース－A

<head>タグに挿入する際に利用するソースは、
以下のようなjsファイルを読み込み利用します。

function testrun(disp){
	alert(disp);
}

function testrun(disp){

alert(disp);

}

Header and Footerフィールド内に挿入したソースが以下のソースです。

<script src="http://algorhythnn.jp/pblic_js/algorhythnn_testjs.js"></script>
<script langage="JavaScript"  type="text/javascript">
<!--
testrun("Add Code to Head is Run");
// -->
</script>

<!--

testrun("Add Code to Head is Run");

// -->

</script>

（解説）
HTMLのロードと同時にalgorhythnn_testjs.jsファイルを読み込みます。
次に、algorhythnn_testjs.jsに定義されたtestrun()関数に
プラグイン名を渡しアラートを表示させています。

テストソース－B（都度一部改変）

画面表示系の動作確認に利用するソースは、
以下のようなテキスト出力ソースを利用します。

<p>Header and Footer output_php_rand(): <?php echo rand(1,100); ?></p>

1	<p>Header and Footer output_php_rand(): <?php echo rand(1,100); ?></p>

（解説）
テキストおよび、PHPのRand()関数を呼び出して表示しています。

設定

Page head and footer

Page head and footerセクションでは<head>タグ領域に対する出力と、
</body>の直前に出力するafter load JavaScriptタグの出力の設定が行えます。

Page head and footerの設定

Code to be added on HEAD section of the home

ここでは、ブログのhomeのみで出力するタグを設定するようですが、
wordpressのホームに対して固定ページを割り当ててある場合には、
homeに指定したソースの出力はされませんでした。

Code to be added on HEAD section of the home出力

用途としては、GoogleWebMastersToolsの所有者認証metaタグなどを、
<head>タグに出力することができます。

Code to be added on HEAD section of every page

このフィールドに出力したコードは、
すべてのページの<head>タグ内に一律挿入を行いたいタグを設定します。

Code to be added on HEAD section of every page設定

すべてのページとは、
HOME・投稿・固定ページ・アーカイブ・カテゴリ・タグなどのページです。
実際に設定をおこなった結果(テストソースA利用)は以下のように表示されます。

出力がされたソースが<head>タグ内に挿入されています。

Code to be added on HEAD section of every page出力

ページロード時にスクリプトが走ります。
通常、このような使い方はしないかもしれませんが、jsファイル読み込みや、
個別のCSS読み込みなどを記述できます。使い方次第で便利に使えそうです。

Code to be added on HEAD section of every page実行

Code to be added before the end of the page

このフィールドに出力したコードは、
すべてのページの</body>タグ直前に挿入を行いたいタグを設定します。

Code to be added before the end of the page設定

出力されたソースが</body>タグ直前に挿入されています。

Code to be added before the end of the page出力

作者のページではPHPも実行可能とありましたので、
実際に設定した結果(テストソースB利用)は以下のように表示されます。
例のようなPHP乱数表示も表示の度に実行されています。

Code to be added before the end of the page実行

Post content

Post Contentの設定では、各投稿の前後に挿入を行う設定です。

Post content設定

Code to be inserted before each post
Code to be inserted after each post

ここに入力した内容が各投稿の前・後に挿入されます。
実際に設定した結果(テストソースB利用)は以下のように表示されます。

Post content出力

Page content

Page Contentの設定では、各固定ページの内容の前後に挿入を行う設定です。

Code to be inserted before each page
Code to be inserted after each page

ここに入力した内容が固定ページの内容の前・後に挿入されます。

Page content設定

実際に設定した結果(テストソースB利用)は以下のように表示されます。

Page content出力

[rakuten]001:9784798031743[/rakuten]

Facebook

ここではFacebookのlikeボタンなど(別途設置)に対応する
ogpのmetaタグ出力に関する設定のようですが、
私は勉強不足であまり詳しくありません。

この設定を有効にした場合にはogpタグの一部しか出力が行われない為、
Header and FooterのFacebookタブを用いた、
ogpタグの出力設定はお勧めできません。

facebookへの自動投稿は「Jetpack plugin」が、
しっかりと整形してfacebookのウォールへ安定性して投稿してくれます。
ただ、jetpackの単体利用でもogpタグは出力されますが、
出力内容は自動的に決定されてしまいます。

併せてogpタグもカスタマイズして意図的に出力しておくならば、
「Open Graph Pro plugin」を実装する方が、
必要な情報をしっかりと出力してくれると思います。

Header and FooterによるFacebook用ogpタグ

Header and Footerにて設定することによって、
出力されたogpタグは以下のようになります。

<meta property="og:type" content="article">
<meta property="og:image" content="http://algorhythnn.jp/TEST/wp/wp-content/uploads/2013/07/px.jpg">

1 2	<meta property="og:type" content="article"> <meta property="og:image" content="http://algorhythnn.jp/TEST/wp/wp-content/uploads/2013/07/px.jpg">

JetPackによるFacebook用ogpタグ

<!-- Jetpack Open Graph Tags -->
<meta property="og:type" content="blog" />
<meta property="og:title" content="ええかげんブログ(仮店舗)" />
<meta property="og:description" content="頑張らない！でも諦めない！必死にならずにええかげん" />
<meta property="og:url" content="http://algorhythnn.jp/TEST/" />
<meta property="og:site_name" content="ええかげんブログ(仮店舗)" />

Open Graph Pro によるFacebook用ogpタグ

参考までにOpen Graph Pro の場合には以下のタグが出力されます。

<meta property="og:title" content="ええかげんブログ(仮店舗)" />
<meta property="og:site_name" content="ええかげんブログ(仮店舗)" />
<meta property="og:description" content="頑張らない！でも諦めない！必死にならずにええかげん" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://algorhythnn.jp/TEST" />
<meta property="fb:admins" content="100005985785770" />
<meta property="fb:app_id" content="202493899899869" />

SEO

SEOの設定では検索クローラに対しての動作を制御できます。

SEO設定と出力

Home

Home設定が有効な場合、
Homeの最新の投稿表示から次ページ(←過去の投稿)などをクリックして、
２ページ、３ページと遷移した際の２ページ目以降は
検索インデックスに登録しないよう、”noindex”属性を<head>タグ内に出力します。

<meta name="robots" content="noindex">

1	<meta name="robots" content="noindex">

Search results

Search results設定が有効な場合、
wordpressのウィジェットによるサイト内検索の結果ページを、
検索インデックスに登録しないよう、”noindex”属性を<head>タグ内に出力します。

<meta name="robots" content="noindex">

1	<meta name="robots" content="noindex">

Canonical on home

Canonical on home設定が有効な場合、
Homeのページに対するURLを “Canonical”属性にて明示します。
トップのページを異なるURLから表示した際でも、
検索クローラに対して正しいURLを伝えることができます。

<meta name="canonical" content="http://algorhythnn.jp/TEST">

1	<meta name="canonical" content="http://algorhythnn.jp/TEST">

Snippets

Snippet(スニペット)には、ショートコードを定義（５個まで）して、
他のHeader and Footerのフィールドに貼り付けることができます。

Snippet_1～Snippet_5までに挿入したいタグなどを記載します。

Snippets設定

他のHeader and Footerのフィールドに対しては、
[Snippet_1]などのショートコードを記載します。

Snippetsの利用

Snippetから出力されたタグが表示されます。
この機能を利用することで同一の処理を一元化して記述することができます。

Snippetsからの出力

BBPress

bbPressのタブは使用されるかはわかりませんが、
bbPress Pluginを導入している場合にはwordpress内に
フォーラム(ディスカッション)機能を追加することができます。

BBPress設定

このディスカッションのトピックに対する返信の前後などに対して、
指定したタグを挿入することが出来るようになります。

bbPressフォーラム設定

実際にトピックに対して表示されたタグは以下のようになります。

BBPress出力

Notes and…

この設定に関しては設定を行っても何も出力はされません。
Header and Footerに対してのメモを記述したり、
実装していたソースを一時的に無効にするなどの用途で貼り付けておき、
のちに再利用をしやすくする為の備考領域としての利用目的のようです。

Notes and…設定

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

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

総括

これで、Header and Footer Pluginについてのご紹介は以上です。
単なるhead領域に対しての挿入機能だけでなく、
少し便利かもしれない機能も実装されています。

実際のところ使うかどうかという部分もありますが、
投稿の前後にも任意の処理を入れられる利便性や、
JavaScriptやPHPなどの処理も記述できる点はとても便利ではないかと思います。

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

- WordPress, プラグイン head-tag, Header and Footer, insert, plugin, WordPress, プラグイン

Comment

Wordpressのheadタグに任意のコードを挿入するプラグインHeader and Footer | ほぼ日刊へろへろ管理人日記より:

2014/06/13 7:20 PM

[…] headタグ挿入にHeader and Footer－wordpressプラグインを利用（ええかげんブログさま） […]

: WP jQuery Lightboxで特定の投稿のみスライドショーが動かない場合の対処法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Google+1ボタンの改変したいと思った時に確認すること

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Netowl™の無料WordPressサーバWPblogの利用登録

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: 12.一括検索－Jetpack by WordPress.com

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Googleがプラグインを作るとこうなるのか！直観的IFに脱帽した件（Google Publisher Plugin）

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: (phpMyAdmin)タイムアウト設定の動作と確認

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: WelcartのPayPal™エクスプレスチェックアウト（クレジット）決済の設定手順

Google or AdMax Promotion(cdt) 禁断の機能がau公 …

: 指定したWordPressカテゴリやタグの投稿でバナー(Google AdSesne)を表示しない方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: WelcartのPayPal™エクスプレスチェックアウト決済による購入フロー

Google or AdMax Promotion(cdt) 禁断の機能がau公 …

: 意味不明な被リンクを頂き削除要請を実施した件

Google or AdMax Promotion(it) 禁断の機能がau公式 …

PREV: headタグ挿入にAdd Text To Head(Add Code to Head)－wordpressプラグインを利用
NEXT: headタグ挿入にInsert Headers and Footers－wordpressプラグインを利用