【WordPress】プラグインに頼らずTwitterカードに対応する

WordPress でプラグインに頼らず Twitter カードに対応するよ！

自分で WordPress のテーマを作ってる人＆個人で運用してる人向けです。

今更ながら、ブログ用の Twitter のアカウントを作りました。ほんと今更ですね！
ブログを Twitter カードに対応してみたので、手順を共有します。

環境

WordPress 5.8.1-ja
PHP 7.4.25

手順書

テーマのヘッダーを記述しているファイル header.php の head タグの中に下記のコードを入力する。
他の meta タグの傍に配置すると良いと思います。

<?php if(is_single()||is_page()) : ?>
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@Twitterのアカウント名" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:description" content="<?php echo get_the_excerpt() ?>" />
<meta property="og:image" content="<?php
    if(has_post_thumbnail( $post->ID )):
        $thumb_id = get_post_thumbnail_id(); 
        $thumb_img = wp_get_attachment_image_src( $thumb_id , 'thumbnail' );
        echo $thumbnail_img[0];
    else:
        echo esc_url( home_url( '記事にアイキャッチが無い場合に使うデフォルトの画像のURL' ) );
    endif;
?>" />
<?php endif; ?>

解説

自分の環境に合わせて変更する必要のある行を解説する。

まず 2 行目。

<meta name="twitter:site" content="@Twitterのアカウント名" />

content 属性の値に Twitter のアカウント名を @ から入力する。

例として、Twitter のアカウント名が example の場合は下記のように入力します。

<meta name="twitter:site" content="@example" />

次に 13 行目。

        echo esc_url( home_url( '記事にアイキャッチが無い場合に使うデフォルトの画像のURL' ) );

home_url 関数の引数に記事にアイキャッチの画像がない場合に使われるデフォルトの画像の URL を入力します。
WordPress の設定にある サイトアドレス に入力されている URL からの続きの URL になるよ。

例として、表示したい画像の保管場所が img\twittercard.png の場合は下記のように入力します。

        echo esc_url( home_url( '\img\twittercard.png' ) );

先頭の \ を忘れないよう注意だ！

サイトアドレス ではなく、WordPress をインストールしている URL（WordPress の設定の WordPress アドレス）から画像の URL を設定したい場合は、home_url 関数を site_url 関数に置き換えればいいよ。

site_url 関数を使う例も載せておきます。

        echo esc_url( site_url( '\img\twittercard.png' ) );

確認

ちゃんと Twitter から認識されているか確認してみよう！

↓の Card URL に記事 URL を貼り付けて Preview card をクリックすると Twiiter 上でどんな感じに表示されるのか確認することができる。

https://cards-dev.twitter.com/validator

カード上部のアカウントの表示の部分は、現在ログインしているアカウントが表示される。
WordPress で設定したアカウントはプレビュー上では無視されるようです。（実際にツイートした際には WordPress で設定したアカウントがちゃんと表示された）

まとめ

パフォーマンスの為になるべくプラグインを導入したくないパフォーマンスラブな人に良いやり方かもです。
ただし、拡張性がない為、複数人で運用しているようなサイトには向かないです。
また、記事と固定ページ以外のページには非対応です。

…そして、もしよければ私の Twitter アカウントのフォローをお願いします！
ブログの更新くらいしかツイートしない可能性がめちゃくちゃ高いですが、そこをなんとか！