Welcart カスタマイズ ブログ

お気に入りを登録できる WP Favorite Posts

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

楽天でもAmazonでも、大手ECサイトには必ず用意されている「お気に入り」登録システム。

Cookieを利用した簡易的なお気に入り登録が出来るプラグインが、WP Favorite Postsです。Welcartベースのオンラインショップでも、商品数が多いサイトには特に有用になりそうですかね。

以下のサイトで紹介されていたのを拝読し、早速試してみました。

WordPress：お気に入り登録機能を実装できるプラグイン「WP Favorite Posts」（NxWorld）

こちらのサイトによれば、

お気に入り登録したい際のデータは、ログインユーザーに関してはデータベースに保存、そうでない場合もCookieを利用するというタイプなので、会員を持たないようなサイトでも使うことは可能です。

ただ、Cookieを使用する場合、例えば「この記事は○人の方にお気に入り登録されています」というようなものを表示させたい時は正確な数が出せなかったりもするので、そういったコンテンツを正確な数値で管理・表示したい場合などはログインユーザーを用いたほうが良いと思います。

とのこと。

Welcartの場合は会員はWordPressのユーザーには紐付いていないので、基本的にはCookieを使うことになるのかなーと思います。

もくじ

1. WP Favorite Postsのインストール
2. WP Favorite Postsの設定
3. 「お気に入り」機能の実装
4. Welcart用にサムネイルや価格を表示
5. まとめ

1. WP Favorite Postsのインストール

1. ［ダッシュボード］＞［プラグイン］＞［新規登録］から、プラグインを検索。
2. 検索結果のリストから「WP Favorite Posts」を見つけ、「今すぐインストール」をクリック。
3. インストールが完了したら、有効化。

2. WP Favorite Postsの設定

プラグインの設定は、［ダッシュボード］＞［設定］＞［WP Favorite Posts］から行います。

Option：一般設定

ここでは、表示させる場所やアイコンなどを指定します。

Label Settings：表示設定

ここでは実際に表示される文言を設定します。デフォルトでは英語になっているので、必要に応じて日本語に変えます。

Advanced Settings：上級者用の設定

ここは基本的に触らなくて大丈夫です。

3. 「お気に入り」機能の実装

3-1. 商品詳細ページに「お気に入りに追加」を表示

Welcartショップの場合、一括して自動表示されると商品以外の投稿にも「お気に入りに追加」が表示されてしまいます。

ですので基本的には「Options（一般設定）」の「Auto Show Favorite Link」では「Custom」を選びます。

あとは使用中テーマ内に退避させたwc_item_single.php内の任意の場所に、以下のコードを挿入。

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

カートボタンのすぐ下などに入れれば、購入を迷っているお客様に「是非ご検討下さい」的な感じでアピールできるかもしれませんね。

また、任意の投稿（商品）のみに「お気に入りに追加」リンクを表示させたい場合は、投稿の編集画面で以下のショートコードを挿入します。

[wpfp-link]

この場合はカートボタンの下等ではなく、商品説明内の任意の場所に表示されます。

3-2. 「お気に入りリスト」ページを作る

お気に入りに登録した投稿（商品）の一覧を確認できるページとして、「固定ページ」を追加します。 固定ページの編集画面で、以下のショートコードを挿入。

[wp-favorite-posts]

デフォルトでは、お気に入りに登録された投稿（商品）はタイトルのみのリスト形式で表示されます。

※サムネイルや価格を表示させるカスタマイズは後述。

3-3. ウィジェットでの表示

ウィジェットでは以下の２つの表示が可能です。

• Users Favorite：閲覧者のお気に入りリスト
• Most Favorited Posts：お気に入り登録数ランキング

こちらも、デフォルトではリスト形式で表示されます。

4. Welcart用にサムネイルや価格を表示

ここでは、「お気に入りリスト」ページに表示されるお気に入りの投稿（商品）に、サムネイルや価格を表示させるカスタマイズを行います。

サムネイル等の出力内容をカスタマイズするには、プラグインフォルダ内のwpfp-page-template.phpを書き換えます。 ※つまり、プラグインの更新時には上書きされてしまいます！必ずバックアップを取っておきましょう。

wpfp-page-template.phpの28行目あたりの以下の部分が、デフォルトではタイトルのみを出力させているコードになります。

while ( have_posts() ) : the_post();
    echo "<li><a href='".get_permalink()."' title='". get_the_title() ."'>" . get_the_title() . "</a> ";
    wpfp_remove_favorite_link(get_the_ID());
    echo "</li>";
endwhile;

Welcartのコードをここに挿入すれば、商品画像や価格を表示させることが可能なわけです。 以下の例では、サムネイルの他、価格・在庫状態・カートボタン（在庫がない場合はお問い合せボタン）を入れました。

（6/11更新）カートボタンのコードを変更しました。

while ( have_posts() ) : the_post(); usces_the_item(); usces_have_skus();
    echo "<li><form action='". USCES_CART_URL. "' method='post'><a href='".get_permalink()."' title='". get_the_title() ."'>";
    usces_the_itemImage(0, 150, 150);
    echo "</a><ul><li><a href='".get_permalink()."' title='". get_the_title() ."' class='wpfp-title'>".  get_the_title() . "</a></li><li>";
    if( usces_the_itemCprice('return') > 0 ){
        echo "<span class='wpfp-cprice'>";
        usces_the_itemCpriceCr();usces_guid_tax();
        echo "</span>";
    }
    echo "<span class='wpfp-price'>";
    usces_the_itemPriceCr();usces_guid_tax();
    echo "</span></li><li>";
    usces_the_itemZaikoStatus();
    echo "</li><li>";
    if( !usces_have_zaiko() ) {
        echo "<a href='". esc_url(home_url('usces-inquiry'))."' class='inquiry-button'>お問い合せ</a>";
    } else {
        global $post;
        usces_direct_intoCart($post->ID, usces_the_itemSku('return'));
    }
    wpfp_remove_favorite_link(get_the_ID());
    echo "</li></ul></form></li>";
endwhile;

あとはスタイルシートで装飾。Amazon風の？お気に入りリストが出来ました。カートボタンも動きます。

以下は上画像でのスタイルシートの例です。コピーしてお使いになる場合は、使用中のテーマに合わせて調節して下さい。

.wpfp-span ul {
    margin-left: 0;
    list-style: none;
}
.wpfp-span > ul > li {
    border-bottom: 1px solid #ddd;
    margin-bottom: 1.5em;
}
.wpfp-span > ul > li:after {
    content: '';
    display: block;
    clear: both;
}
.wpfp-span form img {
    float: left;
    max-width: 150px;
    width: 25%;
    height: auto;
    padding: 0 10px 10px 0;
}
.wpfp-title {
    font-size: 20px;
    font-weight: bold;
    vertical-align: top;
}
.wpfp-cprice {
    color: #999;
    text-decoration: line-through;
}
.wpfp-price {
    font-size: 16px;
    font-weight: bold;
}
.wpfp-span input.skubutton{
    margin-right: 1em;
    padding: 7px 20px;
    background: #D35134;
    border: none;
    font-size: 14px;
    color: #fff;
    font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
    cursor: pointer;
}
.wpfp-span .inquiry-button {
    display: inline-block;
    margin-right: 1em;
    padding: 7px 20px;
    background: #D35134;
    font-size: 14px;
    color: #fff;
}
.wpfp-span input.skubutton:hover,
.wpfp-span .inquiry-button:hover {
    background-color: #C0401A;
}

ウィジェットの出力内容も変えたい場合

ウィジェットの出力項目を制御しているのは、同じプラグインフォルダ内にあるwpfp-your-favs-widget.phpというファイルです。

こちらは全部で19行と小さなコードファイルですので、上述のカスタマイズを参考に、必要であれば編集してみて下さい。

5. まとめ

プラグインフォルダ内のファイルをカスタマイズする場合は、プラグインの更新時にファイルが上書きされてしまいます。更新前にバックアップを必ず取り、更新後にまた書き換え作業をしましょう。

※プラグインの更新履歴を見ると、結構頻繁にバグ修正の更新があるようです。

商品数が少ないショップであれば、あまり必要のない機能ではあるかもしれません。逆に商品数が非常に多い場合には、お客様が気になる商品を再度探させる手間を省き、ご検討頂く機会を増やすことが出来ると思います。

かく言う私も、Amazonの「ほしい物リスト」を時々開いては、「やっぱりこれ欲しいかな？いらないかな？」などと考えたりします。迷うくらいなので結局いらないことのほうが多かったりしますが、それでも検討しに現実にサイトを再訪問しているわけで、その間に他の商品をアピールさせることも出来るでしょう。

尚、筆者のローカル環境では、Chromeでは問題ありませんでしたがIEとFirefoxでは動作がイマイチでした（Cookieに関係するのかもしれません）。本番環境で必ず動作確認をしましょう。

• システム一般
• プラグイン

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