2022.10.22

WordPressで閲覧履歴ページを作る方法

WordPress（ワードプレス）で閲覧履歴を表示できるページの作り方を紹介します。今回は投稿やカスタム投稿の詳細ページを閲覧履歴の対象とします。

閲覧履歴ページを作ることで、個人・法人のブログはもちろん、物件情報を扱う不動産サイトなどでも活用することができます。

プラグインは使わず、JavaScriptでCookieを操作することができる「js-cookie」を使用します。
イメージとしては、投稿詳細ページを読み込んだタイミングで投稿情報をCookieに保存し、閲覧履歴ページ（固定ページ）で保存したCookieを取得し、閲覧履歴として投稿を一覧表示させます。

閲覧履歴ページの作り方と手順
- 投稿情報をCookieに保存
- Cookieに保存した投稿情報を取得
その他余談

閲覧履歴ページの作り方と手順

投稿情報をCookieに保存

まず「js-cookie」を読み込みます。

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

投稿、もしくはカスタム投稿の詳細ページにて、読み込んだタイミングでCookieに投稿情報を保存させます。※ここではカスタム投稿の設定方法などは省略します。

カスタム投稿、店舗情報と仮定して、single-shop.phpを下記では例にしています。

<?php if (have_posts()): ?>
  <?php the_post(); ?>
  <!-- valueとidにそれぞれ投稿IDを設定しています -->
  <div class="single-post" value="<?php the_ID(); ?>" id="history<?php the_ID(); ?>">
    <script type="text/javascript">
      var historyValue = $('.single-post').attr('value');
      var historyId = $('.single-post').attr('id');
      Cookies.set(historyId,historyValue,{expires: 30, path:'/'});
    </script>
    <time><?php the_time('Y.m.d'); ?></time>
    <h1><?php the_title(); ?></h1>
    <?php the_content(); ?>
  </div>
<?php else: ?>
<?php endif; ?>

もう少し細かくコードを見て行きます。

// historyValue にdivタグ「single-post」で設定した「value」を代入します
var historyValue = $('.single-post').attr('value');

// historyId にdivタグ「single-post」で設定した「id」を代入します
var historyId = $('.single-post').attr('id');

// js-cookieを使用したCookieの保存方法です
Cookies.set(historyId,historyValue,{expires: 30, path:'/'});

js-cookieを使用したCookieの保存方法は、下記の通りですが、

Cookies.set('name', 'value')

保存期限を設定するCookieの保存方法もあります。今回は「30」とし、30日間のCookie保存期間で設定しています。

Cookies.set('name', 'value', { expires: 30 })

実装コードでは、nameに「historyId」、valueに「historyValue」を指定しています。本来は特定のnameやvalueを指定しますが、動的なサイトであるWordPressであり、投稿も複数存在するため、変数を活用した形式にしています。

Cookieに保存した投稿情報を取得

<?php
// Cookieを取得
$array = $_COOKIE;
// 取得した配列（Cookie）からキーを取得
$cookies = array_keys($array);
// キーから投稿IDを切り分けて$historyList[]に再格納
foreach($cookies as $post){
  if(strpos($post,'history') !== false){
    $historyId = str_replace('history', '', $value);
    $historyList[] = $historyId;
  } else {
    $historyList[] = 0;
  }
}
?>
<?php
$args = array(
  'post_type' => 'shop', // ここではshopというカスタム投稿を指定
  'post__in' => $historyList, // $historyListに格納した投稿IDを指定
  'posts_per_page' => 6, // ここでは6件表示
);
$the_query = new WP_Query( $args );
?>
<?php if ($the_query->have_posts()): ?>
  <div class="shop-wrapper">
    <?php while($the_query->have_posts()) : $the_query->the_post(); ?>
      <div class="shop-list">
        <h2><?php the_title(); ?></h2>
      </div>
    <?php endwhile; ?>
  </div>
<?php else: ?>
  <p>最近閲覧した店舗はありません。</p>
<?php endif; ?>

取得方法については、js-cookieを使用せず、PHPのCookie取得方法で対応しています。※PHP内で動的にJavaScriptの処理を行う方法が分からなかったため、PHPのみでCookieを取得しました。
もう少しスマートな方法もあるような気がするのですが、今回はこれにてご了承ください。。。

ちなみに通常のjs-cookieでのCookieの取得方法はこちらです。