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

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

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

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

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

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

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

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

スポンサーリンク

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

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

人気記事一覧-1

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

人気記事一覧-2

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

人気記事一覧-3

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

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

人気記事一覧-4

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

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

人気記事一覧-5

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

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

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

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

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

人気記事サムネイル-1

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

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

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

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

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

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

サムネイル画像変更-1

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

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

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

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

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

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

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

サムネイル画像変更-2

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

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

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

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

人気記事一覧-1

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

人気記事一覧-2

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

人気記事一覧-3

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

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

  • 「img src=」の部分は先程調べたサムネイルの画像のimgタグコードを入れます
  • 「 # 」の部分にその記事のURLを入れます(#は消して)
  • タイトル1~5にはその記事のタイトルを入れます

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

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

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

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

にほんブログ村 小遣いブログ アフィリエイトへ
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

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

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

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

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

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

CAPTCHA


  1. しげぞう 投稿作成者

    yuco様

    コメントありがとうございます。サイドバーの画像の下にタイトルが来るというのは多分CSSが効いてない感じがします。今回追加したコード、もしくはそれ以前のコードが原因の場合もあります。また私のミスって事もあるかもです。もし良かったらその状態でURL教えてもらえると助かります。

    それからYet Another Related Posts Pluginですが、エックスサーバーのサーバーパネルからphpmyadmin(MySQL5.7)という項目をクリックしてログインしていきます。再度確認してみてもらえますか?

  2. yuco

    はじめまして、
    初めてのワードプレスで全てこちらでお世話になっております。

    早速ですが、サイドバーのウィジェットに関しての質問です。
    cssにも追記したのですが、画像のとなりに表示されるタイトルが下に出てしまいます。
    長いタイトルですと画像の下に回り込んでしまいます。

    もう一つですが、Yet Another Related Posts Pluginで「タイトル」「内容」が選択できなかったので、XサーバーのSQLの情報を確認しようと思いましたらこちらに書かれてあるような情報が書いてありませんでした。考えられることはありますでしょうか?

    よろしくお願いいたします

  3. suma

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

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

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

  4. しげぞう 投稿作成者

    suma様

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

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

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

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

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

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

  5. suma

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

  6. しげぞう 投稿作成者

    kita様

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

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

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

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