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

WordPress関連の記事

まずはコードをご紹介

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

下記コードの4行目の@****** となっている部分は、適宜ご自分のアカウント名に変えてください。
(ただし、この1行は省略しても動作します。Twitter公式にしたがって記述するとこう書く事もできる、という例です。)

Twitter Cards の本文に当たる部分には、

メインループの $post から post_content を抽出した後、
phpで文字処理を行います。

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

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

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

各行の解説

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

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

複数のループが存在するページの場合は(topページなど)、
その為の分岐を書いてあげれば問題ないでしょう。

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

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

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

まとめ

Twitterカードを設定しているかどうかで、拡散された時の印象は大きく変わってきます。
ぜひ試してみてください!