TEAM × MARKETING × BRANDING

インビジョン株式会社

企業文化をデザインする
採用マーケティングチーム

03-5794-5433

お問い合わせフォーム

HOME>コラム>制作お役立ち情報

Category " 制作お役立ち情報 "

1426" class="post-1426 post type-post status-publish format-standard hentry category-column category-design"

2014/7/4(Fri)

WP-Membersで会員制サイトを作る!?【1】ログイン画面の設定方法を大公開!

会員制サイトで必須のマイページ。WP-Membersを使用して、サイトオリジナルのマイページを作りましょう!今回は、WP-Membersの使用法と、マイページへつなぐためのログイン画面の設定法についてご紹介します!

WordPressで会員制サイトを作りたい!
そんなときに使用したいのがWP-Membersというプラグイン。
今回はそのプラグインの使用方法をざざっとご紹介したいと思います。

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

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

会員制サイトで欠かせないのが、ログイン画面。そして、ログイン後に会員のみ使用できるマイページですね。
WP-Membersを使って、これらを作っていきましょう。


(0) 設定>パーマリンク設定を「投稿名」に変更しておきましょう。
 私の場合、設定>WP-Membersの設定画面のチェックボックスの項目は必要なかったので、全て外しています。

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

(2) 以下のショートコードを入力します。これは、普通にWordPress内投稿フォームでの作業でOKです。

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

(3) 次に、投稿フォームの上にある表示オプションから「スラッグ」を選択・表示
 スラッグ内にパーマリンクで指定した「mypage」と表示されるはずなので、そのままでOK。
 表示されなければ、パーマリンクで指定したものを入力してください。

(4) 完了したら、公開。すると、ページには自動的にログイン画面が表示されます。
 未ログイン時 => ログイン、新規会員登録フォーム
 ログイン時  => 登録情報の編集、パスワード変更

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


140704-1

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

固定ページのテンプレートを作成します。
「page-mypage.php」を作成。ハイフンのあとは上記でスラッグに指定したものにしましょう!この作業で、先ほど作成したページと、テンプレートが連携されます。上記までの作業で、入力する内容を統一しておけば安心ですね。今回は、「mypage」で統一しています。

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

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

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

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

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

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

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

このような形で、WordPressでも簡単に、新規登録やログイン機能を持った会員サイトが作れます。
ぜひ、お試しくださいね。

次回はここから発展して、ログイン後の『マイページ』のカスタマイズ方法をご紹介したいと思います!
WP-Membersで会員制サイトを作る!?【2】英語表記修正&マイページ作成方法!
検索
WP-Membersで会員制サイトを作る!?【3】ユーザー名の表示法!

WordPressコメント表示のカスタマイズ!会員のみコメントできるようにするにはどうするの!?
『WP Favorite Postsでお気に入り機能を追加し、カスタマイズする方法』を、どこよりも簡潔に詳しく解説。

このエントリーをはてなブックマークに追加
今日の執筆:有谷 メディアチーム アートディレクター

「コールドプレスジュース」

Category

Writer

Media

キャンペーン

SNS


     

instagram写真を見る

Home

PAGE TOP

All Rights Reserved / インビジョン株式会社