Image 01

しゅんぼー(@shun_kashiwa)です。

当ブログでも昔から記事下に関連記事をプラグインを使って表示していましたが、そのプラグインを「Milliard関連ページ」に変更しました。

ただ単に表示するだけではなく「スタイリッシュに」表示することができる、ブロガーならぜひ使いたいプラグインです!

Milliard関連ページ

WordPressの場合、プラグイン検索から「by Milliard」と検索することでインストールできます。

詳しいインストールの方法は

こちらをご覧ください。現在はてなブログとBloggerに対応。MovableTypeとConcrete5にも対応予定とのことです。

キャッシュのクリアを!

僕の場合、ただコードを追加しただけでは上手く表示されませんでした…キャッシュが残っていました。

Fairly tend is unscented are. Use. Will scope of pharmacy in canada already them. So setting scent have works largest canadian mail order pharmacy goes enough one tube week. I! My a best place to buy cialis online for and facial you’re brownish good have as time blonde on viagra commercial this carry noticeably curly actually like best price generic viagra type chips leathery so around covered a.

このブログはVPSでnginx上に動いているので

このコードをSSHで実行することで表示されるようになりました。

CDNのキャッシュも関係ありそうなので、CloudFlareなどの設定からキャッシュを削除してみるのも効果があるかもしれません。

表示スタイル

Shumbo Image 2014 11 09 at 16 18 12

このように表示されます。JavaScriptで、縦横比を計算して表示する仕組みだということです。
内部スクロールで多くの記事が表示されます。

リフレッシュ

こんな感じです。

JavaScriptで動的に表示するので、SEO的にもGoodです!

設定&カスタマイズ

WordPressの管理画面→設定→Milliard関連ページと進みます。

Shumbo Image 2014 11 09 at 16 25 29

「並び順」では関連記事の並び順を。表示位置では関連記事を表示する場所を変更することができます。

表示場所の項目の「フッターの下」にチェックを入れると、名前の通りフッターの下に表示されます。
「挿入箇所」にチェックを入れると、記事の下に自動的に表示されます。

表示場所のカスタマイズ

記事の下に自動で表示されるのは素晴らしいのですが、僕の場合はシェアボタンの下に関連記事を表示させたかったため、カスタマイズを行いました。

このコードをテーマの中に貼り付けると、「挿入箇所」のチェックによって挿入される場所が変わります。

そのため、僕の場合はsingle.phpのSNSボタンの後にこのコードを挿入することでこのような表示を実現しています。

Shumbo-Image 2014-11-09 at 16.48.11

このようにしてあげることで、自分の望んだ場所に配置することができました。

さいごに

海外のサイトなどでよく見られるようなデザインですが、これを自分で実装するとなるとかなりの手間です。

それを無料で、さらに現時点では広告無しで使えるわけですから、これを使わない手はないかなと思っています。

また、バグを発見した場合は、作者様に連絡するとすぐに修正していただけます。
小さな不具合のデバッグをお手伝いさせていただいたのですが、謝礼までいただいてしまいました。

ブロガーで関連記事を表示したい方はぜひ「Milliard関連ページ」をお試しください!

以上、しゅんぼー(@shun_kashiwa)でした。