「新着記事」ブロックに「もっと見る」ボタンを追加する方法

以下に手順を示します。

1. 「新着記事」ブロックを配置します。
   このとき、表示する記事の数を3とします。
2. 「段落」ブロックに「ボタン」と入力し、インラインタグを「ボタン」に設定します。
   高度な設定→追加CSSクラスにmy-btnと入力します。

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

/**
 * Ajaxコールバック関数
 *
 * @return void
 */
if (!function_exists('update_shortcode_callback')):
function update_shortcode_callback() {
  if (!session_id() && !headers_sent()) {
    session_start();
  }

  // セッションから保存済みの属性配列を取得
  $saved_atts = isset($_SESSION['new_list_atts']) && is_array($_SESSION['new_list_atts'])
    ? $_SESSION['new_list_atts']
    : array();

  // 追加件数
  $add_count = 3;

  // 現在の件数を取得して加算
  $new_count = intval(isset($saved_atts['entry_count']) ? $saved_atts['entry_count'] : 0) + $add_count;

  // セッションの保持件数を更新
  $_SESSION['new_list_atts']['entry_count'] = $new_count;

  // ショートコード属性用の配列を設定
  $shortcode_atts = $saved_atts;

  // 属性名のマッピング補正
  $shortcode_atts['count'] = $new_count;
  unset($shortcode_atts['entry_count']);

  // パラメータ文字列を構築
  $attr_str = '';
  foreach ($shortcode_atts as $key => $value) {
    // 配列はカンマ区切り文字列に変換
    if (is_array($value)) {
      $value = implode(',', $value);
    } elseif (is_object($value) || is_null($value)) {
      // オブジェクトまたはNULLを処理対象外
      continue;
    }

    $attr_str .= ' ' . sanitize_key($key) . '="' . esc_attr($value) . '"';
  }

  // Ajax実行時の予約記事の混入を防止
  $force_publish_status = function ($query) {
    if (wp_doing_ajax()) {
      $query->set('post_status', 'publish');
    }
  };

  // ショートコード実行前にフィルターを追加
  add_action('pre_get_posts', $force_publish_status, 999);

  // ショートコードを実行
  $shortcode = '[new_list' . $attr_str . ']';
  echo do_shortcode($shortcode);

  // 処理後にフィルターを解除
  remove_action('pre_get_posts', $force_publish_status, 999);

  wp_die();
}
endif;


// 新着記事の属性を設定
add_filter('shortcode_atts_generate_widget_entries_tag', function ($out, $pairs, $atts) {
  if (!session_id() && !headers_sent()) {
    session_start();
  }

  // 設定値をセッションへ記録
  if (!wp_doing_ajax()) {
    $_SESSION['new_list_atts'] = is_array($out) ? $out : array();
  }

  return $out;
}, 10, 3);


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  $url = admin_url('admin-ajax.php');

  ob_start();
  ?>
  jQuery(function ($) {
    $('.my-btn99').on('click', function () {
      var button = $(this);

      // Ajaxリクエストを送信
      $.ajax({
        type: 'POST',
        url: '<?php echo esc_url($url); ?>',
        data: {
          action: 'update_shortcode'
        },
        success: function (response) {
          // 受け取ったHTMLで上書き
          button.prev('.new-list-box').html(response);

          // 新しい表示がない場合、ボタンを非表示
          if ($.trim(response) === '') {
            button.fadeOut();
          }
        }
      });
    });
  });
  <?php
  wp_add_inline_script('jquery', ob_get_clean(), 'after');
});


// Ajaxアクションを追加
add_action('wp_ajax_update_shortcode', 'update_shortcode_callback');
add_action('wp_ajax_nopriv_update_shortcode', 'update_shortcode_callback');