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

Google or AdMax Promotion(page)

headタグ挿入にPer page add to head-wordpressプラグインを利用

wordpressプラグインのPer page add to head(Per page head)は、
テーマのheader.phpを編集することなく<head>タグ内に対して、
全ページ共通に挿入するタグと投稿や固定ページごとに挿入するタグを
指定して挿入させることができるプラグインです。

 

はじめに

皆さんはどのようなプラグインをいつも利用していますか?
一度、便利さにハマると手放すことができなくなるプラグインですが、
今回ご紹介するheadタグ挿入のプラグインも一度利用すると手放せなくなると思います。

なぜならありそうでなかなか出会わなかったプラグインだったから^^

 

プロモーション(btm)

Google or AdMax Promotion (it)

環境

 

使い方

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

このPer page add to headも「Per page head」で検索してインストールするだけです。

02_プラグイン検索(Per page head)

プラグイン検索(Per page head)

 

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

03_Per page head今すぐインストール

Per page head今すぐインストール

 

プラグインをインストールするとプラグイン一覧には「Per page head」と表示されます。
プラグインの正式名は「Per page add to head」のようですが。

06_Per page headプラグイン

Per page headプラグイン

 

サイドバーの設定メニューに[Add <head> to every page]が表示されます。

07_ダッシュボードメニュー

ダッシュボードメニュー

 

設定

設定はサイドメニューからの設定と各投稿、各固定ページの作成画面から行います。

すべてのページにタグを挿入する

[Add <head> to every page]をクリックするとメニュー名そのままの
全てのページに対して<head>タグ内に挿入するタグを設定するフィールドが表示されます。

このフィールドに対して、タグを設定しておくことで、
サイト内のすべてのページ(ダッシュボードを除く)に対して共通タグを出力できます。

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

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

 

個別投稿ごとにタグを挿入する

個別の投稿ごとの<head>タグ内に挿入するタグの設定は、
投稿の作成画面に表示されたウィジェットから行えます。

このフィールドに対して設定したタグはこの投稿が表示された場合のみに、
<head>タグ内に対して出力されます。

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

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

 

個別固定ページごとにタグを挿入する

個別の固定ページごとの<head>タグ内に挿入するタグの設定は、
固定ページの作成画面に表示されたウィジェットから行えます。

このフィールドに対して設定したタグはこの固定ページが表示された場合のみに、
<head>タグ内に対して出力されます。

10_固定ページタグ(Add to head PAGE)

固定ページタグ(Add to head PAGE)

 

表示の検証用ソース

表示の確認は各設定に以下のソースを定義して行いました。

Add <head> to every page

以下のソースを設定しています。

設定イメージ

11_検証挿入タグ(Insert HTML on every page)

検証挿入タグ(Insert HTML on every page)

 

これによって、ページが表示されるとJavaScriptによって、

Insert HTML on every page

というメッセージダイアログが表示されることで、動作確認が行えます。

個別投稿(Add to headウィジェット)

以下のソースを設定しています。

投稿の内容は以下のように定義しています。

設定イメージ

12_検証挿入タグ(Add to head POST)

検証挿入タグ(Add to head POST)

これによって、ページが表示されるとJavaScriptによって、

Insert HTML on POST

というメッセージダイアログが表示されることで、動作確認が行えます。

また、スタイルシートの定義によって投稿本文の文字色がになります。

 

固定ページ(Add to headウィジェット)

以下のソースを設定しています。

投稿の内容は以下のように定義しています。

設定イメージ

13_検証挿入タグ(Add to head PAGE)

検証挿入タグ(Add to head PAGE)

これによって、ページが表示されるとJavaScriptによって、

Insert HTML on PAGE

というメッセージダイアログが表示されることで、動作確認が行えます。

また、スタイルシートの定義によって投稿本文の文字色がになります。

 

表示の検証

以下のページ種別ごとに表示確認を行いました。

  • 個別投稿
  • 個別固定ページ
  • トップページ(ホーム)
    • 最新の投稿
    • フロントページ
    • 投稿ページ
  • 年アーカイブ
  • 年月アーカイブ
  • 年月日アーカイブ
  • カテゴリアーカイブ
  • タグアーカイブ
  • 著者ページ(author)
  • 検索結果ページ
  • 404ページ

個別投稿

個別投稿の表示では、個別投稿ごとに設定したタグの挿入と、
すべてのページ共通で設定したタグの両方が実行されます。

スクリプトの実行順序は「個別投稿→共通」となって実行されました。

14_投稿ページ表示ダイアログ

投稿ページ表示ダイアログ

 

ページが表示されるとFaviconやスタイルシートなどがページごとの設定で表示できました。
ただし、PHPタグに関してはWordPressの標準動作と同様にHTMLエスケープされ実行できません。

また、headタグの挿入位置は<head>の直下すぐに出力されるわけではなく、
比較的後半(最後でもない)に出力される結果となりました。

15_投稿ページ表示

投稿ページ表示

 

個別固定ページ

個別固定ページの表示では、個別固定ページごとに設定したタグの挿入と、
すべてのページ共通で設定したタグの両方が実行されます。

スクリプトの実行順序は「固定ページ→共通」となって実行されました。

16_固定ページ表示ダイアログ

固定ページ表示ダイアログ

 

ページが表示されるとFaviconやスタイルシートなどがページごとの設定で表示できました。
ただし、PHPタグに関してはWordPressの標準動作と同様にHTMLエスケープされ実行できません。

また、headタグの挿入位置は<head>の直下すぐに出力されるわけではなく、
比較的後半(最後でもない)に出力される結果となりました。

17_固定ページ表示

固定ページ表示

 

その他のすべて

その他すべてとして以下のページ種別においては、
共通タグ部分が漏れなく実行されます。(赤字部分は後述)

  • トップページ(ホーム)
    • 最新の投稿
    • フロントページ
    • 投稿ページ
  • 年アーカイブ
  • 年月アーカイブ
  • 年月日アーカイブ
  • カテゴリアーカイブ
  • タグアーカイブ
  • 著者ページ(author)
  • 検索結果ページ
  • 404ページ

 

18_トップページ等表示

トップページ等表示

 

補足

赤字に示した、フロントページ・投稿ページについては、
設定を行う際に「固定ページ」をダミーで設定して表示する決まりになっています。

フロントページ・投稿ページの概念は以下でご紹介しています。

 

その際に指定している固定ページに対して、
個別に挿入するタグを指定した場合にはその挿入タグも有効になります。

この仕組みを利用すると、
フロントページ・投稿ページそれぞれに対して別々の処理を記述できます。

 

総括

<head>タグに対して、共通で挿入できるプラグインは結構あるのですが
各投稿ごと、固定ページごとに<head>タグに対して、
任意のタグを挿入できるプラグインは意外と見つからないものです。

今回のPer page add to head(Per page head)は、
そんな投稿ごとに挿入を変えられる非常に便利なプラグインです。

そして、シンプルなこの仕様は常に有効にしておいても邪魔にならないいいプラグインだと思います。

 


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

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


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

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

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

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

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

Rakuten Promotion