ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

WordPress Popular Postsでサムネイル画像付き人気記事一覧の表示方法

人気娘たち

「WordPress Popular Posts」は記事の下やサイドバーにブログの人気記事の一覧を表示してくれるプラグインです。サムネイル画像、ページビュー数、投稿日などを表示できます。表示件数、ソート順、表示しない記事の変更も可能です。

ゆめぴょん(@yume_pyon)です。こんちはっ!

「WordPress Popular Posts」は以前にも紹介記事を書きましたが、今回のバージョンアップによりサムネイルが乱れたり、設定項目が変更になったりしましたので、あらためて解説しようと思います。

以前の記事へのリンクは下ですが、今回の記事だけ読めば「WordPress Popular Posts 2.3.6」以降のカスタマイズはカバーできるように書いたつもりです。

WordPress Popular Postsプラグインでサムネイル付き人気記事一覧を表示する方法WordPress Popular Postsプラグインでサムネイル付き人気記事一覧を表示する方法

ブログに人気記事一覧をつけると、偶然訪問してくれた人に他の記事を自然におすすめで…

また人気記事一覧をカテゴリー別に表示したい場合は下の記事を参考にしてください。

WordPress Popular Postsでカテゴリ別サムネイルつき人気記事一覧!SEO対策にもWordPress Popular Postsでカテゴリ別サムネイルつき人気記事一覧!SEO対策にも

このブログではプラグイン「Popular Post」でサムネイルつき人気記事の一…

「WordPress Popular Posts」プラグインの特徴

このプラグインは自分のブログの全記事の「ページビュー数」(読まれたページ数)や「コメント数」をほぼリアルタイムで自動的に記録していきます。Google Analyticsなども不要です。

そして「ページビュー数」か「コメント数」の多い順に「人気記事」として記事下やサイドバーに指定した数だけ表示してくれます。もちろんリアルタイムで自動的に更新されます。

ブログへの訪問者たちは目についた人気記事に興味があれば、アクセスしてくれるかもしれません。そして何かの問題解決に役立つこともあるかもしれません。ブログ運営者にとっては1ページでもPVを増やせる導線の1つにもなります。

インストール・導入方法

WordPress管理画面の左メニュー「プラグイン」の「新規追加」から「WordPress Popular Posts」を検索。インストール後に有効化するのを忘れじゅに!

「設定」→「WordPress Popular Posts」をクリックすると、上部メニュー「統計」にアクセスできたと思います。この画面では「WordPress Popular Posts」で記録した内容を見ることができます。

人気記事の一覧を表示する前に、どんな記事の順になるかを確認できます。期間は「24時間」「1週間」「1ヶ月」「累積(全期間)」を選べます。「1日の平均閲覧数でランキング」は閲覧数を投稿日からの日数で割っているのだと思います。

「投稿タイプ」は投稿記事なら「post」、固定ページなら「page」をカンマ区切りで入力すればいいでしょう。あと知りたいことがあれば、上部メニュー「よくある質問」で探してみてください。

プラグインの設定方法

前回のバージョンよりも設定項目が増えた気がします。気づいてなかっただけかもしれませんが。

「Open links in:」では「New tab/window」を選ぶと人気記事のリンクを新しいタブかウィンドウで開きます。「Current window」を選ぶと同じタブ/ウィンドウで開きます。

「閲覧数を記録するやり方」は和訳がおかしいですが、「ログイン・ユーザー」も含めるを選べば、ブログ運営者のページビューもカウントします。頻繁にアクセスする場合は「訪問者」のみに設定した方がいいでしょう。

「デフォルトのサムネール:」では、アイキャッチ画像(サムネイル)のない記事で表示する画像を設定できるようです。確かに何か表示しないと見栄えが悪いですからね。

「次から画像を選ぶ:」の項目ではアイキャッチ以外に「投稿に最初に現れる画像」が追加されました。これによりFlickrやPicasaなど外部クラウドの画像を利用している記事でもサムネイルが表示されるかもしれません。私は未確認です。

そして今回なにげにうれしい機能が「WordPress Popular Postsのスタイルシート」で「wpp.css」を「無効」にできるようになったことです。通常は「有効」のままでいいです。

これにより「style.css」などにまとめて記述することが可能になり「WordPress Popular Posts」のバージョンアップのたびに書き換える苦労がなくなります。「GTmetrix」で注意されることもなくなるし(笑)

最後の「Ajaxを使うウィジェット:」も変な和訳ですが、「有効」にするとキャッシュ系プラグインでのキャッシュをしなくなるようです。私は「W3 Total Cache」を利用してますが「無効」のままでも問題有りません。

WordPress Popular Posts

「WordPress Popular Posts」で人気記事の一覧を表示

WordPress管理画面で「外観」→「ウィジェット」をクリック。「WordPress Popular Posts」を右のウィジェット欄へドラッグ&ドロップして、バー右端「▼」をクリック。

「表示する数」「時間間隔」「並べ替え順」「タイトル短縮」「抜粋」などはお好みで設定してください。フィルタでは「特定カテゴリ」や「表示しない記事」も選べます。サムネイルを表示したい場合はサイズの入力も忘れじゅに。

「コメント数」「閲覧数(ページビュー)」「投稿者」「投稿日」「カテゴリー」の表示や非表示も選択可能です。すべての設定を終えたら、一番下の「保存」ボタンを押すのを忘れずに!

サムネイルが表示されない場合、記事にアイキャッチ画像が設定されていない可能性があります。下の記事にて解説しているプラグインを導入すると、過去記事の全てに画像があればアイキャッチとして自動登録してくれます。

人気記事一覧の見栄え(CSS)を修正する方法

「WordPress Popular Posts」に付属のスタイルシート(wpp.css)を修正します。修正前には必ずバックアップをとっておいてくださいね。

WordPress管理画面の「プラグイン」→「プラグイン編集」をクリック。右上の選択欄から「WordPress Popular Posts」を選び「選択」ボタンをクリック。右のファイルメニューから「wordpress-popular-posts/style/wpp.css」をクリック。

前回のバージョンではサムネイルがうまく回りこまなったので、回り込み設定を記述しました。今回は標準で回り込みには問題なさそうです。

バージョン「2.3.6」では私の環境ではサムネイルの間隔がせますぎるので、広げたいと思います。あと記事の切れ目がわかりやすいように点線の区切りも入れてみます。

ファイル内の「.wpp-list li {」から1つめの「}」までを以下のように修正しました。間隔をもっと広げたい場合は「margin:10px 0;」の「10」を大きくすればいいです。

点線を実線にしたい場合は「dashed」を「solid」にしてください。線の色は「#666」を変更してください。すばやく色を調べたい場合は「colourcode」が便利です。

スタイルシートがわかる人は、その他にもいろいろカスタイズ可能です。

まとめ:今日のゆめぴょんの知恵

人気記事一覧をカテゴリー別に表示したい場合は下の記事を参考にしてください。前者はサイドバー、後者は記事の下に設置する場合の記事です。

WordPress Popular Postsでカテゴリ別サムネイルつき人気記事一覧!SEO対策にもWordPress Popular Postsでカテゴリ別サムネイルつき人気記事一覧!SEO対策にも

このブログではプラグイン「Popular Post」でサムネイルつき人気記事の一…

カテゴリー別の人気記事を表示する方法!WordPress Popular Postsプラグインでカテゴリー別の人気記事を表示する方法!WordPress Popular Postsプラグインで

カテゴリー別の人気記事一覧を記事の下に表示する方法を共有します。訪問者が関連記事…

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:W3 Total Cacheで1秒台達成!WordPress高速化の設定方法を詳しく解説【WordPress】ブログ高速化AA達成!6つのW3TotalとCloudFlare併用設定:次記事»
ページ
↑先頭
ホーム