あぁ…勘違い!人気記事を表示するプラグイン、WordPress Popular Postsに移行しました。

あぁ…勘違い!人気記事を表示するプラグイン、WordPress Popular Postsに移行しました。

by -
勘違い!人気記事を表示するプラグイン、WordPress Popular Postsに移行しました。

ブログやウェブサイトを制作・運営するための人気システムWordPress(ワードプレス)は、プラグインというオプションを追加する事により、新機能が搭載され、パワーアップして行きます。

人気記事ランキングを表示するにはプラグイン『ポピュラー・ポスト』が良いよと、ネットで何度も見掛けました。そこで、Swingin’Thinkinを始めた当初より『Popular Posts』を使って来ました。しかし、他のサイトを見てみるとサムネイル(画像)が付いていたり、華やかでわかりやすい。「やっぱりカスタム出来る人ってすごいなぁ」と思っていました。

・・・が、プラグインを勘違いしていました!

プラグイン「WordPress Popular Posts」導入。

めちゃくちゃ紛らわしい! Popular Postsと、WordPress Popular Postsって…。

このプラグインをインストールし、30分で設定&cssのカスタマイズ完了。「これまで何だったんだ〜」と、自分で自分をあざ笑いました。

伝わりやすい!こう変化しました。

<変更後:WordPress Popular Posts>

131004_wordpress_popular_post_2

 

<変更前:Popular Posts>

131004_wordpress_popular_post_1
これまで単なる文字リンクだけだったのですが、あっさりサムネイルが入りました。

もちろん、Popular Postsでも頑張ればカスタマイズ出来るかと思うのですが、WordPress Popular Postsはデフォルト(初期設定)の状態で、サムネイルが表示できます。

Swingin’Thinkin’での、導入とカスタマイズ手順。

以下、自分メモ的ではありますが、30分間の手順を書き残しておきます。興味ある方はぜひ。

  1. 【アクセス】ダッシュボード > プラグイン > 新規追加
  2. 検索窓に「WordPress Popular Posts」を入力。「いますぐインストール」をクリック。
  3. 【アクセス】ダッシュボード > 外観 > ウィジェット
  4. ウェジェットに「WordPress Popular Posts」を追加。
  5. ウェジェットより「WordPress Popular Posts」を開き、タイトル、表示する数、時間感覚、サムネール設定などを変更する。
  6. 【アクセス】ダッシュボード > プラグイン > プラグイン編集
  7. 画面右上の「編集するプラグインを選択」より、WordPress Popular Postsを選択、クリック。
  8. 画面右端のプラグインファイルより、「wordpress-popular-posts/style/wpp.css」をクリック。
  9. ここでcssファイルを独自に編集します(念のため元のデータは残しておきましょう)。

.wpp-list li { /* LI – post container */
overflow:auto;
display:block;
margin:10px 0;
float:none;
clear:both;
}

/* title styles */
.wpp-post-title {
}

/* thumbnail styles */
.wpp-thumbnail {
display:inline;
float:none;
margin:0 5px 0 0;
border: 1px solid #E7E7E7;
padding: 4px;
}


赤字の部分が、追加・変更した箇所です。

  • 1位、2位、3位の間が詰まっていたので、marginを追加しました。
  • サムネイルの左寄せを解除しました。floteをnoneに。
  • サムネイルの周りに1pxの囲いを入れました。border。
  • 囲いには4pxの隙間を入れました。padding。

以上です。cssファイルに関しては、皆さんのサイトデザインにあわせて、好きなようにカスタムすれば良いでしょう。

 

【おまけ】散々迷ったあげく、エックスサーバーで契約しました!


2ヶ月間ほど、新しいサイト用にWordPressに最適な共用サーバーを探していました。無料の試用期間もしっかり活用して、散々迷った結果、つい先日エックスサーバーを契約しました。

エックスサーバ「wpX」vs ペパボ「heteml」!WordPressに最適な共用サーバはどっちだ?!

8月に書いた上記記事では、WordPress専用のwpXに惹かれていたのですが、自分の目的には合わないと判明。さらに悩み、エックスサーバーと決めた次第です。

これについては、使用感やメリットなど、後日レポートしたいと思います。月間数十万アクセスを狙っていて、低価格で高品質なサーバーを探している方、ぜひおすすめです。


<最後にひとこと>
深夜2時間、小腹が空いたので、コーヒー&食パンという朝食的夜食を用意しました。ずっとやりたいと思いつつ、年単位で放置していた「ランキング機能」。ようやく片付けることが出来ました。

たまにはお酒抜いてみるのも良いですね!