web関連

人気記事一覧を表示させるプラグインとは?|サムネイル画像も表示可能!

投稿日:2018年6月18日 更新日:

ブログに人気記事一覧があれば、訪問者はそれらの記事に興味を示す事もあるかもしれません。

1ページでも多く、ブログの記事を見てもらうための導線として、人気記事を表示させることは非常に有効です。

プラグイン「WordPress Popular Post」を使った人気記事の表示方法、サムネイル画像のデザインの変更などを紹介します。

プラグイン「WordPress Popular Post」とは?

簡単に人気記事一覧を表示させることができるのが、WordPress Popular Postsです。

WordPress Popular Posts の特徴としては、ランキング順として「累計閲覧者数」・「コメント数」・「1日当たりの閲覧者数」などから選択する事が可能です。

また、表示内容として、「タイトル」だけでなく「サムネイル画像」も設定することが可能です。

タイトル(文字)だけの質素な内容と比べ、ユーザーの注目を集めやすくなります。

WordPress Popular Post 導入後の「最近の投稿」のイメージ

当サイトでもWordPress Popular Posts を実際に利用しています。上記画像はサイドバーに表示している「今日の人気記事」のイメージです。

このプラグインの導入後、少し細工をして、カード形式にしたり、順位を表示したりしています。

WordPress Popular Postsの導入

1.WordPress Popular Postsのインストール

管理画面から検索してインストールします。

WordPress管理画面 → プラグイン → 新規追加

プラグインの検索で「WordPress Popular Posts」を入力して検索を開始します。

「WordPress Popular Posts」が表示されますので、「今すぐインストール」ボタンを押すとインストールが開始されます。

しばらく待つと、インストールが終了し、ボタンが「有効化」に変わります。

この「有効化」ボタンを押すと、インストールが終わり、プラグインが有効になります。

2.WordPress Popular Posts の設定

(1)サイドバーウイジェットへの指定

WordPress管理画面 → 外観 → ウィジェット

使用できるウィジェットの中に、「WordPress Popular Posts」という項目があるのがわかると思います。

これがWordPress Popular Postsのウィジェットになります。

「WordPress Popular Posts」をクリックすると以下のように表示されます。

表示場所を「サイドバートップ」から「サイドバーウイジェット」に変更するため、「サイドバーウイジェット」をクリックして、「ウィジェットを追加」をクリックします。

(2)WordPress Popular Postsの設定

WordPress管理画面 → 外観 → ウィジェット

「サイドバーウイジェット」をクリックすると登録されているウィジェットが表示されます。

「WordPress Popular Posts」が表示されますので、クリックして以下のように設定して完了です。

※投稿の前/後の<ul id=”popular-posts” claの部分は表示枠が小さいので途中で切れていますが、実際は以下のようになっています。

<ul id=”popular-posts” class=”wpp-list”>

ここを忘れると以下正しく表示できませんので、必ず設定してください。

デザインのカスタマイズ

初期状態のサムネイル画像の角は四角です。

見た目がそっけないので、以下のように変更します。

1)サムネイル画像に角に丸みをもたせる。

2)サムネイル画像に影を付けて少し浮き上がっている効果を持たせる

3)カード型のデザインにする。

4)人気順位を表示させる。

5)人気順位の1位~3位について金銀銅をイメージした色にする。

以下内容をCSSに追加すれば完成です。

/* 画像の角丸 */

ul#popular-posts.wpp-list li img {

border-radius: 5px 5px 5px 5px;

}

/* 画像の影付け */

ul#popular-posts.wpp-list li img {

box-shadow: 2px 2px 8px gray;

}

/* カード型風 */

ul#popular-posts.wpp-list li {

border: 1px solid #989898;

padding: .5em;

margin-bottom: 1em;

}

/* 人気順位表示 */

ul#popular-posts.wpp-list {

counter-reset: pupular-ranking;

}

ul#popular-posts.wpp-list li {

position: relative;

}

ul#popular-posts.wpp-list li:before {

background: none repeat scroll 0 0 #666;

color: #fff;

content: counter(pupular-ranking, decimal);

counter-increment: pupular-ranking;

font-size: 100%;

left: 0;

top: 0;

line-height: 1;

padding: 4px 7px;

position: absolute;

z-index: 1;

opacity: .9;

border-radius: 0;

font-family: Arial;

}

/* 順位色付け */

ul#popular-posts.wpp-list li:nth-child(1):before{

background-color: #FBCC54;

}

ul#popular-posts.wpp-list li:nth-child(2):before{

background-color: #B7BFC1;

}

ul#popular-posts.wpp-list li:nth-child(3):before{

background-color: #D47B16;

}

初めてホームページを作成する方にお勧め!【ホームページ.com】

訪問提案で依頼者の店舗や会社の魅力をしっかり理解して、最適なホームページを作成することで集客拡大につなげます。

さらに、最短2週間からホームページを作成できるため、急ぎの場合にも柔軟に対応ができます。

今なら初期費用オール0円!(訪問提案0円・初期費用0円・ロゴ作成費0円)で、スマホ版・タブレット版の作成も追加料金なしで対応可能です。

ホームページを作成して終わりではなく、アフターフォローなどのサポートもあるので安心です。

東証一部上場企業で年間作成実績が1800社以上と信頼できる実績があります。

ホームページ作成の見積り・相談は無料です。

詳細はこちらをご覧ください ☞ ホームページ.com

-web関連

執筆者:


comment

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

CAPTCHA


関連記事

(WordPress stinger8)サイドバーの新着記事の削除

☞  初めてのホームページ作成なら、ホームページ.com!初期費オール0円キャンペーン実施中 WordPressのテーマstinger8の画面は2ペインになっており、右側にウィジェットが表示され、初期 …

プリンターの選び方のポイントとは?|メーカーの特徴も加味して選ぶ!

プリンターを購入しようとお店に行ったけれども、どれがよいか悩んだり、結果としてコストがかかる機種を購入して後悔したといった経験はありませんか。 家庭でもビジネスでもなにかと使う機会が多いプリンターです …

「プッシュ通知」と「Webプッシュ通知」の違いとは?

スマホアプリの機能の中で、効果的によく使われているのがプッシュ通知です。 アプリをダウンロードしたユーザーに対し、情報提供を行う上で欠かせない機能となっています。 プッシュ通知はユーザーの端末のホーム …

WordPressでサイトマップを自動生成するプラグイン「PS Auto Sitemap」

記事の数が増えていくと、ユーザーにとってサイト全体の構成を一目で確認できるサイトマップページがあると楽に興味のある記事にアクセスでき、使い勝手が向上します。 しかし、記事を更新する度にサイトマップを更 …

キーボード入力が苦手な人はWindows音声認識機能を使ってみよう

パソコンで書類を作成しようとしても、キーボード入力が苦手なので長文を打つのが大変! もっと簡単に入力できる方法はないか。 そう思ったことはありませんか? Windows音声認識機能はオススメです。 ☞ …