ブログのカスタマイズにハマっている、あきら(@akrwnet)です（＾ｖ＾）
最近ちょっとアクセス数が増えてきたので、サイドバーに観覧数の多いページを表示してみようかと思います。
WordPressのプラグインを使い実装しようかと、検索してみるとPopular Postsと、WordPress Popular Postsというのがあるようです。
両方使ってみたのですが、WordPress Popular Postsの方が良さそうなのでカスタマイズをしてみます。
WordPress Popular Postsをインストールし日本語化
WordPress Popular Postsは、プラグインの新規作成より検索すれば出てきます。
それをインストールし有効化をするのですが、このままでは英語のままなんです。
こんなですね↓
これを日本語化してくれているところがあるので、そこからファイルをダウンロードしてきましょう。
ダウンロードしたら、そのファイルをFTPで接続しアップロードします。
アップロードする場所は
/wp-content/plugins/wordpress-popular-posts
すると日本語化されるようになります。設定より説明書きが日本語化されているので、見てみるとよいでしょう。しかし、編集をするのは外観→ウィジェットになります。
ウィジェットの設定にて、ドラック・アンド・ドロップでサイドバーに追加
これも日本語化されています。
すると、サイドバーに人気記事と表示されるように！ちなみにPopular Postsも試してみました。
プラグインを有効化してからのカウントになるので、はじめのうちはウマいこと表示されないかもしれませんが、しばらくすると表示回数の多い記事がズラリと並ぶようになるでしょう。
こんな風に↓
アイキャッチ画像とタイトルのカスタマイズ
このままでも良いのですが、アイキャッチ画像をもうちょっと大きくしてみようかと思います。
デフォルトでは15pxなので、60pxぐらいにして目立たせてみようかと思います。
すると画像は大きくなるのです、このままではタイトルの文字が落ちてしまうのでイケてないです。
これを解消してくれるカスタマイズ方法が、こちらの記事に載っていました。
まず、HTML Markup settings にてBefore Popular Postsの一部を変更します。
独自のHTMLマークアップを使うにチェックを入れて、一度保存をすると以下の様な入力項目が出てきます。
そこで人気記事一覧の前後に入れるタグのところの<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; まで広げてみました。
完成です！イイ感じ♪
後は好みの問題になるかと思いますので、いろいろと自身でイジってみるのが良いかもしれませんね♪
参考に(＾‐＾)ゝ
コメント