WordPressのプラグインYARPPでサムネイル付きの関連記事を表示させる

Posted on

Sponsored Link

WordPressYARPP

今こんな感じで表示させています。

僕の場合は関連記事を表示させてたことで、PV/UUが1.2→1.7ぐらいまで上がったし、関連したリンクがページ内にあることで検索エンジンにも優しい感じになると思います。

あと、やっぱりサムネイル付きのほうがいいのでいろいろ調べてやってみました。


参考エントリー
関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする | ごりゅご.com

リンク先からやり方が若干変わってます。

まずはプラグインをインストールしましょう。
Yet Another Related Posts Plugin for WordPress

インストールしたら設定からYARPPを選択
WordPress設定

関連スコアの設定はお好みで。

表示設定します。
一度に表示する数を設定してphpカスタム、yarpp-template-example.phpを選択します
YARPP設定

次にテーマ編集(プラグイン編集でなく)に移動します。
YARPPをインストールすると右側に項目ができます。
yarpp-template-example.phpを選択しましょう。

WordPressテーマ編集

この中を書き換えます
僕は画像を使ってないページが多いので、Auto Post Thumbnailを使ってもサムネイルができないページがほとんどです。
なのでごりゅご.comのソースからサムネイルがない場合の処理を付け加えました。

<?php if(have_posts()):?>
   <h3>関連記事タイトル</h3>
     <div class="related-post">
     <?php while(have_posts()) : the_post(); ?>
          <?php if(has_post_thumbnail()):?>
               <div class="related-entry"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("thumbnail"); ?><?php the_title(); ?></a></div>
<?php else: // サムネイルを持っていないとき ?>
 <div class="related-entry"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><img src="サムネが無い時の画像のURL" alt="no image" title="no image"/><?php the_title(); ?></a></div>
          <?php endif; ?>
     <?php endwhile; ?>
     </div>
<?php else: ?>
<p>no related post</p>
<?php endif; ?>

あとはCSS。
スマートフォン用と2つつくるのがめんどくさかったので横幅を310にしてますがお好みで調整してください。

.related-post{
     height:100%;
}
.related-post{
     width:310px;
     overflow:hidden;
     margin-top:5px;
}
.related-entry {
    vertical-align: top;
    float: left;
    width:100px;
    font-size: 13px;
    min-height: 235px;
    margin: 0;
    padding-right: 3px;
    line-height:1.5em;
    }
 
 .related-entry img{
      padding:2px;
      border: #ccc 1px solid;
      width:90px;
      height:90px;
}

.related{
      margin-top:20px;
}

YARPPを好きな位置に設置したい時は、YARPP設定から自動表示のチェックを外します。
YARPP自動表示

自動表示をオフにしたら

<?php related_posts(); ?>

を挿入した場所に関連記事が表示されます。




SHARE:)
このエントリーをはてなブックマークに追加 LINEで送る
Yahoo!ブックマークに登録

 
rss feed follow us in feedly Subscribe with livedoor Reader


コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>