最近、ブログ記事の下に、関連記事を表示させる LinkWithin ってのを導入してみました。簡単に導入できますし、画像付きでなんだか恰好良いです。

LinkWithin への登録と表示

LinkWithin を使用するには登録が必要です。以下のアドレスより LinkWithin の登録をします。

LinkWithin - Related Posts with Thumbnails

右下にあるフォームに、以下のように入力するだけで登録が完了します。

Width から表示する記事数を選べます。後で記事数を変更するには、毎回このページで送信しないといけないみたいです。

「Get Widget!」を押した後、WordPress プラグインの案内があるので、それに従ってプラグインをインストールします。

LinkWithin のプラグインを導入したら、有効化して、個別記事を確認して、動作していることを確認します。

手順が少なくて簡単ですね。

好きな場所に表示させる

ここからは、表示させる位置を変更したいという人向けです。関連記事は記事中に挿入されますが、僕は記事の外に置きたかったのです。

まず、関連記事を表示しているページのソースを表示させて、LinkWithin の該当部分を見つけます。そして、id を確認します。僕の場合は、7 桁の数字でした。

var linkwithin_site_id = 1020487;

id を確認したら、この後、重複表示しないように LinkWithin のプラグインを削除しておきます。

そして、記事中の表示させたい位置（個別記事を扱う php ファイル）に以下のコードを貼りつけます。

<div class="linkwithin_hook" id="<?php the_permalink() ?>"></div>
<script>
  <!-- //LinkWithinCodeStart
  var linkwithin_site_id = *******;
  var linkwithin_div_class = "linkwithin_hook";
  var linkwithin_text = "You might also like:";
  //LinkWithinCodeEnd -->
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"
  ><img
    src="http://www.linkwithin.com/pixel.png"
    alt="Related Posts Plugin for WordPress, Blogger..."
    style="border: 0"
/></a>

id は、先ほど確認した数列に修正します。

var linkwithin_site_id = *******;

「関連する記事」「オススメの記事」などのテキストを設定できます。ここを半角スペースにしておくと文字が表示されないように設定できます。

var linkwithin_text = "You might also like:";

さらに、僕はこの LinkWithin を中央寄せに表示させたいので、スタイルシートに以下のコードを加えています。この LinkWithin は、align などで動いてくれないので、左の余白を調整して、中央に寄せています。

.linkwithin_hook {
  padding-left: 12px;
}

こんな感じです。

設定をいじるのには制限がありますが、表示させること自体はとても簡単なので、一度導入されてはいかがでしょうか？