WEB制作、マーケティングに関する情報をお届けします。

不動産サイトなどでよく見かける閲覧履歴ですが、Cookieを使用することでワードプレスで構築したサイトでも設置することができます。
今回は『ワードプレスでプラグインを使用せずPHPで閲覧履歴を表示させる方法』を紹介します。

コードを紹介

functions.phpに記載

// ページを閲覧した際に、履歴を保存する関数
function save_user_viewed_post() {
    global $post;
    // 投稿タイプを指定する変数
    $post_type_to_track = 'post'; // デフォルトの投稿はpost、必要に応じてカスタム投稿タイプも指定可能
    
    // 指定された投稿タイプのみを追跡
    if(isset($post_type_to_track)){
      if (is_singular($post_type_to_track)) { // 対象が投稿タイプかどうか確認
  
          // Cookieから既存の閲覧履歴を取得
          $viewed_posts = isset($_COOKIE['viewed_posts']) ? json_decode(stripslashes($_COOKIE['viewed_posts']), true) : array();
  
          // 現在の投稿IDがすでに履歴にない場合は追加
          if (!in_array($post->ID, $viewed_posts)) {
              $viewed_posts[] = $post->ID;
  
              // 最大保存数を5つに制限する（必要に応じて変更可能）
              if (count($viewed_posts) > 5) {
                  array_shift($viewed_posts); // 最も古い履歴を削除
              }
  
              // Cookieに保存（7日間有効）
              setcookie('viewed_posts', json_encode($viewed_posts), time() + 7 * DAY_IN_SECONDS, COOKIEPATH, COOKIE_DOMAIN);
          }
      }
  }
}
// ページ読み込み時に履歴保存処理を実行
add_action('template_redirect', 'save_user_viewed_post');

// 閲覧履歴を表示するショートコード
function display_viewed_posts() {
    // 閲覧履歴がCookieに保存されているか確認
    if (!isset($_COOKIE['viewed_posts'])) {
        return '<p>閲覧履歴がありません。</p>';
    }

    // Cookieから履歴を取得
    $viewed_posts = json_decode(stripslashes($_COOKIE['viewed_posts']), true);

    // 履歴が空の場合
    if (empty($viewed_posts)) {
        return '<p>閲覧履歴がありません。</p>';
    }

    // 投稿リストのHTMLを生成
    $output = '<ul class="view_list">';
    foreach ($viewed_posts as $post_id) {
        // 投稿情報を取得
        $post = get_post($post_id);
        $permalink = get_permalink($post_id);
        $title = get_the_title($post_id);
        $thumbnail_url = get_the_post_thumbnail_url($post_id, 'thumbnail'); // サムネイルのURLを取得

        // サムネイルがない場合、デフォルト画像を表示（任意で変更可能）
        if (!$thumbnail_url) {
            $thumbnail_url = 'サムネイルのデフォルト画像URL';
        }

        // リストアイテムを作成
        $output .= '<li><a href="' . esc_url($permalink) . '"><img src="' . esc_url($thumbnail_url) . '" alt="' . esc_attr($title) . '"><p>' . esc_html($title) . '</p></a></li>';
    }
    $output .= '</ul>';

    return $output;
}
// ショートコード [viewed_posts_list] を登録
add_shortcode('viewed_posts_list', 'display_viewed_posts');

テンプレートにショートコードを記載

<?php echo do_shortcode('[viewed_posts_list]') ?>

コードを解説

履歴を保存する関数を作成

以下で関数の作成を作成します。

function save_user_viewed_post() {}

『global $post;』で現在のページの投稿情報を取得します。
次に対象となる投稿タイプを指定します。

$post_type_to_track = 'post';

値がセットされているかを確認し、セットされている場合は設定した投稿タイプかどうかを確認し実行します。

// 指定された投稿タイプのみを追跡
   if(isset($post_type_to_track)){
     if (is_singular($post_type_to_track)) { // 対象が投稿タイプかどうか確認
     }
   }

Cookieから閲覧データを取得します。

$viewed_posts = isset($_COOKIE['viewed_posts']) ? json_decode(stripslashes($_COOKIE['viewed_posts']), true) : array();

投稿IDから閲覧履歴にあるかどうかを確認し、なければ投稿IDを保存、最大保存件数を指定して、それ以上の場合は削除します。最後にCookieの保存日数を指定します。

// Cookieから既存の閲覧履歴を取得
$viewed_posts = isset($_COOKIE['viewed_posts']) ? json_decode(stripslashes($_COOKIE['viewed_posts']), true) : array();
  
// 現在の投稿IDがすでに履歴にない場合は追加
if (!in_array($post->ID, $viewed_posts)) {
    $viewed_posts[] = $post->ID;
  
    // 最大保存数を5つに制限する（必要に応じて変更可能）
    if (count($viewed_posts) > 5) {
        array_shift($viewed_posts); // 最も古い履歴を削除
    }
  
    // Cookieに保存（7日間有効）
    setcookie('viewed_posts', json_encode($viewed_posts), time() + 7 * DAY_IN_SECONDS, COOKIEPATH, COOKIE_DOMAIN);
}

上記の処理は以下でページ読み込み時に実行されます。

add_action('template_redirect', 'save_user_viewed_post');

閲覧履歴を表示するためのショートコードを作成

以下で関数を作成します。

function display_viewed_posts() { }

閲覧履歴がない場合にテキストなどを出力する場合は以下で値がセットされているかを確認して行います。

// 閲覧履歴がCookieに保存されているか確認
if (!isset($_COOKIE['viewed_posts'])) {
    return '<p>閲覧履歴がありません。</p>';
}

また、履歴が空の場合の処理はCookieの履歴を取得後に値があるかどうかを確認して行います。

// Cookieから履歴を取得
$viewed_posts = json_decode(stripslashes($_COOKIE['viewed_posts']), true);

// 履歴が空の場合
if (empty($viewed_posts)) {
    return '<p>閲覧履歴がありません。</p>';
}

閲覧履歴がある場合は投稿IDを配列で取得できるため、foreachでループを回して『return』で出力します。

// 投稿リストのHTMLを生成
$output = '<ul class="view_list">';
foreach ($viewed_posts as $post_id) {
    // 投稿情報を取得
    $post = get_post($post_id);
    $permalink = get_permalink($post_id);
    $title = get_the_title($post_id);
    $thumbnail_url = get_the_post_thumbnail_url($post_id, 'thumbnail'); // サムネイルのURLを取得

    // サムネイルがない場合、デフォルト画像を表示（任意で変更可能）
    if (!$thumbnail_url) {
        $thumbnail_url = 'サムネイルのデフォルト画像URL';
    }

    // リストアイテムを作成
    $output .= '<li><a href="' . esc_url($permalink) . '"><div class="view_list_thumb"><img src="' . esc_url($thumbnail_url) . '" alt="' . esc_attr($title) . '"></div><p>' . esc_html($title) . '</p></a></li>';
}
$output .= '</ul>';

return $output;

最後にショートコードを登録します。

// ショートコード [viewed_posts_list] を登録
add_shortcode('viewed_posts_list', 'display_viewed_posts');

表示したいところに以下を設置してショートコードを呼び出します。

<?php echo do_shortcode('[viewed_posts_list]') ?>

まとめ

以上、『ワードプレスでプラグインを使用せずPHPで閲覧履歴を表示させる方法』でした。
よく活用されるサイトとしては不動産会社、後は中古自動車サイトなどでしょうか。
ブログサイトでも見かけますのでサイト内循環を強化する場合はおすすめです。