【WordPress】ウィジェットエリアに自分で選んだピックアップ記事を表示する方法

WordPressでブログを書いている方で人気記事のランキングを表示させている方は多く、人気記事のランキングを表示させるのに便利なプラグイン「WordPress Popular Posts」を使うと簡単にウィジェットエリアに表示させることができます。実際、自分も使っていました。

しかし、ブログ運営を続けている上で人気記事のランキング表示では色々と問題になってくる部分があり、いっそのこと自分で選んだピックアップ記事を表示させてみよう！と思って表示させてみましたのでそのカスタマイズ方法となります。

1 人気記事のランキング表示で問題になってくる部分
- 1.1 「WordPress Popular Posts」はアクセスのたびにプログラムを実行する必要があるため、サイト表示が重くなる
- 1.2 サイトによっては人気記事のランキングがほぼ固定されて使う意味がなくなる
  - 1.2.1 ランキングが固定されやすいサイト
2 今回のカスタマイズで参考にさせていただいた記事
3 実装方法
- 3.1 実装イメージ
- 3.2 実装の仕方
4 あとがき

実装方法

実装イメージ

20170501_01

実装イメージとしては上図のように左側にアイキャッチを縮小した写真が入って右側に記事のタイトルが含まれたものです。これをサイドバーのウィジェットエリアに含めて縦に複数並ぶように実装しました。左上にCSSのカウンタも付けました。

実装の仕方

まずは、あらかじめ自分でピックアップ記事として表示させる記事を選んでおき、その記事のアイキャッチを縮小した画像を作っておき「WordPress管理画面」⇒「メディア」⇒「新規追加」から画像をアップロードしておきます。

なお、自分のサイト用にはアイキャッチを縮小した画像は「80px × 80px」のサイズにしてアップロードしました。サイドバーの幅が300px程度であればこのぐらいがちょうどいいです。

次は、「外観」⇒「ウィジェット」で「テキスト」というウィジェットを表示させたい任意の場所に入れます。

20170501_02

「タイトル」はおすすめ記事やピックアップ記事などがいいですね。自分はピックアップ記事としました。

「内容」に以下のようにHTMLのコードを記述します。(縦に3つ表示させる場合です。)

<div class="widget widget_recommend">
    <ul>
        <li>
            <img src="(アイキャッチ縮小画像1のURL)" alt="(アイキャッチ縮小画像1の説明)" /><p><a href="(記事1のリンク)">記事1のタイトル</a></p>
        </li>
    </ul>
    <ul>
        <li>
            <img src="(アイキャッチ縮小画像2のURL)" alt="(アイキャッチ縮小画像2の説明)" /><p><a href="(記事2のリンク)">記事2のタイトル</a></p>
        </li>
    </ul>
    <ul>
        <li>
            <img src="(アイキャッチ縮小画像3のURL)" alt="(アイキャッチ縮小画像3の説明)" /><p><a href="(記事3のリンク)">記事3のタイトル</a></p>
        </li>
    </ul>
</div>

アイキャッチ縮小画像のURL⇒「WordPress管理画面」⇒「メディア」⇒「ライブラリ」からアップロードしたアイキャッチ縮小画像を選択して「URL」をコピーして貼り付けます。
アイキャッチ縮小画像の説明⇒「WordPress管理画面」⇒「メディア」⇒「ライブラリ」からアップロードしたアイキャッチ縮小画像を選択して「代替テキスト」をコピーして貼り付けます。
記事のリンク⇒記事のリンク先をコピーして貼り付けます。
記事のタイトル⇒記事のタイトルをコピーして貼り付けます。

上記を入力したら「保存」ボタンを押下して保存します。

次に表示の調整のためにCSSを記述します。
「外観」⇒「テーマの編集」⇒「style.css」に記述しました。

※ テーマによってCSSファイル名が違っていたりするため要注意です。

/* ウィジェット ピックアップ記事用 */
.widget.widget_recommend {
    padding: 0!important;
}

.widget_recommend ul {
    list-style: none;
    padding: 5px 5px 5px 0px!important;
    margin: 0 0 10px 0!important;
}
 
.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 li p {
    overflow: auto;
    padding-left: 10px;
    margin: 0!important;
}

/* カウンターの初期化 */
.widget.widget_recommend {
    counter-reset: pickup-content;
}

/* カウンターの値を表示 */
.widget.widget_recommend li:before {
    content: counter(pickup-content, decimal);
    counter-increment: pickup-content;
}

.widget.widget_recommend li {
    position: relative;
    list-style-type: none;
    padding-top: 5px;
    padding-left: 5px;
}

.widget.widget_recommend li:before {
    content: counter(pickup-content, decimal);
    counter-increment: pickup-content;
    background-color: #e4007f;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    padding: 4px 8px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

※ ご使用のWordPressテーマによって「!important宣言」が必要だったり要らなかったり「margin」や「padding」の調整などを合うように調整してください。

上記の実装により以下のように表示させることができました！

20170501_03