OGP設定準備編header.phpのhead prefixとget_template_part

headprefix条件分岐


Facebookボタンに必要な情報を生成するためのタグ(OGP タグ)をheader.phpに設置する準備をします。

プラグインで完全なOGPタグを生成してくれるものがあれば簡単だったのですが、2週間程いろいろ試してみたものの、見つけることが出来ませんでした・・・(-_-;)

少しだけ譲歩するなら、プラグイン「Facebook」であれば、ほぼ完璧なFacebookのためのOGPを生成します。

Facebook、Google+だけならこのプラグインでいけると思いますが、Twitterカードには対応していないので、Twitterで大きな画像を表示させるOGP設定は別に設定する必要があります。

また、<head>タグはサイト全体用と投稿記事用があるのですが、この条件別の書き換えはしてはくれません。

他にも良さそうなプラグインはありましたが、やはり100%なものが見つからず。
探し方が足りないのかもしれませんが、結局、プラグイン無しで設定してしてしまった方が早いんじゃないかという結論にいたっております^^;

というわけで、ここでは、プラグインなしでOGPを設定する前段階について書いていきます。

子テーマheader.phpへのOGP設定準備手順

子テーマheader.phpの<head>タグの書き換え
子テーマheader.phpにogpのテンプレートを呼び込むタグを書き込む

OGPタグを直接header.phpに書き込んでも良いのですが、OGP用のテンプレートをheader.phpに読み込む形にして、パーツ別に管理した方が、将来的にOGP設定を変更するような事があった場合に管理が楽だと思いますので、この方法の解説を取っています。

テンプレートで読み込むのではなく、直接書き込みたい!・・という方は、次の記事のタグを直接テンプレート呼び込みタグを入れる場所に貼り付けてくださればOKです。

では、まず<head>タグを編集していきます。

<head>タグの編集

header.php

<head>の部分を以下のように変更します。

<head prefix="og: http://ogp.me/ns# <?php if(is_home() || is_front_page()){ echo 'fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"'; }else{ echo 'fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"'; } ?>>

ちょっと難しくなりましたが、アバウトな説明すると、

FacebookのOGPタグ設定方法詳説ページより、

サイト自体にいいね!する場合のタグはウェブサイト用のタグ、websiteで指定するように、となっています。

この場合の<head>タグは、以下のようになります。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">

同様に、各投稿記事にいいね!する場合のタグは投稿記事用のタグ、articleで指定するので、

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

となります。

これに基づき、それぞれのタグを、サイトのトップページとブログのトップページではwebsite、

その他のページではarticle となるよう条件分岐させている為、このようなタグになります。

では次に呼び込みコードを書き込みます。

header.phpにOGPテンプレートを呼び込むためのコードを書き込む。

さて、ここでOGPタグを入れるのに良さそうな場所は、
<php wp head();  ?>
のすぐ上かと。
header.php
※実はどこかFacebookのOGP設定タグの設置場所について、確か 「なるべく上のほうに入れておいてね」 的な記述を見た気もするのですが、あまりにもたくさんのサイトを見てまわったたため、どのページだったか特定できておりません。^^;

ただ、SEO的に重要な、meta titleや、meta descriptionといったタグを差し置いて、一番上に入れるというのはいかがなものかと思いますので、この位置にして解説しております。

<php wp head();  ?>
の行頭でクリックしてカーソルを表示させ、Enterキーを押して改行します。 空いた一行に次の一行をコピペして下さい。

<?php get_template_part('ogp'); ?>

header.phpを保存しておきます。

<?php get_template_part(‘~’); ?>は、phpファイルに別のphpファイルを呼び込むためのコードです。

(’~’)の ’ と ’ の間に呼び込みたいphpファイル名を入れることで、そのphpファイルをこのコードが書かれている部分に呼び込むことができる、便利なコードです。

直接header.phpに書き込むことも可能なOGPのタグですが、OGPタグだけ修正したい、といった時にファイルをOGPだけのphpファイルにしておくと、修正箇所を探すのがheader.phpの中でずっと簡単になります。
効率的にカスタマイズできるので便利です。

では、次の記事では、呼び込まれる方のPHPファイルを作成、アップしましょう。

※参考にさせていただいたサイトURL:
http://dtp.jdash.info/archives/51947560.html

Published:2014/02/05

Written by

OGP設定準備編header.phpのhead prefixとget_template_part」への3件のフィードバック

コメントを残す