SANGOのTwitterカードを小サイズに変更したい:OGP設定カスタマイズ

WordPressテーマ「SANGO」は、OGP設定済み。headタグ内をごにょごにょしないですむからありがたい。

が、Twitterカードのサイズが変更できない。 カスタマイザーからも変更不可。大きいサムネイル(Summary with Large Image)に固定されちゃってる。

Q.小さいサイズのTwitterカードに設定するにはどうすればいいの?

というカスタマイズのメモ。やり方が合っているかはわからない。もしこのページを見てコードいじる人は、バックアップを忘れず、お気をつけてどうぞ(自己責任って言われるとドキッとしちゃうよね)。

SANGOのTwitterカードを小サイズに変更する

子テーマからの変更方法がよくわからなかったので、直で親テーマをいじる。

※子テーマにfunctions系ファイルを複製しても反映させることはできない。他のやり方はあるっぽいけど面倒。「書き換える部分が多いのであれば(中略)親テーマを直接編集してしまうか・・・ですね」とサルワカさん(参考:【SANGO】functions系のファイルを子テーマに複製しても反映されない)。

1.SANGO親テーマの「head.php (library/functions/head.php)」を開く

「外観」→「テーマエディター」

右上の「編集するテーマを選択」プルダウンから「SANGO」を選んで「選択」を押す

右側サイドバーのテーマファイル、「library ▶」を開く→「functions」→「head.php」

2.201行目「summary_large_image」を「summary」に変更

「head.php」の該当箇所はこんな感じ。

  // 出力するOGPタグをまとめる
  $insert .= '<meta property="og:title" content="' . esc_attr($ogp_title) . '" />' . "\n";
  $insert .= '<meta property="og:description" content="' . esc_attr($ogp_descr) . '" />' . "\n";
  $insert .= '<meta property="og:type" content="' . $ogp_type . '" />' . "\n";
  $insert .= '<meta property="og:url" content="' . esc_url($ogp_url) . '" />' . "\n";
  $insert .= '<meta property="og:image" content="' . esc_url($ogp_img) . '" />' . "\n";
  $insert .= '<meta name="thumbnail" content="' . esc_url($ogp_img) . '" />' . "\n";
  $insert .= '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '" />' . "\n";
  $insert .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";

これの一番下、 「summary_large_image」を「summary」に変更 する。

3.「ファイルを更新」を押して完了

ポチっとな! で、しばし待つ。

自動反映には少しタイムラグがあるよ

変更できているかすぐに確認したいときには、Card Validatorを使う。

Card Validator | Twitter Developers

こちらにURLを入力してプレビューすれば、すぐに反映されるらしい。便利。ありがたい。

カードの種類はお好みで(私の好みは小サイズ)

大きいサイズのTwitterカードの方が目立つし、押しやすいし、クリック率も高いのかな?

しかし、立派なサムネイルを設定しない当ブログの雑魚記事には小サイズのTwitterカードで充分なのである。

参考リンク