人気記事を表示してくれるプラグインWordPress Popular Postsのカスタマイズ

ブログのカスタマイズにハマっている、あきら(@akrwnet)です(^v^)

 

最近ちょっとアクセス数が増えてきたので、サイドバーに観覧数の多いページを表示してみようかと思います。

WordPressのプラグインを使い実装しようかと、検索してみるとPopular Postsと、WordPress Popular Postsというのがあるようです。

両方使ってみたのですが、WordPress Popular Postsの方が良さそうなのでカスタマイズをしてみます。

2012-08-17_00h20_30

 

スポンサーリンク

WordPress Popular Postsをインストールし日本語化

WordPress Popular Postsは、プラグインの新規作成より検索すれば出てきます。

それをインストールし有効化をするのですが、このままでは英語のままなんです。

こんなですね↓

2012-08-16_13h02_49

 

これを日本語化してくれているところがあるので、そこからファイルをダウンロードしてきましょう。

 

ダウンロードしたら、そのファイルをFTPで接続しアップロードします。

アップロードする場所は
/wp-content/plugins/wordpress-popular-posts

2012-08-16_13h08_08

 

すると日本語化されるようになります。設定より説明書きが日本語化されているので、見てみるとよいでしょう。しかし、編集をするのは外観→ウィジェットになります。

ウィジェットの設定にて、ドラック・アンド・ドロップでサイドバーに追加

2012-08-16_13h10_40

これも日本語化されています。

 

すると、サイドバーに人気記事と表示されるように!ちなみにPopular Postsも試してみました。

2012-08-16_16h39_45

プラグインを有効化してからのカウントになるので、はじめのうちはウマいこと表示されないかもしれませんが、しばらくすると表示回数の多い記事がズラリと並ぶようになるでしょう。

こんな風に↓

2012-08-16_16h40_36

 

 

アイキャッチ画像とタイトルのカスタマイズ

このままでも良いのですが、アイキャッチ画像をもうちょっと大きくしてみようかと思います。

デフォルトでは15pxなので、60pxぐらいにして目立たせてみようかと思います。

2012-08-16_23h57_00

 

すると画像は大きくなるのです、このままではタイトルの文字が落ちてしまうのでイケてないです。

2012-08-17_00h00_39

 

これを解消してくれるカスタマイズ方法が、こちらの記事に載っていました。

 

まず、HTML Markup settings にてBefore Popular Postsの一部を変更します。

独自のHTMLマークアップを使うにチェックを入れて、一度保存をすると以下の様な入力項目が出てきます。

2012-08-17_00h06_34

そこで人気記事一覧の前後に入れるタグのところの<ul>にclass指定をしておきます。

<ul class="wpp">

 

次に、CSSに以下を追加

.sidebar ul.wpp {
    width: 210px; 
    padding: 10px 0 0 20px; 
}


.sidebar ul.wpp li {
    height: 110px;
    margin: 5px 0 0 5px; 
}


.wpp-post-title {
    display: inline-block;
    vertical-align:top;
    width: 170px;
    font-size:12px;
    line-height:1.3em;
    margin: 0 10px 0 10px;
}

参考先では、.wpp-post-title のwidth: が90pxになっていますが、右側に余白ができてしまうため170px; まで広げてみました。

 

完成です!イイ感じ♪

2012-08-17_00h17_25

 

後は好みの問題になるかと思いますので、いろいろと自身でイジってみるのが良いかもしれませんね♪

参考に(^‐^)ゝ

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク