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

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

最初に生成されるページ

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

  1. アクティビティ
  2. ログインしているユーザーが操作するページ

  3. メンバー
  4. 登録しているユーザーの一覧

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

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

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

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

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

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

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

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

  • 寄稿者・・・投稿できるが公開はできない(管理者の承認が必要になる)
  • 投稿者・・・投稿と公開ができる。自身の投稿のみ編集や削除ができる
  • 編集者・・・投稿と公開ができる。他のユーザーの投稿も編集や削除ができる
  • 管理者・・・編集者と同じ。寄稿者の承認を行うことができる
  • といった動作をします。Buddypress自体にはフロントエンドから投稿する(Wordpressの「投稿」を行う)機能はないので【購読者】権限でも構わないと思いますが、後々ハマらないように寄稿者や投稿者にしておいた方が無難かと思います。

    Buddypressでできること

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

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

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

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

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

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

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

    1. 友達関係
    2. いわゆるお友達追加(フォロー)機能です

    3. プライベートメッセージ
    4. ユーザー同士で簡単なメッセージのやりとりができるようになります

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

    7. サイトトラッキング
    8. サイト内で何が起こったのかを記録できるようになります

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

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

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

    「Simple Membership」は最初から日本語対応翻訳ファイルがあり、無料でできるだけ高機能で、簡単に設定ができるユーザー管理&登録プラグインです。この手のプラグインは高機能であるものは多いのですが、肝心な部分は必ずプロ版で有料というのが通常となっているようで、せっかく苦労して日本語化しても結局使えなかったなんてことが多いジャンルです。

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

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

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

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

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

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

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

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

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

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

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

    「Edit Author Slug」は単純にフロントエンドでのユーザー投稿一覧で表示されるURLを任意のものに変更し、ユーザー名の類推を防ぐことができるプラグインです。

    これはサイト内でユーザー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】で設定したものを表示して動作するようになりますから、同時にサイト全体のセキュリティアップになりますからぜひ使うようにしてくださいね。

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

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

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

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

    という画面になります

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

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

    で登録完了となります。

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

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

    Wordpressでは通常のテーマで制御できない管理画面側のCSSがあります。「Admin Customizer」オリジナルのCSSを記述して自由にログイン画面や管理画面のデザインを変更できるプラグインです。

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

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

    #activate-page {
        display: none;
    }

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

    #activate-page p{
        display: none;
    }

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

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

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

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

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

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

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

    私が実際にハマった事柄です。上の項目最後で問題として提起したのですが、バージョンが進んだことで管理者が任意にメールの内容を変更できるようになったようで、翻訳ファイルなどの問題ではなかったようです。記事執筆時のバージョンは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プラグインを翻訳(再翻訳)します 英語のままだと設定しにくい方、表示される文章を変更したい方へ

    で再翻訳を受け付けていますのでよろしくお願いします。

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

    Wordpressでよく行われるプラグインや本体、翻訳などの更新。でも自動で更新されてしまったり更新通知されてしまうと不都合な場合もあるのでは?今回は更新をコントロールする方法を2種類紹介します。

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

    さいごに


    設定が簡単ですぐにSNSサイトが作れるいいプラグインなのですが、この記事を書きながら検証している段階で、ユーザー登録に関するメールの本文で翻訳が適用されないという現象が発生しました。

    ひょっとするとその他の通知メールもすべて同じ現象が発生する可能性があります。

    人気のプラグインなので後々改善されるかもしれませんが、現状で使用するにはメールの本文ではない部分(ユーザーの確認メールを送ったよ!という画面上など)で「リンクをクリックしてね」などといった表示を追加する対応をするしかないと思います。

    Buddypressは掲示板プラグインのbbpressと同様に、昔々はWordpressと全く別のサイト作成ツールでした(私の記憶では・・・)。それがWordpressの中で使えるようにと改造されていった過程から、古いバージョンでは設定がすごくしにくく苦労した記憶があります。が、最新バージョンでは設定部分が簡単になり使いやすくなりました。

    メールの翻訳問題はあるにせよ、使い勝手のいいプラグインではないかと思いますので会員制サイトを作ってみたい方は一度使ってみてはいかがでしょうか??

    トップへ戻る