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


関連記事

画面の拡大(ズーム)と縮小など表示サイズを変更する方法とは?

インターネットでニュースや調べもので閲覧中に、突然、画面のサイズが変更されてしまうことがあります。 どこか変なところを押してしまったのだろうけども、どうやって元に戻せばいいのかと慌てる人もかなり多いと …

パソコンの寿命と買い替えのタイミングは?|おおよその目安とは?

今や生活に欠かせないものとなったパソコンは仕事から趣味までいろいろな用途に使える便利な道具ですが、長く使ってるうちに調子が悪くなります。 パソコンの調子が悪くなる原因には単なる故障だけでなく、寿命とい …

パソコンのマウスの反応が悪い・動かないときの対処法とは?

マウスはパソコンを使う時には欠かせないデバイスの1つです。 そのマウスが最近あまりに動きが悪いなと感じるようになってきました。 思っている位置にポインタがついて来てなかったりして、地味にストレスを感じ …

パソコンの選び方とは?|初めて購入する場合のポイントとは?

パソコンの購入は初めてでなくても悩むところです。パソコンを初めて購入する人にとってはどのように選べばよいか見当もつかないことでしょう。 パソコンは長く使うもので、生活の一部となる機器です。 お店の人に …

WordPress初心者が絶対設定しておきたい項目とは?

ブログをスタートしてすぐに読者を集めることは難しいので、以下のような施策が必要になります。      SNSの拡散でブログと管理人の知名度を上げる      記事を書きためて検索サイトで上位表示を狙う …