｢WP Favorite Posts｣でWelcartに｢お気に入り｣機能を追加！ Welcart補完計画 [1]

2018.04.18

Wordpressでショッピングサイトを作るときの定番プラグイン「Welcartウェルカート」
お手軽にWordpressに販売機能を付けられるだけでなく、カスタマイズ次第では大手サイトに負けないくらい本格的なショッピングサイトを作ることも可能です。

ところがWelcartには基本的なショッピング機能は備わっているのですが、かゆい所に手が届かない事もしばしば。 例えば楽天市場やAmazonにある「お気に入り」や「最近チェックした商品」等のデータ保存が必要になる機能や「この商品を見た人はこんな商品も見ています」のようにユーザーの動向を分析する機能等です。

これらの機能はショッピングサイト専門のCMSであるEC-CUBEには(有料で)プラグインが出ているのですが、サイト自体の完成度を考えるとEC-CUBEではなく、Wordpress+Welcartで実現したい所。

Welcartは無料で使えるプラグインなので、楽天市場やAmazonといった最大手サイトと比べるのは間違いですが、ショッピングサイト制作を依頼されるクライアントには"出来ない"とは言えません。

しかし、そこは流石Wordpress。プラグインやちょっとしたカスタマイズでWelcartには無い「お気に入り」「最近チェックした商品」「おすすめ商品」の機能を実現可能でした。今回は第1弾として｢お気に入り｣機能を追加するプラグイン「WP Favorite Posts」の使い方をご紹介したいと思います。

01.インストールと有効化

「WP Favorite Posts」からZIP形式でプラグインをダウンロードし、解凍後にFTPツール等でご自分のサイトのpluginsディレクトリにアップロードして下さい。Wordpressにログインすると［ダッシュボード］＞［プラグイン］の項目に「WP Favorite Posts」が追加されているので、こちらを有効化します。

02.PHPバージョン7以降で動くようにする

「WP Favorite Posts」は数年前に開発がストップしているプラグインのため、PHPのバージョンが7以降ではエラーが出て上手く動きません。しかし「お気に入り」機能を使いたい場合は他に変わりがないプラグインなので、PHPのバージョンが7以上の場合はソースを修正して使う事になります。

まず「wp-favorite-posts.php」を開いて、376行目にある「$val = $oldval + $val」を「$val = (int) $oldval + $val」に変更します。これでPHP 7以降の環境でも動くはずです。

wp-favorite-posts.php

function wpfp_update_post_meta($post_id, $val) {
	$oldval = wpfp_get_post_meta($post_id);
	if ($val == -1 && $oldval == 0) {
    	$val = 0;
	} else {
		$val = (int) $oldval + $val;
	}
    return add_post_meta($post_id, WPFP_META_KEY, $val, true) or update_post_meta($post_id, WPFP_META_KEY, $val);
}

さらにPHP 7.1.x以降の場合は127行目が「Uncaught Error: [] operator not supported for strings」というエラーになりますので、配列にデータを追加する前に、配列の初期化を行って下さい。

$wpfp_favorites = array();
$wpfp_favorites = wpfp_get_user_meta();
$wpfp_favorites[] = $post_id;

03.オプションの設定

プラグインのオプションやラベルの文言設定などは［ダッシュボード］＞［設定］＞［WP Favorite Posts］から行います。項目は大きく分けて3つあり、まず最初はオプションの設定です。

次はラベルの文言設定ですが、こちらは書いている通りの内容を入れれば良いので、悩む必要はないでしょう。この欄には必要に応じてタグを挿入する事も可能です。

最後の「高度な設定」は普段はそのままでかまいません。このプラグインで使用されているCSSやjavaScriptを使用しない場合にのみチェックして下さい。

04.実際の使い方とボタンのカスタマイズ

「お気に入り追加リンクを表示する場所」で「After Post」や「Before Post」を選択している場合は、記事の先頭か最後に自動的に挿入されます。もしこの項目で「Custom」を選んでいる場合は、テンプレート中の任意の位置に配置する事が可能です。その場合は、出力したい場所に下記コードを記述します。

<?php if (function_exists('wpfp_link')) { wpfp_link(); } ?>

また、ショートコードを使用して表示させることも可能で、その場合は下記のように記述します。

[wpfp-link]

上のオプションの説明で書いた通り、お気に入り登録用リンクにはタグを入れる事も可能です。そのため、ボタンなどの装飾も簡単に行う事が出来ます。

HTML

	
お気に入り登録
	
お気に入りリスト

RESULT

05.お気に入りリストページの作成とカスタマイズ

最後は「お気に入りリスト」を表示させるリストページの作成です。
こちらは基本的に固定ページの中にショートコードを挿入して作ることになるのですが、Welcartの場合は会員情報のテンプレートの中に挿入しても良いと思います。

挿入するショートコードは下記になります。

HTML

[wp-favorite-posts]

ショートコードを挿入した場所には、テンプレートファイル「wpfp-page-template.php」が実行されて、下記のようなHTMLが生成されます。

出力ソース例

商品タイトル
リストから削除







リストをクリア

デフォルトで生成されるコードはテキストのみでサムネイルすらありません。できれば商品写真や価格を表示させたいところ。こちらは「wpfp-page-template.php」を書き換えてカスタマイズを行います。

wpfp-page-template.php

while ( have_posts() ) : the_post(); usces_the_item(); usces_have_skus();
    echo "
";
    usces_the_itemImage(0, 250, 250);
    echo "
".  get_the_title() . "";
    if( usces_the_itemCprice('return') > 0 ){
        echo "
";
        usces_the_itemCpriceCr();usces_guid_tax();
        echo "
";
    }
    echo "
";
    usces_the_itemPriceCr();usces_guid_tax();
    echo "
";
    usces_the_itemZaikoStatus();
    echo "
";
    if( !usces_have_zaiko() ) {
        echo "お問い合せ";
    } else {
        global $post;
        usces_direct_intoCart($post->ID, usces_the_itemSku('return'), false, 'カートへ入れる');
    }
    wpfp_remove_favorite_link(get_the_ID());
    echo "
";
endwhile;

CSS

.wpfp-span ul {
	padding: 0;
	list-style: none;
	margin-bottom: 2.0em;
}

.wpfp-span > ul > li {
	list-style-type: none;
	display: flex;
	align-items: center;
	flex-wrap: no-wrap;
	border-bottom: 1px solid #ccc;
	padding-top: 2.0em;
	padding-bottom: 2.0em;
}

.wpfp-span img {
	padding-right: 2.0em;
}

.wpfp-span h2 {
	border-bottom: 1px solid #ccc;
	padding-bottom: 0.5em;
	margin-bottom: 1.5em;
	color:#666;
}

.wpfp-span input.skubutton,.wpfp-span .inquiry-button{
	display: inline-block;
	padding: 1.0em 1.25em;
	background: #910738;
	color: #fff;
	cursor: pointer;
	margin-top: 1.0em;
	margin-bottom: 1.0em;
	transition: transform 0.3s ease-in-out;
}

.wpfp-span input.skubutton:hover,.wpfp-span .inquiry-button:hover {
    background-color: #910738;
	transform:scale(0.95);
}

RESULT

これで「お気に入りリスト」の機能が実装できました。
｢WP Favorite Posts｣はWelcartだけでなく、一般的なブログやデータベースサイトにも役立ちますので、ぜひ使ってみて下さい。
ちなみにPHPファイルをカスタマイズする場合は、プラグインのアップデートがあった場合に(このプラグインは数年間放置されているので、これ以上アップデートされないような気がしますが…)上書きされてしまいますので、必ずバックアップしておきましょう。
例えば下記の遊び場情報サイトでは、お気に入りの場所を登録してストック出来るように作っております。

Copyright © 2018, Mo-ja.net All Rights Reserved.