iscle [イズクル] - あなたの生活に役立つネタを!

サイトに「お気に入り登録」機能を追加!会員限定も可能

竹中文人
執筆者:
[最終更新日]2015/04/27
[カテゴリ]Wordpress

add-favorite00

大手サイトなどには「このページをお気に入りに追加する」「ほしい物リスト」のようなボタンが付いていることがあります。Amazonや楽天などのようなショッピングサイトだけでなく、情報系のサイトや一般のブログに付いていることも珍しくありません。また観覧したいページをお気に入りに追加することで、再度探しだす手間を省くことができる便利な機能です。

「自分のサイトにも付けてみたい」という方は多くいらっしゃると思います。実はこのような「お気に入り登録」機能を付けることはプラグインで簡単に追加することが可能です。しかもプラグインの組み合わせによって、ユーザー登録した会員のみ利用可能な機能とすることもできます。簡単な会員制サイトなどでも利用できる便利な方法ですので、ぜひお試しください。

お気に入り登録機能を追加する

まずWordPressのプラグインの新規追加から『WP Favorite Posts』を検索・インストールしてください。有効化すると設定WP Favorite Postsという項目が追加されます。
add-favorite01

「Only registered users can favorite」にチェックを入れると、サイトにユーザー登録した人のみが利用できるようになります。誰でもOKの場合はチェックをしません。「お気に入り登録」ボタンの位置やアイコンは自由に設定ができます。

お気に入り数を表示させる場合は下記のコードを入れてください。

<?php echo get_post_meta($post->ID, 'wpfp_favorites', true); ?>

次の設定項目ではお気に入り登録・解除ボタンのテキストを変更することが可能です。日本語にすることもできますし、タグを入れて色を変更したりすることもできます。サイトに合わせて変更してみてください。
add-favorite02

またページに表示される登録ボタン等は、CSSでご自身の好きなようにカスタマイズできます。
add-favorite03

WP Favorite Postsは簡単にお気に入り登録ボタンを追加できるプラグインですが、お気に入りの登録データはユーザーの端末のCookieに保存されています。つまり端末のCookieを削除すると、せっかく追加・登録したお気に入りのリストも消えてしまいます。これを回避するにはユーザー登録した人のみ利用可能にすることです。ユーザー登録制の場合はCookieに依存しません。

SNSで簡単ユーザー登録・ログイン

ユーザー登録制にしたい場合、ユーザーにサイトへ会員登録してもらう必要があります。以前に会員制サイトを作成する方法をご紹介しましたので、そちらもご覧ください。
WordPressで会員制サイトを簡単に作成する方法と手順

ただ登録してもらう際、ユーザーにメールアドレスや名前などの情報を入力してもらうのを省きたいという場合もあるでしょう。ユーザーに入力させる情報が多ければ、それだ面倒でユーザーになってくれる可能性も低くなってしまいます。そんな時はSNSでユーザー登録・ログインができるようにしてはいかがでしょうか?

つまり多くの人が利用しているFacebookやTwitter・Google+などのSNSアカウントで、ユーザー登録やログインをしてもらうのです。これも便利な『Gianism』というプラグインで実装ができます。これは国産プラグインで日本語での解説もしっかりありますので、基本的な入れ方は是非そちらを参考に入れてみてください!また「Gianism 使い方」等の検索でも解説サイトが出てきます。
add-favorite04
>参考:http://qiita.com/hiroki_y/items/dcea045c46d5c249247d

より便利にする為に

管理者メニュー非表示に

SNSであろうとログインしているユーザーには通常、画面上部に黒いメニューバーが表示されます。これを管理者以外非表示にしてスッキリさせましょう。functions.phpに下記のコードを入れます。

// 管理者権限を持つユーザーのみ管理バーを表示
if ( ! current_user_can( 'manage_options' ) ) {
show_admin_bar( false );
}

ログインの状態で表示を変える

ログインしていない時はSNSのログインボタンを表示し、ログインしている時はお気に入り登録ボタンを表示する方法です。

<?php if ( is_user_logged_in() ) : ?>
<!-- ▽お気に入りボタン -->
<div class="favorite">
<?php wpfp_link() ?>
</div>
<?php else: ?>
<!-- ▽ログインボタン -->
<?php 
if( function_exists('gianism_login') ){
    gianism_login('', '', get_permalink());
}
?>
<?php endif; ?>

add-favorite05
※画像:Anime Culture / Anime Pilgrimage