【Cocoonカスタマイズ】トップページを「最新記事の一覧」ではなく「最新の投稿本文」へ自動で切り替える方法

はじめに
実装手順
参考：エントリーカードでなく本文表示に切り替える方法
- 完成イメージ
- 実装手順
参考：最新投稿のみ本文表示に切り替える方法
- 完成イメージ
- 実装手順
さいごに

はじめに

昨今のWebサイトやWordPressテーマの多くは、トップページにカード形式の投稿一覧が表示されるデザインが主流となっています。

しかし、ひと昔前のブログのように、トップページを開いた瞬間に最新の投稿本文がそのまま表示されるデザインにしたいというケースもあるでしょう。

一覧ページを挟まずに、最新の投稿ページを直接開きます。

この記事では、この方法について説明します

実装手順

以下のコードをfunctions.phpに追加します。

add_action('template_redirect', function () {
  // テーマエディター保存時の検証リクエストは除外
  if (isset($_GET['wp_scrape_key'])) {
    return;
  }

  if (!is_front_page() || is_admin()) {
    return;
  }

  // 最新の公開済み投稿を1件取得
  $recent_posts = wp_get_recent_posts([
    'numberposts' => 1,
    'post_status' => 'publish',
  ]);

  if (empty($recent_posts)) {
    return;
  }

  $latest_post_id = $recent_posts[0]['ID'];

  // 最新記事のパーマリンクへ一時的（302）にリダイレクト
  wp_redirect(get_permalink($latest_post_id), 302);
  exit;
});

参考：エントリーカードでなく本文表示に切り替える方法

Cocoon設定→インデックス→フロントページタイプ「一覧（デフォルト）」とした場合、全投稿をエントリーカードとせず、本文表示とします。

トップページをブログカード使わず本文を表示したいです

いつもお世話になっております。質問ですが cocoonのトップページをブログカードを使わず、本文の上部を表示して、「続きを読む」という感じにしたいです。カスタマイズの良い方法ないでしょうか？参考例は下のようなサイトです。ブログカードで...

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。

add_filter('cocoon_part__tmp/list-index', function ($html) {
  if (!is_home()) {
    return $html;
  }

  ob_start();
  cocoon_template_part('tmp/content');

  return ob_get_clean();
});

参考：最新投稿のみ本文表示に切り替える方法

Cocoon設定→インデックス→フロントページタイプ「一覧（デフォルト）」とした場合、最新の投稿のみエントリーカードとせず、本文表示とします。

完成イメージ

実装手順

以下の手順で実装します。

ラベル

PHPを追加

以下のコードをfunctions.phpに追加します。

add_filter('cocoon_part__tmp/list-index', function ($html) {
  if (!is_front_top_page()) {
    return $html;
  }

  // 最新の公開済み投稿を1件取得
  $args = [
    'post_type'           => 'post',
    'posts_per_page'      => 1,
    'ignore_sticky_posts' => true,
  ];

  $query = new WP_Query($args);
  if (!$query->have_posts()) {
    return $html;
  }

  ob_start();

  $original_query = $GLOBALS['wp_query'];
  $GLOBALS['wp_query'] = $query;

  cocoon_template_part('tmp/content');

  $featured = ob_get_clean();

  // クエリとグローバル状態を元の状態に復元
  wp_reset_postdata();
  $GLOBALS['wp_query'] = $original_query;

  return $featured . $html;
});

ラベル
CSSを追加
以下のコードをstyle.cssに追加します。
```
.front-top-page .list .a-wrap:first-of-type {
  display: none;
}
```

さいごに

今回紹介した方法を使えば、昨今のトレンドであるカード一覧形式のデザインから、ひと昔前のブログのような「常に最新のメッセージがトップにある」ストレートな構成へと簡単に回帰させることができます。

1ページの文字量が多く、じっくり読み込ませたい特化型ブログや、日記スタイルのサイトを運営している方は、ぜひ試してみてください。