Wordpressでショッピングサイトを作るときの定番プラグイン「
お手軽に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つあり、まず最初はオプションの設定です。
項目 |
説明 |
|---|---|
登録ユーザーのみ、お気に入りリストを作成できるようにする |
通常はクッキーを利用してブラウザに「お気に入りリスト」を保存しますが、こちらにチェックを入れると、会員登録したユーザーのみ「お気に入りリスト」が使えるようになります。 |
お気に入り追加リンクを表示する場所 |
お気に入りに追加するリンクをどこに表示させるかを選択します。
|
お気に入り追加リンクの前に表示するアイコン |
リンクの前に表示するアイコンの種類や有無を選択します。 |
1ページあたりに表示するお気に入りリストの数 |
お気に入りの一覧表示ページで表示される件数を指定します。 |
最もお気に入りの記事の統計 |
こちらの項目を「Enabled」にするとお気に入りに登録された数がカウントされるようになり、お気に入り登録されている記事の一覧を出したり、カウント数を表示させる事も可能です。 |
次はラベルの文言設定ですが、こちらは書いている通りの内容を入れれば良いので、悩む必要はないでしょう。この欄には必要に応じてタグを挿入する事も可能です。
項目 |
説明 |
|---|---|
お気に入りに追加する時 |
お気に入り登録用リンクのテキスト。 |
お気に入り追加が完了した時 |
お気に入り登録完了時に表示するテキスト。「Show remove link」で削除リンクのテキストを代わりに表示。 |
お気に入りから外す時 |
お気に入り削除リンクのテキスト。 |
お気に入りから外れた時 |
お気に入り削除時に表示するテキスト。「Show add link」でお気に入り登録用のテキストを代わりに表示。 |
お気に入りリストをクリアする時 |
お気に入りリストを全消去するリンクのテキスト。 |
お気に入りリストがクリアされた時 |
全消去が完了した時のテキスト。 |
お気に入りリストが無い時 |
お気に入りリストが空の場合のテキスト。 |
削除リンク |
お気に入りリストに登録されている項目の登録解除(削除)用のテキスト。 |
お気に入りリストがcookieを使って保存された時 |
お気に入りリストがクッキーに保存されたことを知らせるメッセージ。 |
登録ユーザー以外がお気に入りリストを作成した時のエラーメッセージ |
登録ユーザーのみ利用可能であることを知らせるエラーメッセージ。 |
最後の「高度な設定」は普段はそのままでかまいません。このプラグインで使用されている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 "". 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 "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ファイルをカスタマイズする場合は、プラグインのアップデートがあった場合に(このプラグインは数年間放置されているので、これ以上アップデートされないような気がしますが…)上書きされてしまいますので、必ずバックアップしておきましょう。
例えば下記の遊び場情報サイトでは、お気に入りの場所を登録してストック出来るように作っております。