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

2015年9月4日カテゴリー : WordPress コメント : 0

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

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

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

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

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

概要

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

サムネイル画像

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

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

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

GIMPで画像の縮小 | Naokix.net

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

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

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

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

記事のタイトルと URL

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

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

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

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

　単純なリスト表示です。

<div class="widget widget_recommend">
    <h2 class="widgetrecommend">おすすめの記事</h2>
    <ul>
        <li>
            <img src="(画像の URL )" /><a href="(記事の URL )">(記事のタイトル)</a>
        </li>
            ・
            ・
            ・
    </ul>
</div>

<h2 class="widgetrecommend">おすすめの記事</h2>

<ul>

<li>

<img src="(画像の URL )" /><a href="(記事の URL )">(記事のタイトル)</a>

</li>

・

</ul>

</div>

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

<div class="widget widget_recommend">
    <h2 class="widgetrecommend">おすすめの記事</h2>
    <ul>
        <li>
            <img src="http://sample/wordpress/wp-content/uploads/2015/09/steak5.jpg" alt="ステーキとは肉のスライスなどを焼いた料理である" /><a href="http://sample/?p=5">ステーキとは肉のスライスなどを焼いた料理である</a>
        </li>
        <li>
            <img src="http://sample/wordpress/wp-content/uploads/2015/09/steak4.jpg" alt="多くの場合はフライパンなどの鉄板を使用して焼き上げる" /><a href="http://sample/?p=4">多くの場合はフライパンなどの鉄板を使用して焼き上げる</a>
        </li>
        <li>
            <img src="http://sample/wordpress/wp-content/uploads/2015/09/steak3.jpg" alt="金網を使用して直火焼きをする場合もある" /><a href="http://sample/?p=3">金網を使用して直火焼きをする場合もある</a>
        </li>
        <li>
            <img src="http://sample/wordpress/wp-content/uploads/2015/09/steak2.jpg" alt="焼き方に合わせた肉の選択と筋切りや下味が味に大きく影響する" /><a href="http://sample/?p=2">焼き方に合わせた肉の選択と筋切りや下味が味に大きく影響する</a>
        </li>
        <li>
            <img src="http://sample/wordpress/wp-content/uploads/2015/09/steak1.jpg" alt="低温下で組織中の酵素により熟成した肉を使用する" /><a href="http://sample/?p=1">低温下で組織中の酵素により熟成した肉を使用する</a>
        </li>
    </ul>
</div>

<h2 class="widgetrecommend">おすすめの記事</h2>

<ul>

<li>

<img src="http://sample/wordpress/wp-content/uploads/2015/09/steak5.jpg" alt="ステーキとは肉のスライスなどを焼いた料理である" /><a href="http://sample/?p=5">ステーキとは肉のスライスなどを焼いた料理である</a>

</li>

<li>

<img src="http://sample/wordpress/wp-content/uploads/2015/09/steak4.jpg" alt="多くの場合はフライパンなどの鉄板を使用して焼き上げる" /><a href="http://sample/?p=4">多くの場合はフライパンなどの鉄板を使用して焼き上げる</a>

</li>

<li>

<img src="http://sample/wordpress/wp-content/uploads/2015/09/steak3.jpg" alt="金網を使用して直火焼きをする場合もある" /><a href="http://sample/?p=3">金網を使用して直火焼きをする場合もある</a>

</li>

<li>

<img src="http://sample/wordpress/wp-content/uploads/2015/09/steak2.jpg" alt="焼き方に合わせた肉の選択と筋切りや下味が味に大きく影響する" /><a href="http://sample/?p=2">焼き方に合わせた肉の選択と筋切りや下味が味に大きく影響する</a>

</li>

<li>

<img src="http://sample/wordpress/wp-content/uploads/2015/09/steak1.jpg" alt="低温下で組織中の酵素により熟成した肉を使用する" /><a href="http://sample/?p=1">低温下で組織中の酵素により熟成した肉を使用する</a>

</li>

</ul>

</div>

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

2150903_5

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

CSS を編集

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

.widget_recommend ul {
    list-style: none;
}

.widget_recommend ul li {
    border-bottom: 1px dotted #ff0000;
}

.widget_recommend ul li img {
    float: left;
}

.widget_recommend ul {

list-style: none;

}

.widget_recommend ul li {

border-bottom: 1px dotted #ff0000;

}

.widget_recommend ul li img {

float: left;

}

こうなります。

2150903_6

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

.widget_recommend ul {
    list-style: none;
}

.widget_recommend ul li {
    border-bottom: 1px dotted #ff0000;
    overflow: hidden;
}

.widget_recommend ul li img {
    float: left;
}

.widget_recommend ul {

list-style: none;

}

.widget_recommend ul li {

border-bottom: 1px dotted #ff0000;

overflow: hidden;

}

.widget_recommend ul li img {

float: left;

}

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

2150903_7

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

.widget_recommend ul {
    list-style: none;
    padding: 5px 10px 10px 10px;
}

.widget_recommend ul li {
    border-bottom: 1px dotted #ff0000;
    overflow: hidden;
    font-size: 12px;
    margin-top: 10px;
    padding-bottom: 10px;
}

.widget_recommend ul li img {
    float: left;
    margin-right: 5px;
}

.widget_recommend ul {

list-style: none;

padding: 5px 10px 10px 10px;

}

.widget_recommend ul li {

border-bottom: 1px dotted #ff0000;

overflow: hidden;

font-size: 12px;

margin-top: 10px;

padding-bottom: 10px;

}

.widget_recommend ul li img {

float: left;

margin-right: 5px;

}

あと一息ですよ。

2150903_8

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

.widget_recommend ul {
    list-style: none;
    padding: 5px 10px 10px 10px;
}

.widget_recommend ul li:first-child {
    margin-top: 5px;
}

.widget_recommend ul li {
    border-bottom: 1px dotted #ff0000;
    overflow: hidden;
    font-size: 12px;
    margin-top: 10px;
    padding-bottom: 10px;
}

.widget_recommend ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.widget_recommend ul li img {
    float: left;
    margin-right: 5px;
}

.widget_recommend ul {

list-style: none;

padding: 5px 10px 10px 10px;

}

.widget_recommend ul li:first-child {

margin-top: 5px;

}

.widget_recommend ul li {

border-bottom: 1px dotted #ff0000;

overflow: hidden;

font-size: 12px;

margin-top: 10px;

padding-bottom: 10px;

}

.widget_recommend ul li:last-child {

border-bottom: none;

padding-bottom: 0;

}

.widget_recommend ul li img {

float: left;

margin-right: 5px;

}

いいかんじです。

2150903_9

文字の回り込みを防ぐ

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

2150903_10

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

<div class="widget widget_recommend">
    <h2 class="widgetrecommend">おすすめの記事</h2>
    <ul>
        <li>
            <div class="thumbnail_recommend">
                <img src="http://sample/wordpress/wp-content/uploads/2015/09/steak5.jpg" alt="ステーキとは肉のスライスなどを焼いた料理である" />
            </div>
            <div class="title_recommend">
                <a href="http://sample/?p=5">ステーキとは肉のスライスなどを焼いた料理である</a>
            </div>
        </li>
        <li>
            <div class="thumbnail_recommend">
                <img src="http://sample/wordpress/wp-content/uploads/2015/09/steak4.jpg" alt="多くの場合はフライパンなどの鉄板を使用して焼き上げる" />
            </div>
            <div class="title_recommend">
                <a href="http://sample/?p=4">多くの場合はフライパンなどの鉄板を使用して焼き上げる</a>
            </div>
        </li>
        <li>
            <div class="thumbnail_recommend">
                <img src="http://sample/wordpress/wp-content/uploads/2015/09/steak3.jpg" alt="金網を使用して直火焼きをする場合もある" />
            </div>
            <div class="title_recommend">
                <a href="http://sample/?p=3">金網を使用して直火焼きをする場合もある</a>
            </div>
        </li>
        <li>
            <div class="thumbnail_recommend">
                <img src="http://sample/wordpress/wp-content/uploads/2015/09/steak2.jpg" alt="焼き方に合わせた肉の選択と筋切りや下味が味に大きく影響する" />
            </div>
            <div class="title_recommend">
                <a href="http://sample/?p=2">焼き方に合わせた肉の選択と筋切りや下味が味に大きく影響する</a>
            </div>
        </li>
        <li>
            <div class="thumbnail_recommend">
                <img src="http://sample/wordpress/wp-content/uploads/2015/09/steak1.jpg" alt="低温下で組織中の酵素により熟成した肉を使用する" />
            </div>
            <div class="title_recommend">
                <a href="http://sample/?p=1">低温下で組織中の酵素により熟成した肉を使用する</a>
            </div>
        </li>
    </ul>
</div>

<h2 class="widgetrecommend">おすすめの記事</h2>

<ul>

<li>

</div>

<a href="http://sample/?p=5">ステーキとは肉のスライスなどを焼いた料理である</a>

</div>

</li>

<li>

</div>

<a href="http://sample/?p=4">多くの場合はフライパンなどの鉄板を使用して焼き上げる</a>

</div>

</li>

<li>

</div>

<a href="http://sample/?p=3">金網を使用して直火焼きをする場合もある</a>

</div>

</li>

<li>

</div>

<a href="http://sample/?p=2">焼き方に合わせた肉の選択と筋切りや下味が味に大きく影響する</a>

</div>

</li>

<li>

</div>

<a href="http://sample/?p=1">低温下で組織中の酵素により熟成した肉を使用する</a>

</div>

</li>

</ul>

</div>

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

.widget_recommend ul {
    list-style: none;
    padding: 5px 10px 10px 10px;
}

.widget_recommend ul li:first-child {
    margin-top: 5px;
}

.widget_recommend ul li {
    border-bottom: 1px dotted #ff0000;
    overflow: hidden;
    font-size: 12px;
    margin-top: 10px;
    padding-bottom: 10px;
}

.widget_recommend ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.thumbnail_recommend {
    float: left;
    margin-right: 10px;
}

.thumbnail_recommend img {
    border: 1px solid #ccc;
}

.widget_recommend ul {

list-style: none;

padding: 5px 10px 10px 10px;

}

.widget_recommend ul li:first-child {

margin-top: 5px;

}

.widget_recommend ul li {

border-bottom: 1px dotted #ff0000;

overflow: hidden;

font-size: 12px;

margin-top: 10px;

padding-bottom: 10px;

}

.widget_recommend ul li:last-child {

border-bottom: none;

padding-bottom: 0;

}

.thumbnail_recommend {

float: left;

margin-right: 10px;

}

.thumbnail_recommend img {

border: 1px solid #ccc;

}

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

まとめ

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

WordPressユーザーのためのPHP入門はじめから、ていねいに。

posted with カエレバ

水野史土エムディエヌコーポレーション 2014-03-25

Amazon

楽天市場

Tag : WordPress