【Cocoon】新着記事・人気記事をページ上部に表示させてデザインするカスタマイズ

こんにちは、バーチャルブロガー大学生ことさいとう（@S41T0H）です。

今回はわいひらさん作成の最高な無料WordPressテーマ「Cocoon（コクーン）」で新着記事・人気記事を投稿上部に表示させてデザインするカスタマイズ方法を紹介します。

この記事の目次

Cocoonは人気記事ウィジェットが標準搭載で便利。
フロントページ上部には人気記事、投稿ページ上部には新着記事を表示する。
- こんな感じにウィジェットが表示されます。
新着記事・人気記事のデザインをCSSでカスタマイズする
- まずはHTMLの構造をチェック。
- CSSカスタマイズデザイン例
改善案

Cocoonは人気記事ウィジェットが標準搭載で便利。

このCocoonテーマ、いままでだったら実装にプラグインを追加しなければいけなかったこともテーマ内で完結するように出来ています。たとえばこんな。

ページごとのウィジェット表示の切り替え
目次の自動挿入
SNSシェア数カウント機能
カルーセル実装

便利ですよね。ちなみに上のボックスも標準機能です。最高。

というわけで、今回は一番上の「ページごとのウィジェット切り替え」を利用して、フロントページ上部には人気記事、投稿ページ上部には新着記事を表示してみます。

なぜ表示を変えるかというと、ページ上部に載せる内容として、フロントページは新着記事が既にインデックスリストとして表示されているから人気記事を載せたいし、投稿ページは検索流入を見込んでいるため新着記事を表示させ最新記事に気付いてもらいたいからです（検索流入は多くが人気記事ですし）。このへんは自己判断でいろいろ試してみてください。

投稿ページには、サイドバーか投稿下部に人気記事ウィジェットを入れるといいかもしれませんね。

フロントページ上部には人気記事、投稿ページ上部には新着記事を表示する。

「外観」→「ウィジェット」から、このようにウィジェットを配置してみました（クリックで拡大）。

そして、「人気記事」の方はフロントページのみで表示させる設定（下図参照）にして、

「新着記事」の方は投稿ページのみで表示させるようにします（下図参照）。

僕はゴチャゴチャするのがイヤで固定ページや一覧ページでは新着記事を掲載したくないため上記設定にしていますが、必要に応じて変えてください。

表示させたいページの選択窓が表示されない場合は、ウィジェットの「保存」を押してからページをリロードしてみてください。

デフォルトでは表示件数が5になっているので、必要に応じて変えてください（3件くらいがちょうどいい……？）。

こんな感じにウィジェットが表示されます。

これでもシンプルで良いですが、ちょっと簡素ですね。

ここから、この部分をCSSで装飾していきます。

新着記事・人気記事のデザインをCSSでカスタマイズする

まずはHTMLの構造をチェック。

.widget-index-top or .widget-above-single-content-title

.main-widget-label「人気記事」or「新着記事」ラベル

.widget-entry-cards

各エントリー

.widget-entry-card-thumbサムネイル画像

.widget-entry-card-content説明文

.widget-entry-cards

他のエントリー（省略）

︙

上がトップ部分のHTML構造です（一部簡略化）。

全体を囲むdiv要素のクラス名は、フロントページ用（インデックスリスト用）が「.widget-index-top」で投稿ページ用が「.widget-above-single-content-title」となっています。

ちょっと見づらいですが、個別でカスタマイズしたい場合は各要素左上ののクラス名を参考にしてください。

CSSカスタマイズデザイン例

というわけで早速カスタマイズしていきましょう。

下記のCSSサンプルを小テーマのstyle.cssに追記してください。

.widget-index-top,
.widget-above-single-content-title {
    position: relative;
    margin: 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.widget-index-top .main-widget-label,
.widget-above-single-content-title .main-widget-label {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 15px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.widget-index-top .main-widget-label::before,
.widget-above-single-content-title .main-widget-label::before {
    font-family: FontAwesome;
    content: "\f135";
    margin-right: 5px;
}

.widget-index-top .widget-entry-card-content,
.widget-above-single-content-title .widget-entry-card-content{
    display: table-cell;
    height: 74px;
    vertical-align: middle;
    font-size: 15px;
}

CSSをカスタマイズするには「外観」→「テーマの編集」から必ず「小テーマ（Cocoon Child）」の「スタイルシート（style.css）」に追記しましょう。 CSSの変更が反映されない場合はCtrl+F5でページキャッシュを削除してくださいね。

こうなります。