WordPressで閲覧履歴をPHPのクッキー(Cookies)で自作で機能を実装する方法やメリット・注意点を徹底解説

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressで閲覧履歴をPHPのクッキーで自作で機能を実装する方法やメリット・注意点を徹底解説していきたいと思います。

閲覧履歴とは、ユーザーが過去に閲覧した記事をクッキーやデータベースなどでデータとして記録して、ページの特定の箇所に、自分の過去に見たページとして一覧で表示する機能のことを言います。

この閲覧履歴機能をサイトに導入することで、ユーザーの「利便性の向上」や「回遊率の向上」、「直帰率の低下」などを実現できる可能性があります。

筆者自身も、何かのサイトで最近閲覧したページを一覧で確認できると大変助かった思いをした記憶があるので、なんでもかんでもサイトに機能をつければ良いと言うものではありませんが、閲覧履歴によって、より使いやすいWebサイトにできる可能性があります。

今回は、そんな閲覧履歴機能についてWordPress開発の現場で導入すべきか検討材料としてのメリットや注意点を解説するとともに、実装しやすいように解説しておりますので、よろしければ当記事をご活用いただけましたら幸いです。

閲覧履歴とは

閲覧履歴とは、ユーザーが過去に閲覧した記事やページを記録し、再表示する機能のことを言います。

具体的には、ユーザーが過去に閲覧したページをクッキーやデータベースなどで保存して、ページの特定の箇所に一覧として表示させておいて、いつでも簡単に過去に閲覧したページを見返せる機能のことを言います。

閲覧履歴はブログやECサイトでよく使われており、ユーザーが一度読んだ記事や気になった商品をすぐに見返せるようになります。WordPressでは、データベースに保存する方法もありますが、クッキーを活用すれば、よりシンプルかつ軽量な実装が可能です。

クッキーはブラウザにデータを保存する仕組みであるため、サーバー側の負荷を増やさずに閲覧履歴を実装できます。特にログイン不要のサイトでは、クッキーを使うことで手軽に閲覧履歴機能を追加できます。

今回は、このPHPのクッキーを使って閲覧履歴を実装する方法を解説いたします。

閲覧履歴のメリット

閲覧履歴のメリットは、ユーザーの「利便性向上」し「直帰率の低下」の可能性を高めることができることです。

過去に閲覧した記事やページを簡単に見返せるため、探す手間が省け、サイトの滞在時間が伸びやすくなります。特に、情報量の多いブログやECサイトでは、ユーザーが一度興味を持ったコンテンツにスムーズに戻れることで、「回遊率の向上」が期待できます。

今回はPHPのクッキーを利用して閲覧履歴を実装しますが、クッキーを活用することで、データベースを使わずに軽量な履歴管理が可能になります。

そのため、クッキーで閲覧履歴を実装するならば、データベースへの負荷を気にしなくて良いため、動作の軽い履歴機能を提供できるため、特に小規模なサイトやログイン不要のサイトでは、手軽に実装できるのがメリットです。

また、データベースで実装する場合に限った話にはなりますが、運営側にとっても、閲覧履歴はマーケティングなどに活用できるデータとなります。

例えば、過去に閲覧した記事を基に「おすすめ記事」を表示したり、ECサイトなら「最近見た商品」から購入を促す仕組みを作ることができます。これにより、コンバージョン率の向上が見込めるため、売上や広告収益にも好影響を与えます。

ちなみにデータベースでの閲覧履歴の実装をおこなわなくても、WordPress Popular Postsプラグインなどの閲覧数を取得するプラグインと組み合わせて、PHPのクッキーでの閲覧履歴機能を実装することで、PHPのクッキーを利用しつつ閲覧履歴のデータを取得して、マーケティングなどに活かすという方法もあります。

データの扱いをどういう手段で処理するかなどは、ご自身のサイトに合わせて考えましょう。

閲覧履歴の注意点

閲覧履歴には多くのメリットがありますが、いくつかの注意点があります。

まず、プライバシーの懸念が挙げられます。クッキーを使用して履歴を保存すると、ユーザーの閲覧データがブラウザに残るため、特に共有PCや公共の端末では、他の人に履歴が見られるリスクがあります。

そのため、場合によってはこの問題を回避するために「履歴を削除する」機能を実装することが必要になる場合があります。

また、クッキーの保存容量には制限があるため、大量の履歴を記録するのには向いておらず、最新の数件だけを保存する仕組みが必要になります。

PHPのクッキーの保存容量は、1つのクッキーあたり4096KB、1つのドメインあたり20個、ブラウザ全体で最大300個Cookieに対応するようになっています。個数を超えると古いクッキーから削除されるようになっています。

さらに、クッキーには有効期限があるため、一定期間が過ぎるとデータが消えてしまうという問題もあります。ユーザーが手動でクッキーを削除した場合も履歴がリセットされるため、長期的な記録には不向きなのでご注意ください。

加えて、クッキーは端末ごとに保存されるため、異なるデバイス間でデータを同期することができません。例えば、スマホで見た記事の履歴をPCで確認することはできず、複数のデバイスで同じ履歴を共有したい場合は、データベースでの保存処理をする必要があります。

これらのデメリットを考慮しつつ、プライバシー対策やデータ管理を適切に行うことが、効果的な閲覧履歴機能の実装には欠かせません。

閲覧履歴の実装方法

閲覧履歴の実装方法について解説いたします。

今回実装するのは、閲覧履歴として過去に閲覧したページのタイトルのリンクテキストを一覧で表示すると言う非常にシンプルな内容となっております。

と言うのも、一覧はWordPressのサブループで実装することとしており、サムネイル画像やカテゴリー、概要文は開発者によっていつものように記事一覧を実装するのと同様のノリでカスタマイズができるからです。

そのため、これから解説するコードをコピペしていただき、見出し「WordPressループで履歴を表示」のコードのループの出力部分だけご自身のサイトに合わせてカスタマイズしていただければと思います。

それでは、以下が閲覧履歴の実装する手順となります。

• 閲覧履歴を保存する関数を作成
• 閲覧履歴を取得する関数を作成
• WordPressループで閲覧履歴を表示

それぞれ解説いたします。

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

まずは閲覧履歴を保存する関数を作成いたします。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function save_view_history() {
    if (is_single()) {
        $post_id = get_the_ID();
        $history = isset($_COOKIE['view_history']) ? json_decode(stripslashes($_COOKIE['view_history']), true) : [];

        // 過去の履歴から現在の投稿IDを削除（重複防止）
        $history = array_diff($history, [$post_id]);

        // 配列の先頭に追加
        array_unshift($history, $post_id);

        // 保存する履歴の最大数（例: 10件まで）
        $history = array_slice($history, 0, 10);

        // クッキーに保存（30日間有効）
        setcookie('view_history', json_encode($history), time() + 30 * 86400, COOKIEPATH, COOKIE_DOMAIN);
    }
}
add_action('wp', 'save_view_history');

上記コードについて解説します。

上記コードは、WordPressの個別投稿ページを閲覧した際に、その記事のIDをクッキーに保存し、閲覧履歴として管理する機能を持つ関数です。

まず、is_single()関数を使って記事ページでのみ処理を実行し、get_the_ID()関数で現在の投稿IDを取得します。その後、クッキーに保存されている履歴データを取得し、json_decode()関数を用いて配列として扱います。

同じ記事が重複しないように、array_diff()関数を使って過去の履歴から現在の投稿IDを削除し、新たに取得した投稿IDをarray_unshift()関数で配列の先頭に追加します。

さらに、履歴の保存件数を10件までに制限するために、array_slice()関数で古いデータを削除します。最後に、setcookie()関数を使用して更新された履歴データをJSON形式でクッキーに保存し、30日間有効な状態に設定します。

この処理はadd_action(‘wp’, ‘save_view_history’)関数によって、ページが読み込まれるたびに自動で実行されます。

閲覧履歴を取得する関数を作成

次に、閲覧履歴を取得する関数を作成いたします。

閲覧履歴を取得する関数を作成することで、出力するWordPressループのコードを記述する際に、コードを簡潔にし、記述しやすくすることができます。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function get_view_history_posts($limit = 10) {
    if (!isset($_COOKIE['view_history'])) {
        return [];
    }

    $history = json_decode(stripslashes($_COOKIE['view_history']), true);

    if (empty($history)) {
        return [];
    }

    return array_slice($history, 0, $limit);
}

上記コードについて解説します。

上記コードは、クッキーに保存された閲覧履歴から投稿IDのリストを取得する関数です。

まず、$_COOKIE[‘view_history’]が存在しない場合は空の配列を返し、履歴データがないことを示します。次に、json_decode()関数を使ってクッキーに保存されたJSON形式の履歴データをPHPの配列に変換し、デコードされた履歴が空であれば同様に空の配列を返します。

その後、array_slice()関数を利用して、指定された件数だけ投稿IDを取得し、最大で$limit変数の数までの履歴を返します。デフォルトでは10件まで取得するようになっており、関数の引数を変更することで取得件数を調整できます。

この関数を利用することで、保存された閲覧履歴を簡単に取得し、特定のページに表示できるようになります。

WordPressループで閲覧履歴を表示

最後に、WordPressループで閲覧履歴を表示いたします。

閲覧履歴自体は、一覧としてWordPressループで出力します。

以下のコードを、閲覧履歴を表示させたいPHPファイル（single.php、sidebar.phpなど）にコピー＆ペーストしてください。

<?php
$viewed_posts = get_view_history_posts(10);

if (!empty($viewed_posts)) {
    $args = [
        'post__in' => $viewed_posts,
        'orderby' => 'post__in',
        'posts_per_page' => 10
    ];

    $history_query = new WP_Query($args);

    if ($history_query->have_posts()) :
        echo '<h3>閲覧履歴</h3>';
        echo '<ul>';
        while ($history_query->have_posts()) : $history_query->the_post(); ?>
            <li>
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </li>
        <?php endwhile;
        echo '</ul>';
        wp_reset_postdata();
    endif;
} else {
    echo '<p>閲覧履歴はありません。</p>';
}

上記コードについて解説します。

上記コードは、クッキーに保存された閲覧履歴を取得し、該当する投稿の一覧をWordPressループで表示するコードになります。

まず、先ほど独自に定義したget_view_history_posts(10)関数を使って、最大10件の投稿IDを取得します。

その後、WP_Queryを使用し、取得した投稿IDをもとにカスタムクエリを作成します。「post__in」で指定した投稿のみを取得し、「orderby」によって保存された順番で並べます。

have_posts()関数を確認し、投稿がある場合はリストとして表示し、タイトルに投稿ページへのリンクを付けます。

最後に wp_reset_postdata()関数を使ってグローバル変数$postをリセットし、メインクエリへ影響を与えないようにします。履歴がない場合は「閲覧履歴はありません。」と表示されます。

ペーストが完了したら、フロントページをご確認いただき、いくつかの記事ページをわざと閲覧してください。

閲覧したら、閲覧履歴のページ一覧を表示する箇所をご確認いただくと、下図のように閲覧したページが一覧となって表示されているのが確認できるかと思います。

これで閲覧履歴の実装は完了です。お疲れ様でした！

閲覧履歴の削除機能の実装方法

閲覧履歴の表示の実装の解説をしましたが、合わせて閲覧履歴を削除する実装方法について解説します。

閲覧履歴の削除機能は必ず実装しなければならないものではありませんが、サイトの性質によっては必要になる場面があるかと思います。

また、閲覧履歴を削除する実装方法を知っておけば、ユーザー向けに削除機能を提供できることはもちろん、ご自身で閲覧履歴機能を実装する際にも作業で利用することもあるかと思いますので、ぜひご活用いただければと思います。

それでは早速実装方法を解説いたします。

以下のコードを、functions.phpにコピー＆ペーストしてください。

<?php
function clear_view_history() {
    if (isset($_POST['clear_history'])) {
        setcookie('view_history', '', time() - 3600, "/"); // クッキーを削除

        // 現在のページURLを取得
        $current_url = home_url(add_query_arg([], $_SERVER['REQUEST_URI']));

        // リダイレクト
        wp_safe_redirect($current_url);
        exit();
    }
}
add_action('init', 'clear_view_history');

上記コードについて解説します。

上記コードは、クッキーに保存された閲覧履歴を削除し、現在のページをリロードする処理をおこなう関数です。

isset($_POST[‘clear_history’])で、フォームの送信を確認し、setcookie()関数でクッキーを無効化します。

その後、home_url(add_query_arg([], $_SERVER[‘REQUEST_URI’]))の行で、現在のページのURLを取得し、wp_safe_redirect()関数を使ってリダイレクトを行い、exit();で処理を終了させます。

次に、以下のコードを、閲覧履歴削除ボタンを表示させたいPHPファイル（header.php、single.php、sidebar.phpなど）にコピー＆ペーストしてください。

<form method="post">
    <input type="submit" name="clear_history" value="閲覧履歴を削除" />
</form>

上記コードは、閲覧履歴を削除するための送信ボタンを実装するコードになります。

ペーストが完了したら、フロントページをご確認いただくと、下図のように閲覧履歴の削除ボタンが表示されているのが確認できるかと思います。

削除ボタンをクリックしていただくと、保存されていたクッキーは削除され、履歴が削除されます。

これで閲覧履歴の機能の実装は完了です。お疲れ様でした！

まとめ

今回は、WordPressで閲覧履歴をPHPのクッキーを使って自作する方法や、そのメリット・注意点について解説しました。

閲覧履歴機能を導入することで、ユーザーの利便性を向上させ、より使いやすいWebサイトを実現できる可能性があります。

ただし、すべてのサイトに必要なわけではなく、ユーザー体験を考慮した上で適切に活用することが大切です。今回の解説が、閲覧履歴機能の導入を検討する際の参考になれば幸いです。

ぜひ、自身のWebサイトに合った形でカスタマイズするなどしてご活用ください。