プラグイン

【Plugin】YARPPで表示した関連記事をLinkWithin風にする方法

投稿日:2012.08.28 更新日:

LinkWithin-yarpp-1

WordPressで関連記事を表示してくれる、有名な舌を噛みそうな名前のプラグイン「Yet Another Related Posts Plugin(YARPP)」をブログ開始時より使用してきました。
理由としては自由度が高い点で、カテゴリーやタグ等でスコアの検討ができるところです。 

最近になってよく見かける、関連記事をサムネイル付きで表示するブログパーツ「LinkWithin」に少々憧れていましたが、自由度が低そうなので、YARPPをカスタマイズしてサムネイル表示すればいいのではないかと、調べてますとごりゅご.comさんのページを発見! 
参考にさせて頂きました。

スポンサーリンク

カスタマイズ 

ここでは、YARPPはインストール済みと仮定して始めます。

テンプレートの作成

まずは、テンプレートを作成します。
方法としては、wp-content/plunins/yet-another-related-posts-plugin/yarpp-templatesよりサンプルのテンプレートをコピーしてカスタマイズする方法と、一から自作する方法です。

最終的には、作ったテンプレートをwp-content/themes/使用しているテーマフォルダに入れます。
この際に、テンプレートの名前は必ず「yarpp-template-任意の名前.php 」にしないと読み込みませんので要注意です!

今回は「yarpp-template-linkwithin.php」という名前にしました。

アイキャッチを使用してもいいのですが、折角なので「プラグインを使用せずにトップページをflickrとアイキャッチの画像表示にする方法」で使用しましたfunctions.phpと連動させてみたいと思います。

<?php
//最初の画像を取得
  function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

    if(empty($first_img)){ //Defines a default image
        $first_img = "画像がない場合の指定画像";
    }
 return $first_img;
 }
?>

 

<div class="related">
  <?php if (have_posts()):?>
    <h2>関連記事もあわせてどうぞ</h2>
    <ul>
	<?php while (have_posts()): the_post(); ?>
          <li>
            <a href="<?php the_permalink(); ?>">
              <img alt="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>"   height="110px" /><?php the_title(); ?></a>
          </li>
	<?php endwhile; ?>
    </ul>
  <?php endif; ?>
</div>

 

.related {
    clear:both;
    margin:30px 0 10px 0;
    padding:0;
}
.related ul{
    margin-left: 10px ;
    list-style:none ;
    overflow:hidden;
    display: block ; 
}

.related li a{
    margin: 5px 2px ;
    padding: 5px ;
    display: block ;
    font-size: 12px ;
    color: #665e53 ; 
    text-decoration: none ;
    width: 120px;
    height: 240px;
    line-height: normal ;
    float:left; 
}
.related li a img {
    padding:3px;
    border:solid 1px #ccc;
}
.related li a:hover{
    color: #fff ;
    background-color: #665e53 ;
    border-radius: 5px;         /* CSS3 */
   -moz-border-radius: 5px;    /* Firefox */
   -webkit-border-radius: 5px; /* Safari,Chrome */
}

 

テンプレートの適用

 WordPressの管理画面より、設定→関連記事(YARPP)を選択します。

yarpp-setting

次に、テンプレートを使って表示にチェックを入れ、作成したテンプレートを選択します。

check-yarpp

以上が適用方法です。

まとめ

見栄えも良くなりました!
自己評価ですが…

今回は、 画像取得に「プラグインを使用せずにトップページをflickrとアイキャッチの画像表示にする方法」で使用しましたコードを使っていますが、アイキャッチを使う方法等もありますので、いろいろと試しみてはいかがですか。

via : 関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする | ごりゅご.com

おすすめ記事

いいね!をクリックすると
きになるnet 最新情報を
お届けします!

是非お試し下さい

Twitterでフォローしてみませんか?

  • この記事を書いた人

ごーじぃ

iPhone・Mac・WordPress・食べ物…が、気になる年頃です。

-プラグイン
-

注目キーワード

Copyright© きになるnet - きになるものを綴ったブログ , 2018 All Rights Reserved.