広告 問題解決 ブログ

【Cocoon・AFFINGER6】投稿日順・更新日順のページを作る方法

2024-11-24

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

この記事では、両テーマで投稿日順ページを作成する方法をわかりやすく解説します。

ろずびー
ろずびー

基本的にホームは更新日順にしているため、投稿日順は管理画面から見るしかないのですが、これが少々面倒なんですよね。

更新した順番っていうのは自分でもあまり覚えていないけど、投稿した順番ならある程度覚えてるから記事のチェックがしやすいんだよね!

ぶろとら
ぶろとら
ろずびー
ろずびー

投稿日順ページの作成はどちらかと言えばブログ運営者にメリットがある機能と言えますね。

かと言って見に来てくれた人にデメリットも別にないしね!

ぶろとら
ぶろとら

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

手順: 固定ページに投稿日順のページを作成

  1. 固定ページメニューに移動し、「新規固定ページを追加」をクリックします。
  2. タイトルに「投稿日順」と入力します(タイトルは任意で変更可能です)。
  3. 本文に以下のショートコードを貼り付けます。
  4. 保存して公開します。

ショートコード

[new_list count="1000"]

ポイント

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

ろずびー
ろずびー

Cocoonではすでに対応しているショートコードのため、投稿日順のページを作成するのは本当にただこれだけです。

投稿日順ページが作成できたら、外観>メニューから追加するだけだね!

ぶろとら
ぶろとら

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

ろずびー
ろずびー

AFFINGER6では、標準機能で簡単に投稿日順を変更する方法がないため、少々厄介ですがプラグインを使うことで解決できます。

ただ、それだけだとテキストリンクだけの味気ないページができてしまうから、上のキャプチャーみたいにカードにして表示させる方法も一緒に記載するね!

ぶろとら
ぶろとら

プラグイン「List category posts」のインストール

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

手順

  1. WordPressダッシュボードにログイン:WordPressの管理画面にアクセスします。
  2. プラグインの検索:左側のメニューから「プラグイン」→「新規追加」をクリックします。
  3. プラグインのインストール:検索バーに「List category posts」と入力し、見つかったプラグインをインストールして有効化します。

プラグインを入れる時は必ず「有効」にするのを忘れないようにね!

ぶろとら
ぶろとら

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

手順: 固定ページに投稿日順のページを作成

  1. 固定ページメニューに移動し、「新規固定ページを追加」をクリックします。
  2. タイトルに「投稿日順」と入力します(タイトルは任意で変更可能です)。
  3. 本文に以下のコードを貼り付けます。
  4. 保存して公開します。

投稿日順ショートコード

[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にコードの貼り付け

実行手順

  1. WordPress管理画面の左側メニューから「外観」をクリックします。
  2. 「カスタマイズ」を選択します。
  3. 「追加CSS」をクリックします。
  4. 下記のコードを入力欄に貼り付けます。
  5. 最後に、「公開」ボタンを押して変更を保存します。
.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テーマとして多くのブロガーに利用されています。 しかし、デフォルトの設定では、カテゴリー別ページの記事が「投稿 ...

続きを見る

スポンサーリンク

-問題解決, ブログ