のプラグイン『WordPress Popular Posts』を横並びに配置する方法の備忘録です。
デフォルト設定でサムネイルの大きさを変更したりなどはできますが縦並びのためスペースがもったいないと思ってる人にはお薦めの配置ですが自己責任でお願いします。
WordPress Popular Postsのインストール
↓ここからインストール⇒有効化します。
外観⇒ウィジェットからWordPress Popular Postsで表示する設定画面を開きます。
↑のようにサムネイルを100×100にすると
300px幅のサイドバーに設置した場合は↓こんな感じです。
この縦並びを横並びにして、サイドバーに丁度良いように2列に配置する方法を解説していきます。
デフォルトのスタイルをコメントアウトする。
プラグイン⇒インストール済みプラグイン⇒WordPress Popular Posts⇒編集
開いた編集画面で『wordpress-popular-posts/style/wpp.css』を選択。
この中の.wpp-list liのスタイルをコメントアウトして無効にしておきます。
.wpp-list li {
overflow:hidden;
float:none;
clear:both;
}
↑この部分を/*と*/で挟むだけです。
↓1と7行目のように。
/*
.wpp-list li {
overflow:hidden;
float:none;
clear:both;
}
*/
コメントアウトしたことで並びが初期化されました。
ここから子テーマへ新しいスタイルを追加していきます。
サイドバーに合わせたスタイルの適用
外観⇒ウィジェットからWordPress Popular Posts
サムネイルのサイズを130pxに指定して保存をクリック。
サムネイルが少し大きくなりました。
セルの大きさと並び方を指定します。
子テーマ（推奨）のstyle.cssへ以下を追加
.wpp-list li {
width: 130px;
height: 210px;
border: 1px solid;
display: table-cell;
float: left;
clear: none;
margin: 0px 8px 14px 0px;
overflow: hidden;
background-color: white;
}
300pxのサイドバーで2列の横並びとしては丁度良い大きさになりました。
10行目のbackground-color: white;で背景を白に指定しています。
このwhiteを変えることで色を好みに変更することが可能です。
タイトルがはみ出してしまってるので調整します。
.wpp-post-title {
position: relative;
display: block;
width: 122px;
height: 76px;
padding: 0px 0 4px 6px;
bottom: -4px;
line-height: 1.3em;
overflow: hidden;
font-size: 15px;
}
これで丁度良い並びになったと思います。
閲覧数「VIEWS」の表示と位置
今回の設定では「VIEWS」にチェックを入れても隠れてしまい表示されません。
表示させるには、
外観⇒ウィジェットからWordPress Popular Posts
Display viewsにチェック
cssを追加
span.wpp-views {
position: relative;
top: -210px;
float: right;
background-color: black;
color: white;
font-size: small;
padding: 0 3px;
}
これで「VIEWS」の数が上側に表示されました。
5行目で背景色、6行目で文字色を変更可能です。
（位置はこのセルの設定に合わせてあります）
WordPress Popular Postsのアップデート
プラグインの更新があった場合は
『デフォルトのスタイルをコメントアウトする。』で解説した部分だけをやり直して下さい。
あとがき
自分用の備忘録のため、300pxのサイドバーに合わせた設定に限定しました。
のテーマが『Simplicity』の方ならこのままコピペだけで利用できると思いますが自己責任でお願いします。
「VIEWS」についても、その他の「著者名」「日付」「コメント数」なども表示したい場合はこのレイアウトでは諦めるかセルの大きさから見直しが必要だと思います。
cssが分かる方だけ自力でお願いします。
以上！お疲れ様でした。(^^)/