人気記事表示の定番。WordPress Popular Postsを簡単にカスタマイズする方法

1

こんばんわ。SeLe(@SeLe_wave)です。
WordPressの定番プラグインの1つ[WordPress Popular Posts]が便利で使ってる方も多いと思います。

ただ、ちょっとした体裁が崩れたりすることがデフォルトのままだと起こりがちです。
今回はCSSだけでカスタマイズが簡単にできたので共有させて頂きます。

変更前

カスタマイズ変更前のサイドバーがこちらです。
2014-08-14 (2)
liタグが上手く機能していなく、親IDのCSSを参考に動いています。
これが原因で、矢印がでる+リンクタグなので青く表示されてしまっている+タイトルが短いと下の記事とくっついてしまう。などの表示になっていました。

変更する点

liタグが機能していないので、新しく専用にliタグのCSSを設定します。
手順は以下の通りです。

1.設定タブから、WordPress Popular PostsのデフォルトのCSSを無効にする
2.style.cssに自分の思う通りにCSSを追記する
3.ウィジェットエリアから、カスタムHTMLマークアップの設定をする

この3点で上手くいきました。

1.設定タブから、WordPress Popular PostsのデフォルトのCSSを無効にする

インストールから設定を変更していない場合は、プラグイン内に入っているCSSが適応されているので、このCSSを解除してあげる必要があります。
ダッシュボードの[設定]→[WordPress Popular Posts]をクリック
2014-08-14 (3)

上部の[ツール]タブ内の下の方にある、Use Plugin’s stylesheetを[無効]に変更します。
2014-08-14 (4)

これでデフォルトのCSSが無効になりました。

2.style.cssに自分の思う通りにCSSを追記する

元のCSSを無効にしたので、新しくCSSを書きます。
class名は自由です。わかりやすいものにしましょう。私は[.wpp-list]の名前で統一しました。
サムネイルのサイズなどはウィジェットエリアから設定できるので、今回は画像サイズ以外の要素を書き込みます。

ソースコードはコチラのようになりました。

[css]
.wpp-list li{
width: 300px;
height: 80px;
}
.wpp-list a{
font-size: small;
color: #000000
}
.wpp-list a:hover{
color: #990000;
text-decoration: underline;
clear: left;
}
.wpp-list img{
float: left;
margin: 5px 5px 5px 0;
clear: both;
}
[/css]

縦横の指定と、画像のmarginの設定で等間隔で表示するように設定しました。
ついでにリンク色を黒にして、オンマウス時のみ赤くなるようにしました。

3.ウィジェットエリアから、カスタムHTMLマークアップの設定をする

CSSを書いても、適用しなければ意味がありませんので、その設定をしていきます。
ダッシュボードの[外観]→[ウィジェット]をクリック
2014-08-14 (5)

WordPress Popular Postsのサイドバーアイテム欄を開いて下の方にいくとHTMLマークアップの設定があります。
[カスタムHTMLマークアップを使う]のチェックボックスをオンにして、下の欄も書き換えてください。
2014-08-14 (6)

ulタグとliタグは自分で書いたCSSのclass名に変更してください。私の場合は上記で決めた通り[wpp-list]ですね。
{thumb}{title}{stats}はショートコードに当たるので、消さないように注意してください。

以上の3点で体裁を整えることができました。

変更後

今回の変更で以下のようになりました。
2014-08-14 (7)

きちんと等間隔に表示することができました。
タイトルが5行以上になってしまうとタイトルを短縮する必要が出てくるのが難点ですね。
そんなに長いタイトルは付けないと思いますが…

まとめ

HTMLもCSSも少しかじっただけのド素人の私ですが、なんとか形になることができました。
体裁って大事ですよね。読みやすいブログに出来るように努力したいと思います。

WordPressレッスンブック HTML5&CSS準拠
エビスコム
ソシム
売り上げランキング: 17,812
スポンサーリンク

シェアする

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

フォローする