【Cocoon】ショートコードの新着一覧を２カラム表示にする方法

WordPressテーマ『Cocoon』では、新着記事の一覧をショートコードで表示させることができます。

基本的な設置方法

ショートコードの挿入

編集バーからショートコードのアイコンをクリックし、「新着記事一覧」をクリックします。

段落内にショートコードが挿入されます。

下のように新着記事が一覧で表示されます。（プレビューで確認する。）

その他

先ほどのショートコードの「new_list」よりあとの要素はすべてデフォルトの値になっているので、表示形式を変える必要がない場合は下のように「new_list」のみの記述だけで十分です。

[new_list]

設置やカスタマイズの詳細については、下の『Cocoon』公式のページから。

新着記事一覧を表示するショートコードの利用方法

新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

wp-cocoon.com

次は、新着記事一覧を２カラムで（２列に）表示させる方法です。

２カラムにする方法

CSS

「外観」＞「テーマファイルエディター」を開き、「子テーマ（Cocoon Child）」の「style.css」に以下のコードを記述（コピペ）します。

/************************************
** ショートコードの新着一覧を２カラム表示にする
************************************/
.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
    width: 49.5%;
}

ショートコード

ショートコードの要素に以下の記述を加えます。

class="class-a class-b fp-new-entry-cards"

[new_list class="class-a class-b fp-new-entry-cards"]

[new_list count="4" class="class-a class-b fp-new-entry-cards"]

下のように新着記事一覧が２カラム（２列）表示になります。

（※上の画像は記事数４の場合。）