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

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

      2014/11/22

Google or AdMax Promotion(it)

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

はじめに

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

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

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

環境

使い方

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

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

01_Header and Footerの設定

Header and Footerの設定

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

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

動作

テストソース-A

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

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

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

テストソース-B(都度一部改変)

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

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

設定

Page head and footer

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

02_Page head and footerの設定

Page head and footerの設定

Code to be added on HEAD section of the home

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

03_Code to be added on HEAD section of the 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>タグ内に一律挿入を行いたいタグを設定します。

04_Code to be added on HEAD section of every page設定

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

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

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

05_Code to be added on HEAD section of every page出力

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

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

06_Code to be added on HEAD section of every page実行

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

Code to be added before the end of the page

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

07_Code to be added before the end of the page設定

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

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

08_Code to be added before the end of the page出力

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

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

09_Code to be added before the end of the page実行

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

Post content

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

10_Post content設定

Post content設定

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

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

11_Post content出力

Post content出力

Page content

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

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

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

12_Page content設定

Page content設定

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

13_Page content出力

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タグは以下のようになります。

JetPackによるFacebook用ogpタグ

Open Graph Pro によるFacebook用ogpタグ

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

SEO

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

16_SEO設定と出力

SEO設定と出力

Home

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

Search results

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

Canonical on home

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

Snippets

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

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

17_Snippets設定

Snippets設定

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

18_Snippetsの利用

Snippetsの利用

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

19_Snippetsからの出力

Snippetsからの出力

BBPress

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

21_BBPress設定

BBPress設定

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

20_bbPressフォーラム設定

bbPressフォーラム設定

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

22_BBPress出力

BBPress出力

Notes and…

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

23_Notes and...設定

Notes and…設定 

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

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

プロモーション(btm)

Google or AdMax Promotion (it)

総括

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

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

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

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


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


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

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

Pitta Promotion

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

AdMax Promotion

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

Rakuten Promotion

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

Comment

  1. […] headタグ挿入にHeader and Footer-wordpressプラグインを利用(ええかげんブログさま) […]

  関連記事