【WordPress Popular Posts】の設定とカスタマイズ方法

今回は自分のブログの人気記事を表示してくれるプラグイン「Wordpress Popular Posts」の設定や使い方を図解で解説していきます。このプラグインで人気の記事一覧表示が簡単にできます。

サムネイル画像(アイキャッチ画像)を表示させる事もできますが、表示が崩れるのでカスタマイズ(CSS)で調整する方法も紹介をします。これでブログ自体が華やかになりますし、人気記事へのリンクになっているので便利です。

人気記事-1

サムネイルサイズのアイキャッチ画像も表示できますし、画像のサイズを大きくしたり、小さくしたりもできます。細かい部分は自分で設定する事ができますので、その設定の仕方まで解説して行きます。

■追記

現在私は人気記事一覧を自作しております。理由は自分の誘導したい記事に誘導するためと、若干重いという部分です。ただ、自作するのはちょっと難しいので、最初はプラグインを利用する事をおすすめします。余裕があれば自作しても良いと思います。
WordPressのサイドバーに自作の人気記事一覧を表示させる方法

それではプラグインを使った人気記事の設定など紹介していきます。

WordPress Popular Postsのインストールと有効化

WordPressの管理画面から「プラグイン」⇒「新規追加」と進み、検索窓に「Wordpress Popular Posts」と入力して検索、「今すぐインストール」をクリックします。

人気記事-2

インストールできたら有効化しておきます。有効化してもまだブログに変化はないと思いますので、人気記事を表示させていきましょう。

サイドバーに人気記事一覧を追加する

今度はサイドバーに人気記事を表示させるので、WordPressの管理画面から「外観」⇒「ウィジェット」をクリックします。すると左側に「Wordpress Popular Posts」というのがあるので、右側にドラッグ&ドロップしてサイドバーに表示させるようにします。

人気記事-3

サイドバーに追加したら「Wordpress Popular Posts」の表示の右に小さい「▼」マークがあります。ここをクリックすると設定するメニューが開いたり閉じたりする事ができますので、この設定メニューを開き、細かい設定をして行きます。

WordPress Popular Postsの設定

まずはサイドバーに表示させるタイトルと投稿数を決めます。

人気記事-5

私の場合はタイトルを「人気記事一覧」で投稿数は「10」にしてます。後から変更もできるのでまずは適当に設定しておきます。次に「時間間隔」と「並び替え順」という項目があります。

■時間間隔:「24時間」「1週間」「1ヶ月」「累積」が選べます。つまり区切った時間内でのランキング(人気記事)を表示しますので、お好みで変更して下さい。私は「累積」にしてます。

■並び替え順:「コメント」「累積閲覧数」「1日平均閲覧数」から選べます。

投稿設定

投稿の設定に移ります。投稿設定で「タイトルを短縮する」「抜粋を表示する」という項目があります。これは特に変更する事はないかなと思います。この狭いスペースに抜粋記事を表示しても内容を伝える事ができないかなと思って、私はどちらもチェックは外しています。

人気記事-7

投稿タイプ:これは「投稿(post)」と「固定ページ(page)」どちらも人気記事に含める設定になっています。投稿記事のみでいいという場合は「post,page」を「post」だけに変更して下さい。その下の 表示しない投稿IDやカテゴリーは人気記事に表示したくないものがある場合に記述しておきます。

サムネイル設定と統計タグ設定

ここで人気記事にサムネイルを表示するかどうか設定できます。これは各記事に設定しているアイキャッチ画像の事です。この画像を表示させたい場合は「投稿サムネールを表示する」にチェックを入れて一度下にある「保存」をクリックして下さい。

日本語になっていない場合には「Display post thumbnail」という項目にチェックを入れます。

人気記事-8

保存をクリックすると先ほどの「投稿サムネールを表示する」という項目の下に画像のサイズを設定する欄が表示されますので、ここに表示したいサイズを入力します。

これでサムネイルのサイズ変更ができますので私は「100」で設定しました。3桁の数字を入力すると右の数字が切れてしまってますが、どちらも「100」を入力してます。このサイズはお好みで。

人気記事-9

そして統計タグ設定があります。これは表示する人気記事一覧にコメント数や閲覧数を表示することが出来ます。これも好きなタイプを選択してチェックを入れてみてください。必要ない場合はチェックを全部外します。

人気記事-10

さて、最後に「HTMLマークアップの設定」というのがありますが、これは私は特に変更はしてないので、このままでもOKです。設定が完了したら「保存」をクリックしてサイトの表示を確かめて見ましょう。最初しばらくは「データがありません」と表示されると思いますが、時間が経つときちんと表示されるようになります。

表示の位置調整をする

サムネイル画像を使わない場合は上手く表示されていると思いますが、サムネイルを表示する設定にしていると表示が崩れていました。こんな感じです。

人気記事-11

これを子テーマのスタイルシート(style.css) で調整して行きます。子テーマのスタイルシートに次の記述を付け足して下さい。

各記事にドット線も入れてみました。必要なければ「border-top:」の部分の一文を消して下さい。一応これできちんと表示されましたが、何故かサイドバーの下の項目とくっついてしまっていました。

人気記事-12

ここに間隔が欲しいのでさらにこの記述を追加。

これで見た目も上手く表示されると思いますのでお試し下さい。

最終更新日:2016/03/02

【WordPress Popular Posts】の設定とカスタマイズ方法”に16件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. らんくる

    原因がわかりました。

    日本語と拡張子が.bmpが原因でした。

    日本語は良いとは思いますが、拡張子を画面キャプチャーして.pngにしたら表示できました。

    お騒がせしました。

  2. しげぞう 投稿作成者

    らんくる様

    コメントありがとうございます。サーバーの移転はサーバーだけの移転ですか?その際にドメインも変更とか別の変更はなかったでしょうか?私もそのようなケースは経験した事がないのでハッキリは分かりません、すみません。実際にサイトをみてみれば何か原因の推測はできるかもしれませんので、もしよければブログのURLを教えて頂けると助かります。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。

  3. らんくる

    ロリポップからエックスサーバーに移転したら画像が半分ほど観覧できなくなりました。

    人気のあるサイトから修正しました。

    画像のバックアップはあるので直していますが、直した記事のサイドバーのアイキャッチ画像だけが出てきません。

    テーマはSimplisityを使ってますが中央のアイキャッチは表示されるのっですが、
    WordPress Popular Postsのサイドバーのアイキャッチ画像だけが表示されなくなりました。

    移転した時は表示されていましたが、記事内の画像を修正したらサイドバーのアイキャッチ画像だけが消えました。

    原因がわかれば教えてください。

  4. バッツ

    出てまいりました。ありがとうございます!!
    今後ともサイトでお勉強させていただきます!!