カルーセルに指定した投稿を表示する方法

はじめに

カルーセルはデフォルトで人気記事をランダムに表示するため、特定の投稿を意図した通りにカードに表示することはできません。

そこで、特定の投稿IDを指定して、意図したカードを表示させます。

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

実装手順

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

参考：Cocoon設定画面に投稿ID入力フォームを追加する方法

Cocoonの設定→カルーセルに、投稿IDを入力するフォームを追加します。

完成イメージ

実装手順

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

/**
 * Cocoonのカスタム設定一覧（設定キー => デフォルト値）を定義
 *
 * @return array 設定キーとデフォルト値の配列
 */
if (!function_exists('my_cocoon_options')):
function my_cocoon_options() {
  return [
    'my_comment_toggle_enable'   => 0,
    'my_carousel_extra_post_ids' => [],
  ];
}
endif;


/**
 * Cocoonのカスタム設定を取得
 *
 * @param string $key 設定キー名
 * @return mixed 設定値（未設定の場合はデフォルト値）
 */
if (!function_exists('my_get_cocoon_option')):
function my_get_cocoon_option($key) {
  $options = my_cocoon_options();

  return get_theme_option($key, $options[$key]);
}
endif;


// Cocoonのカスタム設定を保存
add_action('cocoon_settings_after_save', function () {
  foreach (array_keys(my_cocoon_options()) as $key) {
    update_theme_option($key);
  }
});


// Cocoon設定にメニューを追加
add_action('admin_menu', function () {
  $page_hook = get_plugin_page_hookname('theme-settings', '');

  if ($page_hook) {
    add_action($page_hook, 'add_single_carousel_field');
  }
}, 99);


/**
 * Cocoon設定（カルーセル）のメニュー項目を追加
 *
 * @return void
 */
if (!function_exists('add_single_carousel_field')):
function add_single_carousel_field() {
  $checks = my_get_cocoon_option('my_carousel_extra_post_ids');

  // 文字列で渡された場合は配列へ変換
  if (is_string($checks)) {
    $checks = explode(',', $checks);
  }

  // 選択中IDリストの数値変換
  $checks = array_map('intval', (array) $checks);

  // 選択肢用投稿一覧の取得
  $posts = get_posts([
    'post_type'      => 'post',
    'posts_per_page' => -1,
    'orderby'        => 'date',
    'order'          => 'DESC',
  ]);

  ob_start();
  ?>
  投稿<br>
  <div id="carousel-extra-post-selector" style="max-height:300px; overflow:auto; border:1px solid #ccc; padding:5px;width:100%">
    <?php if ($posts) : ?>
      <?php foreach ($posts as $post) : ?>
        <?php
          $checked  = in_array((int) $post->ID, $checks, true) ? ' checked="checked"' : '';
          $input_id = 'carousel-extra-post-' . $post->ID;
        ?>
        <label style="display:block; margin-bottom:3px;" for="<?= $input_id; ?>">
          <input type="checkbox" id="<?= $input_id; ?>" name="my_carousel_extra_post_ids[]" value="<?= $post->ID; ?>"<?= $checked; ?>>
          <?= esc_html($post->post_title); ?>
        </label>
      <?php endforeach; ?>
    <?php endif; ?>
  </div>
  <?php echo generate_tips_tag('投稿を選択すると、その記事のみが表示されます。', false); ?>
  <?php
  $html = ob_get_clean();

  ?>
  <script>
  jQuery(function ($) {
    const $td = $('input[name="carousel_popular_posts_enable"]').closest('td');
    const postListHtml = <?= json_encode($html); ?>;

    if ($td.length) {
      $td.append(postListHtml);
    }
  });
  </script>
  <?php
}
endif;


// カルーセルのクエリを設定
add_filter('cocoon_carousel_args', function ($args) {
  $ids = my_get_cocoon_option('my_carousel_extra_post_ids');

  if (is_array($ids)) {
    $ids = array_filter(array_map('intval', $ids));

    if (!empty($ids)) {
      $args['orderby']   = 'post__in';
      $args['post__in']  = $ids;
      $args['post_type'] = ['post'];
    }
  }

  return $args;
});

参考：メニュー画面にカルーセル用のメニュー位置を追加する方法

外観→メニューにカルーセル専用のメニュー位置を追加します。
ここで設定したメニュー項目（投稿や固定ページ）を、カルーセルとして表示させます。

完成イメージ

実装手順

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

// メニュー位置を追加
add_action('init', function () {
  register_nav_menus([
    'my-carousel-menu' => 'カルーセル',
  ]);
});


// カルーセルのクエリを設定
add_filter('cocoon_carousel_args', function ($args) {
  // メニュー位置を取得
  $locations = get_nav_menu_locations();
  if (empty($locations['my-carousel-menu'])) {
    return $args;
  }

  // メニューアイテムを取得
  $menu_items = wp_get_nav_menu_items($locations['my-carousel-menu']);
  if (empty($menu_items)) return $args;

  // 投稿・固定ページのIDを取得
  $post_ids = [];
  foreach ($menu_items as $item) {
    if (in_array($item->object, ['post', 'page'], true)) {
      $post_ids[] = (int)$item->object_id;
    }
  }

  // カルーセルのクエリを変更
  if (!empty($post_ids)) {
    $args['orderby']   = 'post__in';
    $args['post__in']  = $post_ids;
    $args['post_type'] = ['post', 'page'];
  }

  return $args;
});

さいごに

今回紹介した方法を使えば、カルーセルに特定の投稿を表示できます。
意図した投稿を表示することで、閲覧者の関心を引きつけることができます。