【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) で調整して行きます。子テーマのスタイルシートに次の記述を付け足して下さい。

/* 個別記事ごとのliタグ */
.popular-posts li{
border-top: 1px dotted #CCC;
list-style-type:none;
list-style-image:none;
clear: both;
margin: 0px;
padding: 5px 0 5px 0;}

/* サムネイル */
.popular-posts img{
padding:0px;
float: left;}

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

人気記事-12

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

/* 人気記事一覧の下の余白 */
.popular-posts ul { margin-bottom: 80px}

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

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. らんくる

    原因がわかりました。

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

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

    お騒がせしました。

  2. しげぞう 投稿作成者

    らんくる様

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

  3. らんくる

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

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

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

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

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

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

  4. バッツ

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

  5. しげぞう 投稿作成者

    バッツ様

    コメントありがとうございます。もしかすると設定の表示が英語になっているかも知れません。サイドバーにウィジェットを追加したら「Posts settings」という項目に「Display post thumbnail」という項目がありますので、これにチェックを入れて一度保存をしてみて下さい。

    それでも解決しない場合にはお手数ですが再度コメント頂けると助かります。

  6. バッツ

    はじめまして。
    投稿サムネールを表示するという項目がバージョンが違うせいもあると思うんですが見当たりませんでした。どうしたらよいでしょうか?

  7. 乃風

    そういう事だったのですね。
    分かりました。では、そのようにします。
    ありがとうございました。

  8. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。「Filters」の「Author(s)ID(s):」は空欄で構いません、これは複数で1つのWordPressを管理する時に記事を書いた著者でファイルターをする設定だと思いますので、関係ないと思われます。特にファイルターは必要ないので空欄でOKです。そのままの設定で大丈夫です。

  9. 乃風

    いつもお世話になっております。

    「設定」ではなく、「ウィジェット」から設定してみてください、ということでしたので、もう一度確認してみたところ、やはりここの記事通りに日本語での表記になっておりませんでした。でも、何とか設定できました!

    ただ、その過程で、1つだけ分からなかったので教えてください。
    「Filters」のところで、「Author(s)ID(s):」と書いてありました。これはどのように対処すればいいのでしょうか?

  10. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。「WordPress Popular Posts」の設定は英語表示の部分がありますが、プラグインを有効化して「設定」ではなく「ウェイジェット」で色々設定できます。ウェイジェットの部分は記事でも書いたような画像になっていると思いますので、「設定」ではなく、「ウィジェット」から設定してみてください。

    もし分からないようであればお手数ですが再度コメント頂けると助かります。どうぞよろしくお願い致します。

  11. 乃風

    いつもお世話になっております。

    WordPress Popular Postsをブラグインして、有効化まではうまくいきました。ただ、バージョンアップしたのか、ここの記事では日本語表記ですが、今日、上記をプラグインしたものは、全てが英語表示されているため、設定がちょっと分かりづらいんです。新しく解説していただけないでしょうか? よろしくお願いします。

  12. 匿名

    しげぞう様
    ご教示をいただきましてありがとうございます。

    子テーマの作り方のところにもう一度戻り、何度も読み返してみまして、
    皆様のご質問等を読み、「style.css」の下にどんどん書きこむということが
    理解できました。
    ありがとうございます。

    また、子テーマの「style.css」のコードの表記について、
    超、超、超初心者の質問がございますが、他の方のご参考に
    なるかもしれませんので、子テーマのトピックのほうから
    再度ご質問をさせていただきます。
    どうぞよろしくお願いします。

  13. しげぞう 投稿作成者

    >青りんご様

    コメントありがとうございます。子テーマ「child」を作成してその中に「style.css」を作成しているという事ですね。ここまでできたら子テーマの有効化もされていると思いますので、WordPress管理画面から「外観」⇒「テーマの編集」と進めば子テーマの「style.css」が表示されます。CSSの記述は下に書いたものが優先的に反映されますので、この子テーマの「style.css」の一番下にどんどんコードを追加していけばOKです。

    もし反映されない場合や分からない部分があれば再度コメント下さい。その都度返信させて頂きます。どうぞよろしくお願い致します。

  14. 青りんご

    超、超、超(!)初心者の私でもpoko様の説明は大変わかりやすく本当に助けられています。ありがとうございます。現在、やっとドメインとサーバの設定が終わり、WPの設定を行っているところです。

    初歩的な質問で恥ずかしいのですが、ご教示くださいませ。

    サムネイル画像の表示位置を「子テーマのスタイルシート(style.css) で調整して行きます。子テーマのスタイルシートに次の記述を付け足して下さい」とありますが、新しいファイルを「Child」*の中に新規作成し、上記の記述を貼り付けるのは正しいのでしょうか。

    *子テーマの作り方のページを参照させていただき、子テーマのフォルダをロリポップのFTP →wp-content→themesの中に「child」という名前で作成し、その中に「style.css」という名前のファイルを作りました。(その中にはご指導通り、twenty-twelveのコピーが入っています。)

    すみません。よろしくお願いします。

  15. poko 投稿作成者

    >gura様

    コメントありがとうございます。人気記事はプラグイン【WordPress Popular Posts】で設置されたという事だと思います。それで表示される各記事タイトルの下に下線が入っているという事でしょうか?間違ってたらすみません。もし上記プラグインで人気記事を設置して表示される各記事タイトルの下線を消すという事であれば子テーマのCSSで次の記述を追加して試してみて下さい。

    .popular-posts li {
    border-bottom: none !important;
    }

    もしこれで反映されない場合、それから私が思っている部分と違うという場合にはお手数ですがもう一度コメント頂けると助かります。

  16. gura

    始めたばかりの初心者ですが、いつもお世話にさせてもらっています。

    ドキドメサイトは私にとってシンプルで見やすくとても気に入っている為、お手本にしています。

    人気記事一覧のタイトル部分に下線が入っていて、スッキリさせたく消したいのですが、どのようにすれば良いのですか?

    ほんとくだらない内容かもしれませんが、分かりません…回答お願いします。

    まだHTML編集自体良く分かっていません。これから勉強していきます。