今回はWordPressで、OGPをプラグイン無しで設定する方法です。
OGPの設定をする、WordPress
OGPって何？という方は、
話すと長いので、ググッておいて下さい。
簡単に言うと、SNSで共有される時に
どの情報をどのように表示するかという事。
[ WP ] OGPとは? WordPressにプラグイン無しで設定する方法
http://yossense.com/ogp/
続・「Stinger5」にOGPを追加してみた
http://yuapon38.net/%E7%B6%9A%E3%83%BB%E3%80%8Cstinger5%E3%80%8D%E3%81%ABogp%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F-952.html
ではカスタマイズしていきます。
私のテーマはStinger5です。
他のテーマの方は参考程度にご覧下さい。
header.php→
<head>を探す→
以下に変更
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
次に、
</head>
の直前に、以下のコードを追加。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
<!--OGP開始-->
<meta property="fb:admins" content="【1】fb:adminsのIDを入力" />
<meta property="og:locale" content="ja_JP">
<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";//「一般設定」で入力したブログのURL
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿記事に画像があるか調べる
if (is_single() or is_page()){//投稿記事か固定ページの場合
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 {//画像が1つも無い場合
echo '<meta property="og:image" content="【2】画像が一切ない記事ページで表示させたい「デフォルト画像のURL」">';echo "\n";
}
} else {//投稿記事や固定ページ以外の場合（ホーム、カテゴリーなど）
echo '<meta property="og:image" content="【3】ホームとかカテゴリページで出したい画像のURL">';echo "\n";
}
?>
<!--OGP完了-->
以上です。
赤い背景をつけている箇所は、
ご自身の情報に替えて入力してくださいね。
画像のところは、
<?php echo get_template_directory_uri(); ?>/images/no-img.JPG" alt="no image" title="no image" width="100" height="100" ">
を例文に。
あとはご指定の画像の名前に替えて下さい。
さて、コードがとても多いので、
header.phpが見にくくなりますね。
それが嫌な方は、
<?php get_template_part('header-ogp'); ?>
として、
header-ogp.phpファイルを作り、その中にコードを記述。
子テーマ内にFTPフォルダでアップロードすればOKです。
これは初心者はちょっとハードルが高いので、
分からなければスルーしましょう。
WordPressでTwitter Cardsの設定をする
OGP設定が済んだら、
次はツイッターカードですね。
OGPの設定箇所と同じように、
</head>
の直前に、以下のコードを追加。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
<!-- twitter cards -->
<meta name="twitter:site" content="@アカウント名">
<meta name="twitter:card" content="summary">
<!-- /twitter cards -->
これでOKです。
実際に共有してみて、表示のされかたをチェックしてみましょう。
ちなみに分岐させることもできます。
投稿と固定ページでわけるとかができます。
それぞれに適したカードタイプやメタタグを入力していきます。
そこまでこだわらなくても、上記タグだけでも問題ありませんでした。
WordPress Twitterカードを導入
Twitter Developer Documentation
その他、参考にしたサイト
[ WP ] Twitter Cards（ツイッターカード）をプラグイン無しで設置設定する方法
http://yossense.com/twitter-cards/
【エンゲージメント率150%UPも！？】注目機能Twitter Cards！内容詳細と導入方法まとめ
http://smmlab.jp/?p=18753
Twitter Cards申請をして表示をチェック
最後にTwitter Cardsの申請をします。
これで完成です。
こちらからどうぞ。
https://cards-dev.twitter.com/validator
私の過去記事も参考にどうぞ。
Twitterカードを作成して、共有をもっとアレンジしよう。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク