目次
目次

ページ送りナビに予約投稿や下書き記事を表示する方法

Cocoonカスタマイズ集
この記事は約5分で読めます。
記事内に広告が含まれています。

はじめに

WordPressのページ送りナビ（前の投稿・次の投稿）は、デフォルトでは公開済みの投稿しか表示されません。
そのため、予約投稿や下書き記事を確認するには、投稿一覧から個別に開く必要があります。

そこで、ログインユーザーはページ送りナビで予約記事や下書き記事も表示できるようにします。
さらに、タイトルの色を変更して、予約投稿か下書き記事かが一目で分かるようにします。

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

実装手順

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

  • ラベル
    PHPを追加

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

    /**
 * 隣接投稿の対象ステータスを拡張
 *
 * @param string $where 投稿のWHERE句
 * @return string 条件を修正したWHERE句
 */
if (!function_exists('include_status_posts')):
function include_status_posts($where) {
  if (!is_user_logged_in()) {
    return $where;
  }

  $status_list = "'publish', 'future', 'draft'";

  // 投稿ステータスの条件を置換
  $where = str_replace("p.post_status = 'publish'", "p.post_status IN ($status_list)", $where);
  $where = str_replace("post_status = 'publish'", "post_status IN ($status_list)", $where);

  return $where;
}
endif;


// 前後の投稿の対象ステータスを拡張
add_filter('get_previous_post_where', 'include_status_posts');
add_filter('get_next_post_where', 'include_status_posts');
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加する。

    /* 予約投稿 */
.status-future .entry-title {
  color: #ff0000;
}

/* 下書き */
.status-draft .entry-title {
  color: #0000ff;
}

参考：ページ送りナビの予約・下書き記事のリンク色を変更する方法

ページ送りナビの前後ページが予約投稿や下書き記事のとき、CSSクラスを追加し、リンクの色を変更します。

完成イメージ

実装手順

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

  • ラベル
    PHPを追加

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

    add_filter('cocoon_part__tmp/pager-post-navi', function ($content) {
  if (!is_user_logged_in()) {
    return $content;
  }

  // 投稿ステータスとクラスの対応表
  $status_classes = [
    'future' => 'is-future-post',
    'draft'  => 'is-draft-post',
  ];

  // ページ送りリンクのURLとクラスを取得
  $pattern = '/<a\s+[^>]*href=["\']([^"\']+)["\'][^>]*class=["\']([^"\']*(?:prev|next)-post[^"\']*)["\']/i';

  // マッチしたリンクを処理
  return preg_replace_callback($pattern, function ($matches) use ($status_classes) {
    $url        = $matches[1];
    $class_attr = $matches[2];

    // 投稿IDを取得
    $post_id = url_to_postid($url);

    if ($post_id) {
      $status = get_post_status($post_id);

      // 対応するクラスを追加
      if (isset($status_classes[$status])) {
        $class_attr .= ' ' . $status_classes[$status];
      }
    }

    return str_replace($matches[2], $class_attr, $matches[0]);
  }, $content);
});
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。

    /* 予約投稿 */
.is-future-post,
.is-future-post:hover {
  color:#ff0000;	
}

/* 下書き */
.is-draft-post,
.is-draft-post:hover  {
  color: #0000ff;
}

参考：一覧ページに予約投稿や下書き記事を表示する方法

管理画面を開かなくてもプレビュー確認を兼ねて、公開記事だけでなく予約投稿や下書き記事も一覧に表示し、まとめてチェックできるようにします。

完成イメージ

実装手順

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

  • ラベル
    PHPを追加

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

    add_action('pre_get_posts', function ($query) {
  if (is_admin() || !$query->is_main_query()) {
    return;
  }

  if (is_user_logged_in()) {
    $query->set('post_status', ['publish', 'future', 'draft']);
  }
});
  • ラベル
    CSSを追加

    以下のコードをstyle.cssに追加します。

    /* 予約投稿 */
.status-future .entry-card-title {
  color: #ff0000;
}

/* 下書き */
.status-draft .entry-card-title {
  color: #0000ff;
}

さいごに

今回紹介した方法を使えば、ページ送りナビをクリックするだけで予約投稿を確認できるようになり、わざわざ投稿一覧から個別に開く手間がなくなります。
また、予約投稿のタイトルを赤色にすることで、視認性が向上し、公開済みの投稿と簡単に区別できます。
サイトの運用効率を高めるために、ぜひ活用してください！

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