エッセイとかレポートの寄せ集めブログ

WordPress記事ごとのhead内に任意タグを追加する方法

 
Wordpressはheader.phpでhead内に任意のタグを挿入できる
しかしこの方法ではサイト全体に反映されてしまう。
訳あって、記事ごとのhead内に任意タグを追加したいなぁと思って調べてみた。
 
プラグインは見つからなかったが、Wordpressのカスタムフィールドを使う方法が見つかった。
テーマ関係なく非常に簡単に実装できたので、覚書として残しておく。
 

環境

○Wordpressバージョン
WordPress 4.8.1
○Wordpressテーマ
LIQUID SMART

 

作業概要

目的
記事ごとのhead内に任意タグを追加する
手順
functions.phpに設定を追記する。
②記事のカスタムフィールドに値を設定する。

 

経緯

いやぁ、今回なんで記事ごとのhead内に追記したかったかというと。
実はこのブログテーマは構造化対応されているハズなんだが、パンくずリストがgoogle検索結果に反映しなかったのだ。
 
構造化(マークアップ)していない場合の検索結果がこちら。
URLむき出し。
パーマリンク初期設定だから、ちょーダッセェ…。
 

 
で、構造化(マークアップ)とは「これはパンくずリストです」とか「これは著者の名前です」とか目印を付けて機械が理解できるようにする技術だ。
構造化はgoogleが推奨しており、SEO対策としても有効だ。
構造化しておくと、google検索結果にリッチスニペットで表示されるっつー恩恵もあり、クリック率向上の効果を期待できる。
 
パンくずリストもそのリッチスニペットのひとつである。
しっかり対応できていれば、URLだった部分がこのようにパンくずで表示される。
 

 
で、このテーマもパンくずのところはMicrodataでマークアップされているのだが、検索結果に反映されない。
Google Search Consoleで確認したら、一応パンくずリストとして認識はされているみたいなのに…。
 
それでまぁ、原因を特定するよりhead部分にJSON-LDで構造化データを書いてしまえと。
思った次第である。
 
結果、これを試して反映されたにはされたんだが。
将来カテゴリ変更とかしたときに、クッソ面倒なことになるのでやめたのだ。
 
これに関しては、結局テーマのカスタマイズをしてMicrodataでマークアップしなおした。
近日別途記事にしておこうと思う。
 

手順

①functions.phpに設定を追記する

まず最初に、functions.phpというファイルに設定を追記する。
Wordpress管理画面の「外観>テーマの編集>functions.php」を表示させる。
 
カスタムフィールドの値に記述した内容が、記事ページのhead内に挿入されるように以下のコードを追記する。
追記した場所は私の場合、functions.php一番下の行の ?> 直前だ。
 

// header内に任意のコードを読み込む
function head_original_load(){
if(is_single() || is_page()){
if($head_original_code = get_post_meta(get_the_ID(), 'head_load', false)){
foreach($head_original_code as $head_code){
echo $head_code . "\n";
}
}
}
}
add_action('wp_head', 'head_original_load');

 

 
今回、こちらの記事を参考に、コードは丸コピさせていただいている。
wordpress-custom.comのこしもあんずさんありがとうございます。
記事やページごとにhead内にタグを追加するカスタマイズ方法
 

②記事のカスタムフィールドに値を設定する

次に、実際head内に任意のタグを追加する。
まず追加したい記事の「投稿の編集」ページを開く。
 
カスタムフィールドの項目は、デフォルトでは表示されていないので、これを表示させる必要がある。
画面左上にある「表示オプション▼」をクリックするとパネルが展開されるので、ここで「カスタムフィールド」にチェックを入れる。
 

 
次に、カスタムフィールドの「新規追加」を行う。
名前は「head_load」に設定し、値に任意のタグを記述。
 

 

 

 
で、更新を行えばOKだ。
次からは「新規追加」を行わなくても、カスタムフィールド設定のプルダウンから「head_load」を選択できる。
 
ちなみに、私はJSON-LDの構造化データをここに記述しようとして結局やめた。
しかし、本記事のようにブログ記事内にソースコードを記述するためのスクリプトを読み出すのに重宝している。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です