WordPress
WordPressでOGP設定。Facebook, Twitter Cardsもプラグイン無しでOK！
OGPを WordPressにプラグイン無しで設置する方法です。
Facebookや Twitter Cards も一緒にまとめて設置します。
前回の「OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ！」で、OGPの基本的なことを押さえておきましたので、まずはご覧ください。
こちらで、OGPの基本HTMLソース、Facebook, Twitter Cardsの設定、OGP画像のサイズ、Facebookの App-IDの取得方法について書いておきました。
WordPressに OGPを設置するプラグインはいろいろありますが、<head>部分だけのことですので、プラグイン無しの方法を探しました。
参考資料で、header.php にパーツテンプレートを置き、functions.php で動作を指定するものもありましたが、パーツテンプレートだけでシンプルにまとめる方法を書いてくださってるサイトを見つけました。寝ログさんです。いつもお世話になります。
プラグイン不要でFacebook OGPをコピペでサクッと設置する方法 [Wordpressカスタマイズ] | 寝ログ
パーツテンプレートに、記事かアーカイブかの条件分岐で og:description, og:title, og:url を適切に表示させ、画像（og:image）もサムネイル（アイキャッチ画像）があるか無いかなどの条件分岐でURLを設定するなど、必要なOGPプロパティがキレイに入っていて素敵。
こちらのパーツテンプレートのソースに Twitter Cards のプロパティを追加して、このサイトでも早速使用したので、以下でその工程をメモります。
スポンサーリンク
header.php を編集
header.php を編集。２ヶ所だけ変更します。
[1] まず、<head>要素に prefix属性で下記の記述を追加。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
このソースはHTML5用。XHTMLの場合は、前回の「OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ！」をご覧ください。
[2] 続いて、コレから作るパーツテンプレートを読み込んでおきます。
入れる場所は<head>〜</head>の中。<meta>要素を追加するパーツテンプレなので。
<?php get_template_part('header_ogp');?>
ここでは「header_ogp.php」という名前のパーツテンプレートにしました。
それでは、この「header_ogp.php」を作っていきます↓
パーツテンプレート header_ogp.php を作る
新しく作った「header_ogp.php」ファイル内の記述です。
このパーツテンプレートは、1〜37行目まで寝ログさんのソースをそのままコピペしています。
（このブログは自分自身の作業工程のメモでもあるので、コピーさせていただいたソースを含んだ「header_ogp.php」の全ソースを掲載しています）
ソースの詳細は寝ログさんの記事をご参照ください。ソース内のコメントで詳細に説明してくださっています。
本ブログでは最後に Twitter Cards の記述を足して使わせていただきました。
<meta property="og:type" content="blog">
<?php
if (is_single()){
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";
endwhile; endif;
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";
} else {
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
if (is_single()){
if (has_post_thumbnail()){
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {
$ogp_image = get_template_directory_uri().'/images/og-image.jpg';
echo '<meta property="og:image" content="'.$ogp_image.'">';echo "\n";
}
} else {
if (get_header_image()){
echo '<meta property="og:image" content="'.get_header_image().'">';echo "\n";
} else {
echo '<meta property="og:image" content="'.get_template_directory_uri().'/screenshot.png">';echo "\n";
}
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="App-ID（15文字の半角数字）">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitterアカウント">
私が追加したのは、最後の Twitter Cards に関する記述だけ（38〜39行）
あと、Facebookのプロパティは、admin_IDの行をとって、App-IDだけにしました。
（1つでイイみたい。Facebookのデバッガで、エラーも警告もでませんでした。）
また、24行目の「get_template_directory_uri().’/images/og-image.jpg’」は、投稿ページにサムネール（アイキャッチ画像）も何もない場合に使用する「自分で作った ogp_image用の画像」のURLを指定します。
ココでは「images」ディレクトリのjpgを指定していますが、他のディレクトリに置いても、pngでも。
「ogp_image」用の画像、Facebookの App-ID, admin_ID や、Twitter Cards の詳細は、
前回の「OGP設定のHTMLソースと Facebook, Twitter Cardsの設定を全部まとめてメモ！」をご覧ください。
最後に1つ。
OGP画像は、記事以外（トップページやアーカイブ）のときは、screenshot.png（テーマのスクリーンショット）を使います（31行目）。
なので、screenshot.png をまだ作っていない場合は、この際ちゃんと作ろう。
screenshot.pngの詳細は 「[WordPressテーマ作成の手順1] screenshot.pngがあったほうがイイ」をご覧ください。
関連記事
WordPressの Embedカードのリンクを別ウィンドウで開く（PCのみ。スマホ・タブレットはそのまま）
WordPressの Embedカード（ブログカード）のリンクは、デフォルトでは同ウィンドウで開くようになっていますが、これを別ウィンドウ（別タブ）で開くように [記事を読む]
WordPressの Embedカードのスタイルを編集する方法2つ
前回の記事で、WordPress 4.5 の Embedカード（ブログカード）の「テンプレートの構成」や「HTML要素のクラス名」などを調べました。これを元に、 [記事を読む]
WordPress4.5で Embedカードの PHPファイルの構造がだいぶ変わったみたい
前回から WordPressの Embedカード（ブログカード）について調べたことをメモっています。 今回は Embedカードの PHPファイルの構造について [記事を読む]
Comments
-
-
yuki★hata より:
リンクありがとうございます。
-
-
Mana より:
このままだと excerpt にHTMLタグが入っていた場合エラーが起きてしまうので、header_ogp.php の5行目
echo ”;echo “\n”;
を
$excerpt = strip_tags(get_the_excerpt());
echo ”;echo “\n”;
にするといい感じになります(*‘ω‘ *)-
Mana より:
あ、コードが変になってる…すみません、
header_ogp.php の5行目
echo ‘<meta property="og:description" content="’.mb_substr(get_the_excerpt(), 0, 100).’">’;echo "\n";
を
$excerpt = strip_tags(get_the_excerpt());
echo ‘<meta property="og:description" content="’.$excerpt.’">’;echo "\n";
です。。 -
yuki★hata より:
Manaさん、コメントありがとうございます。
（3ヶ月も経ってしまってスミマセン）
───
strip_tags() で文字列からHTMLタグを削除するんですね。なるほど。
ってことは、コレでも良いのかな（mb_substr() を残したいので）↓
echo ‘<meta property="og:description" content="’.mb_substr(strip_tags(get_the_excerpt()), 0, 100).’">’;echo "\n";
───
と、ここまで書いていて気づいたんですが、
本文中のソースはこの「＊Web Design 覚え書き＊」でも使っているのですが、今まで Facebook や Twitter にシェアしても、抜粋文中の aタグなどは、ちゃんと削除されて表示されるんですよね。エラーになったこともないです。
今のWordPressのバージョンでは、抜粋のコンテンツからは「HTMLタグと画像は削除される」仕様のようです。
（WordPress Codex 日本語版 → https://goo.gl/3VitiV）
というわけで、本文中の寝ログさんのソースはそのままにしておこうと思います。
-
yuki★hata 
Mana
こちらのサイトを参考にさせていただきました。 寝ログさんのサイト：http://nelog.jp/wp-ogp-settings ＊Web Design 覚え書き＊さんのさいと：http://webdesign.practice.jp/ogp-wordpress