Similar Postsをカスタマイズ!関連記事を画像付きで表示する方法

ワードプレスで記事下の関連記事を表示するプラグイン『Similar Posts

今回はその関連記事をアイキャッチ画像付きで表示する方法について説明していきます。

 

関連記事をテキストだけで表示するのと、アイキャッチ画像付きで表示するのとでは

直帰率が下がり滞在時間も伸びますし、また見栄えも良くなりますので、

トレンドブログなどに取り入れていきましょう。

 

それぞれの記事でアイキャッチ画像を取得していない場合、

またはいちいち記事ごとにアイキャッチ画像を設定している場合は

Auto Post Thumbnail』というプラグインを入れておきましょう。

ワードプレスの自動でアイキャッチ画像を取得するプラグイン

 

プラグインのインストールと関連記事表示

まずは『post-plugin library』と『Similar Posts』の2つを

インストールして有効化します。

 

手順はワードプレスの管理画面から【プラグイン】⇒【新規追加】

検索窓で上の2つの名前を1つずつ入力してそれぞれインストールし、

有効化してください。

 

記事下に関連記事を表示させるためには以下のコードを

single.phpの表示したい場所に入力します。

<?php similar_posts(); ?>

 

Similar Postsの設定

【設定】⇒【Similar Posts】⇒【Output】をクリックしてください。

 

【Output template】に下記のコードを入力してください。


<div class="similar_posts">
<a href="{url}">
{php: echo get_the_post_thumbnail( {postid}, array(80,80), array('title' => ' {title}' )); }</a>
<div class="similar_posts_title">
<a href="{url}">{title} </a></div>
<p class="similar_posts_snippet">{snippet:60}…</p>
</div>
<div style="clear: both"></div>

 

ちなみに以下の部分で、画像の大きさや抜粋文字数を変更することができます。

1.array(80,80)・・・表示する画像のサイズ

2.{snippet:60}・・・本文出だしの抜粋文字数

 

入力し終わったら【Save Output Settings】をクリックします。

 

style.cssへの必要コード追加

次にテーマ編集からスタイルシート(style.css)を選択し、

下記のコードを追加してください。

.wp-post-imageは既にある場合はそれ以外のコードを追加してください。


.wp-post-image {
        border:solid 1px #ccc;
        padding: 4px;
        float: left;
        margin-right: 5px;
}
.similar_posts {
        padding: 3px;
        margin-top: 3px;
        margin-left: 0px;
}
.similar_posts_title {
        margin:2px;
        font-size: 14px; /* テキストリンクのサイズ */
}
.similar_posts_snippet {
        margin:2px auto;
        font-size: 12px; /* 抜粋文字のサイズ */
        color: #0f0f0f; /* 抜粋文字の色 */
}

以上で関連記事にアイキャッチ画像が表示されます。

 

スマートフォンにも関連記事を画像付きで表示

次にスマートフォンでも同じように関連記事をアイキャッチ画像付きで

表示する方法について説明していきます。

 

ワードプレスをスマートフォン対応にするためのプラグイン『wptouch』は

インストールしておいてください。

 

single.phpへの必要コード追加

ではまず、以下のファイルをデスクトップ上にコピーして保存して開きます。

public_html/wp-content/plugins/wptouch/themes/作成したフォルダ/single.php

 

single.phpを開くと59行目あたりから下記のコードのようになっています。


			<li><a  href="http://del.icio.us/post?url=<?php echo get_permalink()
?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/delicious.jpg" alt="" /> <?php _e( "Del.icio.us", "wptouch" ); ?></a></li>
			<li><a href="http://digg.com/submit?phase=2&url=<?php echo get_permalink()
?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/digg.jpg" alt="" /> <?php _e( "Digg", "wptouch" ); ?></a></li>
			<li><a href="http://technorati.com/faves?add=<?php the_permalink() ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/technorati.jpg" alt="" /> <?php _e( "Technorati", "wptouch" ); ?></a></li>
			<li><a href="http://ma.gnolia.com/bookmarklet/add?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/magnolia.jpg" alt="" /> <?php _e( "Magnolia", "wptouch" ); ?></a></li>
			<li><a href="http://www.newsvine.com/_wine/save?popoff=0&u=<?php echo get_permalink() ?>&h=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/newsvine.jpg" target="_blank"> <?php _e( "Newsvine", "wptouch" ); ?></a></li>
			<li class="noborder"><a href="http://reddit.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/reddit.jpg" alt="" /> <?php _e( "Reddit", "wptouch" ); ?></a></li>
		</ul>
	</div>
<!-- Let's rock the comments -->
<?php if ( bnc_can_show_comments() ) : ?>
	<?php comments_template(); ?>
<script type="text/javascript">

 

関連記事を記事下に表示するために、68行目あたり</div>の下に、

こちらの関連記事を表示するコードを追加してください。

<?php similar_posts(); ?>

			<li><a  href="http://del.icio.us/post?url=<?php echo get_permalink()
?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/delicious.jpg" alt="" /> <?php _e( "Del.icio.us", "wptouch" ); ?></a></li>
			<li><a href="http://digg.com/submit?phase=2&url=<?php echo get_permalink()
?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/digg.jpg" alt="" /> <?php _e( "Digg", "wptouch" ); ?></a></li>
			<li><a href="http://technorati.com/faves?add=<?php the_permalink() ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/technorati.jpg" alt="" /> <?php _e( "Technorati", "wptouch" ); ?></a></li>
			<li><a href="http://ma.gnolia.com/bookmarklet/add?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/magnolia.jpg" alt="" /> <?php _e( "Magnolia", "wptouch" ); ?></a></li>
			<li><a href="http://www.newsvine.com/_wine/save?popoff=0&u=<?php echo get_permalink() ?>&h=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/newsvine.jpg" target="_blank"> <?php _e( "Newsvine", "wptouch" ); ?></a></li>
			<li class="noborder"><a href="http://reddit.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>" target="_blank"><img src="<?php echo compat_get_plugin_url( 'wptouch' ); ?>/themes/core/core-images/bookmarks/reddit.jpg" alt="" /> <?php _e( "Reddit", "wptouch" ); ?></a></li>
		</ul>
	</div>
<?php similar_posts(); ?>
<!-- Let's rock the comments -->
<?php if ( bnc_can_show_comments() ) : ?>
	<?php comments_template(); ?>
<script type="text/javascript">

 

style.cssへの必要コード追加

次に、以下のファイルをデスクトップ上にコピーして保存して開きます。

public_html/wp-content/plugins/wptouch/themes/作成したフォルダ/style.css

 

そのファイルの一番下に下記のコードを追加してください。


.wp-post-image {
        border:solid 1px #ccc;
        padding: 4px;
        float: left;
        margin-right: 5px;
/*      vertical-align: text-top; */
}
.similar_posts {
        padding: 3px;
        margin-top: 3px;
        margin-left: 0px;
}
.similar_posts_title {
        margin:2px;
        font-size: 14px; /* テキストリンクのサイズ */
}
.similar_posts_snippet {
        margin:2px auto;
        font-size: 10px; /* 抜粋文字のサイズ */
        color: #0f0f0f; /* 抜粋文字の色 */
}

以上で、スマートフォン記事下に関連記事をアイキャッチ画像付きで

表示する方法の説明は終わりです。

 

ここまで完了したら一度スマートフォンで関連記事が画像付きで

表示されているのか確認してみましょう。

 

確認した際に、下記の画像のように関連記事で表示したアイキャッチ画像が

大きく表示されている場合があると思います。

 

これは、ワードプレス管理画面から【設定】⇒【similar posts】⇒【Output】

で先ほど入力したコード内の画像サイズがwptouchでは反映されずに、

【設定】⇒【メディア】のサムネイルサイズがそのまま反映されているのです。

 

なので、スマートフォンの関連記事の画像サイズを小さくするためには、

ワードプレス管理画面から【設定】⇒【メディア】のサムネイルサイズを

小さく変更するといいです。

 

関連記事のアイキャッチ画像を小さく変更

手順は、ワードプレス管理画面から【設定】⇒【メディア】

サムネイルサイズを幅100 高さ100など小さい数字に変更し

【変更を保存】をクリックしてください。

 

終わりに

以上でSimilar Postsをカスタマイズして、関連記事をアイキャッチ画像付きで

表示する方法の説明は終わりです。

 

抜粋文字数や画像のサイズなどは自分の好みに変更して、ブログの見栄えを良くし、

滞在時間や直帰率の改善をしていきましょう。

 

追記

関連記事の画像が枠からはみ出してしまう場合は、スタイルシートに

加えたコードの下記の4行目の数字を変更しましょう。


.similar_posts {
        padding: 3px;
        margin-top: 3px;
        margin-left: 0px;
}

『margin-left』の数字を大きく(50px;など)すれば右

小さく(-50px;など)すれば左に移動します。

2 件のコメント

  • お忙しい中恐れいります。こちらの記事が大変参考になり、是非自サイトにて紹介させて頂きたいと思いました。

    また一点だけ質問させて頂きたいのですが、

    <a href=”{url}” rel=”nofollow”>
    {php: echo get_the_post_thumbnail( {postid}, array(80,80), array(‘title’ =&gt; ‘ {title}’ )); }</a>

    <a href=”{url}” rel=”nofollow”>{title} </a>
    {snippet:60}…

    のコードですと記事のアイキャッチ画像からサムネイルを取得する設定になっていると思います。これを「記事にアップされた一枚目の画像から取得」するにはどうすればいいでしょうか・・?

    <a href=”{url}” rel=”nofollow”>

    というような表記を使ってみたのですが、少し表示が崩れてしまいうまく動作しませんでした。教えて頂けると大変有難いです。

    • たにしさん
      コメントありがとうございます。

      >「記事にアップされた一枚目の画像から取得」するにはどうすればいいでしょうか・・?

      Auto Post Thumbnailというプラグインを使用すれば
      自動で記事の一枚目の画像をアイキャッチとして取得して
      サムネイル画像を表示してくれますよ。

      もし、過去の記事のアイキャッチ画像もすべて一枚目の画像に
      変換したい場合はサムネイル画像を再生成するプラグインの
      Regenerate Thumbnailsを使用するといいです。

      また、関連記事などの以外部分でアイキャッチを表示させるのであれば

      <?php the_post_thumbnail( array(150,150) ); ?>

      こちらのコードを使用するといいです。

      回答になっていれば幸いです。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です