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

Cocoonカスタマイズ

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

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

スポンサーリンク

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ページキャッシュを削除してくださいね。

こうなります。

今回はサルワカさんの「【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30」を参考にさせて頂きました。自分でもやってみたのですがデザインセンスがなさすぎて……笑。

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

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

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

改善案

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

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

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

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

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

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

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

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

コメント