Welcart カスタマイズ ブログ

最近チェックした商品を表示 Last Viewed Posts

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook

「最近チェックした商品」として、閲覧履歴を表示する、Amazonや楽天でよく見るアレ。

閲覧履歴を表示させるプラグイン「Last Viewed Posts」を使って表示出来るというこちらの記事を拝読し、早速参考にして使ってみました。

閲覧履歴（最近見た商品）を表示してくれるプラグインLast Viewed Posts（Z-WP-Memo）

すこし古い記事ですが、問題なくカスタマイズ出来ました！

もくじ

1. Last Viewed Postsのインストール
2. Last Viewed Postsのカスタマイズの概要
3. 出力内容の設定方法
4. ウィジェットの出力内容を変えたい時
5. まとめ

1. Last Viewed Postsのインストール

1. ［ダッシュボード］＞［プラグイン］＞［新規追加］から、「last viewed posts」を検索
2. 検索結果リストの「Last Viewed Posts」から、「今すぐインストール」をクリック
3. インストールが完了したら有効化する

2. Last Viewed Postsのカスタマイズの概要

多くの方が戸惑うのが、「このプラグイン、どこの何をカスタマイズすればいいの！？」という点だと思います。

と言うのも、Last Viewed Postsは、ダッシュボード上に設定用メニューは一切表示されず、自分でプラグインフォルダ内のPHPファイルのコードを書き換える必要がある為です。

※ということは、プラグインのアップデート時には上書きされてしまい、書き換え内容がリセットされてしまいます！アップデート時には必ずバックアップを取っておき、再度書き換えするのを忘れずに！

プラグインフォルダは、WordPressのフォルダ内のwp-content/plugins/の中にあります。

その中のlast-viewed-postsというフォルダが、当該プラグインのフォルダです。

フォルダを開くと、たった二つのファイルだけが入っています。

カスタマイズするのは、last_viewed_posts.phpのほうなので、テキストエディタで開きましょう。

3. 出力内容の設定方法

last_viewed_posts.phpを開くと、英語では結構丁寧に説明してくれてあります。

3-1. 40行目～：表示に関する基本設定

まず最初に、クッキーの保存日数などの基本的な設定を行います。デフォルトでは以下のような記述になっています。

/* Here are some parameters you may want to change: */
$zg_cookie_expire = 360; // After how many days should the cookie expire? Default is 360.
$zg_number_of_posts = 10; // How many posts should be displayed in the list? Default is 10.
$zg_recognize_pages = true; // Should pages to be recognized and listed? Default is true.

例えば、

• クッキーの表示は30日
• 表示する記事数は4つ
• 固定ページは含めない

という場合は、以下のようになります。

/* Here are some parameters you may want to change: */
$zg_cookie_expire = 30; // After how many days should the cookie expire? Default is 360.
$zg_number_of_posts = 4; // How many posts should be displayed in the list? Default is 10.
$zg_recognize_pages = false; // Should pages to be recognized and listed? Default is true.

ご自身のWelcartサイトに合わせて、自由に設定して下さい。

3-2. 47行目～：クッキーを取得する投稿の指定

次に、47行目～のzg_lwp_header()という独自関数で、どのタイプの投稿の時にクッキーを保存するかの条件を指定します。デフォルトはこのようになっています。

function zg_lwp_header() { // Main function is called every time a page/post is being generated
	if (is_single()) {
		zg_lw_setcookie();
	} else if (is_page()) {
		global $zg_recognize_pages;
		if ($zg_recognize_pages === true) {
			zg_lw_setcookie();
		}
	}
}

上記コードでは、if(is_single())（48行目：投稿ページの時）及びif(is_page())（50行目：固定ページの時）という条件で、クッキーが取得されるように指定されています。

一つのWordPressでWelcartとブログを動かしていると、if(is_single())ではブログ記事もその条件に含まれ、「最近見た商品」としてブログ記事も出てきてしまいます。

そこで、48行目に「記事が「商品」カテゴリーに属する場合」という条件を加えます。

function zg_lwp_header() { // Main function is called every time a page/post is being generated
	if (is_single() && in_category('item') {
		zg_lw_setcookie();
	} else if (is_page()) {
		global $zg_recognize_pages;
		if ($zg_recognize_pages === true) {
			zg_lw_setcookie();
		}
	}
}

これで、商品ページを開いた時だけクッキーが保存されるようになります。

3-3. 90行目～：出力内容の指定

次に、出力する画像やタイトルを指定する部分をカスタマイズ。

90行目のzg_recently_viewed()という関数が、出力を制御する部分になります。実際に出力されるのは、echoで始まる行の部分です。

function zg_recently_viewed() { // Output
	echo '<ul class="viewed_posts">';
	if (isset($_COOKIE["WP-LastViewedPosts"])) {
		//echo "Cookie was set.<br/>";  // For bugfixing - uncomment to see if cookie was set
		//echo $_COOKIE["WP-LastViewedPosts"]; // For bugfixing (cookie content)
		$zg_post_IDs = unserialize(preg_replace('!s:(\d+):"(.*?)";!e', "'s:'.strlen('$2').':\"$2\";'", stripslashes($_COOKIE["WP-LastViewedPosts"]))); // Read serialized array from cooke and unserialize it
		foreach ($zg_post_IDs as $value) { // Do output as long there are posts
			global $wpdb;
			$zg_get_title = $wpdb->get_results("SELECT post_title FROM $wpdb->posts WHERE ID = '$value+0' LIMIT 1");
			foreach($zg_get_title as $zg_title_out) {
				echo "<li><a href=\"". get_permalink($value+0) . "\" title=\"". $zg_title_out->post_title . "\">". $zg_title_out->post_title . "</a></li>\n"; // Output link and title
			}
		}
	} else {
		//echo "No cookie found.";  // For bugfixing - uncomment to see if cookie was not set
	}
	echo '</ul>';
}

基本的には、<li>が出力される100行目周辺をいじれば、出力内容を制御することが出来ます。

※104行目はクッキーがセットされているかどうかを確認するためのもので、デフォルトではコメントアウトされています。うまく記事（商品）が表示されない場合は、コメントアウトの「//」を外して確認してみて下さい。

上記のコードはPHPで書かれているので、PHPの書き方がわからないと難しいかもしれません。PHPの命令の中にHTMLタグを書く場合は、以下の点に気をつけてカスタマイズしてみて下さい。

• HTMLで出力する部分は「”」ダブルクオートまたは「’」シングルクオートではさむ。
• HTMLとPHPのコードを繋げる場合は「.」ドットを使う。

以下は、Welcart用にサムネイルと商品名を出力するようにカスタマイズしたコード例です。

function zg_recently_viewed() { // Output
	echo '<ul class="viewed_posts">';
	if (isset($_COOKIE["WP-LastViewedPosts"])) {
		//echo "Cookie was set.<br/>";  // For bugfixing - uncomment to see if cookie was set
		//echo $_COOKIE["WP-LastViewedPosts"]; // For bugfixing (cookie content)
		$zg_post_IDs = unserialize(preg_replace('!s:(\d+):"(.*?)";!e', "'s:'.strlen('$2').':\"$2\";'", stripslashes($_COOKIE["WP-LastViewedPosts"]))); // Read serialized array from cooke and unserialize it
		foreach ($zg_post_IDs as $value) { // Do output as long there are posts
			global $wpdb;
			$post = get_post($value);
			$zg_get_title = $wpdb->get_results("SELECT post_title FROM $wpdb->posts WHERE ID = '$value+0' LIMIT 1");
			foreach($zg_get_title as $zg_title_out) {
				echo "<li><a href=". get_permalink($value+0) . " title=". $zg_title_out->post_title . ">". usces_the_itemImage($number=0, $width=200, $height=200, $post, 'return'). "<h3>". $zg_title_out->post_title. "</h3></a></li>\n"; // Output link and title
			}
		}
	} else {
		//echo "No cookie found.";  // For bugfixing - uncomment to see if cookie was not set
	}
	echo '</ul>';
}

価格も出力させようと1日位悩みましたが、どうもうまく取得出来ませんでした。要検証。

3-4. 表示させたい場所に出力コードを記述

ここまでは出力内容の設定を行いました。次に出力するためのコードを書き込みます。

「最近チェックした商品」を表示させたい場所に、以下のコードを記述。このコードはlast_viewed_posts.phpの33行目にも記載されています。

<?php if (function_exists('zg_recently_viewed')):  if (isset($_COOKIE["WP-LastViewedPosts"])) { ?>
 <h2>Last viewed posts</h2>
 <?php zg_recently_viewed(); ?>
<?php }  endif; ?>

34行目のLast viewed postsという文言は、日本語のページであれば「最近チェックした商品」などにすればいいですね。

3-5. スタイルシートで調整

上述までの行程で表示はできるので、あとはスタイルシートで調節します。

上の画像の例では、スタイルシートは以下のようになっています（出力数が４の場合）。ご自身のテーマに合わせてお使い下さい。

.viewed_posts {
    list-style: none;
    clear: both;
    margin: 0!important;
}
.viewed_posts li {
    width: 25%;
    float: left;
    padding-right: 10px;
    box-sizing: border-box;
}
.viewed_posts li img {
    width: 100%;
    height: auto;
}
.viewed_posts li h3{
    margin: 0!important;
    color: #000!important;
    background-color: transparent!important;
}

4. ウィジェットの出力内容を変えたい時

Last Viewed Postsは、ウィジェットの出力機能も備えています。

ですが、3-3の行程で出力内容をいじってしまうと、ウィジェットの表示も一緒に変わってしまいます。

ウィジェットの出力内容を商品詳細ページと変えたい場合は、以下のようにします。

あとは、zg_recently_viewed_widget()を自由に編集すればOKです。スタイルシートでデザインを変えやすいように、<ul>内のclass属性も変えておいたほうがいいですね。

5. まとめ

更新の際は上書きされてしまうので、バックアップは忘れずに。もしかしたら、last_viewed_posts.phpをテーマ内に設置して、functions.phpで読み込んだほうが安全かもしれません（未検証）。

他にもDD Last Viewedというプラグインも試しましたが、カテゴリーの絞込みが出来ないようなので、Welcartでの使用は難しいかなと思いました。

Last Viewed Poistsはカスタマイズが難しい分、逆に自分の思うとおりに出力内容をカスタマイズ出来るところがポイントです。

尚、ローカル環境ではGoogle Chromeではうまくクッキーが働かず、IE11で確認しました。念のため、localhostというアドレスも127.0.0.1に変更。ローカルでうまく確認出来ない場合は試してみて下さい。

• 商品一覧ページ,商品ページ
• プラグイン

• ツイート
• B! ブックマーク
• Google+
•  Pocket
• Facebook