初心者WordPressで会員サイト作りたい…
作り方を教えて欲しい..
どのテーマとプラグインを使ったらいいの？
そんな悩みを解決します。
WordPressには「WP-Mmbers」や「Simple Membership」といった便利なプラグインがありますが、テーマとの相性もあり、必ず動作するわけではありません。
有料会員サイトのように課金システムを作る場合は、クレジットカードやPayPal決済用のアドオンが必要なケースもあります。
ちゃんと動作しないアドオンにお金を使って、損はしたくないですよね？
本記事では有料会員サイトを実際に作成した事例と、その構成を紹介します。毎月自動で課金するサブスクタイプの有料会員サイトの作り方を探している方は、ぜひ最後までお読みください。
【デモサイト】WordPressで作った有料会員制サイト
まずはWordPressとプラグインを組み合わせて作った有料会員制のデモサイトを紹介します。
WordPressで制作した有料会員制デモサイト
かんた作成した会員サイトの要件を紹介します。
有料会員サイトの概要
デモサイトは、料理のレシピを紹介するサイトをイメージしました。
コンテンツは、一般公開されているレシピと、有料会員限定レシピの2種類です。
コンテンツの種類
| コンテンツ | 説明 |
|---|---|
| 一般公開レシピ | 会員登録不要。 誰でも閲覧できるレシピ。 |
| 有料会員限定レシピ | 有料会員ユーザーのみ閲覧できるレシピ。 |
かんた会員登録しなくても閲覧できるコンテンツと、有料会員になると閲覧できるコンテンツを作りました。
有料会員サイトの料金と課金システム
有料会員システムは月額制のサブスクです。
料金システム
| 項目 | 内容 |
|---|---|
| 料金 | 980円 （月額） |
| 初期の支払い方法 | オンライン決済 |
| 毎月の支払い | 自動的に課金 |
会員登録を行い、その場で決済する仕組み。
支払いはPayPal（ペイパル）でのオンライン決済。
自動的に毎月課金されるシステムで、サブスクを解除すると有料コンテンツの閲覧ができなくなる仕様です。
かんた管理者の工数なしで、ミスが起きにくい設計です。
有料会員登録の流れ
新規会員登録フォームより申請。
支払いが完了すると有料会員登録が完了する仕組み。
かんた管理者の手間いらずのシステム。
有料会員の権限
今回は、「会員限定コンテンツを閲覧できる」という仕様です。
会員限定コンテンツ以外のページは、一般公開です。
WordPressでの有料会員サイトの作り方
デモサイトと同様の有料会員サイトの作り方を解説します。
会員システムと決済部分のプラグインについても合わせて紹介します。
有料会員システム＋オンライン決済の構成
まずは有料会員サイトのシステム構成についてです。
構成
| 区分 | 名称 | 公式サイト |
|---|---|---|
| WordPressテーマ | SWELL | ダウンロード |
| 会員プラグイン | WP-Members | ダウンロード |
| 決済プラグイン | WP-Members PayPal Subscriptions | ダウンロード |
かんたそれぞれを詳しく解説します。
WordPressテーマはプラグインとの相性が重要
デモサイトは国産有料テーマの、SWELL（スウェル）を使っています。
テーマは何でも良いのですが、プラグインとの相性問題があるので選定は慎重にしましょう。
使いたいテーマが決まっているなら、そのテーマと相性の良いプラグインを見つけましょう。
かんた逆にプラグインありきで、そのプラグインと相性が良いテーマを見つけるというアプローチでも構いません。
予算がなく、できれば無料のものを選びたいという人もいるかもしれません。
無料のテーマでも問題ありませんが、自分のスキルに自信のない人は、困った時に相談できるサポート付きのテーマを選ぶのが無難です。
テーマを選ぶポイント
- 日本の会社、もしくは日本人エンジニアの開発か？
- サポートはあるか？
- アップデートをしっかりしているか？
かんた僕はこの条件にマッチする、SWELLにしました。
SWELLでのサイト制作事例は次の記事で詳しく紹介しています↓
会員システムは定番のWP-Membersプラグイン
WP-MembersはWordPress公式プラグインディレクトリーに登録されている無料プラグインです。
「WordPressで会員サイトといえばコレ」的な存在のプラグイン。昔からあるプラグインなんですが、しっかりアップデートし続けてくれているので、個人的に信頼度はかなり高めです。
独自カスタマイズ用にマニュアルがあるのですが、かなりの情報量。
クライアントワークなどで、要望に合わせて会員システムをカスタマイズをしたいといったWeb制作者に向いているプラグインです。
かんたプラグイン開発者に問い合わせをしたことがあるんですが、かなり迅速に返信をもらい、具体的なコードを教えてもらいました。
オンライン決済はWP-Members PayPal Subscriptions
決済部分はWP-Members PayPal Subscriptionsプラグインを使っています。
このプラグインはWP-Membersプラグイン開発者が販売している有料アドオンです。
WP-Membersプラグインに決済システムを追加するアドオンはいくつかありますが、WP-Members PayPal SubscriptionsはWP-Membersと同一開発者のプロダクト。
サードパーティーで動作保証のないプラグインを買うより確実なので、デモサイトではWP-Members PayPal SubscriptionsはWP-Membersプラグインを採用しています。
料金システム
| ライセンス | 価格 |
|---|---|
| 1サイト | 49ドル |
| 5サイト | 99ドル |
| 無制限 | 149ドル |
公式サイト上にはWP-Members PayPal Subscriptions以外のプロダクトもありますが、デモサイト用には「1サイト」のライセンスのみを購入しています。
ライセンスは海外のプロダクトあるあるなのですが、1年ごとの更新です。
1年経過してもサーバー上にファイルは残るのでそのまま使えます。期限を過ぎるとアップデートと、サポートがなくなります。
ちなみにサイトに紐づけたライセンスの付け替えは可能です。
かんたテストサイトで検証した後、ドメインの異なる本番環境でライセンスを有効化するといった使い方ができます。
必要なアカウント
サイト運営者として、サブスク料金を受けるためにPayPalのアカウントが必須です。
PayPalのアカウントについて
PayPalアカウントは2つの種類があります。
アカウントの種類
どちらのアカウントでも、WP-Members PayPal Subscriptionsプラグインを利用できます。
パーソナルアカウントは受け取る金額に上限があります。
かんた用途にあったアカウントを用意しましょう。
【設定】WP-Membersプラグイン推奨設定
WP-Membersプラグインを有効化すると、WordPressの設定によっては次のメッセージが表示されます↓
かんたメッセージが表示される場合は、WP-Membersプラグインの推奨設定を行います↓
【推奨設定①】ディスカッション
「設定」→「ディスカッション」と進み、
「ユーザー登録してログインしたユーザーのみコメントをつけられるようにする」にチェックを入れる。
【推奨設定②】表示設定
「設定」→「表示設定」と進み、
「フィードの各投稿に含める内容」で「抜粋」を選択する。
【設定】会員システム用のページを作る
以下2つのページを作ります。
- 会員登録ページ
- プロフィールページ
かんたそれぞれのページの作り方を解説します。
会員登録ページ
会員登録するためのページです。
「固定ページ」→「新規追加」をクリック、以下の設定をします。
| 設定箇所 | 内容 |
|---|---|
| タイトル | 任意のタイトル |
| スラッグ | 任意のスラッグ |
| コンテンツ | 本文エリアに [wpmem_form register] ショートコートを入力 |
ショートコートを入力することで、登録フォームが表示されます。
会員登録ページは初期状態でオプションが多数表示されます。
登録作業がウンザリしそうなので、必要なものだけに修正します。
ダッシュボードの「設定」→「WP-Members」をクリック、「フィールド」タブより設定できます。
プロフィールページ
会員登録したユーザーのプロフィール編集ページです。
「固定ページ」→「新規追加」をクリック、以下の設定をします。
| 設定箇所 | 内容 |
|---|---|
| タイトル | 任意のタイトル |
| スラッグ | 任意のスラッグ |
| コンテンツ | 本文エリアに [wpmem_profile] ショートコートを入力 |
ショートコートを入力することで、登録フォームが表示されます。
ページ指定
作成した2つのページを指定する作業です。
「設定」→「WP-Members」と進み、
「固定ページ」オプションで、作成したページを指定。
| 設定箇所 | 設定内容 |
|---|---|
| 登録ページ | 会員登録用に作成したページを指定 |
| ユーザープロフィールページ | プロフィール用に作成したページを指定 |
【設定】登録通知機能の有効化
会員登録時に入力したメールアドレス宛に確認通知を行う設定です。
「その他の設定」→「確認用リンク」の、
「Send email confirmation link on new registration」にチェックを入れる。
確認通知のメールに記載されているリンクをクリックすると、会員登録が完了する仕組みです。会員登録しても支払いが完了しないと、有料コンテンツを見ることはできません。
【設定】エラー、ダイアログメッセージの設定
プラグインで生成されるメッセージについてです。
エラーやダイアログのメッセージはダッシュボードの「設定」→「WP-Members」をクリック、「ダイアログ」タブより設定できます。
【設定】自動送信メールの設定
会員登録や、パスワードリセット時にユーザーに送信されるメールの文面はデフォルトで「英語」です。
ダッシュボードの「設定」→「WP-Members」、「メール」タブよりメールの調整が可能です。
メールフォーマット内では動的に出力を変えるショートコートが利用できます。
ショートコードの一例
| ショートコード | 用途 |
|---|---|
| [username] | ユーザー名 |
| [email] | メールアドレス |
| [login] | ログインページのURL |
かんたその他のショートコードは公式サイトに掲載されています。
【設定】有料会員の設定方法
「承諾の設定」の「Allows for access to expire」にチェックを入れる。
「Subscriptions」タブをクリック。
ページに表示される必須オプションを設定する↓
| オプション | 内容 |
|---|---|
| Set Subscription Period | サブスク期間 |
| Price | 料金 |
| Name | 商品（サービス名） |
| Transaction Type | 課金タイプ。 サブスクで定期課金する場合は「recurring」を選択。 |
| Currency | 通貨。 日本円での課金は「Japanese Yen」を選択。 |
| PayPal User ID: | PayPalアカウントに紐づいたメールアドレス ※マーチャントIDではない |
| PayPal Live/Sandbox | 「Sandbox」はテスト用。 「Live」は本番用。 |
【設定】ログインフォームの設定
会員登録済みのユーザーがログインするためのフォームの設置作業です。
ログインフォームは以下2つのパターンで設置できます。
ログインフォームの設定方法
- ウィジェット
- 固定ページ
かんたそれぞれの方法を解説します。
ウィジェット
サイドバーなどテーマでウィジェットが設置できるエリアにログインフォームを表示させる方法です。
「外観」→「ウィジェット」と進み、
「WP-Membersログイン」ウィジェットを選択し、任意の場所を選択。
固定ページ
特定の固定ページ上に、ログインフォームを設置する場合の設定方法です。
ログインフォームを表示したいページを固定ページで作成後、
[wpmem_form login]ショートコートをエディター上に埋め込む。
ログイン後、特定のページにリダイレクトさせたい場合は次のようにショートコートを書き換える。
[wpmem_form login redirect_to=”https://example.com/page/”]
【設定】有料会員限定コンテツの作り方
次の方法で、有料会員限定のコンテンツを作成できます。
- 投稿記事単位での設定
- 投稿ごとの設定
かんたそれぞれの設定方法を解説します。
投稿記事単位での設定
記事単位で、有料コンテンツを設定する方法です。
例えば投稿機能でコンテンツを作成しているとします。次の表のように、「記事Aは一般公開」、「記事Bは有料会員限定」にしたい場合の設定です。
| 投稿タイプ | 記事 | 公開設定 |
|---|---|---|
| 投稿 | 記事A | 一般公開 |
| 投稿 | 記事B | 有料会員限定 |
有料会員限定の設定をしたい投稿を開き、
「投稿 制限」から「Restricted」を選択。
投稿ごとの設定
「標準投稿は一般公開」、「カスタム投稿は会員限定」といった場合の設定です。
例えば「レシピ」というカスタム投稿を追加して、次の表のようにレシピの投稿だけ有料会員限定にする場合の設定方法についてです。
| 投稿タイプ | 記事 | 公開設定 |
|---|---|---|
| 投稿 | 記事A | 一般公開 |
| 投稿 | 記事B | 一般公開 |
| レシピ | 記事A | 有料会員限定 |
| レシピ | 記事B | 有料会員限定 |
「設定」→「WP-Members」と進み、
カスタム投稿タイプのオプションで「レシピ」にチェックを入れる。
「更新設定」をクリック。
ページを上部にスクロールし、「コンテンツ」部分に追加表示された「レシピ」を「Restrict」に変更。
【設定】PayPalページへリダイレクトする方法
会員登録すると、デフォルトでは会員登録が完了したという表示とPayPalページへのリンクが表示されます↓
支払い前に「会員登録が完了した」と勘違いされてしまいそうな表示。
改善させるため、このページを表示せずにPayPalのページへリダイレクトさせるため、子テーマのfunctions.phpに次のコードを貼り付けます。
コード
add_action( 'wpmem_register_redirect', 'my_push_user_to_paypal' );
function my_push_user_to_paypal( $fields ) {
global $wpmem, $wpmem_pp_sub;
// Get the PayPal Settings.
$arr = $wpmem_pp_sub->subscriptions['default'];
// Set up defaults.
$button_args = array(
"cmd" => ( ! $wpmem_pp_sub->paypal_cmd ) ? '_xclick' : $wpmem_pp_sub->paypal_cmd,
"business" => $wpmem_pp_sub->paypal_id,
"item_name" => stripslashes( $arr['subscription_name'] ),
"no_shipping" => '',
"return" => add_query_arg( array( 'a'=>'renew','msg'=>'thankyou' ), $wpmem->user_pages['profile'] ),
"notify_url" => $wpmem_pp_sub->paypal_ipn,
"no_note" => '1',
"currency_code" => $wpmem_pp_sub->subscriptions['default']['currency'],
"rm" => '2',
"custom" => $fields['ID'],
);
// Add the user ID.
$button_args['custom'] = $fields['ID'];
// Handle regular vs recurring & recurring with trial.
if ( $button_args['cmd'] === '_xclick' ) {
$button_args['amount'] = $wpmem_pp_sub->subscriptions['default']['subscription_cost'];
} else {
$button_args['a3'] = $wpmem_pp_sub->subscriptions['default']['subscription_cost'];
$button_args['p3'] = $wpmem_pp_sub->subscriptions['default']['subscription_num'];
$button_args['t3'] = strtoupper( $wpmem_pp_sub->subscriptions['default']['subscription_per'][0] );
$button_args['src'] = "1";
$button_args['sra'] = "1";
if ( $arr['trial_num'] ) {
$button_args['a1'] = $wpmem_pp_sub->subscriptions['default']['trial_cost'];
$button_args['p1'] = $wpmem_pp_sub->subscriptions['default']['trial_num'];
$button_args['t1'] = strtoupper( $wpmem_pp_sub->subscriptions['default']['trial_per'][0] );
}
}
// Set the transaction price for IPN validation.
$amount = ( isset( $button_args['amount'] ) ) ? $button_args['amount'] : ( ( isset( $button_args['a1'] ) && $button_args['a1'] > 0 ) ? $button_args['a1'] : $button_args['a3'] );
update_user_meta( $fields['ID'], 'wpmem_paypal_txn_amount', $amount );
// Build and output the form so it can be submitted.
echo '<form name="paypalform" action="' . $wpmem_pp_sub->paypal_url . '" method="post">';
foreach ( $button_args as $key => $val ) {
echo '<input type="hidden" name="' . $key . '" value="' . $val . '">';
}
echo '</form>';
// Submit the form with JS.
echo '<script language="JavaScript">document.paypalform.submit();</script>';
// Exit so no screen output.
exit();
}リダイレクトではなく、表示される「Click To Proceed To Paypal」部分を編集する場合はフィルターフックで書き換え可能です↓
add_filter( 'wpmem_payment_button_args', function( $args ) {
$args['button_text'] = "PayPalで支払いをする場合はこちらをクリック！";
return $args;
});【設定】ユーザーが自分のアカウントを削除できるカスタマイズ
WP-Membersプラグインで作成されるアカウントは購読者権限です。標準の仕様で、購読者は自分のアカウントを削除することはできません。
購読者が自分のアカウントを削除できるよう子テーマのfucntions.phpに次のコードを設置。
add_action( 'wpmem_after_init', 'my_user_self_delete' );
function my_user_self_delete () {
if ( isset( $_POST['self_delete'] ) && 'delete' == $_POST['self_delete'] ) {
$nonce = ( isset( $_REQUEST['_wpnonce'] ) ) ? $_REQUEST['_wpnonce'] : false;
if ( ! wp_verify_nonce( $nonce, 'wpmem_self_delete' ) ) {
return;
}
require_once( ABSPATH . 'wp-admin/includes/user.php' );
$current_user = wp_get_current_user();
$wpmem_self_delete = array(
'self_delete' => 'complete',
'username' => $current_user->user_login,
);
wp_delete_user( $current_user->ID );
wp_redirect( add_query_arg( $wpmem_self_delete, wpmem_profile_url() ) );
exit();
}
}
add_filter( 'the_content', 'my_user_self_delete_msg', 999 );
function my_user_self_delete_msg($content){
if ( isset( $_GET['self_delete'] ) && 'complete' == $_GET['self_delete'] ) {
$content = wpmem_inc_regmessage( 'self_delete', sanitize_user( $_GET['username'] ) .'のアカウントを削除しました') . $content;
}
return $content;
}
add_filter( 'wpmem_member_links', 'my_custom_member_links' );
function my_custom_member_links( $links ) {
// Settings.
$link_text = 'アカウントを削除して退会する';
$return_text = 'プロフィールページに戻る';
$process_name = 'delete_my_account';
$return_link = remove_query_arg( 'a' );
$return_link = sprintf( '<p><a href="%s">%s</a></p>', esc_url( $return_link ), $return_text );
// If the page is the custom process page, build and display the form.
if ( ( isset( $_REQUEST['a'] ) && $process_name == $_REQUEST['a'] ) ) {
$content = '<p>アカウントを本当に削除しますか？</p>
<p><form name="form" method="post" action="' . esc_url( wpmem_profile_url() ) . '">'
. wp_nonce_field( 'wpmem_self_delete' )
. '<input type="hidden" name="self_delete" value="delete" />'
. '<input type="submit" name="submit" id="submit" class="button button-primary" value="' . $link_text . '" />'
. '</form></p>';
// Add a return button.
$links = $content . $return_link;
} else {
$link = add_query_arg( 'a', $process_name, wpmem_profile_url() );
$new_link = '<li><a href="' . esc_url( $link ) . '">' . $link_text . '</a></li>';
// Add new link at the end of the existing list.
$links = str_replace( '</ul>', $new_link . '</ul>', $links );
}
return $links;
}このカスタマイズをしなくても、ユーザーはPayPal側でサブスクの支払いを停止することができます。
PayPalでサブスクを解除するとWordPress上からユーザーを削除しなくも支払いは停止されます（支払いがなければ有料会員コンテンツは閲覧できなくなります）。
【設定】支払いページの「Invoices見出し」削除
プロフィールページに表示される「View Invoices」をクリックすると、支払い履歴が表示されます。
このページの上部にh2の見出しでInvoicesと表示されます↓
この見出しが不要な場合は、wpmem_payment_button_argsフックで削除できます↓
add_filter( 'wpmem_exp_transaction_table', function( $args, $user_id ) {
$args['heading'] = "";
return $args;
},10, 2);
$args['heading']部分が見出しとして表示させているコードです。見出しの削除ではなく、他のコードを出力することも可能です。
例えば<p>支払い</p>と表示させるには次のようにフックを記述します。
add_filter( 'wpmem_exp_transaction_table', function( $args, $user_id ) {
$args['heading'] = "<p>支払い</p>";
return $args;
},10, 2);
見出しの下に表示される「Sorry. No invoices are available for the current user.」部分のテキストは、翻訳ファイルで日本語化できます（日本語化は次項をご覧ください）。
WP-Members PayPal Subscriptionsの日本語化
WP-Membersプラグインは日本語化されていますが、拡張アドオンのWP-Members PayPal Subscriptionsは日本語未対応です。会員ページなどに英語表記が表示されるので、日本語化対応をします。
WP-Members PayPal Subscriptionsプラグインの日本語翻訳ファイルを作りました。翻訳は100％ではありませんが、目につく所を日本語化しています。
zipファイルに以下2つのファイルを含んでいます。
- wp-members-paypal-ja.mo
- wp-members-paypal-ja.po
解凍後、WPインストールディレクトリー/wp-content/lnaguages/plugins/にファイルをアップロードしてください。
本番リリース前のPayPal検証環境（Sandbox）について
サービスの本番稼働前の検証作業についてです。
PayPalにはSandboxと呼ばれる検証ツールが用意されているので、本番リリース前に決済を含むテストを行うことができます。
かんたSandboxの使い方を解説します。
Sandboxにアクセス検証作業
PayPalにログインします。
ログイン後、PayPalのデベロッパーページにアクセスします。
右上のメニューのアイコンをクリックし、「Dashboad」をクリック↓
アカウントの設定
左側メニュー内、「SANDBOX」から「Accounts」をクリック。
デフォルトで「パーソナル」と、「ビジネスアカウント」の合計2つのアカウントが自動作成されます。決済のテストを行うためにはサイトオーナー用のアカウントと、有料会員のアカウントが必要です。
デフォルトのアカウントを使うか、Create accountをクリックし新規のアカウントを作りましょう。
デフォルトのアカウンを使う場合
デフォルトのテストアカウントを利用する場合は、パスワードの設定が必要です。
Manage Accountsの「View/ Edit account」をクリック。
「Change password」から任意のパスワードを設定しましょう。
新規アカウントを作る場合
「Create Account」をクリック。
アカウントのタイプを選択します。
テストユーザー用のアカウントであれば「Personal (Buyer Account)」を選択。
サイトオーナー用アカウントであれば「Business (Merchant Account)」を選択。
アカウントタイプを選択後、「Create custom account」をクリック。
アカウントの情報は適当なもので構いません。テスト口座には検証用に金額を設定しておきましょう。
口座の金額は「View/edit account」→「Account details」→「Funding」タブの PayPalから指定します。
サイトをテスト（Sandbox）モードに変更
WordPressサイト側での作業です。
WP-Membersプラグインの設定画面でテストモードに切り替えます。
「Subscriptions」→「オプション」と進み。PayPal Live/Sandboxオプションで「Sandbox」を選択。
「PayPal User ID」をサイトオーナーのメールアドレスに変更。
かんた以上の作業でテストの環境が整いました。
テスト終了後はPayPal User IDとPayPal Live/Sandboxオプションを本番用に戻しましょう。
WP-Members PayPal Subscriptionsに関するFAQ
デモサイトで利用した、WP-MembersとWP-Members PayPal Subscriptionsプラグインの仕様に関するFAQです。
サブスク期間は「1ヶ月単位」だけ？1年とか設定できるの？
サブスク期間の設定単位は「日」「週「年」です。
以下のようなサブスク期間を設定できます。
サブスク期間
- 1日ごと
- 2週間ごと
- 3ヶ月ごと
- 1年ごと
WP-Members PayPal Subscriptionsってサポートあるの？
あります。ライセンス期限内であればサポートを受けることができます。サポートはフォームからの問い合わせ形式です。
有料会員のプランは1つだけですか？複数のプランを設定して、別々の料金システムで課金することはできる？
できません。
クレジットカード情報は、WordPressサイト上に保存されますか？漏洩するリスクがあるか心配です。
WordPress上に会員のクレジットカード情報は一切保存されません。
決済した履歴はデータは、WordPressサイト上に保存されますか？
保存されます。
決済時のデータは、どんなものが保存されますか？
次のデータがWordPressに保存されます。
- 決済日時
- ユーザーID
- 支払い状況
決済ごとの手数料は？
【独自カスタマイズ】会員サイトをレベルアップ！
会員サイト機能とは直接関連がありませんが、デモサイトで実装している独自カスタマイズを紹介します。
絞り込み検索機能
会員サイトの情報を複数の条件で検索する「絞り込み検索」についてです。デモサイトではトップページのメインビジュアル上と、下層ページのサイドバーに実装しています。
この絞り込み検索機能は、VK Filter Search Proプラグインを使っています。
公式 VK Filter Search Proをダウンロード
WordPressプラグインは海外のものが多いのですが、VK Filter Search Proは無料テーマLightningを開発した日本の会社のプロダクトです。
VK Filter Search Proの特徴
- 直感的に操作できる
- 日本語化されている
- サポートがある
- アップデート頻度が高い
かんたVK Filter Search Proプラグインの詳細は次のレビュー記事で解説しています。
WordPressには複数の条件でまとめて検索するプラグインがいくつかあります。国産で有名なものだと、FE Advanced Search。日本語に対応していませんが、格安のものだとFilter Search Pro。
プラグインは使ってみないと詳細を知ることができません。僕はVK Filter Search Pro、FE Advanced Search、Filter Search Proを購入して使ってみました。
かんた絞り込み検索プラグインの比較は次の記事で解説しています。
検索結果の並び替え機能
並び替え機能は情報の多いポータルサイトや、ECサイトだとよく見かける機能です。
デモサイトでは、次のキーでレシピ記事を並び替えできるようカスタマイズしています。
並び替えキー
- 掲載日（投稿日時）
- 更新日（更新日時）
- 予算（カスタムフィールド）
- 料理時間（カスタムフィールド）
かんた検索結果の並び替え方法は、次の記事で解説しています。
アーカイブページにカスタムフィールドを表示
料理のレシピや不動産系のサイトだとよく見かける構成ですが、記事の詳細ページに移動する前に、サラッと記事の概要を知っておきたい時ってありますよね？
デモサイトでは次の項目を表示しています。
表示内容
- 費用の目安：カスタムフィールド
- 調理時間：カスタムフィールド
- 食材：ターム
アーカイブページにカスタムフィールドやタームを出力する方法はテーマ次第です。
デモサイトで有効化しているSWELLは、フックでアーカイブページにカスタムフィールドとタームを出力することができます。
かんた詳しいカスタマイズ方法は次の記事で解説しています。
WordPressで会員サイトを作る際の注意点
今回は会員登録と、一部ページの閲覧に関する制限を付ける方法を紹介しました。WordPressの無料プラグインや高機能なテーマを組み合わせると、誰でも簡単に有料会員サイトを作ることができます。
実際に会員サイトを作る場合は会員限定コンテンツの情報や会員の個人情報が漏洩しないよう、しっかりとしたセキュリティー対策を行いましょう。
WordPressの基本的なセキュリティー対策
- バージョン管理
- adminの削除
- 著者アーカイブページの無効化
かんたそれぞれを詳しく解説します。
バージョン管理
一般的なWordPressサイトのセキュリティー対策と同じく、有料会員サイトの運用では「WordPress本体」、「テーマ」、「プラグイン」のバージョン管理が必須です。
セキュリティーの脆弱性がある状態でのサイト運用は、不正アクセス・マルウェア感染といった障害のリスクを高めます。WordPressのセキュリティーに関する情報をチェックし、運営しているサイトのテーマやプラグインに脆弱性がないかを確認し、適切なバージョンを保ちましょう。
有料会員サイト制作時に、プラグインファイルやテーマ本体のテンプレートファイルに直接変更を加えているとアップデートで設定が上書きされ消えてしまいます。運用を考え、テンプレートファイルの編集は行わずフックなどを活用しましょう。
adminの削除
WordPressインストール時に作成するアカウントにadminを使っている場合は、アカウント名を変更するか別の管理者アカウントを作成しadminアカウントを削除しましょう。
WordPressサイトに不正アクセスしようとするユーザーは、adminでのログインを試してきます。「admin123」など、設定されていそうなパスワードをひたすら入力し、ログインしようとしてきます。
かんたadminアカウントさえなえれば、この攻撃が成功することはありません。
著者アーカイブページの無効化
ほとんどのWordPressテーマで著者アーカイブページが有効化されています。アーカイブページが有効化されている場合、当然ながら著者アーカイブページを表示することができます。
著者アーカイブページのURLには、アカウント名が含まれます。
先程のadminアカウント同様に、アカウント名が漏洩すると適当なパスワードを入力され、ログインされてしまうリスクがあります。
管理者のパスワードをどれだけ強固なものに設定していても、管理者以外のアーカイブページからアカウント名が漏洩し、不正アクセスされる可能性があります。
サイト情報の保護
- RSSの制御
- サイトマップ
- ファイルの直リンク防止
かんたそれぞれを詳しく解説します。
RSSの制御
RSSはRich Site Summaryの略語です。RSSはサイトの更新情報を外部に配信する機能としてWordPressに標準搭載されています。
WordPressで作成したサイトは、「ドメイン名/rss」とブラウザに入力することで会員以外でもRSS情報を確認することができます。
例えば当サイトの場合、https://webrent.xsrv.jp/rssにアクセスするとRSS情報を見ることができます。記事のタイトルだけでなく、コンテンツ内の情報も掲載されていることが分かります。
一般公開されているサイトなら問題ありませんが、有料会員サイトではRSSから非公開情報が漏洩します。サイトのRSSを完全に停止するか、非公開にしたいコンテンツのみRSSを制御するなど適切に設定を行いましょう。
ファイルの直リンク防止
会員限定コンテンツ内のファイル漏洩対策です。
外部サイトにリンクを貼り付けてダウンロードされないよう、サイト外からの直リンクを無効化する設定をしましょう。
対象ファイル
- pdfなどの資料
- 画像ファイル
- 動画ファイル
外部サイトからの直リンクは、セキュリティープラグインや.htaccessにより防止することが可能です。
かんたWebサイトのセキュリティーに関する知識がない場合は、専門家に相談し安全にサイト運営をしましょう！
まとめ
WordPressテーマSWELL（スウェル）での会員サイトの作り方を紹介しました。
