プラグインなしでWordPressに「おすすめ記事」を表示する方法

 ブログの SEO として直帰率改善のためにサイドバーに「人気記事」や「おすすめの記事」を表示するのは定番の方法です。プラグインとして有名なのが「WP-PostViews」と「WordPress Popular Posts」が双璧ですが、当ブログではこれらを使いたくないのであります。

プラグインを使いたくない理由

 「WP-PostViews」と「WordPress Popular Posts」といえば、一度導入すれば自動で日々のアクセス数を集計し、アクセス数の多いエントリーを人気の記事としてランキングで表示してくれる非常に優秀なプラグインなのですが、

  • アクセス数の多い記事が訪問してくれる人に読んでほしい記事とは限らない
  • 表示速度改善のために導入するプラグインはできるだけ少なくしたい
  • アクセス数表示機能によって当ブログのアクセス数が少ないのがバレたくない

という理由により、おすすめ記事を自前で用意することと相成りました。「3つ目が理由なんだろ」って?いやいやいや。そんなんじゃないから、本当に。

概要

 サムネイル画像をアップロードし、記事のアドレスをコピーし、sidebar.php にソースコードを書いて CSS で装飾するだけ。PHP と HTML を少し知っている人なら、誰でも簡単にできます。

サムネイル画像

 なくてもいいものですが、記事のイメージをひと目で相手に伝えるのに便利なものなので、できるだけ用意したいものです。無料で使える画像がネットで公開されているので、有難く使わせていただきましょう。よろしければ併せてこちらもどうぞ。

WordPress初心者必見!アイキャッチ画像を集めるのに便利な無料写真素材サイト7選 | Naokix.net

画像が用意できたらサーバーにアップロードする訳ですが、画像をサムネイルとしてしか使わないのであれば、HTML の記述次第で縮小して表示できるとはいえ、最初から小さくしておいた画像をアップロードしたほうが WordPress のデータベース容量を圧迫しないで済むでしょう。こちらも参考にしてください。

GIMPで画像の縮小 | Naokix.net

画像の加工も終わりましたら、サーバーにアップロードします。

 サムネイル画像を表示するためには画像の URL が必要になります。WordPress 管理画面で「メディア」を選択すると、このような画面になります。

2150903_1

URL の欲しい画像をクリックすると、「添付ファイルの詳細」画面になりますので、

2150903_2

右側の「URL」でアドレスを選択してコピーすれば URL が手に入ります。

記事のタイトルと URL

 「おすすめの記事」として表示したいエントリーのタイトルと URL を入手します。WordPress 管理画面の「投稿」を選択してください。

2150903_3

目的の記事の編集画面に移動します。

2150903_4

タイトルと URL をコピーしておきます。

テーマの sidebar.php を編集する

 単純なリスト表示です。

画像の URL や記事の URL、記事のタイトルに先ほどコピーしておいたものを使います。こんなかんじのものを sidebar.php に挿入します。

CSS の設定をしていないので、このように表示されます。

2150903_5

このサムネイルは 75X75px で前もって縮小しておいたものです。テーマにあわせた大きさの画像をお使いください。また、編集前の sidebar.php は別の場所に保存しておいたほうがよいでしょう。追記場所を間違えて表示が崩れてしまっても、すぐに戻すことができます。

CSS を編集

 いろいろなやり方があると思いますが、一例をご紹介しておきます。とりあえず大雑把に設定。

こうなります。

2150903_6

うーん、ズレズレ。「WordPressの「続きを読む」をスタイルシートでカスタマイズするとき注意すること | Naokix.net」で似たような解説をしましたが、リストの li の高さがちゃんと出ていないように見えます。li に「overflow: hidden;」を追加。

いいんじゃないでしょうか。

2150903_7

あとはフォントのサイズや margin・padding などの細かい部分を設定。

あと一息ですよ。

2150903_8

最後の li に下線が残っているのが気になります。仕上げに「WordPressのサイドバーのリストの最後の下線を消したいとき | Naokix.net」で得た知識を活かしてみました。

いいかんじです。

2150903_9

文字の回り込みを防ぐ

 実際に運用して気づいたのですが、エントリーのタイトルが長いと文字が回り込んでしまいます。

2150903_10

このままでもいいのですが、個人的に気になったので文字が回り込まないようにソースを少し修正してみました。サムネイルとタイトルを div タグで囲んだだけです。

これにあわせて CSS のほうも修正しておきます。

ついでにサムネイルに濃い目の灰色で枠をつけました。

まとめ

 当ブログはサイドバーに自作の「おすすめの記事」を設置しましたが、訪問してくれる人が多くて頻繁に記事の更新をするような、例えば2ch まとめサイトのようなブログの場合には、素直にプラグインを導入したほうがよいかもしれません。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP