[WordPress] 関連記事を表示する LinkWithin を好きな場所に表示させる
最近、ブログ記事の下に、関連記事を表示させる 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;
}
こんな感じです。
設定をいじるのには制限がありますが、表示させること自体はとても簡単なので、一度導入されてはいかがでしょうか?