前略、匿名 さん

Cocoonには「新着記事」ウィジェットや「人気記事」ウィジェット、「関連記事」など、いろいろなウィジェットが用意されています。

ですので、プラグインを使わなくても済むケースもあろうかと推測します。

どの場所に、どのようなものを表示なさりたいのかを、ご提示いただくのも、ひとつの方法かと思います。

匿名 さん

ブログのどの位置に、どのようなものを表示したいのかは、実際のサイトでお示しいただくのが、一番わかりやすいです。

匿名 さん

私も使ったことがなかったのですが、記事下の関連記事のデザインもいくつかのパターンが選べるみたいです。

関連記事のデザイン変更を行う方法

匿名 さん

Cocoon設定の「投稿」タブの下の方に関連記事のデザインを設定する場所があるみたいです。

匿名 さん

ちょうど今日、別のトピックで、新着記事ウィジェットで横に並べるCSSのコードを書いてみたところです。

 
/*新着記事を4列横並びにする*/

#new_entries-4 .new-entry-cards {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

#new_entries-4 .new-entry-cards > a {/*4列にする*/
   width: 24%;
}

#new_entries-4 .widget-entry-cards.card-large-image .a-wrap {
   max-width: none;/*最大幅400pxの指定を初期化する*/
}

#new_entries-4 .new-entry-cards::after {/*クリアフィックス用のアイテムを消す*/
   content: none;
}


@media screen and (max-width:768px) {/*画面幅が768px以下のとき2列にする*/

   #new_entries-4 .new-entry-cards > a {
      width: 48%;
   }

}

@media screen and (max-width:480px) {/*画面幅が480px以下のとき1列にする*/

   #new_entries-4 .new-entry-cards > a {
      width: 95%;
   }

}

試してはいないのですが、「コンテンツ上部」のウィジェットエリアに「新着記事」ウィジェットを入れれば表示されるかと思います。

PCで４記事横並び、で画面幅によって、２列になり、１列になります。

PCで５記事横並びの場合は、コードをアレンジする必要がありますが・・

ウィジェット以外にも便利なショートコードがありますよ。

https://wp-cocoon.com/new_list/

私もRelated Postsは過去に使っていましたが、今はすべてショートコードかウィジェットを使っています。

匿名 さん

５記事横並びのコードも書いてみました。

/*新着記事を5列横並びにする(スマホでは２列４記事)*/

#new_entries-4 .new-entry-cards {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

#new_entries-4 .new-entry-cards > a {/*5列にする*/
   width: 19%;
}

#new_entries-4 .widget-entry-cards.card-large-image .a-wrap {
   max-width: none;/*最大幅400pxの指定を初期化する*/
}

#new_entries-4 .new-entry-cards::after {/*クリアフィックス用のアイテムを消す*/
   content: none;
}


@media screen and (max-width:768px) {/*画面幅が768px以下のとき2列にする*/

   #new_entries-4 .new-entry-cards > a {
      width: 48%;
   }

   #new_entries-4 .new-entry-cards > a:nth-of-type(5) {/*最後の１記事を非表示にする*/
      display: none;
   }

}

「#new_entries-4」の部分は、ウィジェットに割り振られるIDなので、ウィジェットを設置した際にデベロッパーツールでIDを調べる必要があります。

匿名 さん

コードだけですと、イメージが掴めないと思うので・・