【WordPress】Ajax＋非公開カスタム投稿で問い合わせ履歴をユーザーにだけ表示する方法

会員制サイトやカスタマーサポート機能をWordPressで実装する際、ユーザーごとの問い合わせ履歴を表示したい場面があります。この記事では、「非公開のカスタム投稿タイプ」を活用して、ログインユーザー自身だけが自分の履歴を閲覧できる仕組みを、Ajaxで非同期表示する方法とともに解説します。

カスタム投稿タイプ「inquiry」を作成する

まずは、問い合わせ履歴を保存するためのカスタム投稿タイプ inquiry を登録します。

function register_inquiry_post_type() {
  register_post_type('inquiry', array(
    'label' => '問い合わせ履歴',
    'public' => false,
    'show_ui' => true,
    'supports' => array('title', 'editor', 'author'),
    'capability_type' => 'post',
  ));
}
add_action('init', 'register_inquiry_post_type');

'public' => false にすることで、検索や一覧には表示されず、非公開の履歴管理が可能になります。

Ajax用のJavaScriptを用意する

次に、ログインユーザーが自分の問い合わせ履歴を非同期で取得するためのJavaScriptを記述します。

<script>
jQuery(document).ready(function($) {
  $.ajax({
    url: ajax_object.ajax_url,
    type: 'POST',
    data: {
      action: 'load_user_inquiries'
    },
    success: function(response) {
      $('#user-inquiry-list').html(response);
    }
  });
});
</script>

このコードでは、Ajax経由で load_user_inquiries というアクションを呼び出し、取得結果を #user-inquiry-list に出力します。

Ajax処理で問い合わせ履歴を取得する

Ajaxに応答するPHP関数を functions.php に記述します。ログインユーザーに限定して、自分の投稿だけを取得します。

function ajax_load_user_inquiries() {
  if (!is_user_logged_in()) {
    wp_send_json_error('ログインが必要です');
  }

  $current_user_id = get_current_user_id();

  $args = array(
    'post_type' => 'inquiry',
    'post_status' => 'private',
    'author' => $current_user_id,
    'posts_per_page' => -1
  );
  $query = new WP_Query($args);

  if ($query->have_posts()) {
    ob_start();
    echo '<ul>';
    while ($query->have_posts()) {
      $query->the_post();
      echo '<li><strong>' . esc_html(get_the_title()) . '</strong>：' . esc_html(wp_trim_words(get_the_content(), 20)) . '</li>';
    }
    echo '</ul>';
    wp_reset_postdata();
    $html = ob_get_clean();
    wp_send_json_success($html);
  } else {
    wp_send_json_success('<p>履歴はありません。</p>');
  }
}
add_action('wp_ajax_load_user_inquiries', 'ajax_load_user_inquiries');

HTML側に表示領域を設置する

フロントエンドテンプレートに以下のHTMLを記述して、Ajaxで取得した履歴を表示します。

<div id="user-inquiry-list">読み込み中...</div>

まとめ

このように、非公開のカスタム投稿タイプとAjaxを組み合わせることで、ログインユーザーにだけ問い合わせ履歴を動的に表示する機能を簡単に実装できます。セキュリティを担保しつつ、ユーザーの利便性も高められるため、顧客サポートやマイページ機能に最適です。