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

WordPress でプラグインに頼らず Twitter カードに対応するよ!
自分で WordPress のテーマを作ってる人 And パフォーマンスを求める人向けです。

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

手順

テーマのヘッダーを記述しているファイル(header.php って言うファイル名にしてる人が多いのかな?)の head タグの中に下記のコードを入力します。
他の meta タグの傍に配置すると良いと思います。

<?php if(is_single()) : ?>
<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 アカウント のフォローをお願いします!
ブログの更新くらいしかツイートしない可能性がめちゃくちゃ高いですが、そこをなんとか!