Cocoonのショートコードで表示する新着記事を2カラムで表示にする方法

Cocoon

はじめに

本記事では、Cocoonの新着記事を表示するショートコード(new_list)で2カラム表示にする方法について記載します。
「ホームページの表示」設定で「最新の投稿 」を選択している場合、新着記事一覧は、2カラムで表示されますが、新着記事一覧を表示するショートコード(new_list)を使用した場合、1カラム表示になってしまいます。「最新の投稿」と同じように、2カラム表示にしたいと考えられている方も多いのではないでしょうか。

環境

  • Cocoon
    バージョン:2.2.8.8
  • Cocoon Child
    バージョン:1.1.2
  • WordPress
    バージョン: 5.7.1

カスタマイズ前の表示状態

「最新の投稿」での新着記事一覧

WordPressの「設定」→「表示設定」→「ホームページの表示」で、「最新の投稿」を選択している場合、フロントページは、以下のように新着記事一覧が2カラムで表示されます。

ショートコードでの新着記事一覧

フロントページ用の固定ページを別途作成し、ショートコード(new_list)で新着記事一覧を表示すると、以下のように1カラム表示になります。

新着記事一覧を2カラムで表示する方法

カスタマイズCSSの追記

Cocoon Childのスタイルシートにテーマエディタを使用して、カスタマイズCSSを追記します。
WordPressの「外観」→「テーマエディター」を選択します。

「テーマを編集」画面が表示されますので、「編集するテーマを選択」欄で、「Cocoon Child」が選択されていることを必ず確認して下さい。

次のCSSをCocoon Child: スタイルシートに追記します。


/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 2カラム表示にする
**********************************************/
.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%;
}

【備考】
特定のショートコードを対象とするため、「fp-new-entry-cards」クラスを使用しています。
このため、new_listのclassオプションで、「class=”fp-new-entry-cards”」を設定するようにして下さい。

ショートコードのclassオプションの追加

2カラム表示したいショートコード(new_list)に、classオプション「class=”fp-new-entry-cards”」を追加します。既にclassオプションが設定されている場合は、追加してください。

[new_list ~(省略)~ class="fp-new-entry-cards"]

以上で、カスタマイズは終了です。

動作確認

以下のように、ショートコードでの新着記事一覧が、2カラムで表示されていることを確認して下さい。

以上です。

タイトルとURLをコピーしました