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

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」を押してリロード。

コメント

  1. 乃風 より:

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

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

  2. hero より:

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

    お互い頑張りましょう!

  3. poko より:

    >hero様

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

  4. hero より:

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

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

  5. poko より:

    >hero様

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

  6. hero より:

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

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

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

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

タイトルとURLをコピーしました