各種ブラウザには当然のように備わっている機能、「閲覧履歴」。
ブラウザでなくとも、Amazonや価格.comなどの大手サービスには、ログインしていないユーザーにも閲覧履歴を確認できるページがあります。
特に、お気に入りに入れるような、毎回のように見に行くサイトほど、閲覧履歴はとても便利な機能だと思えます。
僕も、よく確認に行くブログには「閲覧履歴」があったらいいのにな、と思っているのですが…。
WordPressを含めた各種ブログサービスでは、「閲覧履歴」は重視されていません。
未だかつて、実装されているサイトは見たことがありません。
なので、今回はWordPressテーマ「Cocoon」で、閲覧履歴をウィジェット(サイドメニュー)に表示させる方法をまとめてみました。
プラグインは使用せず、Cocoonのカスタマイズのみで実装できます。
まずはカンマ区切りナビカード出力のショートコードを追加してください
1つ前の記事で紹介した、カンマ区切りでナビカードを出力させるショートコードの記事を確認してください。

この記事で紹介したショートコードを使用するので、事前に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がない場合は閲覧履歴という項目すら出したくないので、空白を表示させるようにしています。
ウィジェットのサイドメニューに追加したショートコードを書く
ここまでの設定をすべて行ったら、最後にショートコードのみを書いたウィジェットを設定します。
ここまで設定が終わりましたら、いくつかご自身の記事を適当に巡回してみてください。
ちゃんと閲覧履歴が表示されましたら設定成功です。

こんな感じの画像がサイドメニューに表示されます。
もちろん、ショートコードなのでウィジェット以外でも使用することが出来て、固定ページを使用して1ページを閲覧履歴として使用することも可能です。
閲覧履歴と相性が良いサイトは回遊率がアップすると思いますので、是非お試しください。
コメント