Taka's Life

Mac、iPhoneを中心としたTAKAの雑記帳

今日の人気記事

WordPressプラグインの「YARPP」で関連記事を「LinkWithin」風にカスタマイズし表示してみた

      2015/02/15

スクリーンショット 2013 08 22 22 24 44

たか(@TakasLife)です。
今まで、記事下にzenbackと言うサービスを使って「関連記事」を表示していました。ただ、いつからかサムネイルがうまく表示されなくなり代わりになる物はないかと探していた時に「YARPP」というWordPressのプラグインを使って表示でき、更にSEO的にも良いということを目にしたので早速導入してみました。

スポンサーリンク

「Auto Post Thumnail」を先に有効化が必要

今回参考にさせていただいた記事はこちら。

新しい記事も過去の記事も全部自動でアイキャッチを作成してくれるAuto Post Thumbnail | ごりゅご.com

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

WordPressプラグイン「YARPP」と「Auto Post Thumbnail」を使用して関連記事を表示するのにようやく成功した | OZPAの表4
「Auto Post Thumnail」 …

先ずは、@goryugoさんの記事を参考に「Auto Post Thumbnail」と言うWordPressプラグインを有効化します。

その後「Yet Another Related Posts Plugin(YARPP)」ダウンロードし、@goryugoさんの記事を参考に自作テンプレートを使用する設定して下さい。

YARPPのテンプレート作成

LinkWithin風に表示するためにはphpとCSSファイルを作成します。
ちなみに私は、@OZPAさんのコードをほぼコピペさせてもらいました。それでもちょっとうまく表示されなかったので少しいじってます。

php

CSS

私の場合、アイキャッチが横長で縦方向にが短いものとかもありこんな感じに表示がずれてしまっていました。

スクリーンショット 2013 08 22 22 24 12  mini

そのために「related-entry-thumbnail 」と言うクラスでサムネイルを囲って調整してみました。

後は、関連記事を表示したい場所に

を記入します。

そうすると、こんな感じに表示されました。

スクリーンショット 2013 08 22 22 24 44

まとめ

zenbackやLinkWithinもとても良いサービスなのですがJavascriptで関連記事を表示させています。YARPPを使えばHTMLソースを吐き出してくれるのでSEO的にも有効みたいです。正直、よく分かってませんw。ただ同じような見た目であれば、少しでも何かプラスになれば良いなぁと思い設置してみました。

 - プラグイン ,

スポンサーリンク

  関連記事