Cocoonで「閲覧履歴」を表示させるカスタマイズ【WordPress】

各種ブラウザには当然のように備わっている機能、「閲覧履歴」。

ブラウザでなくとも、Amazonや価格.comなどの大手サービスには、ログインしていないユーザーにも閲覧履歴を確認できるページがあります。

特に、お気に入りに入れるような、毎回のように見に行くサイトほど、閲覧履歴はとても便利な機能だと思えます。

僕も、よく確認に行くブログには「閲覧履歴」があったらいいのにな、と思っているのですが…。

WordPressを含めた各種ブログサービスでは、「閲覧履歴」は重視されていません。
未だかつて、実装されているサイトは見たことがありません。

なので、今回はWordPressテーマ「Cocoon」で、閲覧履歴をウィジェット（サイドメニュー）に表示させる方法をまとめてみました。
プラグインは使用せず、Cocoonのカスタマイズのみで実装できます。

まずはカンマ区切りナビカード出力のショートコードを追加してください

1つ前の記事で紹介した、カンマ区切りでナビカードを出力させるショートコードの記事を確認してください。

Cocoonのナビカードをカンマ区切りの記事IDで表示させるカスタマイズ【Wordpress】

Cocoonに搭載されているナビカードデザインを、記事IDのカンマ区切り(csv)で表示できるカスタマイズ方法を載せています。

kinocolog.com

この記事で紹介したショートコードを使用するので、事前にfunctions.phpに追記をお願いします。

Cookieを保存する設定をCocoon子テーマに追記

閲覧履歴は、ブラウザにデータを保存できる「Cookie」という仕組みを使用して実現できます。

Cocoonの子テーマのフォルダ「cocoon-child-master」の中に、tmp-userというフォルダがあります。

そこのhead-insert.phpに、Cookieを保存する処理を追記します。

• skins
• tmp-user
  • amp-body-top-insert.php
  • amp-footer-insert.php
  • amp-head-insert.php
  • body-top-insert.php
  • footer-insert.php
  • head-insert.php(これに追記)
  • main-before.php

head-insert.phpの末尾に、Cookieを保存する下記のPHPコードを追記してください。

<?php
$show_history_count = 20; //保存記事数

//既存のCookieを取得
if(isset($_COOKIE['browsing_history']) && $_COOKIE['browsing_history']){
    $aryHistory = explode(',', $_COOKIE['browsing_history']);
    $aryHistory = array_reverse($aryHistory);
}else{
    $aryHistory = [];
}

//投稿記事かつ公開記事の場合は保存
if(is_single() && get_post_status() === 'publish'){
    if(in_array($post -> ID, $aryHistory)){
        $aryHistory = array_diff($aryHistory, [$post -> ID]);
        $aryHistory = array_values($aryHistory);
    }
    if(count($aryHistory) >= ($show_history_count + 1)){
        $aryHistory = array_slice($aryHistory, 0, $show_history_count);
    }
    $aryHistory[] = $post -> ID;
    $aryHistory = array_reverse($aryHistory);
    setcookie('browsing_history', implode(',', $aryHistory), time() + (3600 * 24 * 365), '/');
}
?>

やや難しいソースコードですが、要約すると「今みた記事をCookieに保存する」という処理となっています。（最大20件）

functions.phpに、閲覧履歴表示用のショートコードを追加

子テーマのfunctions.phpに、閲覧履歴を表示させるタグを発行するショートコードを追加します。

しつこいようですが、カンマ区切りでナビカードを出力させるショートコードのプログラムを使用していますので、先にこちらの記事をショートコードを追加してください。

function get_my_history_list_tag(){
    global $post;
    
    //そもそも履歴がない場合は表示しない
    if(!isset($_COOKIE['browsing_history']) || !$_COOKIE['browsing_history']){
        return '';
    }
    
    $aryHistory = explode(',', $_COOKIE['browsing_history']);
    
    $show_count = 5; //表示数
    $aryCmp = [];
    foreach($aryHistory as $value){
        if(count($aryCmp) >= $show_count) break;
        if($post -> ID == $value){
            continue; //今見ている記事は除外
        }
        $aryCmp[] = (int)$value;
    }
    
    //表示させる候補がない場合は表示しない
    if(!$aryCmp){
        return '';
    }
    
    $html = '';
    $html .= '<h3>閲覧履歴</h3>';
    $html .= '[my_csv_list id="'.implode(',', $aryCmp).'"]';
    
    return do_shortcode($html);
}
add_shortcode('my_history_list', 'get_my_history_list_tag');

ユーザーが持っているCookieを確認して、存在する場合は閲覧履歴を表示させる処理となっています。

Cookieがない場合は閲覧履歴という項目すら出したくないので、空白を表示させるようにしています。

ウィジェットのサイドメニューに追加したショートコードを書く

ここまでの設定をすべて行ったら、最後にショートコードのみを書いたウィジェットを設定します。

ここまで設定が終わりましたら、いくつかご自身の記事を適当に巡回してみてください。

ちゃんと閲覧履歴が表示されましたら設定成功です。

以上、Cocoonで「閲覧履歴」を表示させるカスタマイズ、でした。