｢Last Viewed Posts｣でWelcartに｢最近チェックした商品｣機能を追加！ Welcart補完計画 [2]
2018.05.12
Wordpressでショッピングサイトを作るときの定番プラグイン「
お手軽にWordpressに販売機能を付けられるだけでなく、カスタマイズ次第では大手サイトに負けないくらい本格的なショッピングサイトを作ることも可能です。
前回はWelcartに｢お気に入り｣機能を追加する｢WP Favorite Posts｣のカスタマイズを紹介させていただきました。Welcartには基本的なショッピング機能は備わっているのですが、かゆい所に手が届かない事もしばしば。しかし、プラグインを導入する事によってこれらの足りない機能を補完する事が可能です。
今回は第2弾として｢最近チェックした商品｣機能を追加するプラグイン｢Last Viewed Posts｣の使い方をご紹介したいと思います。
01.インストールと有効化
「Last Viewed Posts」からZIP形式でプラグインをダウンロードし、解凍後にFTPツール等でご自分のサイトのpluginsディレクトリにアップロードした後に有効化して下さい。こちらのプラグインはダッシュボードに設定項目等は表示されず、自分でPHPのコードを書き換えて使用するタイプのプラグインになります。
02.オプションの設定
FTPソフト等を使ってpluginsフォルダの中にある「last_viewed_posts.php」を開いて下さい。
40行目くらいにある「Here are some parameters you may want to change」という注釈がある場所の下3行がオプションの設定項目です。
$zg_cookie_expire = 360; $zg_number_of_posts = 10; $zg_recognize_pages = true;
項目 | 説明 |
|---|---|
$zg_cookie_expire | クッキーの保存期間（デフォルト値は"360"） |
$zg_number_of_posts | 表示させる商品(記事)の数（デフォルト値は"10"） |
$zg_recognize_pages | 表示に固定ページも含めるか？（デフォルト値は"true"） |
前回の｢WP Favorite Posts｣同様、こちらのプラグインもクッキーを利用してブラウザにデータを保存します。クッキーの保存期間はデフォルトの1年で十分だと思いますが、全くアクセスしないと1年後には消えてしまいます。あと、Welcartで使う場合は商品(投稿)がメインになるので、固定ページを含める必要はないでしょう。商品のみを表示させたい場合は、最後の「$zg_recognize_pages」を"false"にします。
03.Welcartの商品に投稿を限定する
このプラグインは元々Welcart用というワケではなく、Wordpressで作られたサイトやブログの最近見た投稿や固定ページ(固定ページは前項目のオプションで非表示にします)を表示するものです。今回はWelcartで使う事がメインなので、商品ページの表示に限定したいと思います。
ちなみに47行目から始まる「zg_lwp_header()」という関数が、投稿の条件を指定している部分で、次の48行目で「is_single()」となっている部分に「in_category('item')」を追加して、商品ページのみを抽出させましょう。
last_viewed_posts.php
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();
}
}
}
04.コードを出力する場所を指定
このプラグインを使う場合は、ご自分のテンプレート中の｢最近チェックした商品｣を出力したい場所に下記のコードを書き込みます。デフォルトでは最近チェックした商品がない場合は、何も表示されません。
last_viewed_posts.php
<?php if (function_exists('zg_recently_viewed')): if (isset($_COOKIE["WP-LastViewedPosts"])) { ?>
<?php zg_recently_viewed(); ?>
<?php } endif; ?>
05.出力コードのカスタマイズ
デフォルトのままだと、出力される項目はタイトルのみなので、ここではショッピングサイトらしくサムネイルや価格を表示させたいと思います。出力される項目の追加は基本的に101行目に書き込みます。 「usces_the_itemImage($number=0, $width=250, $height=250, $post, 'return')」の部分を変えると、画像の大きさや複数枚ある場合の"何枚目"の指定が可能です。 また、Welcartで金額を出力する時に使う「usces_the_itemPrice()」が上手く動かないので、代わりに「usces_the_firstPrice()」で金額の取得を行っております。
last_viewed_posts.php
function zg_recently_viewed() { // Output
echo '- ';
if (isset($_COOKIE["WP-LastViewedPosts"])) {
//echo "Cookie was set.
- " . usces_the_itemImage($number=0, $width=250, $height=250, $post, 'return'). "
" . get_the_title($value+0) . "
" . mb_substr(str_replace(array("\r\n", "\r", "\n"), '', strip_tags(get_the_excerpt())), 0, 100) . "
￥" . usces_the_firstPrice('return') . "（税込）
\n"; // Output link and title
}
}
} else {
//echo "No cookie found."; // For bugfixing - uncomment to see if cookie was not set
}
echo '
"; // For bugfixing - uncomment to see if cookie was set //echo $_COOKIE["WP-LastViewedPosts"]; // For bugfixing (cookie content) $zg_post_IDs = unserialize(preg_replace_callback('!s:(\d+):"(.*?)";!', function ($r) { return 's:'.strlen($m[2]).':"'.$m[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 "
CSS
#checkitem{
list-style-type: none;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#checkitem li{
width: 17.5%;
}
#checkitem li:hover span{
transform: scale(1.1);
}
#checkitem li:nth-child(1):last-child {
margin-right: 80%;
}
#checkitem li:nth-child(2):last-child {
margin-right: 60%;
}
#checkitem li:nth-child(3):last-child {
margin-right: 40%;
}
#checkitem li:nth-child(4):last-child {
margin-right: 20%;
}
#checkitem img{
width: 100%;
margin-bottom: 1.0vw;
transition: transform 0.3s ease-in-out;
}
#checkitem img:before {
content: "";
display: block;
padding-top: 100%;
}
#checkitem h3{
width:100%;
height: 1.8em;
overflow:hidden;
margin-bottom: 1.0vw;
}
#checkitem p{
width:100%;
height: 3.6em;
overflow:hidden;
margin-bottom: 0.5vw;
}
#checkitem h4{
width:100%;
height: 1.8em;
overflow:hidden;
}
RESULT
最近チェックした商品
以上でWelcartに｢最近チェックした商品｣機能を追加するカスタマイズは完了です。
PHPファイルをカスタマイズする場合は、プラグインのアップデートがあった場合に上書きされてしまいますので、必ずバックアップしておきましょう。
最後となる次回は「この商品を見た人はこんな商品も見ています」をWelcartに実装してみたいと思います。