WordPressのカテゴリのページ用のTwitter Cardを作成するためのプログラム例

はじめに

直近1年くらいの間に、個室またはセミコンパートメントを持つ列車や船に乗る機会がかなりあり、さらに乗車船記を本Webサイトで公開したので、それらをまとめたカテゴリ(「個室/コンパートメント」)を新規に作りました。

そこで、この記事を書いたときには考慮していなかった「カテゴリのページ用のTwitter Cardを表示させるための設定(またはプログラム)」を考えることにしました。

変更前

設定(またはプログラム)に手を加えることなくTwitter Cardを作ろうとすると…

の赤矢印のような表示となります。

WordPressの管理画面の「一般設定」で設定した内容(↓の画面です。)がそのままTwitter Cardに表示されます。

リンク先もカテゴリ表示用のURLではなく、本WebサイトのトップページのURLとなります。

設定(またはプログラム)例

前節の状況のままではいけないと思いますので、設定(またはプログラム)を行います。

robots.txtの設定の確認及び変更

まず、robots.txtの設定を確認します。

すると、カテゴリ表示に関連する部分の設定が…
User-Agent:* Disallow: /?m= Disallow: /?cat=
となっていました。

カテゴリ表示用のURLはクロールの対象から除外するよう設定していたのを思い出しました。

そこで、今回新たに作成したカテゴリに限りクロールの対象とするように設定することにします。

今回新たに作成したカテゴリのURLは”/?cat=40″ですので、robots.txtの設定を以下のように変更します。

User-Agent:*
Disallow: /?m=
Disallow: /?cat=
Allow: /?cat=40$

4行目を追加しています。

Allowの設定とDisallowの設定の優先順位については[1]に解説されています(ワイルドカードを含まない設定の場合は、パスの長さに基づいて限定的な方の設定が採用されるようです)。

プログラムの変更

次に、Twitter Cardの表示用のmetaタグの設定をカテゴリの表示時には対応するカテゴリ用の設定に切り替えるためのプログラムを追加します。

この記事を書いたときに準備したtwitter-card.phpにカテゴリの表示時に対応するための修正を行います。

カテゴリの表示時に対応するための修正を行ったtwitter-card.php(一部本Webサイト固有の設定になっていた部分については編集しています。)は以下の通りになります。

	<!-- Twitter Card -->
	// サムネイルの設定をランダムに切り替える
	<meta name="twitter:card" content="<?php if (random_int(0,1) == 0) { ?>summary<?php } else { ?>summary_large_image<?php } ?>"/>
	<?php
	if (is_singular()){//投稿・固定ページの場合
	//if(have_posts()): while(have_posts()): the_post();
	echo '<meta name="og:description" content="'.mb_substr(preg_replace('/\n/',"",preg_replace('/(<img.?>\| $Missing superscript or subscript argument$ ]+\])/',"",preg_replace('/<(h2\|del\|script).?>.?<\/(h2\|del\|script)>/', "", mb_substr(preg_replace('/<a.?>(.*?)<\/a>/', "post->post_content),0,300)))),0,100).'"/>';echo "\n";
	//endwhile; endif;
	echo '<meta name="og:title" content="'; the_title(); echo '"/>';echo "\n";//単一記事タイトルを表示
	echo '<meta name="og:url" content="'; the_permalink(); echo '"/>';echo "\n";//単一記事URLを表示
	} else if (is_category()){ //カテゴリ―ページの場合
	echo '<meta name="og:description" content="'. preg_replace('/<p.?>(.?)<\/p>\n?/',"$1",category_description()) .'"/>'; echo "\n";
	echo '<meta name="og:title" content="'. single_cat_title( '', false) . '"/>';echo "\n";//カテゴリー名を表示
	$category = get_category( get_query_var( 'cat' ) );
	echo '<meta name="og:url" content="'. get_category_link( $category->cat_ID ) .'"/>';echo "\n";//カテゴリーのURLを表示
	} else {//単一記事ページ以外の場合（アーカイブページやホームなど）
	echo '<meta name="og:description" content="'; bloginfo('description'); echo '"/>';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
	echo '<meta name="og:title" content="'; bloginfo('name'); echo '"/>';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
	echo '<meta name="og:url" content="'; bloginfo('url'); echo '"/>';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
	}
	post->post_content;
	$searchPattern = '/<img.?src=(["\'])(.+?)\1.?>/i';//投稿にイメージがあるか調べる
	if (is_singular() \|\| is_category()){//投稿・固定・カテゴリページの場合
	if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
	$image_id = get_post_thumbnail_id();
	image_id, 'full');
	image[0];
	echo '<meta name="og:image" content="'.$image[0].'"/>';echo "\n";
	} else if ( preg_match( str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
	imgurl[2];
	echo '<meta name="og:image" content="'.$imgurl[2].'"/>';echo "\n";
	} else {//投稿にサムネイルも画像も無い場合の処理
	$ogp_image = '(イメージファイルへのローカルパス)';
	ogp_image;
	echo '<meta name="og:image" content="'.$ogp_image.'"/>';echo "\n";
	}
	} else {//単一記事ページ以外の場合（アーカイブページやホームなど）
	if (get_header_image()){//ヘッダーイメージがある場合は、ヘッダーイメージを
	$img_url = get_header_image();
	echo '<meta name="og:image" content="'.$img_url.'"/>';echo "\n";

	} else {//ヘッダーイメージがない場合は、テーマのスクリーンショット
	$img_url = get_template_directory_uri().'/screenshot.png';
	echo '<meta name="og:image" content="'.$img_url.'"/>';echo "\n";
	}
	}
	//ドメイン情報を$results[1]に取得する
	preg_match( '/https?:\/\/(.+?)\//i', admin_url(), $results );
	//画像の縦横幅を取得
	list(height) = getimagesize(preg_replace('#^https://(ドメイン)#','(画像ファイルのルートディレクトリ)',$img_url));
	wp_reset_query();
	?>
	<meta name="twitter:domain" content="<?php echo $results[1] ?>"/>
	<meta name="og:image:width" content="<?php echo $width ?>"/>
	<meta name="og:image:height" content="<?php echo $height ?>"/>
	<meta name="twitter:creator" content="@(Twitterのアカウント)"/>
	<meta name="twitter:site" content="@(Twitterのアカウント)"/>
	<!-- /Twitter Card -->

view raw twitter-card.php hosted with

by GitHub

上記のtwitter-card.phpのうち、カテゴリの表示時に対応するために追加または変更した部分は以下の通りです。

11-15行目: og:description, og:title及びog:urlをWordPressの関数を使用して設定しています[2]。og:descriptionについてはcategory_description関数の実行結果(=WordPressの管理画面の「カテゴリーの編集」画面の「説明」に設定された文字列をpタグで囲んだ文字列)からpタグを削除した文字列をセットしています。
23行目: og:imageの設定については通常の記事と同様とするように変更しています。21行目に登場している$post->post_contentの中身が表示の対象となっているカテゴリに属する記事のうちの1つのコンテンツがそのままセットされているようですので、その記事にimgタグがあるとそのimgタグに対応する画像がTwitter Cardの画像として使用されることになります。

変更の反映

robots.txtの変更の反映

robots.txtを変更して保存すればそれで万事OK… と思っていたのですが、Card Validatorで表示させようとしても、

Error: Fetching the page failed because it’s denied by robots.txt.

というエラーが消えてくれず、ちょっと焦りました。

nginx側のTwitterBotからのアクセスと思しきアクセスログをじっと見ていて…

まず、http://… でアクセスする(nginxの設定によりhttps://…にリダイレクトされるはず)。
次に、本命のhttps://…にアクセスする。

とすれば、エラーが早期に解消できるのではないかと思い、試してみました。

反映状況の確認

すると…

エラーが消えて、表示できるようになりました!!

Twitter Cardの表示例

前節の状態に持ち込んだところで、TwitterにカテゴリのURLを貼り付けて投稿してみると…

WordPressのTwitter Card用のコードをちょっと改造してカテゴリーでもTwitterカードを作れるようにしてみました。
個室/セミコンパートメントに乗車/乗船した記事をまとめて新たに作ったカテゴリで正常に動作するかどうか試してみるテスト。#lifeinyokohama https://t.co/LJyvCvTQRy

— pandanote.info (@Pandanote_info) September 19, 2021