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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

上がトップ部分の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】おしゃれなボックスデザイン（囲み枠）のサンプル30」を参考にさせて頂きました。自分でもやってみたのですがデザインセンスがなさすぎて……笑。

サーバーキャッシュ系のプラグイン（LiteSpeed Cacheなど）を使用している場合はCSSキャッシュをパージすることもお忘れなく。

ラベルの部分にはFontAwesomeのアイコンフォントを利用してロケット記号を入れています（最新のFontAwesomeを使用している場合はfont-family: “Font Awesome 5 Free”;と指定してください）。

必要に応じてアレンジしてみてくださいね。

改善案

それぞれのエントリーを横並びにしたほうが見栄えがよさそうですね。いつかやってみたいと思います。

Cocoon 0.5.3で動作確認していますが、今後のアップデートで使用できなくなる可能性もなくはないのでご了承ください。

【支援お待ちしております！】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです！（300円単位での投げ銭が可能です）

継続的な更新・サポートのためにご支援お願いいたします……！

▶支援先：サイトに掲載するCSSカスタマイズの支援をお待ちしています！

サイトに掲載するCSSカスタマイズの支援をお待ちしています！ - polca（ポルカ）

"今後の記事執筆の励みになります！"を支援のおかえしとして受け取ることができます。

polca.jp

その他のカスタマイズは下記ボタンから。