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

スポンサーリンク

「最近チェックした商品」として、閲覧履歴を表示する、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のカスタマイズがわからないイメージ

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

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

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

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

WordPressのプラグインフォルダ

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

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.
$zg_cookie_expire  クッキーの保存日数(デフォルトは「360」)
$zg_number_of_posts  表示する記事数(デフォルトは「10」)
$zg_recognize_pages  固定ページも含めるか?trueまたはfalse(デフォルトは「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. スタイルシートで調整

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

Last Viewed Postsの出力

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

.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の行程で出力内容をいじってしまうと、ウィジェットの表示も一緒に変わってしまいます。

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

  1. 90行目以降のzg_recently_viewed()の元コードをコピー。
  2. 1↑をファイル内にペーストし、関数名をzg_recently_viewed_widget()に変更。
  3. 関数zg_lwp_widget($args)内の、出力呼び出し部分のzg_recently_viewed();(元ファイルでは116行目)を、zg_recently_viewed_widget();に置き換える。

あとは、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に変更。ローカルでうまく確認出来ない場合は試してみて下さい。

5 Responses to “最近チェックした商品を表示 Last Viewed Posts”

  1. makoto より:

    自サイトの立ち上げに、貴サイトの記事がとても参考になりました。
    この記事以外にも、沢山採用させていただきました。
    ありがとうございます。

    確かに価格出すのに苦戦しましが、取り急ぎ以下の様にして、他のスタイルと合わせる事が出来ました。ご報告まで。

    function zg_recently_viewed() { // Output
    // echo '';
    if (isset($_COOKIE["WP-LastViewedPosts"])) {
    //echo "Cookie was set."; // 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;global $usces;
    $zg_get_title = $wpdb->get_results("SELECT post_title FROM $wpdb->posts WHERE ID = '$value+0' LIMIT 1");
    $post = get_post($value);
    if ('' != usces_the_itemName('return',$post)) {
    ?>

    <a href="">
    <a href="" rel="bookmark">

    <?php
    }
    foreach($zg_get_title as $zg_title_out) {
    }
    }
    } else {
    //echo "No cookie found."; // For bugfixing - uncomment to see if cookie was not set
    }
    // echo '';
    }

    • まめ子(管理人) より:

      わざわざコードを有難うございます。価格はデータベースから引っ張ってくる感じですか~。そういえば記事を書いた後そのままになってました・・・。また時間がある時にチェックしてみます。ちなみにコードは[php][/php]などで挟むと、記事内のようなコード用スタイルがコメント内でも適用されます。でもcodeタグでも大丈夫です。有難うございます。

  2. makoto より:

    すみません。codeタグで囲んだのですが、phpのソースがうまく入りません。良い方法がありましたら教えてください。

  3. makoto より:

    phpタグ了解しました。
    ありがとうございます。

  4. […] 情報源: 最近チェックした商品を表示 Last Viewed Posts – Welcart カスタマイズ […]

Copyright© 2017 Welcart カスタマイズ ブログ All Rights Reserved.