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. kita より:

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

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

  2. しげぞう より:

    乃風様

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

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

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

  3. 乃風 より:

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

  4. しげぞう より:

    乃風様

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

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

  5. 乃風 より:

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

  6. しげぞう より:

    乃風様

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

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

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

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