WordPress Popular Posts と Recent Posts Plus を同じ表示で揃える

カテゴリー : WordPress

投 稿 日 :

更 新 日 :

この記事は書いてから 約4年 経過しています。

※1年以上経過しているので情報が古い可能性があります。

タ  グ  : | | | | |

WordPress Popular Posts と Recent Posts Plus を同じ表示で揃える

以前に「WordPress popular posts でサムネイルとタイトルを並べる」という記事を書きました。

WordPress popular posts でサムネイルとタイトルを並べる

これはプラグイン Newpost Catch とデザインを揃えたーい という記事でした。

今回は別プラグイン Recent Posts PlusWordPress Popular Posts を使って、サイドバーにサムネイルとタイトルを綺麗に揃えて表示してみました。

念の為、各プラグインの説明。

Recent Posts Plus は「最新の記事をサイドバーに表示」してくれるプラグイン。

WordPress Popular Posts は「人気の記事をサイドバーに表示」してくれるプラグイン。

WordPress Popular Posts の設定

Thumbnail settings の Display post thumbnail にチェック。

サムネイルサイズは 縦横80px に設定。

WordPress Popular Posts と Recent Posts Plus を同じ表示で揃える 1

HTML Markup settings の Use custom HTML Markup にチェック。

追記(2013年6月14日)
↓ アップデートがありましたので下記記事の通りに設定してください。
WordPress Popular Posts を 2.3.5 にしたら表示が変になった場合の対処法

「Before / after each post:」の

Before に


after に


で、保存。

すると「Before / after Popular Posts:」に ul と /ul が勝手に設定されてしまいますが放置。

Recent Posts Plus の設定

Include post thumbnail にチェック。

Show expert options にもチェック。

Thumbnail size は 各80 にします。

WordPress Popular Posts と Recent Posts Plus を同じ表示で揃える 2

Widget Output Template は下記をコピペして完了。

テーマの css の設定

css に下記を加えて下さい。

これでフィニッシュ!

WordPress Popular Posts と Recent Posts Plus を同じ表示で揃える 3

注意点

IE7 には対応していません。

IE8 は一応見れる範囲内の表示かなーと思います。

テーマ Twenty Twelve のようなレスポンシブのテーマ(スマホとかで見るとサイドバーが下に表示される)でも大丈夫だと思います。

間違いや改善点があったら是非是非!教えてください!

WordPress Popular Posts と Recent Posts Plus を同じ表示で揃える」への2件のフィードバック

  1. ピンバック: WordPressでWordpress Popular Postsを使って「人気の記事」を表示する

  2. ピンバック: WordPress Popular Postsの設定をカスタマイズして人気記事一覧に画像サムネイルを表示する方法 | shimajiro@mobiler

コメントを残す

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

*