会員サイトを作るための WP Member Login by SPIRAL のマニュアル

「WP Member Login by SPIRAL」は、WordPressサイトとSPIRAL®の「会員管理アプリ for WP」を連携するためのWordPressプラグインです。 「WP Member Login by SPIRAL」をインストールすることで、下図のシステム連携ができます。

  • 動作環境: WordPress 3.7.1 以上
※ver.1.0.5にて、Wordpressのサーバでキャッシュ保存されている場合に発生するログイン管理の不具合を
修正しております。ver.1.0.5以降のバージョンのご利用をお願いいたします。

導入手順

  1. 事前準備
  2. 「会員管理アプリ for WP」のセットアップ
  3. スパイラルAPIトークンの発行
  4. 「WP Member Login by SPIRAL」のインストール
  5. 「WP Member Login by SPIRAL」の設定
  6. プラグインの機能を利用する

1. 事前準備

・ WordPressで構築したWebサイト
・ SPIRAL®アカウント

■SPIRAL®アカウントをお持ちでない方

 4週間無料トライアルをご利用ください。


■すでにSPIRAL®アカウントをお持ちの方

 アプリのテンプレート「会員管理アプリ for WP」をインポートして下さい。

2. 「会員管理アプリ for WP」のセットアップ

「会員管理アプリ for WP」とは、スパイラル上で会員管理を行うことを可能にするスパイラルアプリです。また、WordPress向けに最適化されているため、「WP Member Login by SPIRAL」をWordPressにインストールすることで簡単にサイトに会員認証機能を付与することが可能です。
「会員管理アプリ for WP」のセットアップに関しては、トライアルナビのスタートアップの1〜4の手順に従って設定して下さい。
ただし、上記リンク先の説明中に出てくるインポート対象のアプリについては「会員管理アプリ for WP」に読み替えて設定するようにして下さい。

会員管理アプリ for WP

3. スパイラルAPIトークンの発行

次に、プラグインでAPIを使えるようにするために、スパイラルAPIトークンを発行します。

APIトークン発行画面

「開発」メニューから「スパイラルAPI」を選択し、「トークンを発行する」ボタンをクリックしてください。

APIトークン発行画面
  • トークンタイトルは「wpmls_high」として設定してください。
  • APIタイプ制限では「有効」を選択してください。
  • 利用可能APIタイプは「ハイレベル」にチェックして、許可するマイエリア「編集」ボタンをクリックしてください。
  • マイエリア(認証機能)のタイトルが表示されますので、許可したいマイエリアのタイトルにチェックを入れます。ここでは「wpmls_area」および「wpmls_area_pw」にチェックを入れてください。
  • 「発行する」ボタンをクリックし、「保存しました。」が表示されたら、右上の「×」をクリックして閉じてください。

以上でAPIトークンとAPIトークンシークレットが発行されます。

参考

利用可能なAPIタイプで「ハイレベル」を選択し、マイエリア(認証機能)を指定することで、4要素(APIトークン、APIトークンシークレット、マイエリアログインID、マイエリアパスワード)が一致しない限り、APIを利用することはできません。
万一、WordPressに設定しているAPIトークン、APIトークンシークレットが漏洩した場合でも、会員ごとに登録されているマイエリアのログインIDとパスワードが取得されない限り、APIを悪用されることはありません。

4. 「WP Member Login by SPIRAL」のインストール

※ver.1.0.5にて、Wordpressのサーバでキャッシュ保存されている場合に発生するログイン管理の不具合を
修正しております。ver.1.0.5以降のバージョンのご利用をお願いいたします。

プラグインをダウンロードしてWordPressにインストール

以下のリンクよりWordPressプラグイン「WP Member Login by SPIRAL」をダウンロードして下さい。

プラグインのインストールはWordPressの管理画面から行います。管理画面にログインして「プラグイン」メニュー以下の「新規追加」を選択し、「アップロード」というリンク先のページにてzipファイルをアップロードしてインストールすることが出来ます。

プラグインのインストール

また、「WP Member Login by SPIRAL」は公式プラグインディレクトリに登録されていますので、WordPressの管理画面でプラグイン名で検索していただくことでダウンロードする手間なく直接インストールしていただくことも可能です。

プラグインを有効化する

インストールが正しく完了すると、「プラグイン」メニュー以下の「インストール済みプラグイン」にあるプラグイン一覧に「WP Member Login by SPIRAL」が追加されます。

プラグインの有効化

プラグイン名の下に表示されている「有効化」リンクをクリックしてプラグインを有効にして下さい。

5. 「WP Member Login by SPIRAL」の設定

「WP Member Login by SPIRAL」の設定画面

プラグインを有効化すると、「設定」メニュー以下に「WP Member Login by SPIRAL」のメニューが追加されます。

WP Member Login by SPIRAL設定画面

スパイラルAPIトークンの設定

設定画面を開いたら、まず 2. スパイラルAPIトークンの発行 で発行したAPIトークンとAPIトークンシークレットをWordPress側に設定します。本プラグインはスパイラルAPIを前提として作られているためこの設定は必須となります。

スパイラルAPIトークン

認証に関する設定

次に認証関連の設定です。WordPress上でSPIRAL®の認証機構を利用するのに必須の設定です。
マイエリアタイトルはデフォルトで「wpmls_area」が入力されていますので基本的にはそのままで構いません。ログイン認証用フォームのURLはSPIRAL®の画面上からコピーする必要があります。

認証設定

SPIRAL®の管理画面を開いて「アプリ」メニューよりアプリ一覧を表示して下さい。一覧の中の「会員管理アプリ for WP」のアイコンの右下にある「ページ (3)」をクリックして表示される「【WP用ログイン認証用】ログイン認証用フォーム」というリンクのURLを「ログイン認証用フォームのURL」として設定して下さい。

認証設定

会員情報に関する設定

会員情報の設定については、プラグイン導入時に初めから設定されているものをそのままご利用いただけます。
「会員情報用フィールドのキー」ではSPIRALアプリに含まれる一覧表「WP用会員一覧」において設定したヘッダー部分の他のキーを指定することでログイン時に表示する会員の情報を変更することが出来ます。

会員情報
会員情報

例えば、ログインIDであるメールアドレスを表示させたい場合は、「会員情報用フィールドのキー」に「email」と設定して下さい。

なお、デフォルトの「name」という設定は一覧表に「lastName」と「firstName」の2つのフィールドが存在する場合に限り有効となる設定で、それらのフィールドを文字列連結した形で表示する特殊なキーとなっています。

各種リンクの設定(非ログイン時)

最後にリンク設定です。この設定を行うことで、本プラグインが提供するウィジェットなどにログイン時・非ログイン時に有効な各種リンクを表示させることが出来ます。すべてオプションの設定になりますので必要に応じて入力して下さい。

リンク

会員新規登録ページURLとパスワード再設定ページURLは、それぞれSPIRALアプリの「ページ (3)」を開いて表示される「【WP用会員新規登録】 会員新規登録」と「【WP用会員PW忘れ手続き】 会員パスワード忘れ」リンクのURLを設定することを想定しています。

リンク

各種リンクの設定(ログイン時)

リンク設定の3つのページIDに関しては、マイエリア「wpmls_area」に設定されているカスタムマイページのページIDを入力することを想定しています。
カスタムマイページのページIDを確認するには、「会員管理アプリ for WP」のアイコンの下の「操作メニュー」をクリックして「【wpmls_area】設定」よりマイエリアの設定画面を表示します。

リンク

マイエリアの設定画面を開くとページ中央あたりに「カスタムマイページ」というリンクが存在します。それをクリックして表示されるエリア設定の「URL」の項目に記載されている差替えキーワードの数値部分が今回設定する「ページID」です。

リンク
リンク

6. プラグインの機能を利用する

「WP Member Login by SPIRAL」ではいくつかの機能を提供しています。

ウィジェット「WP Member Login by SPIRAL」を利用する

プラグインが正常に有効化されていれば、「外観」メニューの「ウィジェット」設定ページにおいて「WP Member Login by SPIRAL」という名前のウィジェットが利用できるようになっています。

ウィジェット

「ウィジェット」ページの左側に表示されている「ウィジェットエリア」に本プラグインのウィジェットをドラッグアンドドロップで追加することが出来ます。追加すると以下のように表示されます。

ウィジェット

設定が完了すると、WordPressのサイトでは以下のようにログイン用のウィジェットが表示されます。

ウィジェット

会員限定コンテンツの作成

会員限定のコンテンツを載せたい固定ページの編集画面を開き、名前が「sml-member-page」で値が「true」というカスタムフィールドを追加して下さい。この設定をすることで、当該ページはログイン時のみ表示可能なコンテンツとなります。なお、この機能は固定ページにのみ有効であり、投稿には対応しておりません。

WP Member Login by SPIRAL設定画面

固定ページの一部分のみ会員限定コンテンツにしたい場合には、固定ページ編集画面で該当部分を[sml-is-logged-in]〜[/sml-is-logged-in]で囲って下さい。

ここは通常のコンテンツです。

[sml-is-logged-in]
<h3>会員限定情報</h3>

こんにちは、この部分は会員限定コンテンツです。

[/sml-is-logged-in]

ここも通常のコンテンツです。

会員限定コンテンツ内に会員情報を挿入したい場合には、固定ページ編集画面で[sml-user-prop key="差替えキーワード"]と記述して下さい。下記の例では、lastName、firstName、emailという三つの情報を挿入しています。
※「差替えキーワード」は、「会員管理アプリ for WP」の「WP用会員DB」をご確認ください。

ここは通常のコンテンツです。

[sml-is-logged-in]
<h3>会員限定情報</h3>
ようこそ、[sml-user-prop key="lastName"] [sml-user-prop key="firstName"] さん。

あなたのメールアドレス:[sml-user-prop key="email"]

[/sml-is-logged-in]

ここも通常のコンテンツです。

ページトップへ