WordPress Popular Postは出来のよいPluginであり、私もサイト構築時から利用させてもらっている。ただ、一つ問題点があるのだが、それはレスポンシブなThemeに対応していない点である。また、Themeによってはサムネイル画像とタイトルなどのテキスト表示がずれてしまうという問題点があった。
レスポンシブテーマで正しく表示できるための手直し
WordPress Image
いつの間にか表示がずれる問題はなくなっていた
Themeによっては画像とってキスとにズレが生じた問題は、バージョンアップによって解消したようである。少なくとも私が使っているLP Designerではその問題は生じなくなっている。 Wordpress Popular Postsをこのサイトに導入したとき、その問題をどうしても改善することができなかった。従って、このサイトでの Wordpress Popular Postsではサムネイル表示を止めてタイトルと記事の抜粋にしていた。しかし、バージョン2.3.7にアップデートして試してみると、テキストが画像の下の方に回りこむ現象はなくなっていた。
バージョンアップのたびにこの作業が必要
しかし、ブラウザの表示を狭めてみると、相変わらず Wordpress Popular Postsのサムネイル画像が横幅いっぱいに引っ張られるという現象は直っていない。これを直す方法が見つかったことから、備忘録としてここに残しておく。 Wordpress Popular Postsのpluginホルダの中のwpp.cssというスタイルシートを使っていることから、バージョンアップがある度に書き直す必要がある。
Pluginフォルダ内のwpp.cssを修正する
作業は一つだけ、wpp.cssファイルに2行付け加えるだけである。まず、wpp.cssのある場所は、 Wordpress Popular Postsのプラグインホルダの中のstyleホルダ内。私の場合を例にすると、
- http://wordpress-jp.net/wp-admin/plugin/style/wpp.css
バージョン2.3.7のwpp.cssは以下のようになっていた。
/*
Wordpress Popular Posts plugin stylesheet
Developed by Hector Cabrera
Use the following classes to style your popular posts list as you like.
*/
.wpp-list { /* UL element */
}
.wpp-list li { /* LI - post container */
overflow:auto;
display:block;
float:none;
clear:both;
}
/* title styles */
.wpp-post-title {
}
/* thumbnail styles */
.wpp-thumbnail {
display:inline;
float:left;
margin:0 5px 0 0;
border:none;
}
/* excerpt styles */
.wpp-excerpt {
}
/* Stats tag styles */
.post-stats {
font-size:9px;
font-weight:bold;
}
.wpp-comments {
}
.wpp-views {
}
.wpp-author {
font-style:italic;
}
.wpp-date {
display:block;
clear:right;
}
/* WP-PostRatings styles */
.wpp-rating {
}
サムネイル画像のサイズを指定する
手直しするのは2行の構文を追加するだけ。サムネイル画像のサイズを指定するだけである。私の場合は70px四方のサイズであることから、以下の場所に以下のように追加した。maxとなっていることから、自分で設定したサイズより大きい数字を入れれば良いようである。
/* thumbnail styles */
.wpp-thumbnail {
max-width: 70px; /* 追加 */
max-height: 70px; /* 追加 */
display:inline;
float:left;
margin:0 5px 0 0;
border:none;
}
これを元のファイルに上書きすれば作業はおしまいとなる。ブラウザでサイズを細めてもサムネイル画像はそのままの大きさで下に下がって表示されるはずである。
