簡単!プラグインなしでWPにTwitter Cardsを設定する方法 [ WordPress ]

WordPress関連の記事

まずはコードをご紹介

これはWordPressで、Twitter Cards を表示するために記述するコードです。
直接 header.php に書いても動作しますが、
使用中のWordPressのTheme構成により、functions.phpや、または関数用の独自テンプレートを定義して、呼び出す形式にしても良いです。

下記コードの13行目の@******** となっている部分を記述する場合は適宜、Webサイトに紐づいたアカウント名に変えてください。
(この部分は、カードタイプ “summary_large_image” を選択した際に適用される項目です。詳しくは Twitter公式の解説を参照。)

Twitter Cards の本文に当たる部分には、
2行目で現在の投稿IDを取得した後、それを元にさらに投稿の情報を詳かく取得して、
phpで文字処理を行います。

4,5行目は、サムネイルとしてアイキャッチ画像を取得している記述です。(※当然、投稿側でアイキャッチ画像を設定していなければ何も表示されませんが、Twitter Cards 自体は出力されます。)
11行目で、その値を出力しています。

<?php
  $my_id = get_queried_object_id();
  $my_post = wp_get_single_post($my_id)->post_content;
  $thumb_id = get_post_thumbnail_id($my_id);
  $thumb_url = wp_get_attachment_image_src($thumb_id,'full');
  $my_card_summary = str_replace(array("\r", "\n"), '', mb_substr(strip_tags($my_post), 0,150,'UTF-8'));
?>
<meta property="og:url" content="<?php echo get_permalink($my_id); ?>">
<meta property="og:title" content="<?php single_post_title(); ?>">
<meta property="og:description" content="<?php echo $my_card_summary; ?>">
<meta property="og:image" content="<?php echo $thumb_url[0]; ?>">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@********">

ひとまず上記を適用するだけで、WordPressへの Twitter Cards の実装はできると思いますが、続けて、
各行の解説などを下記に記載していきます。

各行の解説

・2行目は、get_queried_object_id() を使用して、現在表示されている投稿のIDを取得。それを変数 $my_id に格納しています。
・3行目は、wp_get_single_post() を使用して、2行目で取得したIDを元に、投稿の本文を取得。それを変数 $my_post に格納しています。
・4行目、5行目は冒頭に書いた通り、投稿に紐づけられたアイキャッチ画像のurlを、変数に格納します。
・6行目は記事本文に関する記述になります(10行目の”og:description”の値として使用)。
3行目であらかじめ取得しておいた投稿の本文を対象に、
strip_tags関数でhtmlタグを除去。
それを、 mb_substr関数で150文字分、文字コードUTF-8で取得。(※取得する文字数は任意です。また、より細かく全角半角を判別して制御する場合は、mb_substr関数の代わりにmb_strimwidth関数を使用するのも良いです)
最後にstr_replace関数で改行を削除。
こうして整形した記事本文を、”og:description”の値として 10行目で出力させています。
・8行目は記事urlを、 get_permalink() で取得しています。
・9行目は記事タイトルを、 single_post_title() で取得しています。
・10行目は、上述の通り、6行目で取得している記事本文を代入しています。
・11行目では、4〜5行目で取得しておいたアイキャッチ画像のurlを、”og:image”の値として代入しています。
・12行目はカードの種類を記述しています。
 指定できるカードの種類は4つ。
 ”summary”, “summary_large_image”, “app”, “player” です。
・13行目は、Webサイトに紐づく任意のアカウントを指定しています。

この他にも様々なオプションが表示可能ですが、(Twitter公式を参照)
ひとまず最低限の表示は、上記のコードで実現できます。

複数のループが存在するページの場合は(topページなど)、
その為の分岐を書いてあげれば問題ないでしょう。
(※上記の例は、単一投稿ページを対象とした使用を想定した一例です。一覧ページ、サイトのtop等、複数投稿が存在するページ用に設置する場合は別途、追加の記述が必要となります。)

うまく反映されているかの検証方法

https://cards-dev.twitter.com/validator
上記の、 Twitter Cards用の公式バリデータが存在しています。使ってみましょう。

このバリデータに”og:url”に相当するurlを入力し、preview cardボタンを押すだけです。
うまく設定ができていれば、右側にちゃんと表示が確認できるはずです。

まとめ

Twitterカードを設定しているかどうかで、拡散された時の印象は大きく変わってきます。
ぜひ試してみてください!
※この記事は随時、内容の修正、更新を行う可能性があります。