2015-12-04

【WP】WordPress Popular Postsの表示が崩れる＆ずれる

私は、WordPress初心者中の初心者で、WordPressと出会ってまだ2か月程度の超ビギナーです。毎日、思った通りに表示されなくて、なかなかやりたいことにたどり着かず右往左往している状態です。そんな私が本当に助けられているのは、知識と経験豊富な先人のHow to系のブログです。まじでありがたい。ということで、私が壁にぶち当たり、なんとか解決できたことはできるだけ情報を書いておこうと決めました。もしかして、検索でたどり着いた方の疑問が、私のページがきっかけで解決するといいなと本気で思っています。

■WordPress Popular Postsの表示が崩れる＆ずれる

ということで、このページは、タイトルにもある通り、WordPressのプラグイン「WordPress Popular Posts(ポピュラーポスツ)」の表示がずれてしまう場合の解決方法をお伝えします。ン「WordPress Popular Posts」は、自分のサイトの中で多く読まれている人気記事をランキング形式で表示してくれるとても便利なプラグイン。多くのブロガーさんが取り入れていらっしゃいます。表示については、たぶんテンプレートによって相性があるんだと思うんですけど、わたしは、このプラグインをダウンロードしただけだと、下の写真のようになってしまって。やだかっこ悪い。

私がやりたいのは、下の状態なんです。整理整頓は超絶苦手ですが、腐ってもA型。ちゃんと文字を写真の右に回り込ませたいんです。

毎日「WordPress Popular Posts　崩れる」「WordPress Popular Posts　ずれる」「WordPress Popular Postsきれいに並べる」とかそんなワードで検索かけて解決方法を探してみるも、なかなかズバリのサイトは見つからず、いっそ別のプラグインにしちゃおうかと思ったのですが、ネットで検索してみたところ、次に人気っぽいのは「WP-PostViews」というウィジェット。でもこれは、文字のみの表示。サムネイルを付きでの表示はphpいじってCSSいじって、いっぱいコード書き換えてやればできるらしいけど、たぶんこっちのがもっと無理。となるとやっぱり、WordPress Popular Postsをなんとかするしかないんです。そんなとき出会ったのがこちらの「KLOG」さんというサイトです。本当にありがとうございました。

この方の方法を手掛かりに、私のブログに合わせて調整した結果、ついに改善することができました。何も考えず、指示通りにやっただけなので、なんでそうなるかとか一切わからないのですが、とりあえず、私と同じように崩れを直したい方は、一度やってみてください。初心者でも大丈夫です。ダウンロードした後やることは2つです。

■とりあえず、インストールして有効化

ダッシュボードから「プラグイン」→「新規追加」でWordPress Popular Postsを検索してインストール。そして有効化してください。ていうかたぶんここに来た人、ここまでは全然できてるんですよね。

■ウィジェットの設定ページの入力

ダッシュボードから「外観」→「ウィジェット」→「WordPress Popular Posts」
表示数とか表示項目とかは、お好みで設定してください。ここでは、表示崩れに影響する部分のみ書きます。

一番下の「Use custom HTML Markup 」にチェックを入れて「保存」を押します。

そうすると、何やら入力をするボックスが出ますので、「Before / after Popular Posts: 」の左側に下記入力。

<ul class="wpp">

1	<ul class="wpp">

※ホント申し訳ないのですが、なぜこれを入力するかとかまったく分かっていないです。

■CSSに下記を追記する

ダッシュボードから「プラグイン」→「プラグイン編集」→右上の「編集するプラグインを選択」から「WordPress Popular Posts」を選んで「選択」ボタンを押す。
右にプラグインファイルがずらっと出るので、その中の「wordpress-popular-posts/style/wpp.css」をクリック。

その中の、下のほうに、／* WP-PostRatings styles *／と書かれていますので、その真上に以下のコードを入れます。

.sidebar ul.wpp {
    overflow:hidden;
    margin:0px 5px 0px;
}
.sidebar ul.wpp li {
    height: 90px;
    margin: 5px 0 0 5px;
}
.wpp-post-title {
    width: 170px;
    display: inline-block;
    vertical-align:top;
    font-size:100%;
    margin: 0 10px 0 10px;
}

.sidebar ul.wpp {

overflow:hidden;

margin:0px 5px 0px;

}

.sidebar ul.wpp li {

height: 90px;

margin: 5px 0 0 5px;

}

.wpp-post-title {

width: 170px;

display: inline-block;

vertical-align:top;

font-size:100%;

margin: 0 10px 0 10px;

}

こんな感じ。ハイライトした10行目で横幅を調整します。自分のブログ幅に合わせてください。レスポンシブな方は、スマホでもチェックしたほうがよいかと。

ちなみに、「wordpress-popular-posts/style/wpp.cssの編集」の横に、(停止中)と書かれていますが、これはこのままで問題ありません。

最期に「ファイルを更新」をクリック。
さあ、ご自身のブログを確認してみてください! 直ってますか? 直っていることを祈ります。

最期に、私はウィジェットのほうの設定で「HTML Markup settings」にチェックを入れなくても表示のズレが直っています。でも、本当に全体的によくわかっていないので、言われるがままチェック入れています。もっとちゃんと詳しいことを知りたい人は、たくさんググっていろいろな人のサイトを見てみてください。