WordPressのサイドバーに自作の人気記事一覧を表示させる方法【サムネイル付き】

前回の記事で「人気記事一覧を簡単設置できるプラグイン【WordPress Popular Posts】」を紹介しました。今回はプラグイン無しで自分で選んだおすすめ記事一覧を表示させるカスタマイズを紹介します。

「サムネイル無しバージョン」と「サムネイル有りバージョン」をやってみたので、それぞれ紹介していきます。

そもそも何でプラグインを使わない方法を紹介するのか?という部分を説明しておきます。

プラグインを使って人気記事を表示させる場合はアクセス数やコメント数を基準として「自動で」人気記事一覧が表示されます。でもこれは自分が読んでもらいたい記事がランキングに表示されるかは分かりません。

逆にプラグインを使わないで自分で作った場合には自分の読んで欲しい順番に「意図的に」並び変える事ができます。

つまり、自信のある記事や読んで欲しい記事をピックアップして自分でランキングを並び替え、その記事に誘導する事が可能なんですよ。要はおすすめ記事ですね。

という訳で早速今回やってみた手順を紹介します。まずは「サムネイル無しバージョン」から。

スポンサーリンク

サイドバーに人気記事一覧を設置【サムネイル無し】

まずはWordPressの管理画面から「外観」⇒「ウィジェット」をクリックします。

人気記事一覧-1

そしてサイドバーに「テキスト」を追加します。

人気記事一覧-2

テキストの右の▼をクリックするとテキストの内容が表示されます。

人気記事一覧-3

まずはタイトルを決めます。「人気記事一覧」とか「人気記事TOP5」とか好きなタイトルを付けて下さい。そして内容に次のコードを入れます。

<!--人気記事一覧-->
<ul>
<li><a href="#" target="_blank">記事1</a></li>
<li><a href="#" target="_blank">記事2</a></li>
<li><a href="#" target="_blank">記事3</a></li>
<li><a href="#" target="_blank">記事4</a></li>
<li><a href="#" target="_blank">記事5</a></li>
</ul>
<!--人気記事一覧終了-->

このようになっていると思います。

人気記事一覧-4

「#」の文字の所に、ボタンクリック時にジャンプするページのURLを(#を消して)書き込みます。それから「記事1」から「記事5」には、表示する文字(記事タイトル)を記入。一応5つ書いておきましたが、同じように「li」と「/li」で囲んで追加してもOK、減らしても大丈夫です。

できたら下の「保存」をクリック。後は位置調整や細かい調整をしていきます。この状態で表示させてみるとこのように右にずれた状態になっていると思います。

人気記事一覧-5

他のサイドバーの項目と同じように「・」を消して、文字を左に寄せてみましょう。子テーマのスタイルシート(style.css) に次のコードを追加して下さい。

.widget-area .textwidget ul {
list-style:  none;}
.widget-area .textwidget li {
margin-left: 0px;}

これで他のサイドバーの項目と同じような感じになると思います。反映されない場合は「F5」を押してリロード(再読み込み)してみて下さい。

以上がサムネイル無しバージョンの設置方法です。続いてサムネイル有りバージョンの紹介です。

サイドバーに人気記事一覧の設置【サムネイル付き】

サムネイル有りの場合は表示させるとこんな感じになります。

人気記事サムネイル-1

ただ、サムネイル有りバージョンは結構面倒です。もっと簡単にできる方法があれば教えて下さいませ。

今回試した手順ですが、人気記事設置に必要なのは次の3つです。

  • サムネイル画像のURL
  • 記事のURL
  • 記事のタイトル

という訳でこの3つを準備します。この部分のサムネイル画像ですが、スマートフォンページの事も考えると100PXの正方形がおすすめです。という訳で100px四方のサムネイル画像を作成する必要があります。

メディア設定で100pxのサムネイル画像を作成

WordPressの管理画面から「設定」⇒「メディア」と進み、サムネイル画像のサイズを調べます。

サムネイル画像変更-1

私の場合は最初から100pxになっていたのですが、初期値で150pxになっている方も多いかと思いますので、これを100pxにして「サムネイルを実寸法にトリミングする」にチェックを入れます。

この設定を保存して人気ランキングで使いたいアイキャッチ画像を1つ1つアップロードしていきます。

このメディア設定を変更してもそれより以前の画像のサイズが変わる訳ではなく、設定した後にアップロードした画像にこのサイズが適応されます。

なので、アップロードが済んだら再度このメディアのサイズは元に戻してもOKです。

サムネイルサイズのアイキャッチ画像のURLを調べる

使いたいアイキャッチ画像のアップロードができたら今度は「投稿」⇒「新規投稿」で記事作成画面に移動します。

新規の投稿画面に今アップロードした画像を貼り付けて画像のURLを調べていきますが、メディアの挿入時に右下にある設定を変更しておきます。

サムネイル画像変更-2

これで画像を挿入し、テキストエディタで確認するとimgタグが挿入されています。

<img src="https://affiliate150.com/wp-content/uploads/2014/07/●●-100x100.png" alt="●●" width="100" height="100" class="alignnone size-thumbnail wp-image-5256" />

この部分(imgタグ)全体を1つ1つメモ帳に貼り付けて準備していきます。ついでにその記事のURLとタイトルも一緒にコピペしてメモ帳に貼りつけておけば準備は完了です。

人気記事5記事を表示したいなら5記事分同じ作業をしてメモ帳に貼り付けて準備は完了。

WordPressの管理画面から「外観」⇒「ウィジェット」をクリックします。

人気記事一覧-1

そしてサイドバーに「テキスト」を追加します。

人気記事一覧-2

テキストの右の▼をクリックするとテキストの内容が表示されます。

人気記事一覧-3

まずはタイトルを決めます。「人気記事一覧」とか「人気記事TOP5」とか好きなタイトルを付けて下さい。

そして内容に次のコードを入れます。

<ul class="pop">
         
<li><a href="#" target="_blank"><img src="●●/>記事タイトル1</a></li>
 
<li><a href="#" target="_blank"><img src="●●/>記事タイトル2</a></li>
 
<li><a href="#" target="_blank"><img src="●●/>記事タイトル3</a></li>
 
<li><a href="#" target="_blank"><img src="●●/>記事タイトル4</a></li>
 
<li><a href="#" target="_blank"><img src="●●/>記事タイトル5</a></li>
 
</ul>
  • 「img src=」の部分は先程調べたサムネイルの画像のimgタグコードを入れます
  • 「 # 」の部分にその記事のURLを入れます(#は消して)
  • タイトル1~5にはその記事のタイトルを入れます

これでウィジェットは保存して完了です。後はスタイルシートで位置調整をしていきましょう。

子テーマのスタイルシート(CSS)の一番下にでも次のコードを追加します。

/* サイドバー人気記事位置調整 */
.pop {
  margin-left:0px !important;  /* 人気記事左の余白を無くす */
  padding-left:0px !important; /* 人気記事左の余白を無くす */
}

.pop li{
  border-top: 1px dotted #CCC;  /* 各記事の上に点線 */
  list-style-type:none;  /* リストマークを無くす */
  list-style-image:none; /* リストマークを無くす */
  clear: both;  /* 画像の左寄せを解除 */
  margin-left: 0px !important;  /* 左側の余白を無くす */
  padding: 5px 0 5px 0;  /* 改めて余白をちょい足し */
  border-bottom: none !important;  /* 記事下の点線を削除 */
}
 
/* サムネイル */
.pop img{
  width:100px;  /* 画像の横幅 */
  height:100px; /* 画像の高さ */
  margin-right: 10px;  /* 画像とタイトルの隙間 */
  padding:0px;  /* とりあえず余白は無くす */
  float: left;  /* 画像は左寄せ */
}

.pop li a {
  font-weight: bold !important;  /* タイトル文字を太字に */
}

ul.pop:after {
  content: "";
  display: block;
  clear: both;
}

これで位置調整は完了です。

これで保存して表示させ、もし画像が上手く表示されない場合には「F5」を押してリロード。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

WordPressのサイドバーに自作の人気記事一覧を表示させる方法【サムネイル付き】”に19件のコメントがあります。

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

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

  1. suma

    ご返信ありがとうございます。

    1.キャッシュ(以前のデータ)が残っているかも
    上記が原因でした。
    別タブを開いてブログ更新を確認していたことが主な要因でした。

    ありがとうございます。今後も参考にさせていただきます。

  2. しげぞう 投稿作成者

    suma様

    コメントありがとうございます!スタイルシートが反映されない場合にチェックするポイントは2つです。

    1.キャッシュ(以前のデータ)が残っているかも

    ブラウザに以前のデータ(キャッシュ)が残っている場合があり、反映されていない場合がありますので、変更後にはブログを表示させて「Ctrl」と「F5」を一緒に押してリロードしてから確認をしてみて下さい。

    2.スタイルシートでのミス

    スタイルシートは1つの記述ミスでそれ移行のコードが反映されない場合があります。なので、今回の追加したコードだけでなく、それ以前に追加したコードもチェックしてみる必要があります。例えば「 } 」が1つ抜けていたり、「:」の部分が間違って「;」になっていたりする場合があります。

    もしチェックしてみても探せない場合にはブログのURLも教えて下さい、コメント公開時にURLは削除しますのでどうぞよろしくお願い致します。

  3. suma

    いつも、参考にさせていただいております。
    1つ質問ですが、サムネイル有りの人気記事一覧を作成しておりまして、
    ウィジェットのテキスト挿入まではできたのですが、
    スタイルシートに、コードを記入しても何も変化がありません。
    全てプレーンテキストにて貼付けしております。

  4. しげぞう 投稿作成者

    kita様

    コメントありがとうございます。サイドバーの画像入りのリンクですが、これはですね、画像とテキスト別々ではなくて、画像とテキストまで含んだバナーになってますね。なので、このような画像とテキストを入れたバナーを作成する必要があります。

    それでテキスト入りの画像(バナー)ができたら後は飛ばしたいページへのリンクを設置するという手順になりますが、この画像作成がちょっと手間です。フリー素材を探して加工、編集でテキスト文字を入れて作成する必要がありますし、スマホでも見えるサイズの文字テキストにする必要がありますので、このバランスが結構難しいです。

    何度か画像を作成して施行錯誤するような感じになると思います。ちなみに、画像(バナー)が作成できたらサイドバーのウィジェットにテキストを追加して画像を設置、そしてリンクの設置だけです。画像をリンクにする方法はこちらの記事で書いてます。

    挿入した画像をリンクにして好きなページへ飛ばす方法

  5. kita

    いつも参考にさせて頂いております。
    1つ質問(リクエスト?)なんですが、【下記リンク先の左サイドバーにある「お買い得情報」という欄のように、】画像と文字入りのボタンの作成方法は分かりますでしょうか?。
    安易ではないかと思いますが、出来れば設置したいなと思っております。
    もしお時間があれば記事にしていただければ尚助かります。

    無理な要望で申し訳ありません。宜しくお願い致します。

  6. 乃風

    しげぞうさん、うまくいきました。いつもありがとうございます。

  7. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。人気記事一覧の下の余白に80pxの余白がありますね。以下のコードをスタイルシートに追加して下さい。

    .popular-posts ul {
        margin-bottom: 0px !important;
    }

    これで余白を0にしてますが、好きな数値を入れて余白を調整してみて下さい。

  8. 乃風

    こんばんは、しげぞうさん。サイドバーの「人気記事一覧」の一番下が空いてしまっているので、余白を少し削って、全体のバランスを取りたいのですが、どのようにしたらいいのでしょうか? よろしくお願いします。

  9. 乃風

    このコメントが不適切なら、消去してくださいね。睡眠時間が6時間だと、徹夜しているのと同じになるそうです。もし疲れがたまっているようなら、エドガー・ケイシーさんがおススメしていたひまし油温湿布いいですよ。私、パソコンのし過ぎで、ひどい腰痛になってしまいました。なので、今、その湿布が大きな助けになっています。今後もどうぞよろしくお願いします。

  10. 乃風

    しげぞうさん、朝早くから本当にありがとうございます。ただもう、ありがとうと申し上げたい。人気記事一覧の件、了解しました。

  11. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。前回の設定で「Shorten title」で文字数を指定したと思うのですが、その文字数を超える分は「・・・」となって省略される仕様になっています。それが嫌で自分で1つ1つコントロールしたいというのであればこのプラグインを使わずに自分で人気記事を選んで設置する事も可能です。ただ設置はちょっと面倒ですが。

    一応自作の人気記事の設置方法も記事にしてますので参考にしてみて下さい。記事は自動で入れ替わったりはしないので、自信のある記事をピックアップして設置してみるといいかもしれません。
    WordPressのサイドバーに自作の人気記事一覧を表示させる方法

  12. 乃風

    いつもありがとうございます。はい、そうです。「WordPress Popular Posts」を使っております。早速、手順通りにやってみました。25から色んな数字で試してみたのですが、文字が途切れたり、文字がピタリと収まったかと思うとその後に「・・・」が表示されてしまいました。それと、その文字数をどう変更しても、サムネイルの直ぐ下に文字が入り込んでしまいました。規格が決まっているのかな・・・と思いました。現在の状態は38で設定した状態です。取り急ぎ。

  13. しげぞう 投稿作成者

    乃風様

    コメントありがとうございます。乃風様のサイドバーの人気記事はプラグインを使ってましたっけ?「WordPress Popular Posts」を使っていたんではないかなと思います。違ったらすみません。

    もしこのプラグインを使っているのであれば、「外観」⇒「ウィジェット」と進みサイドバーに追加されている「WordPress Popular Posts」というのがあると思います。それを開いて、「Posts settings」という項目の「Shorten title」にチェックを入れて一度下にある保存をクリックします。

    保存できたら先ほどの項目の部分に「Shorten title to 25」という部分があると思います。この25という部分が文字数になりますので、これを調整すれば表示させる文字数を調整できると思います。一度試してみて下さい。

  14. 乃風

    お久しぶりです。いつもお世話になっております。サイドバーの人気記事一覧に表示される文字の配列とサムネイルの位置について、方法があれば教えていただけないでしょうか。

    そのサムネイルの右側に表示される文字行数が5段目に入ると、サムネイルの直ぐ下に文字が回り込んで表示されることに気づきました。文字行数が5段目に入った時だけ、サムネイルをもう少し下にずらして、つまり中央に移動するように設定はできるのでしょうか? そしてその場合、文字は、サムネイルの右側に全て収まるようにすることは可能でしょうか? よろしくお願いします。

  15. hero

    そうでしたか。こちらこそお手間をかけさせてすみませんでした。

    お互い頑張りましょう!

  16. poko 投稿作成者

    >hero様

    返信ありがとうございます。プラグインを使わずにサムネイルを付ける事は可能だとは思うのですが、調べてもよく分かりませんでした。私もできればプラグインは使わずに人気記事を表示させたいのですが色々試行錯誤しても上手くいきませんでした。もう少し勉強が必要ですね。参考にならずすみません。

  17. hero

    ご返答ありがとうございます。
    なるほど、プラグインを使われていたのですね。

    逆にプラグインを使わないと、サイドバーの「人気記事一覧」に正方形のサムネイルを付加させることは不可能なのでしょうか?

  18. poko 投稿作成者

    >hero様

    コメントありがとうございます。私の場合はプラグイン「Wordpress Popular Posts」を使っています。自作の人気記事一覧と違って自分の好きな記事を並べるのではなく、ページビューやコメント数などを基準に人気記事が並ぶのでどちらを選ぶか迷う所です(笑)ちなみにこのプラグインを利用してサムネイルも一緒に表示させると表示が崩れるのでこの記事を読んでやってみて下さい。
    ⇒http://dokidome.com/plugin/774/
    また、プラグインではなく、自作の人気記事一覧のやり方はトップページに目次を作ったりする時に応用できます。

  19. hero

    こんにちは。
    また質問をさせてください。

    今回の記事の通り作業をいたしまして、人気記事一覧をサイドバーにつけることができました。ありがとうございます。
    ところで、このホームページでは、その人気記事一覧の横に、正方形のサムネイル画像が付いていますよね….?私も同じように設定したいのですが、ネットで調べてもチンプンカンプンなのです。

    というコードを入れるとよいらしいですが、どこに入れていいものやらわかりません。

    教えていただけないでしょうか。