WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

WordPressのメンバーコミュニティサイト作りができる「Buddypress」プラグイン使ってみよう!!

公開日:2018(平成30)年1月4日/最終更新日:

Knowledge Base Wordpress パソコン カスタマイズ 設定



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressでサイト作りをするときにぜひ使いたいと思う機能が「画像スライダーなど動きのあるコンテンツ」「SNSのような会員制サービス」「掲示板」ではないでしょうか?

WordPressを使う方はおそらく無料ブログサービスからの転向組(と勝手に思ってます)なので、ブログでできないこうした機能は魅力的でもあり、訪問者に「このサイトはブログとは違うゾ!」というところを表現できる唯一?の場面だと思います。

その中で今回は会員制サイト(SNS)機能を作れる有名なプラグイン「Buddypress」に焦点を当てて、設定の仕方やカスタマイズ方法などを紹介していきたいと思います。

プラグインの入手はプラグインの新規追加からプラグイン名で検索すればすぐに出てきますのでさっさと行ってしまいます。そしてこのプラグインは日本語対応なのでわかりやすいと思います。

それでは早速私が設定したときの備忘録もかねていろいろと紹介していきますね。

インストール後の「ようこそ」画面をブックマークしよう

インストールしたら早速いろいろやってみたいところですが、WordPressダッシュボードのいろいろな場所に【Buddypress】で設定できる項目が飛んでしまって何をどうしていいかわからなくなるので、インストール後最初に表示されるようこそ画面のURLはブックマークしておいた方が便利だと思います。

もうすでに・・・・という方は以下のURLを参考に「サイトのURL」という部分を変更してアクセスしてみてください

「サイトのURL/wp-admin/index.php?page=bp-about&is_new_install=1」

表示されましたか?これで迷子にならずに済むのでは?と個人的には思います。いろいろなところからアクセスしてみましたがこのようこそ画面のメニューにはたどり着けませんでした(使いやすいのになぁ・・・)。

最初に生成されるページ

インストールが完了すると以下の固定ページが自動で生成されます

  1. アクティビティ

ログインしているユーザーが操作するページ

  1. メンバー

登録しているユーザーの一覧

すべてはこの2つのページから始まります

メンバーから1つのユーザーをクリックすると

  1. そのユーザーのプロフィール
  2. そのユーザーが最近投稿した記事
  3. (今ログインしているユーザー自身の)プロフィールの編集

これだけで基本的な機能はすべてインストール完了となります(簡単すぎる・・・)。

ただ1つ設定を忘れてはいけないのがユーザー登録できるようにしておくこと。これはBuddypressの設定ではなくWordPressそのものの設定なので案外ハマるかもしれません。

設定はダッシュボードから「設定」をクリックし、出てきた一般設定の画面で

  1. 「だれでもユーザー登録ができるようにする」にチェックを入れる
  2. 新規ユーザーのデフォルト権限グループを設定する

の2点。通常の投稿をしたりするには寄稿者以上の権限が必要です。ちょっと脱線して投稿に対する権限について解説すると

  • 寄稿者・・・投稿できるが公開はできない(管理者の承認が必要になる)
  • 投稿者・・・投稿と公開ができる。自身の投稿のみ編集や削除ができる
  • 編集者・・・投稿と公開ができる。他のユーザーの投稿も編集や削除ができる
  • 管理者・・・編集者と同じ。寄稿者の承認を行うことができる

といった動作をします。Buddypress自体にはフロントエンドから投稿する(WordPressの「投稿」を行う)機能はないので【購読者】権限でも構わないと思いますが、後々ハマらないように寄稿者や投稿者にしておいた方が無難かと思います。

QA AnalyticsQA Analytics

Buddypressでできること

Buddypressでは基本的にメンバーの登録・管理・メンバー自身での編集などができるようになります。インストール直後に有効になっている機能は

  1. 拡張プロフィール

通常のWordPressのユーザープロフィールに加えていろいろな情報を登録してもらうことができます(使い方は後述します)

  1. アカウント設定

ユーザーがプロフィールから直接アカウントや通知設定を編集できるようにします。これをオフにしておくとフロントエンドからユーザー情報の編集ができなくなるため、管理者が行う必要が出てきます。

  1. アクティビティストリーム

スレッド化コメント、直接投稿、お気に入りや @ メンションを含んだ全体・個人・グループのアクティビティストリームのすべてが、RSS フィードに反映され、メール通知を行います。

  1. 通知

ツールバーのバブルやメールで最近のアクティビティをメンバーに通知し、メンバーが通知設定をカスタマイズできるようにします。

これらの基本となる機能はそのままの設定でいいと思います。

更に追加できる機能として

  1. 友達関係

いわゆるお友達追加(フォロー)機能です

  1. プライベートメッセージ

ユーザー同士で簡単なメッセージのやりとりができるようになります

  1. ユーザーグループ

ユーザーをグループ化して管理する場合に使用します

  1. サイトトラッキング

サイト内で何が起こったのかを記録できるようになります

があり、これらを使うことで基本的なメンバーシップサイト(会員制サイト)に必要な機能が実装できます。

※Buddypressでは有料会員という概念がありませんので、有料制会員サイトを作成する場合には別のメンバーシッププラグインを使う必要があります。

有料会員を管理できるプラグインとしては

が私の知る限りでは一番設定しやすいと思います。

ただし注意したいのはプラグインによって登録形態が違うこと。大きくは

  1. WordPress標準のユーザーとして登録するもの
  2. プラグイン独自のユーザーとして登録するもの

の2つ。「Buddypress」は前者、今紹介した「Simple Membersip」は後者なので使い勝手や他のプラグインとの連携などを確認しながら選定する必要があります。

最低限のセキュリティ対策をしよう

まずはBuddypressで作成されるプロフィール画面を見てみてください。そして上のスラグ(URL)を見ると・・・

(デフォルトの場合)http://nekoxkazoku.wpblog.jp/メンバー/ユーザーID/

になってますよね?途中の「メンバー」というのは固定ページのスラグ(URL上の表示名)なので問題ないのですが、なんとその後ろに「ユーザーID」が表示されてしまっています。BuddypressのログインはユーザーIDとパスワードですから、知っている人ならここがユーザーIDというのを知ってて不正アクセスしたりすることがあります。

しかも、WordPressでは記事の作者一覧などでもこの表示方法がされるようになっています(確認してみてくださいね)。

他の方が使用する前にこの部分を変更してセキュリティ対策しましょう。

ここで1つ追加プラグインを紹介します

これはサイト内でユーザーID(正確には著者ID)をURLの中で表示しなさいよ!となっているすべての部分を任意の文字列に変更できるようにするすぐれものプラグイン。Buddypressを使っていなくてもぜひ導入したい機能です。

ここではこのプラグインを使って、通常ユーザーIDに設定されてしまうこの危険なURLを、ユーザー登録時に自動で任意のものに設定する方法を紹介します。

Buddypressの登録はWordPressのユーザーと統合されているので

  1. Buddypressの登録フォームの「ユーザー名 (必須)」=WordPressの「ユーザー名」
  2. Buddypressの登録フォームの「Name(必須)」=WordPressの「名」「ニックネーム (必須)」「ブログ上の表示名」

として登録されるようになっています。つまりBuddypressの登録フォームから登録される情報で、かつ、WordPressにも登録される情報は
「ユーザー名」「名」「ニックネーム (必須)」「ブログ上の表示名」のいずれかということになります。

これを自動でスラグとして使用されるように【Edit Author Slug】の設定をします。

  • 【Edit Author Slug】を有効化したら早速ダッシュボードから「設定」→「Edit Author Slug」を開きます

「Author Slug の自動生成」の下にある「自動更新」にチェックを入れ、「投稿者スラッグ構造」を「Username(デフォルト)」以外に設定します。「nickname」あたりが無難でしょう(前述したように登録時には「名」「ニックネーム (必須)」「ブログ上の表示名」が共通で設定されますからどれでもかまいません)。

設定が終わったら実際にプロフィール画面を見てみてください。URLはきちんと変更されていますか?ニックネームにした場合には

「http://nekoxkazoku.wpblog.jp/メンバー/ニックネーム/」

になっているはずです(日本語の名前の場合は変な記号に変換されています)。これでスラグをユーザーIDだと考えて不正ログインしようとしても絶対無理!!となるわけです。

もちろんニックネームが重複する場合にはきちんと「ニックネーム-2」などがついてURLが重複しないようになっていますから安心です。

またすでに運用中という方は【Edit Author Slug】の設定画面で「投稿者スラッグを一括更新」にチェックを入れて更新すれば今まで登録されているユーザーのプロフィールURLが変更されるようになりますから行うようにしましょう。

ちらっと書きましたが、この設定は「ユーザーID」をURLの中に出力しなさいという命令に対して「ユーザーID」の変わりに【Edit Author Slug】で設定したものを表示して動作するようになりますから、同時にサイト全体のセキュリティアップになりますからぜひ使うようにしてくださいね。

ユーザーが実際に登録をしたときの流れ

結構サイトを作る側では確認不足となるのが実際にユーザーが登録しようとしたときの流れ。

登録画面はこんな感じ(拡張プロフィールで性別のところ追加してますが気にしないでください。)

WordPressのメンバーコミュニティサイト作りができる「Buddypress」プラグイン使ってみよう!!|Knowledge Base

そして入力を終えて「登録」をクリックすると

WordPressのメンバーコミュニティサイト作りができる「Buddypress」プラグイン使ってみよう!!|Knowledge Base


という画面になります

BuddypressはWordPressと同様にダブルオプトイン(アカウント有効化メールのURLをクリックして登録完了)なのでメールを確認すると

WordPressのメンバーコミュニティサイト作りができる「Buddypress」プラグイン使ってみよう!!|Knowledge Base

ここでリンクをクリックすると

WordPressのメンバーコミュニティサイト作りができる「Buddypress」プラグイン使ってみよう!!|Knowledge Base

で登録完了となります。

普通のユーザーならその画面から
「アカウントを有効化しました。登録時に指定したユーザー名とパスワードでログインできます。」のリンクをクリックしますよね?すると・・・なんとバックエンドのログイン画面が表示されてしまうんです。

バックエンドのログイン画面からログインに成功すると管理者権限のユーザー以外はフロントエンドに戻るようにはなっているので問題はないのですが、標準のログイン画面ではちょっとそっけないですよね?そんなときは

などを使ってログイン画面のカスタマイズをしておく必要がありそうです。

また他の方法としてテーマのCSSに

#activate-page {
display: none;
}

を追加して有効化完了ページの文字列を表示しないようにしたり、

#activate-page p{
display: none;
}

とすれば「アカウントを有効化しました。登録時に指定したユーザー名とパスワードでログインできます。」の文字列のみを非表示にできます。そうすればバックエンドへ移動してしまうことがなくなります。

※実際にはサイトで実際にCSSをカスタマイズして確認してください

翻訳ファイルで変更する方法もありますが、リンクを含む翻訳部分は絶対にリンク文字列を含まないといけないという決まり事がありますのでアンカーをなしにして文字列全体を体裁よくまとめるなんて方法もありますが現実的ではないかもしれません。

それからもう1つ、登録の有効化メールの本文が画像のように英語表示になってしまうこと。翻訳ファイルの問題かと思い、再翻訳してみましたが改善しませんでした(こうした問題はサポートで提起されていますが改善していないようです)。

WordPressのメンバーコミュニティサイト作りができる「Buddypress」プラグイン使ってみよう!!|Knowledge Base

今回の問題に限って言えば、

のメールを確認してもらう旨を表示している画面の翻訳を変更して対処するしかなさそうです。

メールの内容が英語なのはなぜ?

私が実際にハマった事柄です。上の項目最後で問題として提起したのですが、バージョンが進んだことで管理者が任意にメールの内容を変更できるようになったようで、翻訳ファイルなどの問題ではなかったようです。記事執筆時のバージョンは2.9.2です。

翻訳ファイル内にメールの内容と同じ文章があったため勘違いしていました。

メールの内容についてはダッシュボードから「メール」をクリックすると、いろいろな通知メールの一覧が出てきます(前述した登録確認メールも含まれています)。

それらを編集することで内容を日本語化できます。

例えば新規登録の確認メールは、「[{{{site.name}}}] アカウントを有効化」という名前になっていて、それを開くと

Thanks for registering!

To complete the activation of your account, go to the following link: <a href=”{{{activate.url}}}”>{{{activate.url}}}/<a>

となっています。この文字列を日本語に変更すればOKということです。

表示される文字列を変更したいときは

これだけでSNSのようなサイトができてしまう「Buddypress」。すべての文字列が翻訳ファイルで変更を行えるようになっているので文字列の変更をする場合にはプラグインの翻訳ファイルを編集する必要があります。使ってみたら簡単ですばらしいプラグインなのですがここだけが難点だと思います。

ここは少し商売にさせていただいているところでもありますのでさらっと紹介します。

手順は

  1. FTPを使って「インストールフォルダ」→「wp-content」→「languages」→「plugins」の中にある「buddypress-ja.mo」「buddypress-ja.po」をダウンロードします
  2. 無料の翻訳ソフト「poedit」を入手して「buddypress-ja.po」を開き、文字列の変更をします
  3. FTPを使って2のファイルを元の場所に上書きします

これで再翻訳が完了します。即時反映されない場合はデベロッパーツールでキャッシュのクリアをすると反映されます(テストした感覚ではキャッシュのクリアが必須みたいですね)。

ちなみに最近ではWordPressの公式サイト上の翻訳ファイルやプラグインの更新の際、自動で先ほどの場所へアップロードした日本語化ファイルがカスタマイズ前のものに上書きされてしまうことがあります。

を参考に更新のコントロールをするか、カスタマイズ済みの翻訳ファイルを用意しておいてプラグインや本体の更新時に再度アップデートするといいです。