WEBについてのいろいろ

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

WP-Membersで会員制サイトを作ろう!作り方を全網羅&徹底解説。

WordPressで会員制サイトを作りたい!

そんなときに使用したいのがWP-Membersというプラグイン。
今回はそのプラグインの使用方法・活用法をざざっとご紹介したいと思います。

f:id:misallychan:20160823093847p:plain

これ、以前書いた時に結構反響があった記事だったので、今回はこの記事だけでわかるように作り方を1から順を追って紹介していきます。
ご注意:3年前に制作した時の情報になります。こちらに書いてあること以外は申し訳ございませんがサポートできませんので、ご使用いただける際はご注意ください!><


まず、プラグイン>新規追加でWP-Membersを検索し、インストール・有効化しておきましょう。


WP-Membersでマイページを作る

会員制サイトで欠かせないのが、ログイン画面
そして、ログイン後に会員のみ使用できるマイページですね。

WP-Membersを使って、これらを作っていきましょう。



(0) 設定>パーマリンク設定を「投稿名」に変更しておきましょう。

私の場合、設定>WP-Membersの設定画面のチェックボックスの項目は必要なかったので、全て外しています。


(1) まず、固定ページを作ります。

タイトルは何でも大丈夫ですが、今回は「マイページ」にしておきます。
ここで、パーマリンクを編集しておきます。
こちらも今回は「mypage」にしておきます。何でも大丈夫ですが、半角英数が好ましいです。


(2) 以下のショートコードを入力します。

これは、普通にWordPress内投稿フォームでの作業でOKです。

[wp-members page="members-area"]



(3) 次に、投稿フォームの上にある表示オプションから「スラッグ」を選択・表示。

スラッグ内にパーマリンクで指定した「mypage」と表示されるはずなので、そのままでOK。
表示されなければ、パーマリンクで指定したものを入力してください。


(4) 完了したら、公開。

すると、作成したページには自動的にログイン画面が表示されます。


未ログイン時 => ログイン、新規会員登録フォーム
ログイン時  => 登録情報の編集、パスワード変更



で、自動的に入れ替わるようになっています。
ログイン画面が表示されない場合は、固定ページのテンプレートがないことが原因ですので、次の作業でテンプレートを作成します。

f:id:misallychan:20160822145651p:plain




WP-Membersのログイン画面のデザインを変更する

固定ページのテンプレートを作成します。


Dreamweaverなどで「page-mypage.php」を作りましょう。
↑ハイフンのあとは上記でスラッグに指定したものにしましょう!
(半角英数が一致してればなんでも大丈夫ですが、今回の記事では全て一括してmypageにしていますので、同じにしていただけると作りやすいと思います!)


この作業で、先ほど作成したページと、テンプレートが連携されます。


上記までの作業で、入力する内容を統一しておけば安心ですね。
今回は、「mypage」で統一しています。




こちらのテンプレートに、ヘッダーやフッターを呼び出したりデザインを加え、ログイン画面を表示させたい位置に、以下のコードを記入します。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>



そして、FTPなどでアップロードしましょう!
(すると、先ほど固定ページから表示されなかった方もログインページが表示されるようになりますよ。)


作成したログインページからid名やclass名を抜き出し指定して、自分のスタイルシートでデザインを変更することもできます。


たとえば

#wpmem_login legend     { border-bottom: 1px solid #aaa; font-size: 14px; }



で、ログインのタイトルのフォントサイズが14pxになり、下に下線がつきます。



マイページをリンクでつなげる

以上で、マイページの体裁は整えられたと思います。

さて、実際にマイページを表示したいわけですが、ウィジェットでサイドバーに挿入することもできますし、「ログイン」ボタンなどでリンクを指定することもできます。
ここでリンクするアドレスは、最初に作成した固定ページのアドレス「/mypage/」でOKです。



WP-Membersのログイン画面が英語表記のまま。日本語に修正するには?

さてさて。ここで一つ問題が出てきました。
今回、一番頭を悩ませたのがこれです。

デフォルトのデザインから、スタイルシートで指定してデザインはある程度変更できたけれど……
肝心の「ログイン」と「新規会員登録」がなぜか英語表記!

他の表記は、wp-members-ja.moとwp-members-ja.poで変換済のようですが、この二つこそ表記を変えたい!


そこで

『Existing Users Log In』と『New User Registration』の表記を変更する方法

見つけました!日本語に直す方法。


どうやらこれらが作用しているのは、プラグインの中にある「forms.php」というファイル。
こちらのファイルを落とし、編集します。念のため、バックアップをとっておいてくださいね。


そのファイルの中で、『Existing Users Log In』と『New User Registration』を検索!
(出てこない場合は一部など指定するか、以下の行数を参考にしてくださいね!)


95行目

'heading'      => __( '会員の方(ログイン)', 'wp-members' ),



834行目

$heading = ( !$heading ) ? apply_filters( 'wpmem_register_heading', __( 'はじめてご利用する方(新規会員登録)', 'wp-members' ), $toggle ) : $heading;



日本語で書いてあるところが、私が直したところですので、お好きな言葉に変えてくださいね!

他にもリセットボタンの表記も変えられました。


521行目

'clear_form'       => __( 'リセット', 'wp-members' ),


この「forms.php」というファイルを使用すれば、表示される文字表記をお好きなものに変更できるようですね!






マイページをもっと便利に!

ここまでで、マイページのログイン画面の体裁と、表示までカスタマイズすることができました。
しかし、『ログイン画面』と『ログイン後画面』の二つで切り替わっているマイページ・・・、現段階ではまだログイン画面しか充実していません。


けれど、ログイン画面とログイン後画面が一体となっているので、ログイン後の画面をどうやって編集したらいいのか分からない!
ログイン後の画面こそがマイページとして必要な要素なのに…!


そんなときは!条件分岐をしてみましょう。

「ログインをしている場合には表示させる」という指示を、「page-mypage.php」に入力します。

<?php if (is_user_logged_in()) : ?>
ログイン中に表示させたいコンテンツを入れる!
<?php else : ?>
<!-- ログインしていないときに表示されるコンテンツ -->
<?php endif; ?>



これで、ログインした後には、現在表示されている『登録情報の編集、パスワード変更』の他にも、コンテンツを表示することができます。
たとえば、「infomation」を表示させたり、「お気に入り記事リスト」を表示させたりなど…、充実したマイページになると思います。
お気に入り記事リストは、「WP Favorite Posts」というプラグインを追加することで実装できます。
使い方はこちらから
misallychan.hateblo.jp


先ほど作った固定ページ「page-mypage.php」を編集するだけで、ログイン画面もログイン後の画面もお好みでカスタマイズできるんですね!皆様もぜひ、会員に愛されるようなオリジナリティあふれるマイページを作ってみてください!


以上を踏まえ、固定ページ(page-mypage.php)のテンプレート例

簡単な例を作ってみました。
以下のものだと、元々あるWP-Membersの機能の下に、ログイン後しか表示されないコンテンツをつけることができますので、カスタマイズしてみてください。

<div id="myp">
 <h3 class="lg_top">Login</h3>
 <?php if(have_posts()): while(have_posts()): the_post(); ?>
 <?php the_content(); ?>
 <?php endwhile; endif; ?>
 
<?php if (is_user_logged_in()) : ?>
 <h3 class="lg_top">My Page</h3>
 <div id="information">
  <h4>お知らせ</h4>
 </div>    
 <div id="myfavorite">
  <h4>お気に入り</h4>
   <div id="myfavorite_list">
    <?php wpfp_list_favorite_posts(); ?>
   </div>
 </div>
<?php else : ?>
<!-- ログインしていないときに表示されるコンテンツ -->
<?php endif; ?>
</div>


以上で最低限の設定は終了です!

WP-Membersを使用する際のポイントをあげておきます。

  1. マイページ用の固定ページテンプレートを作る
  2. デフォルトの英語表記を直したい場合は「forms.php」を編集する
  3. 『ログイン後の画面』も充実させるため、ログイン中にだけ表示させるコンテンツを追加する





それでは、以下からはカスタマイズ編です。



ユーザー名の表示方法

会員制サイトで良くある「ユーザー名」を呼び出す演出方法について、ご紹介したいと思います!

ログイン前の表示
 ようこそ「ゲスト」さん
ログイン後
 ようこそ「ユーザー名」さん


会員制のサイトではこういった呼びかけがよくあると思います。
そこで、先ほどご紹介したログイン前とログイン後で表示するコンテンツを入れ替える方法を使って、ログイン前には「ゲスト」だったものを、ログイン後には「ユーザー名」に切り替えたいと思います!

<?php if(is_user_logged_in()): ?><?php the_author(); ?><?php else: ?>ゲスト<?php endif; ?></span>さん

これでヘッダーなどで常に呼び出ししたい場合でも、きちんと呼び方が切り替わってくれます♪


でも、ユーザー名を表示して良いの…?

先ほどユーザー名を呼び出していたコード……

<?php the_author(); ?>

こちらです。

このコードで、「ブログ上の表示名」が表示されます。
表示名は、ユーザー登録情報の編集画面で切り替えることができるのですが、前回ダッシュボードに飛ばさないようにしたため、ユーザー登録情報の表示名を編集することが困難です。

初期設定のままでいくと、そのまま「ユーザー名」が表示されるのですが、これはログインするときに使用する「ユーザーID」とも言うことができ、全てローマ字でなくてはいけなかったり、そのため呼び出すには相応しくなかったり、、という難点がいくつかあります。


ユーザー名でなくニックネームを呼び出す

そこで、ユーザー名でなく、ニックネームを呼び出したいと思います。

(1) WP-Membersでnicknameを追加する

ダッシュボード>設定>WP-Members>フィールド>Add a Field
から、


ラベル    「お好きなニックネームの総称」
オプション名 「nickname」
タイプ    「テキスト」
表示      チェック

入力完了しましたら、Add Field で作成。


(2) nicknameを呼び出すように指定
<?php global $current_user; echo $current_user->nickname ?>

先ほどユーザー名を表示していたコードを、こちらと入れ替えます。


(3) nicknameが表示されているか確認。

会員登録ページにニックネーム欄ができていればOK。
そこに入力したニックネームが呼び出されているかを確認してみてください。

ワイワイタウンという会員サイトの会員であれば(今思いつきました)、ニックネームをワイワイネームと総称するのも良いですね。(ダサいですね)
会員サイトに合わせて、そこのサイトでしか呼ばれないニックネームにしてみてくださいね。


まとめるとニックネームの呼び出しはこんなかんじです。
<?php if(is_user_logged_in()): ?><?php global $current_user; echo $current_user->nickname ?><?php else: ?>ゲスト<?php endif; ?></span>さん

会員のみコメントできるようにするには?

会員制サイトならではの、会員のみ使えるような特別な待遇があったらいいですよね。
そこで、コメントを会員のみ使える機能にしたい!と思い、ダッシュボードで


『設定 > ディスカッション > ユーザー登録してログインしたユーザーのみコメントをつけられるようにする


と設定しました。これで、ログインしたユーザーのみコメントをつけれるようになります。
しかし、このままコメントを表示させると、ユーザにログインを促す表記(具体的にはリンク先)に問題がありました。


WordPressで『ログインしたユーザーのみコメントをつけられるように設定』した場合の問題点

ログインしたユーザー、つまり会員のみコメントできるよう指定した場合、ログインしたままコメントすると『○○でログインしています。ログアウトしますか?』のような表示をされます。
しかし、未ログインの状態だと『コメントを投稿するにはログインしてください』と表示されてしまうのです。


一見、何がいけないのか、と思うかと思いますが、この『ログイン』がリンクになっていて、このリンクを押してしまうと、先ほどWP-Membersで苦労して作成したマイページでなく、WordPressのログイン画面に飛んでしまい、ログインするとダッシュボードなどが見れてしまうのです…!!


もちろんWP-Membersに限らず、ログイン画面をデザインを統一してマイページを作成した方は、それが表示されないなんて!と涙が出る思いだと思います!
デフォルトのログイン画面だからしょうがないけど、これでは都合が悪い!これを回避したい!という場合の対策を考えました。



WordPressダッシュボードに飛ばさない!&WordPressコメント機能の表記を変える!

対策の流れとしては以下のような感じです。

  1. 無理矢理マイページへ飛ばす。
  2. コメント機能を編集し、リンク先を変える。
  3. コメント機能で定められた表記を消す。

1をやっておくと安心です。2と3は、どちらかをやっておくと良いと思います。
それでは、これらの方法をご紹介します。

1.無理矢理マイページへ飛ばす 【ダッシュボード回避】

まず、1を行うために「functions.php」に以下を記入します。
※「functions.php」は、自分の使用しているテーマの中(index.phpなどが入っているところ)にあります。ない場合は追加しましょう!(参考:/wp-content/themes/テーマ名/functions.php)

<?php
// ログインしたユーザーがダッシュボードからマイページへ転送される
if ( ! current_user_can( 'level_1' ) ) {
show_admin_bar( false );
add_action('auth_redirect', 'my_auth_redirect_subscriber');
}
function my_auth_redirect_subscriber() {
        wp_redirect( 'http://〜〜〜.jp/mypage/(マイページのアドレス)' );
        exit();
}
?>



これで、万が一 会員がWordPressのログイン画面に辿り着くことがあって、ログイン動作を行っても、自分の作成したマイページに飛ばしてくれます!


2.コメント機能を編集し、リンク先を変える。【comment-template.phpの編集】

次に、「comment-template.php」というファイルを使用します。
※「comment-template.php」は、「wp-includes」の中にあります!DL後、編集する前に必ずバックアップをとりましょう!(参考:/wp-includes/comment-template.php)


このファイルの『must_log_in』というのが、会員制サイトで未ログイン時にコメント欄に表れる表記です。
『ログイン』というリンクが、WordPressのログイン画面につながってしまっているのです。
先ほどの作業で、ログイン画面がWordPressのものでも、ログイン後の転送先がマイページになりました。が、ログイン画面もきちんと自分で作成したマイページに飛ばしたいですよね!
そこで、『must_log_in』の表記を編集してしまいましょう!


2076行目

'must_log_in'          => '<p class="must-log-in">' . sprintf( __( 'コメントするには<a href="http://〜〜〜/members/">ログイン</a>してください。' )) . '</p>',

上記のように、sprintfの中の’ ’で囲まれた表記を、自分の好きな表記に書き換えましょう!
これで、未ログイン時にログインを促す場合でも、ログイン画面のアドレス先を変更できます。上記では、前回作ったマイページへログインさせることを想定して表記してみました。もちろん、アドレスを変えることも、リンク自体をなくすことも、コメントするには〜の表記自体も、変えることができます!


3.コメント機能で定められた表記を消す。【comment-template.phpの編集】

先ほどまでの作業で完了なのですが、もうそもそもログインしてくださいとかログイン中ですとかそんな表示いらない!なくしてしまえ!という方のために、以下の方法をおすすめします。
こちらも先ほどのように「comment-template.php」を利用します。


2075行目

/** This filter is documented in wp-includes/link-template.php */
'must_log_in'          => '<p class="must-log-in">' . sprintf( __( '' )) . '</p>',
/** This filter is documented in wp-includes/link-template.php */
'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( '' ), get_edit_user_link(), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',

先ほど紹介したsprintfの’ ’内を空欄にしてしまいます!これで、どちらの表記も表示されません!

他コメントカスタマイズ参考

コメントを表示させると自動的に決まった表記が出てきますが、今回ご紹介したもの以外の表記も変えたい!という際に、こちらのブログが大変参考になると思います。
私も参考にさせていただき、非常に助かりました!『must_log_in』の他にも、それぞれがどんな表示をして、どんな役割をしているのか説明してくださっています!
www.nxworld.net

今回ご紹介した「comment-template.php」で表示を変える方法以外にも、「functions.php」で表示を変えることもできるようです。が、こちらではなぜか’must_log_in’をいじることができませんでした。
しかし、上記と同じように「adminとしてログインしています。ログアウトしますか?」の文字を消したり、他にも「コメントを送信」のボタンを変えたりすることができますので、ご紹介します!

// コメントの表示文字の変更
add_filter('comment_form_defaults', 'custom_comment_form');
function custom_comment_form($args) {
$args['label_submit'] = '投稿';
$args['logged_in_as'] = '';
return $args;
}



この場合はログイン中の表示コメントをなくし、コメントを送信のボタンを「投稿」に変更しています。
先ほどご紹介したブログを参考にすれば、他の表記も$argsを増やしていけば表示を消したり表記を変えたりすることができると思います!
これなら、ログインしたユーザーのみコメントをつけられるよう設定した場合でなくても、WordPressでコメントの表示を変えたい時にも活かせそうです!




さてさて、WP-Membersで使えそうな機能をばばっとご紹介しましたがいかがでしたでしょうか。実際私はここまで悩んで作っておきながら、会員ページを結局断念しました。活用はできませんでしたが、その代わりこの情報が誰かのお役に立てますように…、ぜひお試しくださいね!


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

misallychan.hateblo.jp

misallychan.hateblo.jp

misallychan.hateblo.jp

misallychan.hateblo.jp


misallychan.hateblo.jp