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

20170501_04
Pocket

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

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



 

人気記事のランキング表示で問題になってくる部分

自分のサイトでも人気記事のランキングを表示させるのに便利なプラグイン「WordPress Popular Posts」を使って人気記事のランキングを表示させていましたが、色々と問題になってくる部分が出てきました、自分が問題だと思ったのは以下の部分です。

 

「WordPress Popular Posts」はアクセスのたびにプログラムを実行する必要があるため、サイト表示が重くなる

WordPress Popular Postsはサイトへアクセスするたびに集計して人気記事のランキング表示をするため、データ量や集計処理が膨大になってページの表示が重くなってしまうんですよね。

ブログを長く続けていくほどにデータ量や集計処理は膨大になっていくため、後々になってページの表示が重くなったり特定の記事がバズったとき(急激にアクセスが増えたとき)にCPU負荷が高くなりレンタルサーバーから警告を受けやすくなったりする可能性があります。

便利なプラグインではあるんですけどね。

 

サイトによっては人気記事のランキングがほぼ固定されて使う意味がなくなる

以下のようなサイトでは人気記事のランキングが固定されやすく、使う意味がなくなってきます。(自分のサイトも含めでしたが。)

 

ランキングが固定されやすいサイト

  • 検索流入(Google,yahoo検索など)メインのサイト
  • あまり頻繁には記事を書かないサイト
  • 離脱率、直帰率が高いサイト

 

検索流入メインのサイトだと検索で上位に表示されやすい記事ばかりが見られる傾向が強く、さらに離脱率及び直帰率が高くてあまり頻繁には記事を書かないサイトだとそれが特に顕著に表れますからね。

サイト運営という意味では、ちょくちょく質の高い記事を書いたり離脱率及び直帰率を低くする対策をすべきですが・・・忙しくて記事を書けなかったり単に記事のネタがなかったりとなかなか上手くいかない部分があります。

 

上記の問題があった為、いっそのこと自分で選んだピックアップ記事を表示すればいいんじゃないか?と思い、カスタマイズして表示させてみることにしました。

 

今回のカスタマイズで参考にさせていただいた記事

今回のカスタマイズでは以下の記事を参考にさせていただきました!

 

プラグインなしでWordPressに「おすすめ記事」を表示する方法
http://naokixtechnology.net/wordpress/951

 

【WordPress】人気記事ランキングに「順位」をCSSだけでいい感じに表示させる【WordPress Popular Posts】
http://hapisupu.com/2015/11/wordpress-popular-posts-display-ranking-only-css/

 

上記の記事でのやり方を合わせて自分のサイト用に調整して実装しました。

 

実装方法

実装イメージ

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

 

あとがき

要するに、今回の方法は自分で選んだピックアップ記事をプラグインを使わずにhtml,cssを記述するだけで表示させよう!という方法です。
脱プラグインのために今後もできるだけ自分で実装できる機能は自分で実装していこうと思います!

 
 



Pocket

コメントを残す

メールアドレスが公開されることはありません。