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

スポンサーリンク

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

大手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]から行います。 WP Favorite Postsの設定場所

Option:一般設定

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

WP Favorite PostsのOption設定

Only registered users can favorite ユーザー登録者のみ利用可能にするかどうか
Auto show favorite link 「お気に入りに追加」リンクを表示させる場所を以下より指定
Custom <?php wpfp_link() ?>を任意の場所に入れて表示
After Post 投稿内容の後
Before Post 投稿内容の前
Before Link Image 「お気に入り」文言につける画像。任意の画像の場合はURLを記入
Favorite post per page 「お気に入り」リストのページを使う場合、1ページあたりに表示させる数
Most favorited posts statics* 「お気に入り」登録数を集計して表示。Most Favorited Postsウィジェットで利用可能

Label Settings:表示設定

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

WP Favorite PostsのLabel Settingsの設定

Text for add link お気に入り登録用リンクのテキスト
Text for added お気に入り登録時に表示するテキスト。Show remove linkで解除リンクテキストを代わりに表示
Text for remove link お気に入り解除用リンクのテキスト
Text for removed お気に入り解除時に表示するテキスト。Show add linkで登録リンクテキストを代わりに表示
Text for clear link お気に入りリストの消去(リセット)用リンクテキスト
Text for cleared 消去(リセット)完了時のテキスト
Text for favorites are empty お気に入りリストが0件(空)の場合のテキスト
Text for [remove] link お気に入りリストからの、任意の投稿(商品)の登録解除用のテキスト
Text for favorites saved to cookies Cookieに保存されたことを知らせるメッセージ
Text for “only registered users can favorite” error message 登録ユーザーのみ利用可能であることを知らせるメッセージ

Advanced Settings:上級者用の設定

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

WP Favorite Postsの上級者用設定

Don’t load js file JSファイルを読み込まない
Don’t load css file CSSファイルを読み込まない

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

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

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

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

WP Favorite Postsの表示場所設定

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

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

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

カートボタンの下に「お気に入りに追加」表示

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

[wpfp-link]

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

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

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

[wp-favorite-posts]

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

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

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

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

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

WP Favorite 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風の?お気に入りリストが出来ました。カートボタンも動きます。

Welcart用のお気に入りリスト

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

.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に関係するのかもしれません)。本番環境で必ず動作確認をしましょう。

7 Responses to “お気に入りを登録できる WP Favorite Posts”

  1. shingo より:

    ご質問です。4. Welcart用にサムネイルや価格を表示なのですができたのはいいのですが
    「add to cart」が日本語表示されませんがどうのようにしたのでしょうか?

    ご教授頂けますか?
    よろしくお願いいたします。

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

      このカスタマイズでは、言語に関するコードは全くいじってないです。Welcartのフロントエンド表示が日本語になっていれば、普通は日本語になるはずなのではと思いますが・・・??

  2. shingo より:

    「Amazon風の?お気に入りリスト」って例であると思いますがここの「カートへいれる」が英語なのです。

    *http://caraku.blogjapan.net/sotsusei/?page_id=1568

    ここのことなのですがなにかわかりますか?

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

      お気に入り登録表示はクッキーを使っているので、他のブラウザからですとちょっと見られないですが、そのカートボタンが実際に見えたとしても、ブラウザ上のHTMLだけでは多分わからない(要はコードが出力する「結果」しか見えないため)と思います。カートボタンはusces_direct_intoCartというWelcartの独自関数が出力しているので、何故お気に入りページでだけ英語表示になるのか、Welcartのコアファイルなどを辿ってみる必要がありそうですかね・・・

  3. nono より:

    「WP Favorite Posts」の検索でヒットし、管理人様のブログを参考にさせて頂きました。
    自分も上記shingo様と同じ「add to cart」で躓きましたので、
    既に解決済みかと思いますが、Welcartのフォーラムに同様の件がありましたので、
    覚書としてコメントに残させて頂きます。
    usces_direct_intoCart($post->ID, usces_the_itemSku(‘return’), false, ‘カートへ入れる’);
    上記のように第4引数に表示したい文章を入れる事で表示できるようです。
    大変有用なカスタマイズをご教示頂き本当にありがとうございました。

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

      わざわざコメントを有難うございました。第4引数が関係していたのですね。フックの際に引数部分もテキストドメインにしておけば、サイトをほかの言語に変更した場合にも対応出来そうですね(とは言え、Welcartで用意されている言語はまだ多くはないですが・・・)。

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