WordPressテーマ「Cocoon」と「AFFINGER6」は、高機能で人気のあるテーマですが、標準機能だけで「投稿日順」に記事を並べたページを作成する方法は少し違いがあります。
この記事では、両テーマで投稿日順ページを作成する方法をわかりやすく解説します。

基本的にホームは更新日順にしているため、投稿日順は管理画面から見るしかないのですが、これが少々面倒なんですよね。
更新した順番っていうのは自分でもあまり覚えていないけど、投稿した順番ならある程度覚えてるから記事のチェックがしやすいんだよね!


投稿日順ページの作成はどちらかと言えばブログ運営者にメリットがある機能と言えますね。
かと言って見に来てくれた人にデメリットも別にないしね!

Cocoonでの投稿日順ページの作成手順はカンタン!

手順: 固定ページに投稿日順のページを作成
- 固定ページメニューに移動し、「新規固定ページを追加」をクリックします。
- タイトルに「投稿日順」と入力します(タイトルは任意で変更可能です)。
- 本文に以下のショートコードを貼り付けます。
- 保存して公開します。
ショートコード
[new_list count="1000"]

ポイント
count=""に入れる数字は、記事の最大表示数(何も入れなければ5件)

Cocoonではすでに対応しているショートコードのため、投稿日順のページを作成するのは本当にただこれだけです。
投稿日順ページが作成できたら、外観>メニューから追加するだけだね!


AFFINGER6での投稿日順ページの作成手順はちょっとだけトリッキー!


AFFINGER6では、標準機能で簡単に投稿日順を変更する方法がないため、少々厄介ですがプラグインを使うことで解決できます。
ただ、それだけだとテキストリンクだけの味気ないページができてしまうから、上のキャプチャーみたいにカードにして表示させる方法も一緒に記載するね!

プラグイン「List category posts」のインストール
まずは、「List category posts」プラグインをインストールします。

手順
- WordPressダッシュボードにログイン:WordPressの管理画面にアクセスします。
- プラグインの検索:左側のメニューから「プラグイン」→「新規追加」をクリックします。
- プラグインのインストール:検索バーに「List category posts」と入力し、見つかったプラグインをインストールして有効化します。
プラグインを入れる時は必ず「有効」にするのを忘れないようにね!

ショートコードの貼り付け

手順: 固定ページに投稿日順のページを作成
- 固定ページメニューに移動し、「新規固定ページを追加」をクリックします。
- タイトルに「投稿日順」と入力します(タイトルは任意で変更可能です)。
- 本文に以下のコードを貼り付けます。
- 保存して公開します。
投稿日順ショートコード
[catlist name=category_name thumbnail=yes date=yes numberposts=1000]

「numberposts=」で表示する投稿数を指定します。
(デフォルトだと10)
更新日順のショートコードは下記の通りね!

更新日順ショートコード
[catlist name=category_name thumbnail=yes date=no numberposts=1000 orderby=modified]
-
-
【AFFINGER6】「タブ式 カテゴリー記事一覧」の設定と、スマホにも反映させる方法
AFFINGER6の「タブ式 カテゴリー記事一覧」機能は、複数のカテゴリーをタブ形式で整理して表示できる便利な機能です。 デスクトップだけでなく、スマホでも正しく表示されるように設定を整えることで、よ ...
続きを見る
追加CSSにコードの貼り付け

実行手順
- WordPress管理画面の左側メニューから「外観」をクリックします。
- 「カスタマイズ」を選択します。
- 「追加CSS」をクリックします。
- 下記のコードを入力欄に貼り付けます。
- 最後に、「公開」ボタンを押して変更を保存します。
.lcp_catlist { display: flex; flex-wrap: wrap; gap: 20px; } .lcp_catlist li { list-style: none; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: calc(33.333% - 20px); /* デフォルトでは3列 */ padding: 16px; transition: transform 0.3s; } @media (max-width: 768px) { .lcp_catlist li { width: calc(50% - 20px); /* タブレットや小さめの画面では2列 */ } } @media (max-width: 480px) { .lcp_catlist li { width: 100%; /* スマホでは1列 */ } .lcp_catlist li { display: flex; flex-direction: row; align-items: center; } .lcp_catlist li img { width: 30%; /* 画像を左側に配置 */ margin-right: 10px; } .lcp_catlist li div { width: 70%; /* テキスト部分を右側に配置 */ } } .lcp_catlist li:hover { transform: translateY(-5px); } .lcp_catlist li a { text-decoration: none; color: #333; } .lcp_catlist li a:hover { color: #0073aa; } .lcp_catlist li img { width: 100%; height: auto; border-bottom: 1px solid #ddd; margin-bottom: 10px; border-radius: 8px 8px 0 0; } .lcp_thumbnail { display: block; width: 100%; height: auto; border-bottom: 1px solid #ddd; margin-bottom: 10px; border-radius: 8px 8px 0 0; } .lcp_catlist .post-date { font-size: 14px; color: #999; margin-top: 10px; }
メニューに追加


ここまできたら、後はCocoonと同じで、外観 > メニューに追加するだけです!
PC版は縦型・スマホ版は横型のカードにあえてしている理由

PC版では縦型カードなのに、スマホ版では横型カードにしているのはなぜですか?
PC版では:横型カードの場合、アイキャッチ画像が小さく表示され、不自然に見えるため
スマホ版では:縦型カードだと縦に長すぎて非常に見づらくなってしまうためこのため、PC版では縦型カード、スマホ版では横型カードにすることで、両方のデバイスで見やすい表示になるようにしています。

ただ、横型の時のアイキャッチ画像を左側にすることがどうしてもできませんでした。
ホームのアイキャッチが左側だから差別化されてて、それはそれでいいのかもしれないけどね!

まとめ

- Cocoonでは、ショートコード
[new_list]
を使うことで簡単に投稿日順ページを作成可能。 - AFFINGER6では、「List category posts」プラグインを活用すると便利。
- 見た目を整えるには、それぞれのテーマ設定でカードデザインを選択すると、より美しいレイアウトに。
どちらのテーマも高機能でカスタマイズ性に優れているため、自分のブログの目的に合った方法を選びましょう!

Cocoon専用のショートコードは、Cocoonでのみ使用可能です。
そのため、AFFINGERでは機能しませんのでご注意ください!
AFFINGERでカテゴリー別のページを投稿日順から更新日順にしたい場合にはこの記事を参照してね!

-
-
【AFFINGER6】カテゴリー別ページの記事を投稿日順から更新日順へ変更する方法
AFFINGER6(アフィンガー6)は、自由度が高く、カスタマイズ可能なWordPressテーマとして多くのブロガーに利用されています。 しかし、デフォルトの設定では、カテゴリー別ページの記事が「投稿 ...
続きを見る