WordPressで会員制SNSサイト構築【BuddyPress】
とある案件で会員制SNSサイト構築依頼を頂いたので、有名どころのプラグイン『BuddyPress』にて何ができるのかをまとめました。
プラグイン一つで本格的な会員制SNSサイトが構築できて、具体的には下記のようなことが実現できます。
- 会員登録やログインなどの会員制サイト必須機能搭載
- グループを設定しコミュニティ作成
- タイムライン形式でのメンバーコミュニケーション
- 閲覧制限指定
BuddyPress自体は2008年から開発されており結構古いプラグインですが、最近も定期的にアップデートされておりセキュリティなども心配ありません。
本記事では、BuddyPressの設定方法から使い方まで解説いたします。
- 1. BuddyPressとは
- 2. BuddyPress初期設定
- 2.1. コンポーネント
- 2.1.1. 拡張プロフィール
- 2.1.2. アカウント設定
- 2.1.3. 友達関係
- 2.1.4. プライベートメッセージ
- 2.1.5. アクティビティストリーム
- 2.1.6. 通知
- 2.1.7. ユーザグループ
- 2.2. オプション
- 2.3. 固定ページ
- 3. ウィジェット設定
- 3.1.1. ナビゲーションメニュー
- 3.1.2. オンラインユーザ
- 3.1.3. ログイン
- 3.1.4. グループ
- 3.1.5. メンバー
- 3.1.6. 最近の活動メンバー
- 3.1.7. LatestUpdate
- 4. BuddyPressの使い方
- 4.1. 会員登録
- 4.2. プロフィール項目追加
- 4.3. タイムラインへの投稿
BuddyPressとは
![BuddyPressロゴ](https://syuntech.net/wp-content/uploads/2021/11/buddypress.png)
WordPressにコミュニティ機能を追加するプラグインです。会員制ログインサイトを構築するのであれば、真っ先に候補に挙がってくるプラインになります。評価も高く定期的にアップデートされており、コミュニティも活発です。
BuddePressを導入すると、このようなタイムラインでのやりとりを実現することができます。
![BuddyPress投稿タイムライン](https://syuntech.net/wp-content/uploads/2021/11/41626913c33d574cc2b1c83677b8082d-1024x601.png)
一部日本語化されていない部分もありますが基本的な機能を利用する分には問題ありません。時間があるときに翻訳もしていきます。
ではここからBuddyPressの設定について解説していきます。
BuddyPress初期設定
![BuddyPress設定メニュー](http://syuntech.net/wp-content/uploads/2021/11/0a3c3ccc411f65269cde899caae546e3-1-1024x493.png)
BuddePressをインストール・有効化すると設定->BuddyPressに初期設定のメニューが追加されます。
コンポーネント
拡張プロフィール
会員登録などで登録する項目を拡張することができます。プロフィールを充実させたい場合は設定してください。
アカウント設定
アカウントの「設定」機能を有効化します。有効にするとユーザ側でメール通知やプロフィール公開設定を変更することができます。
友達関係
ユーザ同士でアカウント申請する機能を有効化します。
プライベートメッセージ
グループなどでの公開タイムラインではなく、ユーザ間でのメッセージ送信を許可します。
アクティビティストリーム
アカウントの「アクティビティ」機能を有効化します。コメントやお気に入り登録やメンションなどのアクティビティのタイムラインが表示されるようになります。
通知
アカウントの「通知」機能を有効化します。コメントや友達申請などの通知が表示されるようになります。
ユーザグループ
グループ機能を有効化し、グループ内のみでのコミュニケーションができるようになります。
オプション
![BuddyPressオプション設定](https://syuntech.net/wp-content/uploads/2021/11/25bd6348d97d37457389dcabb50d4805-735x1024.png)
このメニューのポイントは「ツールバー」機能のチェックを外すくらいです。あとは説明項目を確認しながら、必要な設定にチェックを入れてください。
固定ページ
![BuddyPress固定ページ設定](https://syuntech.net/wp-content/uploads/2021/11/9a6f8bf8fd351a0fc218918ff00fbb4a-1024x739.png)
BuddyPressを有効化した時に作成される固定ページがありますので、そのまま設定します。デフォルトのままで問題ございません。
BuddyPressウィジェット設定
![BuddyPressウィジェットの設定](https://syuntech.net/wp-content/uploads/2021/11/e79e7d7c281745667f314ceb80536f46-1.png)
BuddeyPressを有効化すると専用のウィジェットを利用することができます。サイドメニューなどに表示するとSNSサイトのような仕上がりになります。
ナビゲーションメニュー
アカウントメニューです。コンポーネント設定で非表示にしたメニューはこちらから削除されます。
オンラインユーザ
現在オンライン(ログイン)のユーザ一覧です。
ログイン
ログイン中のアカウント情報が表示されます。
グループ
所属しているグループの一覧が表示されます。
メンバー
サイトに登録されているメンバーの一覧が表示されます。
最近の活動メンバー
アクティビティ履歴があるメンバーが表示されます。
LatestUpdate
最近のアクティビティ履歴が表示されます。
BuddyPressの使い方
会員登録
![BuddyPress会員登録画面](https://syuntech.net/wp-content/uploads/2021/11/9b540d36ada740848b64e10b7caab77a-2-1024x661.png)
ログインウィジェットを配置すると、ログインフォームと併せて会員登録ボタンも表示されます。
デフォルトでは「ユーザ名」「メールアドレス」「Name」が必須入力となっており、項目自体を削除することもできません。
項目を追加する場合は『プロフィール項目追加』をご覧ください。
![BuddyPressメールアドレス有効化確認](https://syuntech.net/wp-content/uploads/2021/11/d9d1bd6f77dd9ebbc469dbb7844f8020-3-1024x427.png)
会員登録を完了するには、メールアドレス確認用URLを押下する必要があります。キャプチャは日本語化されていませんが、「メール」機能から本文が編集できます。
![BuddyPressメールアドレス到達確認URL](https://syuntech.net/wp-content/uploads/2021/11/7f4d0fc40492af59b21ea50457691087-1024x622.png)
会員登録を行いメールアドレス有効化前の状態では、ユーザはアカウント登録管理というメニューで表示されます。
![BuddyPressアカウント登録管理](https://syuntech.net/wp-content/uploads/2021/11/0026294b3a42d8e10d7c396ab5bc1b7f-2-1024x599.png)
メールアドレス確認用URLを使わずアカウントを有効化するには、管理画面の「アカウント登録確認」画面から有効化を利用します。
![BuddyPress管理画面からのアカウント有効化](https://syuntech.net/wp-content/uploads/2021/11/a0eadee26b8b31b4c1449d65bf45a230-1024x108.png)
プロフィール項目追加
![BuddyPressユーザプロフィール項目の追加](https://syuntech.net/wp-content/uploads/2021/11/88ae6fb23b6e4886fa3708f9516c91df-1024x597.png)
会員登録時に入力するプロフィール項目を追加する場合はユーザー->プロフィール欄を利用します。項目を追加する場合は新規フィールドを追加ボタンから追加していきます。
キャプチャは「Name」項目に加えて「ニックネーム」項目を追加しています。
![BuddyPressプロフィール項目詳細設定](https://syuntech.net/wp-content/uploads/2021/11/e4490e63004b66823be91452140c3b2a-1024x566.png)
追加した項目の詳細設定は編集ボタンから設定します。
必須入力・会員登録フォームへの表示・メンバー自身での更新可否などを設定できます。
![BuddyPressプロフィール項目の登録フォームへの反映](https://syuntech.net/wp-content/uploads/2021/11/4ab0afbff9d63e219dd3c7a282ad727c-1024x597.png)
項目を追加しただけでは、フォーム上に表示されません。
設定が完了したら登録フィールドに追加した項目をドラッグします。
これでやっと「登録フィールド」タブにも追加した項目が表示され、各種フォームでも表示されるようになります。
項目追加画面では「フィールドグループ」を追加することもできます。フィールドグループとは各種登録項目をグループごとに分けて、タブ別に登録できるようにする機能です。
![BuddyPressアカウント管理フォーム](https://syuntech.net/wp-content/uploads/2021/11/a8c7fd4d1c3da75f51d4f54b1e12ff76-1024x686.png)
こちらはユーザ側のアカウント情報編集画面になります。このようにフィールドグループごとにタブが分かれ、追加した項目が編集できるようになっています。
タイムラインへの投稿
![BuddyPressタイムライン](https://syuntech.net/wp-content/uploads/2021/11/41626913c33d574cc2b1c83677b8082d-1-1024x601.png)
タイムラインに投稿するには、グループなどのフォームにコメントを入力するだけで投稿できます。投稿されたコメントに対しての返信も可能です。
BuddyPressの解説は以上となります。プラグインだけで簡単に会員制SNSサイトが構築できますので、同様のご要望がございましたらぜひともご検討ください。