2013.02.25
wordpress

Similar Postsの設置方法 サムネイルを表示

WPのプラグイン、Similar Postsについてです。
プラグイン自体の設置方法はこちらに書きました。
今回はこの続きとして書きます。

Similar Postsで画像やサムネイルを表示させる方法です。

私が細々と運営しているサイト、Ri-mode PhotosではSimilar Postsで画像を表示して使っています。

設定方法

設定するにはダッシュボード⇒設定⇒Similar Postsで設定画面へ。
そしてOutput Settingsで設定します。

Text and codes before the list:
・・・Similar Postsでリストする前に記述するテキストやコードを書く部分。
Output template:
・・・今回はこの部分に画像を表示をするコードを記述します。
Text and codes after the list:
・・・Simiar Postsのリストの後に記述するテキストやコードを入力する部分。

デフォルトではHTMLにすると下記のようになっています。

<ul>・・・1
<li>{link}</li>・・・2
</ul>・・・3

この②の部分、つまりOutput templateの部分に画像を表示するためのコードを記述すれば良いのです。

画像を表示する方法は2つあります。

1.該当する記事で投稿した1番目の画像をSimilar Postsで表示する方法

2.該当する記事で設定したアイキャッチ画像をSimilar Postsで表示する方法

1の方法

Output templateに下記のように記述します。

<li>
  <a href="{url}"><img src="{imagesrc}" width="120" height="70"/></a>
</li>

widthとheightはピクセルでお好きに変更できます。

2の方法

Output templateに下記のように記述します。

<li>
  <a href="{url}">{php: echo get_the_post_thumbnail({postid}); }</a>
</li>

Similar Postsでphpを使うときは{php:で開始、}で閉じるという仕様のようです。

また、サムネイルのサイズを好きなサイズに変更したい場合は下記のように記述します。

<li>
  <a href="{url}">{php: echo get_the_post_thumbnail({postid}, array(120,70,true)); }</a>
</li>

array(width,height,crop)なので、上の記述だと幅120px、高さ70pxの大きさで、切り抜くというようになります。

function.phpで作ったサムネイルを使う方法

ちなみにRi-mode Photosではテンプレートのfunctions.phpでミニサイズのサムネイルを追加し、それをSimilar Postsで表示しています。

functions.phpに下記を記述。

<?php
add_image_size( 'mini', 120, 70, true );
?>

これでminiという(widthが120px、heightが70pxで切り抜く)サムネイルが追加されます。

そしてSimilar PostのOutput templateに下記のように記述。

<li>
  <a href="{url}">{php: echo get_the_post_thumbnail({postid},mini); }</a>
</li>

そうすると同じようにサムネイルが表示されます。ul、liの部分をCSSでカスタマイズすれば思い通りに設置できるかと思います。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP