WP User Frontend Pro

商品コード: wp-user-frontend-pro カテゴリー:

WP User Frontend Pro プラグインは、User Frontend プラグインのビジネス版で、ユーザー登録した利用者がサイトに情報を登録するフォームを設置し、サブスクリプションを使って、商材や情報など自由に流通させるプラットフォーム構築に加えて、ソーシャルログイン機能や、クレジットカード支払い、ユーザー同士が利用できるメッセージ機能など、付加機能を追加することができます。

決済機能(継続課金も可)で会員による投稿の掲載や閲覧をマネタイズ

サイトにクレジットカードを使った支払機能を追加して、サブスクリプションプランを使って投稿されたコンテンツをマネタイズすることができます。

会員間のやり取りが行えるメッセージ機能

サイトにユーザー登録したアカウント間でメッセージをやり取りすることができます。ユーザー間のコミュニケーションが行わることで、サイトにプラットフォームとしての役割を付与することができます。

モジュール単位で必要な機能を追加

GoogleやTwitterなどのSNSアカウントでログインをするソーシャルログインや、QRコードの表示、クレジットカードでの支払い機能など、様々な機能を追加することができます。

必要な機能を有効化することで、オンデマンドでプラットフォームを強化していくことができます。

WP User Frontend Pro プラグインは、ソーシャルログイン機能や、クレジットカード支払い、ユーザー同士が利用できるメッセージ機能など、様々な付加機能が用意された、User Frontend プラグインの強化版です。ユーザー登録した利用者がサイトに情報を登録するフォームを設置し、サブスクリプションを使って、商材や情報など自由に流通させるプラットフォーム構築に利用することができます。

WP User Frontend Proの使い方

各種機能の有効化

各種機能の有効化

プラグインをインストール後、[User Frontend] > [モジュール] をクリックして表示された一覧から、クレジットカード支払いやSNS連携など必要な機能を追加することができます。

各機能の設定方法

モジュール機能を使って、User Frontend プラグインに次のような付加機能を追加することができます。

ユーザーディレクトリ(ユーザーの一覧)

サイトに登録されているユーザーアカウントの一覧を表示することができます。

  1. [User Frontend] > [モジュール] メニューをクリックします。
  2. 表示されたモジュール一覧の [ユーザーディレクトリ] を有効(右上のつまみをクリック)にします。
    ユーザーディレクトリ(ユーザーの一覧)
  3. [User Frontend] > [ユーザー一覧] をクリックします。
    ユーザーディレクトリ(ユーザーの一覧)
  4. 表示された [ユーザー一覧] 画面で取得したいアカウント情報にチェックを入れます。
  5. [変更内容を保存] ボタンをクリックします。
  6. 固定ページを追加してショートコード [wpuf_user_listing] を追加します。
    ユーザーディレクトリ(ユーザーの一覧)
  7. ページをプレビューするとユーザーの一覧が表示されます。
    ユーザーディレクトリ(ユーザーの一覧)

Stripe 支払い

サブスクリプションの支払方法にクレジットカードを追加することができます。

  1. [User Frontend] > [モジュール] メニューをクリックします。
  2. 表示されたモジュール一覧の [Stripe支払い] を有効(右上のつまみをクリック)にします。
    Stripe 支払い
  3. [User Frontend] > [設定] > [支払い] をクリックします。
    Stripe 支払い
  4. [支払い] 画面の下の方にある [Stripe シークレットキー] と[Stripe 公開可能なキー] を入力します。
    Stripe 支払い
  5. [変更を保存] ボタンをクリックします。

[ストライプシークレットキー] と[Stripe 公開可能なキー] は、stripe 公式ページ にアカウントを作成して、あらかじめ取得しておく必要があります。

また、クレジットカードの決済履歴は [User Frontend] > [トランザクション] メニューから確認することができます。

プライベートメッセージ

サイトに登録したユーザ間でメッセージのやり取りを行うことができます。

  1. [User Frontend] > [モジュール] メニューをクリックします。
  2. 表示されたモジュール一覧の [プライベートメッセージ] を有効(右上のつまみをクリック)にします。
    プライベートメッセージ
  3. アカウントのプロフィール用ページに追加された [Message] > [新しいメッセージ] をクリックします。
    プライベートメッセージ
  4. [ユーザーを選択] 画面で、メッセージを送る相手を選択します。
    プライベートメッセージ
  5. メッセージを送信することができます。
    プライベートメッセージ

ソーシャルログインと登録

TwitterやFacebook、InstagramなどのSNSアカウントでログインする手段を追加することができます。

  1. [User Frontend] > [モジュール] メニューをクリックします。
  2. 表示されたモジュール一覧の [ソーシャルログインと登録] を有効(右上のつまみをクリック)にします。
    ソーシャルログインと登録
  3. [User Frontend] > [設定] > [マイアカウント] をクリックして [アカウントページ] が設定されているか確認します。
    ソーシャルログインと登録
  4. [User Frontend] > [設定] > [ソーシャルログイン] をクリックして [ソーシャルログインを有効にする] にチェックを付けます。
    ソーシャルログインと登録
  5. FacebookやTwitterなど必要な [アプリID] や [API Key] などを入力します。
    ソーシャルログインと登録
  6. [変更を保存] ボタンをクリックします。
  7. ログインフォームに、各SNS用のソーシャルログインのボタンが追加されます。

MailPoet 3

新しくユーザーが登録された際に、MailPoet プラグインを使ってメーリングリストの購読者に自動で追加することができます。

  1. [User Frontend] > [モジュール] メニューをクリックします。
  2. 表示されたモジュール一覧の [Mailpoet 3] を有効(右上のつまみをクリック)にします。
    MailPoet 3
  3. MailPoet プラグインの有効化を行います。
  4. 管理画面の [MailPoet] > [購読者] を追加します。
    MailPoet 3
  5. [MailPoet] > [リスト] メニューを選択して表示された [リスト] 画面で [新しく追加する] をクリックします。
    MailPoet 3
  6. [リスト] 画面で [名前] に追加する名前を入力して [保存] をクリックします。
    MailPoet 3
  7. [User Frontend] > [ユーザー登録フォーム] メニューで表示された一覧から通知を受取るフォームの編集画面を表示します。
    MailPoet 3
  8. 表示されたフォームの編集画面で[設定] > [Mailpoet 3] をクリックします。
    MailPoet 3
  9. 設定画面の [MailPoet を有効にする] にチェックを付けて [リストを選択] で手順6. で追加したリストを一覧から選択します。
    MailPoet 3
  10. [フォームを保存] をクリックします。

設定したフォームから、ユーザー登録があった場合に、MailPoet のメーリングリストに自動的に追加されるようになります。

QRコード

フォーム内の項目(URLや電話番号など)からQRコードを生成して投稿に表示することができます。

例えば、店舗情報を掲載するサイトで店舗のWebサイトのURLを表示したり、LINEの友達登録用のQRコードに利用することができます。

  1. [User Frontend] > [モジュール] メニューをクリックします。
  2. 表示されたモジュール一覧の [QRコード] を有効(右上のつまみをクリック)にします。
    QRコード
  3. [User Frontend] > [設定] > [投稿フォームの作成] をクリックして [投稿のカスタムフィールド] にチェックを付けます。
    QRコード
    QRコードに利用するデータは投稿フォーム内のカスタムフィールドに保存されるため、フォーム内で表示を行うために [投稿コンテンツ領域にカスタムフィールドを表示する] 設定を有効にしておく必要があります。
  4. [変更を保存] をクリックします。
  5. [User Frontend] > [投稿フォーム] > [新規追加] をクリックして [フィールドの追加] 画面から [QRコード] をドラッグして追加します。
    QRコード
  6. [フィールドの設定] を使って、表示されるテキストや必須項目など変更することができます。
    QRコード
  7. [設定] タブで [QRコード] > [設定] 画面でスタイルを変更します。
    QRコード
  8. [フォームを保存] をクリックします。
  9. 新しい投稿フォームを作成し [ショートコード] ブロックを追加して、先に保存したQRコード付きの投稿フォームのショートコードを貼り付けます。
    QRコード
  10. 投稿フォームをプレビューすると、QRコードに表示する内容を選択するフィールドが追加されます。
    QRコード
  11. [投稿を作成する] でフォームを投稿した場合に、フィールドで選択したURLなどがQRコードに変換されて表示されます。

コメントマネージャー

WordPressのコメント機能とは別に、投稿を作成したユーザーがコメント管理を行うことができます。

  1. [User Frontend] > [モジュール] メニューをクリックします。
  2. 表示されたモジュール一覧の [コメントマネージャー] を有効(右上のつまみをクリック)にします。
    コメントマネージャー
  3. 投稿(または固定ページ)の編集画面を開き、[ショートコード] ブロックを追加して [wpuf_comments] を挿入します。
    コメントマネージャー
    ショートコードに、post_type パラメータを追加して投稿の種類で表示を切り替えることができます。
    「投稿」の場合の例:[wpuf_comments post_type=”post”]
  4. 投稿(または固定ページ) を開くとコメント一覧と操作を行うリンクが追加されます。
    コメントマネージャー

HTMLメールテンプレート

WP User Frontend から送信されるメールのデザインや配色をカスタマイズすることができます。

  1. [User Frontend] > [モジュール] メニューをクリックします。
  2. 表示されたモジュール一覧の [HTMLメールテンプレート] を有効(右上のつまみをクリック)にします。
    HTMLメールテンプレート
  3. [User Frontend] > [設定] > [メール] をクリックします。
    HTMLメールテンプレート
  4. [テンプレート設定] 、[パスワードリセットのメール] 、[ユーザー登録確認メールを再送] が追加されます。
    HTMLメールテンプレート
  5. [テンプレート設定] をクリックします。
    HTMLメールテンプレート
  6. 変更する部分を編集して [変更を保存] ボタンをクリックします。

送信されるHTMLメールのデザインや配色が変更されます。

SMS通知

APIを利用して、ユーザーがフォームを投稿した際にSMSで通知を送ることができます。

Twilio を利用する場合は、次の手順で行います。

あらかじめ、[Twilio 電話番号] 、[Twilio Account SID] 、[Twilio Auth Tokenを取得しておきます。

  1. [User Frontend] > [モジュール] メニューをクリックします。
  2. 表示されたモジュール一覧の [SMS通知] を有効(右上のつまみをクリック)にします。
    SMS通知
  3. [User Frontend] > [設定] > [SMS] をクリックします。
    SMS通知
  4. [Twilio 電話番号] 、[Twilio Account SID] 、[Twilio Auth Token] をそれぞれ入力します。
    SMS通知
  5. [変更を保存] ボタンをクリックします。
  6. 管理画面の [User Frontend] > [ユーザー登録フォーム] メニューを選択します。
  7. 表示された一覧からフォームの編集画面を開きます。
  8.  [設定] をクリックします。
  9. [一般] >  [モバイルメッセージ] > [SMSを有効にする] にチェックを入れます。
    SMS通知
  10. [フォームを保存]ボタンをクリックします。

ユーザーが、このフォームを利用した投稿(または固定メージ)を使った場合に、SMSで通知が送信されます。

レポート

ユーザーの行動や投稿、サブスクリプションの状況などをレポート形式で表示して確認することができます。

  1. [User Frontend] > [モジュール] メニューをクリックします。
  2. 表示されたモジュール一覧の [レポート] を有効(右上のつまみをクリック)にします。
    レポート
  3. [User Frontend] > [レポート] をクリックして各種レポートを表示します。
    レポート

次の4つのレポートを表示できます。

  • ユーザーレポート
    登録ユーザー数についてグラフで表示されます。
  • 投稿レポート
    投稿数と固定ページ数についてグラフで表示されます。
  • サブスクリプションレポート
    総売上高と保留中を含むサブスクリプション商品の合計数についてグラフで表示されます。
  • トランザクションレポート
    総売上高と課税額、純利益についてグラフで表示されます。

ユーザー分析

接続元のIPアドレスや地域情報を取得するipstackと連携して表示履歴として記録することができます。

ipstackのAPIキーが無い場合には、あらかじめ取得をしておきます。

  1. ipstack のホームページを開きます。
  2. 画面に表示されたプランから [FREE] をクリックします。
    ユーザー分析
  3. Sign Up画面で、メールアドレスやパスワードなどを入力して[Sign Up] ボタンをクリックします。
    ユーザー分析
  4. アカウント作成後に [Your API Access Key] に後で必要になるキーが表示されます。
    ユーザー分析
  5. [User Frontend] > [モジュール] メニューをクリックします。
  6. 表示されたモジュール一覧の [ユーザー分析] を有効(右上のつまみをクリック)にします。
    ユーザー分析
  7. [User Frontend] > [設定] > [一般的なオプション] をクリックします。
    ユーザー分析
  8. [設定] 画面の下の方にある [ipstack API キー] に取得しておいたキーを入力します。
    ユーザー分析
  9. [変更を保存] ボタンをクリックします。

取得されたデータは [投稿] の編集画面に表示されるようになります。

ユーザーアクティビティ

ユーザーのプロフィールから、投稿時刻などの行動履歴を確認することができます。

  1. [User Frontend] > [モジュール] メニューをクリックします。
  2. 表示されたモジュール一覧の [ユーザーアクティビティ] を有効(右上のつまみをクリック)にします。
    ユーザーアクティビティ
  3. 同様にモジュール一覧の [ユーザーディレクトリ] を有効(右上のつまみをクリック)にします。
    ユーザーアクティビティ
  4. 固定ページを追加してショートコード [wpuf_user_listing] を追加します。
    ユーザーアクティビティ
  5. ページをプレビューして表示されたユーザー一覧の [プロフィールを見る] をクリックします。
    ユーザーアクティビティ
  6. プロフィール画面で [Activity] に行動履歴が表示されます。
    ユーザーアクティビティ

Zapier

自動化サービス Zapier と連携させることができます。Zaiper とはインターネット上で稼働するサービスで、あらかじめサービス間の入出力を定義しておくことで、アプリケーション同士を連携させることができるシステムです。

Zapier を利用して、ユーザー登録時に、設定されたメールアドレスをGoogleスプレッドシートにまとめることができます。

  1. [User Frontend] > [モジュール] メニューをクリックします。
  2. 表示されたモジュール一覧の [Zapier] を有効(右上のつまみをクリック)にします。
    Zapier
  3. Zaiper にログインして [Make a Zap] をクリックして新しい定義を作成します。(今回は、Catch Hook URLに受け渡されたデータを受け取る設定を行います)
    Zapier
  4. 受け取ったデータをGoogleスプレッドシートに入力する定義を行います。
    Zapier
  5. ユーザー登録フォームの [設定] > [Zapier] の [Zapierを有効にする] にチェック付け [Zapier Webhook URL] に、Zaiper で定義した際に表示されたWebhook URLを入力します。
    Zapier
  6.  [フォームを保存] ボタンをクリックします。

ユーザー登録フォームでアカウントが登録された際に、Zaiper で設定したGoogleスプレッドシートにデータが追加されます。

ユーザー登録フォームの作成方法

アドオンをインストールすると、ユーザー登録フォームの機能を一部カスタマイズすることができます。

  1. 管理画面の [User Frontend] > [ユーザー登録フォーム] メニューをクリックして、[ユーザー登録フォーム] 画面の [フォームを追加] をクリックします。
    ユーザー登録フォームの作成方法
  2. 表示された [テンプレートを選択する] 画面で [空白のフォーム] をクリックします。
    ユーザー登録フォームの作成方法
  3. 必要なフィールド(ユーザー名など)を [フィールドを追加] 内からドラッグして配置します。
    ユーザー登録フォームの作成方法
  4. [設定] タブをクリックして、表示された [新規ユーザーステータス] で [承認が必要] チェックを有効(チェックを入れる)にします。
    ユーザー登録フォームの作成方法
  5. [フォームを保存] ボタンをクリックします。
  6. 保存されたフォームの [ショートコード] をコピーします。
    ユーザー登録フォームの作成方法
  7. 新しく固定ページを作成し、ショートコードを貼り付けます。

ユーザーが登録された場合に管理者の承認が必要なる登録フォームを設定することができます。

コンテンツの閲覧権限を設定する方法

投稿や固定ページに追加される[コンテンツの制限] パネルを利用して、追加したサブスクリプションの有効期限内で閲覧することができるコンテンツを作成することができます。

  1. 投稿または固定ページを新規作成します。
  2. コンテンツの編集画面の[コンテンツの制限] 内の [表示する] を [サブスクリプションユーザーのみ] に変更して、追加表示された [サブスクリプションプラン] で提供したいサブスクリプションプランを有効(チェックを入れる)にします。
    コンテンツの閲覧権限を設定する方法
  3. [公開] ボタンをクリックして、コンテンツを保存します。

[コンテンツの制限] パネルで設定した [サブスクリプションプラン] のメンバーであれば有効期間の間、投稿(または固定ページ)が表示されるようになります。