WordPressで「Similar Posts」のサムネイルを正しい比率で表示させる方法

WordPressでプラグイン「Similar Posts」を導入してます。

横長の画像を正方形のサムネイルで表示させると、
縦横の比率が曲がってしまい、
画像が歪んでしまいます。

それを回避する方法です。

Simlarpost画像

いらっしゃいませ、番台さんです。

WordPressで、プラグイン「Similar Posts」を使っていますが、
画像の縦横比率がおかしくて、ずっと気になっていました。

ようやく正しい比率に変更できたので、備忘録としてアップします。

テンプレートタグ「get_the_post_thumbnail」を使う

「Similar Posts」には、
記事上に関連記事を表示させるための制御タグが、オリジナルで用意されています。

「Similar Posts」の設定画面を開き、
「Output Settings」を選ぶと、
右側に、使用可能なタグが並んでいると思います。

Similar Posts タグ

サムネイル画像を表示させたい場合は、

{image}
{imagealt}
{imagesrc}

といったタグを使います。

これを、
「Similar Posts」の設定画面にある、
「Output Settings」で、

Output template:

という欄に記入するわけですが、
これらのタグを使い、横長の画像を正方形のサムネイルで表示させた場合、
画像の縦横比率がおかしくなります。

横長の画像の全部を無理矢理に、指定した正方形のサイズに収めようとするので、
画像が歪んでしまうわけです。

それを回避するには、Wordpressのテンプレートタグ、

get_the_post_thumbnail

を使います。

サイズを指定できるし、トリミングしてくれる

WordPressのテンプレートタグ、

get_the_post_thumbnail

を使えば、サイズの指定も簡単ですし、
なによりも、指定したサイズにあわせて画像を切り抜いて(トリミングして)くれるので、
縦横比率が歪みません。

このサイトで表示される、オススメ関連記事のサムネイル部分はこうやっています。

{php: echo get_the_post_thumbnail({postid}, array(70,70)); }

この書き方は「Similar Posts」独特の書き方のようです。

まず、冒頭にPHPであることを記述します。

そして、echo関数を指定。
その後に、Wordpressのテンプレートタグ「get_the_post_thumbnail」を書きます。

後に続く、()の中は、WordPressテンプレートタグのルールに従って、
ポストidと、表示するサムネイル画像の大きさを記述しますが、
ポストidには、「Similar Posts」のオリジナルタグである
「{postid}」を使用します。

あとは、この周りをHTMLやCSSで装飾してあげれば、
この記事の下の方に表示される

「この記事を見た人には、こんな記事もオススメ:」

のようになります。

出来上がり完成図です。
Similar Post修正画像

サムネイル画像の元画像は横長の画像ですが、
その画像の中心あたりがいい感じで正方形に切り抜かれています。

満足満足。

書いたコードはこのようになっています。
CSSは分けずに一緒に書いてしまっています。その方が管理が楽なので。

書いたコード
注:コードをサイトに表示させる方法がうまくいかなかったので、
画像で掲載します。ごめんなさい。

お役に立てたら幸いです。

2012.6.9追記:
「Popular Posts」も同様の方法で画像比率が正しくなります。

【参考サイト】
ウェビメモ
関連記事のプラグインSimilar Postsでサムネイル表示がうまくいく方法

buslog
WordPressの関連記事に、Similar Postsプラグインを使ってサムネイルと概要を表示する

スポンサー リンク

このページの先頭へ