WordPressのカテゴリにTwitterCard画像を仕込む

Twitterの固定ツイートを特に用事がなければ同人関係の告知にしているのだけど、現在とらのあなとBOOTHとメロンブックスにバラバラに委託を行っており誘導の仕方に悩んでいる。サイトの同人カテゴリトップが一番まとまっているのでここにつなげたいんだけど、URLだけだと正直押してもらえないな…という印象があり、（固定ツイートは公式関係のツールで見るものということもあり）出来ればTwitterCardを活用したかった。

でも、WordpressだとカテゴリトップにTwitterCardのサムネイル設定ができない。
…ので、カテゴリトップにTwitterCardの画像を仕込んだメモです。
ちなみにプラグイン「Advanced Custom Fields」と「Simplicity2」テーマを利用している前提の方法となります。Simplicity2は基本でTwitterCardを設定できる部分があるので、それ以外のテーマだとやり方が違うと思う。

カテゴリに設定できる項目を増やす

カテゴリーごとに異なるアイキャッチ画像を表示する - 西沢直木のIT講座

カテゴリーごとの投稿を一覧表示するカテゴリーページには、タイトルと投稿一覧は表示されますが、「カテゴリー画像」は表示されないのが一般的です。 そこで、カテゴリーごとに異なる「カテゴ...

www.nishi2002.com

こちらの記事を参考に、「Advanced Custom Fields」を使用してカテゴリー設定用のカスタムフィールドグループを作る。記事内でアイキャッチ画像の返り値設定が「画像オブジェクト」になっているが、TwitterCardの設定で使用したいので「画像URL」に設定。アイキャッチ画像をテーマ内で使用したい場合はimgタグで指定して上げる必要があります。

上記のように設定したフィードグループを作ることによって、作成したカスタムフィールドをカテゴリ編集画面にのみ表示させることができる。カテゴリー編集画面を開くと下の方に先程設定した「アイキャッチ画像」などの項目が増えているので画像を設定する。

TwitterCardにさきほど設定した画像を挿入する

「Simplicity2」だとheader-twitter-card.phpという単独ファイルでTwitterCardの設定をしているのでそちらを編集する（子テーマを作成してそちらへのアップロードを推奨）。普通のテーマだと多分header.phpとかになることが多いのかな（TwitterCardの設定をプラグインでしている場合とかもあると思うのでそのへんは調べてください）

「単一記事ページページ以外の場合（アーカイブページやホームなど）」でファイル内検索をして2件目（twitter:imageの設定をしている部分）の直後に下記のソースコードを挿入する。

} else {//単一記事ページページ以外の場合（アーカイブページやホームなど）   if ( is_category() ) {//カテゴリにサムネが設定されている場合   if(get_post_meta($post->ID, 'カスタムフィールド名',true)) :?>     <meta name="twitter:image" content="<?php the_field('カスタムフィールド名', 'category_' . $cat); ?>">   <?php endif;   } else if ( get_ogp_home_image() ) {     $ogp_image = get_ogp_home_image();   } else { if ( is_header_logo_enable() && get_header_logo_url() ){//ヘッダーロゴがある場合はロゴを使用

フェイスブック用のOGPでも似たような設定を入れないといけないようですがフェイスブックに対応する予定はないので放置。

TwitterCardが表示されているか確認する

twitter公式が「Card validator」という表示確認ツールを出してくれているのでこちらを使いましょう。自分のサイトのURLを入力して、表示されていたら成功です。（暫く時間が経たないと切り替わらない場合もあります。）


これでクリックが上がったかというと正直そんなことは全然ないんですけど、Twitterカード画像の内容とかまだブラッシュアップできる部分はありそうなのでおいおい検証していきたいです。あと同じ流れでタグ一覧のページも弄れそうなので、読書感想ブログの方も含めて色々弄っていきたいな。