大東 信仁（ものくろ） 
関連記事を自動で表示してくれる素晴らしいプラグイン「Similar Posts」。こちらの記事「関連記事を表示する。Similar Posts プラグイン -WordPress-」の手順で無事に当サイトにも導入できた。
この出力される関連記事リストに、サムネイル画像を表示する設定をした。アイキャッチ画像を使う方法が多いようだ。しかし、使っているzBenchテーマだと、アイキャッチが使い勝手が悪い。（テーマのCSSを書き換えると、便利に使えると思う。）記事の初めに画像を入れているので、それをサムネイル画像として表示する設定を行った。意外と手こずったので、この方法の覚え書き。
Output Settingsの設定
サムネイル画像を表示するには、Similar Postsの「設定」ー「Output Setting」にて設定する。サムネイル画像の設定の前に、先に同じ設定画面にある2つの項目を設定する。設定は下の図の通り。
Default display if no matches:（関連記事が見つからない時の表示は？）
初期設定は英語で書かれているので、「関連記事が見つかりませんでした。」に変更した。
Show nothing if no matches?（関連記事が見つからない時は何も表示しないか、上のメッセージを表示するか？）
「Yes」を設定した。
ここで一度、”Save Output Settings“をクリックし、変更を確定しておく。
サムネイル画像を表示させる設定
参考にさせてもらったサイト：
”Output template:”（出力テンプレート）
サムネイル画像を出力リストに加える設定をおこなう。設定は下の図のとおり、
”Output template:”（出力テンプレート）にて行う。
まずは画像出力 ｛image｝タグを試す
ここの”Output template:”に出力するHTMLコードを指定すればいい。
<li>
{image}{link}
</li>
試しに、{image}タグを使うと、予想通り記事先頭画像が表示された。ただ、画像は表示されたが、元画像の大きさがばらばら、しかも大きすぎる。これでは使い物にならならい。下の図がそれだ。むちゃくちゃ。（関連記事のリストでないなら、デザインのオブジェクトとして面白いかもしれない。）
画像のサイズをそろえる。{imagesrc}タグ
画像のサイズを同じにすればいいはずだ。｛image｝タグに画像サイズを指定することにした。｛image｝タグは便利だが、画像サイズを指定するの苦手な様子だった。別タグ{imagesrc}を使った。
<li>
<img src={imagesrc} width=”60″height=”60″></a>
{link}
</li>
画像サイズがそろった！。リスト表示が見にくいが、画像表示はできた。後は配置を調節すれば良い。
スタイルシートで整形
スタイルシートで配置を指定した。今回は保守しやすいように、コードにスタイルシートを含めた。
作成したHTMLコードは以下のとおり。このコードはそのままサイトのおすすめ記事の表示に使っている。
<div style=”height:60px;width:70px;border:0px;padding:2px ;float:left;margin:0px 10px 5px 10px;”>
<img style=”max-height: 60px ;max-width: 60px;margin:0 0 0 0; padding:0 0 0 0;” src={imagesrc}>
</div><div style=”height:60px;border:0px;padding:2px ;margin:0px 10px 5px 10px;”>
<div style=”padding:0px 0 0 0;”>
{link}
</div>
{date}
</div>
コード中のスタイルシートについて、詳しい説明はこちらの「Similar Posts ”Output template:”（出力テンプレート）HTML CSS (スタイルシート)コード設定」にまとめた。参照してほしい。ここでは完成したコードとその設定方法についての説明とする。
上のコードだと、初期設定で使用しているリストを使わない。そのため下の2項目に書いてあった、<ul>・</ul>タグを削除する。
- Text and codes before the list:
- Text and codes after the list:
以上で設定は完了だ。”Save Output Settings“をクリックし、変更を確定する。
完成 綺麗に並んだ
できあがった関連記事の表示は下の図になる。綺麗にならんでいなのは、元画像の縦横比が原因、縮小サイズを60pxにしているので、これからは縦横比が同じ画像を使うようにすれば綺麗に並ぶだろう。
これでも実用上は大丈夫なレベルと判断した。ここまでの設定に詰めるのでもかなりの時間がかかっている。さらに時間をかけると良くなるだろう。しかし、それほど機能的には変わらないだろう。そのことを考えここでまずは完成とした。
補足
{image}タグはアイキャッチ画像を表示してくれない。アイキャッチ画像を表示する場合は下のコードを使う。
{php: echo get_the_post_thumbnail({postid}, array(70,70)); }
ここで使っているのは、get_the_post_thumbnailタグ。これを使うときはphpコードの書き方になる。{postid}で記事番号を参照し、アイキャッチ画像を取得する。array(70,70)は画像サイズを指示している。ここでは70px。
画像サイズが指定できるなら上のコードより、こちらの方が良い。ところがこの書き方だと記事本体にある画像は取得してくれなかった。アイキャッチ画像をサムネイル画像にする場合に使えるコード。このタグの使い分けを間違うと、画像が表示されないトラブルになってしまうので注意が必要だ。
