【Simplicity】コピペで解決!タイトル下に人気記事をリスト表示するカスタマイズ

タイトルの下にリスト形式で記事を紹介するカスタマイズを紹介します。人気のある記事が自動で入ります。

人気記事をタイトル下に並べよう!

最近はタイトルの下に人気記事をリストにして紹介している人が多いですね。

サイドバーやフッターでもいいですがよりも、タイトル下の方が目に触れる機会が多いため、回遊率が上がります。

Simplicityで簡単にできますので紹介します。

出来上がりはこんな感じです。

指定した期間の中での人気記事が自動で入ります。ここでは5記事ですが、増やしたり減らすこともできます。

枠の装飾も自由に変更できます。2行以上になると文字の先頭位置がずれてしまうため、設定文字数以上は「・・・」と省略しています。

まずは、下準備。

WordPress Popular Postsのインストール

WordPress Popular Postsは、本当に便利なプラグインです。Simplicityでも使用が推奨されています。

公式プラグインなので、ダッシュボードから検索してインストールしましょう。

ダッシュボード:プラグイン → 新規追加 → キーワード「WordPress Popular Posts」として検索 → インストール → 有効化します。

タイトル下…つまり、本文の上にウィジェットをドラッグして設定します。

細かい設定は後でするのでそのままで次に行きます。

Widget Logicのインストール

今回は「Widget Logic」もインストールしてください。

ダッシュボード:プラグイン → 新規追加 → キーワード「Widget Logic」として検索 → インストール → 有効化します。

これでプラグインの準備はOKです。

 CSSのカスタマイズ

今回は、Style.CSSをカスタマイズしていきます。

もちろん、子テーマの使用が推奨です。

子テーマのスタイルシートを開きます。

この下に以下のファイルをコピペします。

/* 記事タイトル下に人気記事表示(wpp) */
div#wpp-2 {
 background: #fff;
border: 4px double #eeac00;
 margin: 0em 0em 2em 0em;
 padding: 0em;
}
 
div#wpp-2 .widgettitle {
 background: none;
 color: #ffffff;
 box-shadow: none;
}
 
div#wpp-2 .widgettitle span {
 border-top: none;
 border-bottom: none;
 display: block;
 width: 100%;
 height: 100%;
 padding: .75em .8em;
 color: #3E3E3E;
}
 
div#wpp-2 ul.wpp-list {
 counter-reset: ranking;
}
 
div#wpp-2 .wpp-list a:hover.wpp-post-title {
 text-decoration: underline;
}
 
div#wpp-2 .wpp-list a.wpp-post-title {
 color: #1E73C1;
}
 
div#wpp-2 ul.wpp-list li {
 padding-bottom: 0;
 margin-bottom: 0;
}
 
div#wpp-2 ul.wpp-list li:before {
 counter-increment: ranking;
 content: counter(ranking) ".";
 font-size: 100%;
 font-weight: bold;
 color: #1e73be;
 background: white;
 top: 0;
 text-align: center;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
}
 
div#wpp-2 ul.wpp-list li a.wpp-post-title {
 padding-left: 5px;
text-indent: 0;
 border-bottom: dashed 1px #2b2954;
 text-decoration: none;
}
/* 記事タイトル下に人気記事ここまで */

保存したら、一度ブログを開いてください。

するとタイトル下に、記事の一覧がでてくると思います。もしデザインが、変わっていないときは、記事一覧を選択してから、右クリックで「検証」します。(Chromeの場合)

検証の左のウィンドウの中にWordPress Popular Postsプラグインに関する情報があります。

この中でWPP-〇というところを探してください。

この画像ではWPP-2となっています。もし、それが他の数字でしたら、先ほどコピペしたCSSのWPP-〇の〇の部分をその数字に書き換えてください。全部で9箇所あります。

そこを変更すると、デザインも反映すると思います。

これで、CSSの設定は終わりです。

表示項目の設定

次にWordPress Popular Postsの細かい設定をします。

ダッシューボード → 概観 → ウィジェット → ▼で開く

タイトル:入力してもなぜか反映しませんので、空欄でもいいです。

最大表示数:人気記事をいくつ表示するかの設定です。

ソート順:何順に並べるかという設定です。

ファイルター:期間を設定します。

以上の設定で、7日間の総閲覧数順に並べるという設定ができました。

タイトルを短縮:タイトルを短縮するかどうか

タイトルの長さ上限:人気記事のタイトルを何文字表示するかという設定です。(※)

※タイトルを短縮にチェックをいれてから一度ウィジェットの一番下にある「保存」をして、また開くと文字数を入れる項目がでてきます。

これ以上長いタイトルは「…で省略されます」。ブログの幅に応じて調整してください。

その下は「Widget Logic」の設定になります。

ウイジェットのロジック:! wp_is_mobile( )を入れることで、人気記事の表示(WordPress Popular Posts)をモバイル以外・・・つまりPCだけで表示することができます。

タイトルをつける

WordPress Popular Postsのウィジェット上のタイトルがなぜか表示されないので、その上にテキストでタイトルをつけます。

表示されるのは「内容」の方です。

これも、同じようにウイジェットのロジック:! wp_is_mobile( )を入れます。

以上で設定は終わりです。

回遊率が上がればPVも増加します。ぜひ、お試しください。

※一部「ウェブ集客先生KENTA」様のサイトを参考にさせて頂いています。ありがとうございます(^_^)

2 Comments

はや

大変参考になりました!設置して活用させて頂いてます。
画像内にwwp-○の記述がありますが、正解はwpp-○でしたので、ご報告します。

返信する
goma

はや様

ご指摘ありがとうございました。直ちに修正させていただきました。今後もご愛読よろしくお願いいたします。

管理人:ごまっっちょ

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です