WEBについてのいろいろ

雑記。はてブ、口コミ、WEBデザイン、アニメ・漫画についてとか。

トップ > WEB・デザイン > WordPressにお気に入り機能を追加！WP Favorite Postsをカスタマイズする方法とは？会員制サイトにぴったり。

WordPressにお気に入り機能を追加！WP Favorite Postsをカスタマイズする方法とは？会員制サイトにぴったり。

WEB・デザイン

f:id:misallychan:20161207121253p:plain前回ご紹介したWP-Membersで作る会員制サイトですが、そこに「お気に入り機能」がついていたらもっと便利じゃないですか？


今回はWPにお気に入り機能を追加できるプラグインWP Favorite Postsの使い方をご紹介します。


前回の記事はこちらから
misallychan.hateblo.jp


f:id:misallychan:20161207121253p:plain





ご注意：こちらは3年前に制作した時の情報になります。申し訳ございませんがサポートできませんので、ご使用いただける際はご注意ください！＞＜


WP Favorite PostsでWPにお気に入り機能を追加しよう！

改めまして。前回の記事で、

お気に入り記事リストは、「WP Favorite Posts」というプラグインを追加することで実装できます。

WP-Membersで会員制サイトを作ろう！作り方を全網羅＆徹底解説。 - OtaLifeDesign
とご紹介しましたが、今回はその会員制サイトでも使用できる、お気に入り機能についてのご紹介です。


使用したのは「WP Favorite Posts」というプラグイン。こちら、細かな設定も簡単にできて、たいへん便利です！
ja.wordpress.org


しかし、WP-Membersの記事でもお話したと思いますが、
こういった便利なプラグインって、もともとデザインされているため、そのデザインを変えたい場合、どこをいじったら良いのか分からないですよね。


でも、お気に入り機能をそのままに、
プラグイン特有のデザインを変えたい！オリジナルにしたい！マイページに合わせて設置したい！
というのが正直なところかと思います！！

そんな方へ向けて、今回は、WP Favorite Postsのカスタマイズを前提とした、お気に入り機能の実装方法をご紹介したいと思います。




最初に、プラグイン＞新規追加でWP Favorite Postsを検索し、インストール・有効化しておきましょう。




WP Favorite Postsの設定方法

参考にしたのはこちらの記事。英語ができない私にとって、どれがどんな役割を果たしているか、大変参考になりました（笑）
WordPress：お気に入り登録機能を実装できるプラグイン「WP Favorite Posts」

まずはダッシュボードの設定＞WP Favorite Postsを選択。
すると、下記のような画面が出ますので、そちらを変更していきます。

まずは基本設定から



f:id:misallychan:20161207114938j:plain


（１）今回は会員サイト前提ですので、会員（ログインしたユーザー）のみお気に入り可能にします。チェックを外すと、誰でもお気に入りできるようになります。


（２）お気に入り追加ボタンの表示位置をカスタマイズできます。表示させたい箇所（single.phpなど）に以下のコードを入力します。

<?php wpfp_link() ?>



（３）お気に入り追加ボタンのアイコンを非表示にします。Custom Imageで画像のURLを指定すれば、お好きな画像を配置できますが、必ず文字列の前にアイコンが表示されてしまいます。今回は、ここでNo Imageを選択することで、後の設定でお好きな位置にアイコンを配置することができます。



文字列の設定

それでは次に、文字列の設定を行います。
デフォルトでは英語表記なので、こちらも変えると良いかもしれません。


また、上記で変更した設定を、下記のようなかたちで整理していきます。


f:id:misallychan:20161207115532j:plain


『Text for add link（お気に入り前に表示される文字）』と『Text for remove link（お気に入り後に表示される文字）』を書き換えます。




*** 小技：
先ほど、（３）でアイコンを非表示（No Image）にしたと思いますが、こちらにイメージタグを入力すれば、文字列のあとにアイコンをつけることや、文字列を消して画像にお気に入りのリンクを指定することもできます！！
もともとリンクはつながっているので、本当に表示したいものだけ入力すれば大丈夫です。
HTMLも使用できるとは、便利ですね！




その下のShow〜という項目たちは、デフォルトでは追加したら「追加しました」・解除したら「解除しました」のような文字列が表記されるのですが、そんなのしゃらくさい！という方は、チェックボックスにチェックを入れれば、先ほど指定したお気に入り追加と解除のリンクを切り替えて表示することができます。
個人的にはツイッターのように、誤ふぁぼを即回避するためにも切り替えの方が使いやすいので、チェックを入れる方が良いなあと思います。（笑）




また、（１）で会員のみお気に入り可能にした場合、一番下の『Text for "only registered users can favorite" error message（ログインしていない人や未会員がお気に入りボタンを押すと表示されるエラーメッセージ）』を変更しましょう。
今回はログイン画面のURLを入れて、ログインを促すようにしています。


以上で、お気に入りボタンのカスタムが完了しました！
お好きなボタンにできたり、表示形式を変えたりなど、色々楽しめそうですね。




・・・って、この設定、お気に入りボタンしか変えられないじゃん！！
というわけで、お気に入り登録リストをカスタマイズしていきたいと思います。




WP Favorite Postsのお気に入り登録リストをカスタマイズする

お気に入り登録をしたものを一覧表示させる

表示させたい箇所に以下のコードを記入します。

<?php wpfp_list_favorite_posts(); ?>



やっぱり会員制サイトを作ったら、会員が気軽に記事をお気に入りできるようにしたいですよね！
会員のみが見られる自分だけのマイページにお気に入りリストが並んだら、とっても素敵じゃないですか！？
それに、自分のページで自分のお気に入りした記事を管理できる！
・・・こんな機能が付いていたら、きっと会員の心もグッと掴めるはず！


ECサイトなどでも、お気に入りの商品に追加する、なんて項目をよく見かけます。
この機能を応用すれば、そんなこともできてしまうわけですね！


というわけで、これを前回ご紹介した会員用のマイページに載せましょう！！！




・・・って、あれ・・・デフォルトで一覧表示されるのって、お気に入りした投稿タイトルの文字リンクだけなの・・・！？




はい！というわけで。
こちらの記事を参考に（ほぼ丸うつしで）、お気に入り登録リストをカスタマイズしました！


WP favorite postsプラグインでwelcartにwishlist(お気に入り商品)を作るカスタマイズTIPS


お気に入り登録リストをカスタマイズするには、『wpfp-page-template.php』というファイルを書き換えなければならなりません。
でもこのファイル、デフォルトだと訳が分からず、何をどういじったらよいのかわかりませんでした…。


なので、それはそれはもう、こちらのサイトがとってもとーっても参考になりました・・・。ありがとうございます！
（※『wpfp-page-template.php』は、「wp-content/plugins/wp-favorite-posts」の中にあります！DL後、編集する前に必ずバックアップをとりましょう！また、プラグインのファイルを書き換える場合は、プラグインのアップデートをすると消えてしまうので注意しましょう。）

「お気に入り一覧」カスタマイズ方法

 <div id="myfavbox">
		<?php $favorite_post_ids = wpfp_get_user_meta() ?>
		<?php if ($favorite_post_ids):
			$favorite_post_ids = array_reverse($favorite_post_ids);
			$post_per_page = 20;
			$page = intval(get_query_var('paged'));
			query_posts(array('post__in' => $favorite_post_ids, 'posts_per_page'=> $post_per_page, 'orderby' => 'post__in', 'paged' => $page)); ?>
				<?php while ( have_posts() ) : the_post(); ?>
					<div class="myfav">
                    	<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute() ); ?>">
                    		<img src="<?php the_field("img", $post->ID); ?>" title="<?php the_field("comment", $post->ID); ?>" alt="<?php the_field("comment", $post->ID); ?>" width="160px" height="120px"/>
                    	</a>
						<div class="myfavt">
                    		<p class="cat"><?php the_field("category_icon", $post->ID); ?>
                    			<span class="name"><a href="<?php the_permalink(); ?>"><?php the_field("name", $post->ID); ?></a></span>
                    		</p>
                        	<p class="st"><?php the_field("station", $post->ID); ?>
                    		</p><br />
                    		<div class="remfav"><?php wpfp_remove_favorite_link(get_the_ID());?></div>
                        </div>
                    </div>    
				<?php endwhile; ?>
         </div>
            <br />
		<div class="myfav_bottom"> 
		<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
			wp_reset_query();
		else: ?></div>  
		<?php endif; ?>
    <?php wpfp_cookie_warning();
	wp_reset_postdata(); ?>



この、９〜21行目が主に編集した点になります。
好きなようにdivでくくってデザインできるだけでなく、カスタムフィールドなんかも呼び出せて、自由にカスタマイズできるのです！！
これで、投稿タイトル以外でもページへリンクを繋げることができます。
もちろん、画像の呼び出しだって可能です。
カスタムフィールドで投稿したそれぞれの画像や文字も呼び出せます。



お気に入り解除ボタンもつけておきましょう

さらにユーザビリティで大切な、お気に入り解除ボタンを付ければ、マイページで自分がお気に入りした記事を全て管理できてしまうのです！
下記がお気に入り解除ボタンのコードになります。

<?php wpfp_remove_favorite_link(get_the_ID());?>





ちなみに、最後にページナビが入っていますが、こちらは『wp-pagenavi』というプラグインを使用しています。
こちらも簡単に表示できて、デザインを自由に変えられるので、おすすめですよ。




さて。以上で、オリジナルデザインでお気に入り機能が実装できました！！


まとめ：会員制サイトのマイページと相性抜群！



こちら に、マイページの簡単なテンプレートを晒しましたが、このテンプレートには既に、今回使用した『WP Favorite Posts』のお気に入り登録リストを表示するコードを入れてあります！（笑）


なので、今回の記事と、上記の記事を組み合わせれば、よりオリジナリティ溢れる会員制マイページが作れるわけです！




もちろん、会員制でない場合にも、こちらのお気に入り機能は実装できますが、その場合はcookieを利用したものになります。
お気に入り登録を会員制にした場合は、データベースに保存されるそうなので、おすすめはやはり、会員制サイトでの実装です！




みなさん、ぜひお試しくださいね（＾＾）


にほんブログ村 デザインブログ Webデザインへ
にほんブログ村