Blog

【人気記事をカード型で表示】wordpress popular postsの使い方とカスタマイズ方法

2020年6月10日

【人気記事をカード型で表示】wordpress popular postsの使い方とカスタマイズ方法

 

ぼんやりしている人
人気記事を表示する「wordpress popular posts」の使い方を知りたい。。

記事をカード型にカスタマイズするにはどうしたらいいんだろう。。

 

こんな悩みを解決します。

 

本記事の内容

wordpress popular postsとは

wordpress popular postsの使い方

wordpress popular postsのカスタマイズ方法

 

記事数が増えてきたら「人気記事」はトップページに設置したほうがいいです。

 

なぜなら読者の利便性が高まるから。

 

読者ファーストで考えるなら必須です。

 

今回は「人気記事」を簡単に設置できるプラグイン「wordpress popular posts」の使い方と、そのカスタマイズ方法について解説します。

 

3分で読めますので「人気記事」を設置したい人はぜひ一読ください!

 

 

wordpress popular postsとは

wordpress popular postsとは

 

「wordpress popular posts」とは簡単に「人気記事」をサイトに挿入できるプラグインです。

 

自動的に記事をランキング順に並べてくれるのでとても便利です。

 

簡単に設置できるのですぐに取り掛かりましょう。

 

 

wordpress popular postsの使い方

 

それでは実際の使い方について解説していきますね。

 

①プラグインの検索窓に「wordpress popular posts」と入力し「今すぐインストール」をクリック

①プラグインの検索窓に「wordpress popular posts」と入力し「今すぐインストール」をクリック

 

②インストールが完了したら「有効化」をクリック

②インストールが完了したら「有効化」をクリック

 

③WordPressメニュー画面で「外観」→「ウィジェット」と選択

③WordPressメニュー画面で「外観」→「ウィジェット」と選択

 

④下の方にスクロールすると「wordpress popular posts」のウィジェットが追加されています

④下の方にスクロールすると「wordpress popular posts」のウィジェットが追加されています

 

⑤サイドバートップの中にウィジェットを移動します

⑤サイドバートップの中にウィジェットを移動します

 

⑥好きなところに設置します

 

⑦ウィジェットをクリックすると下記が表示されるので必要事項を入力していきます

⑦赤枠内に必要事項を入力していきます

 

タイトル 表示するタイトル名
最大表示数 サイドバーに何記事表示するか
ソート順

どの計測結果でランキングを作成するか決めることができます

「コメント数」「総閲覧数」「1日の平均閲覧数」

※一般的には「総閲覧数」です

計測期間 過去何日間の総数でランキングするか決めます。サイトのPV数で期間を決めるといいと思います。
投稿タイプ 「Post=投稿記事」なのでブログならそのままでOK
除外するID ランキングから除外したい記事を指定できます

 

記事のIDってどこでわかる?

WordPressメニューの「投稿」をクリックすればわかります

 

⑧記事の閲覧数も表示したい場合は「閲覧数を表示」に「✓」をいれ保存をクリックすれば設定は完了です。

※閲覧数までいらないときは無視でOK


⑧記事の閲覧数も表示したい場合は「✓」をいれ保存をクリックすれば完了です。

 

⑨サイトを確認してみるとこんな感じで「人気記事」を表示することができました

⑨サイトを確認してみるとこんな感じで「人気記事」を表示することができました

 

 

wordpress popular postsのカスタマイズ方法

wordpress popular postsのカスタマイズ方法

 

やる気のある人
標準設定だと記事が見にくい!

記事をカード型で表示したい!

 

そんな人のためにカスタマイズの方法についても解説しますね。

 

表示をカード型にする方法

画像に影をつける方法

画像の角を丸くする方法

 

【注意】まずはこれをしないとカスタマイズできません

①設定画面で「カスタムHTMLマークアップを使う」に「✓」を入れます

【注意】これをしないとカスタマイズできません

 

②枠内のコードを変更して保存します

変更前 <ul class="wpp-list"> ➡ 変更後 <ul id="popular-posts" class="wpp-list">

 

初期コード

<ul class="wpp-list"> 

初期設定では <ul class="wpp-list"> になっています

赤字のコードをコピペしましょう

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

<ul id="popular-posts" class="wpp-list"> に変更して保存します

 

これでカスタマイズするための準備はOKです。

 

人気記事をカード型にする方法

①「外観」→「カスタマイズ」をクリック

①「外観」→「カスタマイズ」をクリック

 

②メニュー一番下の「追加CSS」をクリック

②メニュー一番下の「追加CSS」をクリック

 

③コード入力欄が表示されたら次のコードをコピーして貼り付けましょう

ul#popular-posts.wpp-list li {
border: 1px solid #989898;
padding: .5em;
margin-bottom: 1em;
}

 

③コード入力欄が表示されたら次のコードをコピーして貼り付けましょう

 

こんな感じになります。

 

カード型

 

 

僕は画像を大きくしたいので設定を変えます。

 

④先ほどのウィジェット設定画面で「既定のサイズから選ぶ」にチェックを入れ、「medium(300×300,soft crop)を選択します

 

こんな感じで画像が大きくなりました。お好みで大きさを決めましょう

 

こんな感じになります。お好みで大きさを決めましょう

 

画像に影をつける方法

次は画像に影をつけてみたいと思います。

 

①下のコードをコピーして「CSS追加」に貼り付けます

ul#popular-posts.wpp-list li img {
box-shadow: 1px 1px 5px gray;
}

①下のコードをコピーして「CSS追加」に貼り付けます

 

そうするとこんな感じでイメージ画像に影が付きます

 

背景が白の画像に使うとわかりやすくなりますね。

 

画像の角を丸くする方法

最後に画像の角を丸くする方法です。

 

①下のコードをコピーして「CSS追加」に貼り付けます

ul#popular-posts.wpp-list li img {
border-radius: 10px 10px 10px 10px;
}

①下のコードをコピーして「CSS追加」に貼り付けます

 

角が丸くなりこんな感じになります。

角が丸くなりこんな感じになります。

 

 

まとめ:小さな積み重ねが大きな利便性を生みます

まとめ:小さな積み重ねが大きな利便性を生みます

 

今回は「wordpress popular posts」の使い方とカスタマイズ方法について解説しました。

 

ご覧の通り、紹介した工夫の一つ一つは小さなことです。

 

でもこの積み重ねが読者の大きな利便性につながります。

 

ブログを1記事書いたら、サイトに小さな工夫を1つ加える。

 

100日後には大きな変化になっているはずです。

 

結論、成功の近道はコツコツ積み上げです。

 

ではまた次の記事で。

 

-Blog

Copyright© Lblog , 2021 All Rights Reserved.