情報蒐集ノート

iPhoneやMac、Androidの活用についてあーだこーだと考えるブログ

ブログ

WordPressのプラグイン「Similar Posts」でサイドバーにサムネイル画像とはてブつき記事を表示させる方法

投稿日:2013/01/14 更新日:

Similar Posts Settingsページ

目指せ平均PVアップ!!

年が明けてからずっとブログのデザインだとかをいじってる@masa6127です。

手始めにサイドバーに関連記事を表示すべくWordpressのプラグイン「Similar Posts」を導入してみました。

しかし、初期状態だと記事タイトルのみのシンプル表示なので、一手間加えてサムネイル画像とはてブつきにしてみました。

ブラウザで見ている方はすぐ隣にあると思うのですが、見えてますでしょうか?

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

なまら春友流 » WordPressプラグイン「SimilarPosts」と「PopularPosts」にサムネイル画像とはてブを付ける方法

ありがとうございます。

ほぼ、春友さんの記事の通り作らせて頂きましたが、少々この情報蒐集ノート用にコードを改変させて頂いたので、そちらのコードと設定方法(プラグイン側の設定変更とCSSに追記)を本日はご紹介します。

ちなみに、私は文法とかルールとか全く知りません。こいつとんでもない記述してやがる・・・ってのがありましたら是非教えてください。

では以下より。

「Similar Posts」の設定

ではまずは「Similar Posts」の設定から。

↓「設定」から「Similar Posts」を選択。

Similar Posts 設定変更1

↓「Output」から「Output template:」の箇所を選択。

Similar Posts 設定変更2

↓「Output template:」に以下のコードを記述。

[sourcecode language=”html”]
<div class="similar-posts">
<p class="similar-img"><a href="{url}">{php: echo get_the_post_thumbnail( {postid},array(120,120) ); }</a></p>
<p class="similar-title"><a href="{url}" title="{title}">{title}</a><a href="http://b.hatena.ne.jp/entry/{url}" target="_blank" title="『{title}』のはてなブックマークを見る"><img src="http://b.hatena.ne.jp/entry/image/{url}" /></a></p>
</div>
[/sourcecode]

コードを入力したら「Save Out Settings」をクリックして「Similar Posts」側の設定は完了!!

CSSに追記

では次に、CSSです。

CSSに以下のコードを追記して下さい。場所はどこでもいいです私は最下部に追記しました。

[sourcecode language=”html”]
/* Similar Post */

.similar-img img{
float:left;
border-radius: 6px;
margin: 10px 10px 10px 10px ;
}

.similar-posts {
float:left;
clear:both;
width:300px;
}
[/sourcecode]

これで・・・

↓サイドバーにこんな感じで表示されるはず。

Similar Posts サイドバー サムネイル はてブつき

これにて完了!!

最後に

これでサイドバーの関連記事表示についてはレイアウト崩れもありません。

ありません。・・・が。

↓記事下に「Similar Posts」を入れていると変な感じになっちゃいます。

Similar Posts記事下 レイアウト崩れ

そりゃぁ横幅指定しているからでしょーに・・・ってのはわかるのですが、サイドバーはサイドバー幅に、記事下のは記事幅に合わせるってのはできんのですかね?

誰か知っている方いらっしゃれば教えてくださいm(_ _)m

これの為、現在記事下には「YARPP(Yet Another Related Posts Plugin)」を使っています。ただ、これが「Similar Posts」に比べ関連記事の精度が悪い気がして・・・

早めになんとかしたい・・・

では、ブログ改造している誰かの参考になれば幸い。

天元突破グレンラガン COMPLETE Blu-ray BOX(完全生産限定版)

-ブログ
-

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

情報蒐集ノートの2012年7月運営報告。2.1万UU、3.6万PV、収益1.2万円

さて月初恒例の先月の振り返り記事です。 7月はパンダアップデートの影響があり、アクセス数が大幅減です(ノД`) ↓分析記事はこちら。 マジ涙目!!パンダアップデートの影響?でアクセス数激減したのでちょ …

マジ涙目!!パンダアップデートの影響?でアクセス数激減したのでちょいと分析して対策たててみた

パンダまじこえーわ。 Googleの検索精度を上げるためのアップデート。 「パンダアップデート」が7月18日に日本にも適用されました。 その影響なのか、当ブログのアクセス数が激減。 当ブログはこれまで …

情報蒐集ノートの2012年3月アクセス解析

新年度ということもありますし、当ブログのアクセス解析レポートを今月4月より始めたいと思います。昔のブログ(旧情報蒐集ノート)では一時期やっていたのですが、このブログでもスタートです。 はい。完全に誰得 …

【ブログ再開】情報蒐集ノートの2012年10月・11月運営報告。10月2.7万UU、3.4万PV、収益0.8万円。11月1.8万UU、2.8万PV、収益0.8万円

お久しぶりです! 10月の後半から12月の前半までの約一月半。盛大にブログの更新をサボっていた@masa6127です。 というのも「出産」「引越し」「結婚式の友人代表スピーチ」「フルマラソン駅伝」と、 …

情報蒐集ノートの2012年9月運営報告。2.2万UU、3.4万PV、収益1.0万円

取り戻してきたーっ!! にっくきパンダアップデートの影響を受けPV数が下がっていた当ブログですが、日々のPV数がなんとか1,000PV付近まで回復してきました。 というわけで。 9月の振り返りをば以下 …

プロフィール

プロフィール画像

松本 将利(Matsumoto Masatoshi)

iPhoneに出会って全てを変えられた人。
1986年愛媛生まれ。埼玉在住、商業施設の運営に携わってる2児の父。iPhone・Mac・家電・ゲーム・マンガ・アニメ・小売についてあーだこーだと考えるのが幸せ。