最新版BuddyPress2.5.2を使ってSNSを構築してみた。

BuddyPress, Wordpress

BuddyPressという言葉はWordpressを少しいじれるようになったら気になる項目のひとつではないでしょうか。

というのもテーマのフィルター選定項目にあるのに日本ではあまり情報がありません。

 

というのもSNSを構築しようと思っていたけど、日本語の情報が少なすぎて諦めた方も多いのではないでしょうか。

私も色々調べましたが、最近の情報は片手で数えられるくらいしかありませんでした。

 

そして、現行の最新版の情報はなく、もしも情報を欲している人がいるならと思い

ここではWordpressでBuddyPressを導入する方法や設定する方法をご紹介していこうと思います。

ちなみに色々なサイトの情報のいいところどりに自分の作業を足した集大成の記事になっています。
似たような記事があってもそれはしょうがない、最新に書き直していると思っていただければと思います。

海原

BuddyPressっていったい何をするためのもの?

 

構築時のバージョンは「BuddyPress 2.5.2」です。

 

キャプチャ

https://buddypress.org/

 

このBuddyPressというプラグインはSNSを構築できるプラグインであり、

コニュニティサイトを構築するのにものすごく便利なプラグインになります。

できる機能としては以下のようなものがあります。

  • ユーザーの会員登録
  • プロフィール作成
  • プロフィール画像
  • カバー画像
  • 公開メッセージ、プライベートメッセージ機能
  • プライベートメッセージ機能での画像送信
  • メッセージを受信した時の通知機能
  • フレンド登録
  • Facebookでいう「いいね!」機能
  • グループ作成
  • フォーラムの作成※BBpress必須
  • グループ専用プロフィール作成
  • グループ専用フォーラム作成
  • フォーラム登録メンバーによるアバター画像アップロードを許可
  • フォーラム登録済みのメンバーにカバー画像をアップロードを許可する
  • アクティビティ作成※Twitterのタイムラインのようなもの
  • 会員ユーザーのブログ作成機能※マルチサイト化して管理者の設定によって可能
  • イベント作成※Events Manager必須
  • facebook、Google+などのアカウント情報での会員登録

 

これだけの事が個人でも運営できてしまいます。

特にサークルとか、社内SNSとか、使い方によってはたくさんの運用方法が選択できるのがとても良いです。

それではWordpressがインストールできているという前提で話を進めていきますね。

 

BuddyPressプラグインのインストール

まずはこのプラグインを入れないと始まりませんね!

わかることかと思いますが一応手順を掲載します。

BuddyPress

プラグインの新規追加を押します。

BuddyPress

新規追加の中で検索窓に「BuddyPress」と入力します。

BuddyPress

BuddyPressが出てきますので、「今すぐインストール」をクリック!

BuddyPress

「プラグインを有効化」を押したらインストール完了です。

「設定」の項目に「BuddyPress」が追加されました。

111

BuddyPressが使えるテーマをインストールする

プラグインを入れたら次はテーマの選定です。

このBuddyPressはSNSになり、ブログとはちょっと違うので

それに対応しているテーマを使う必要があります。

そのテーマの選び方、探し方の方法を追っていきますね。

07

「外観」→「テーマ」→「テーマの追加」から「特徴フィルタ」をクリックします。

そうすると全世界で公開されている無料テンプレートから欲しい機能を指定して選定することができます。

「BuddyPress」の項目があるので、ここにチェックを入れます。

08

チェックを入れたら 「フィルタを適用1」 となりますので、この部分をクリック!

09

そうしたらBuddyPressに対応しているWordpressテーマが表示されます。

殆どが英語ですが、なんとなく直感的に使えると思います。なので、自分の好みで選んでいいでしょう。

 

誰でもサイトに登録ができるようにする。

10

「設定」ページをクリックして開きます。

ここでSNSの設定として、誰でもユーザーが登録できるように

メンバーシップの「だれでもユーザー登録ができるようにする」にチェックをいれます。

これにより登録したユーザーに自分のブログやサイトを持たせることができます。

 

アドレスの文字化けを防ぐ

BuddyPress

「設定」→「パーマリンク設定」でアドレスの部分を「基本」もしくは「数字ベース」にしています。

これは「投稿名」が入るとアドレスが文字化けしてやたら長くなるからです。

必ずそうしないといけないわけではありませんが、個人的なお勧めです。

 

17

固定ページを見てみましょう、ここに自動的に追加されているページがあります。

「アクティビティ」と「メンバー」の2つのページです。

中身には何も書いてありませんが、それで正解です。中身はいじる必要はありませんがアドレスの表示方法を編集する必要があります。

25

「アクティビティ」の文字の上にマウスカーソルを合わせると

「編集」「クイック編集」「ゴミ箱へ移動」「表示」と出てきます。「クイック編集」をクリックしてください。

24

「クイック編集」を押したら編集するところは「スラッグ」の項目

ここはURLにどう表示するのかの部分になります。最初は日本語になっているのでここを英語(半角英数字)に置き換えましょう。

特にこの文字にしなければいけないという決まりはありませんが、私は「Activity」としました。

更新ボタンを押すのを忘れないでくださいね。

26

もうひとつ、「メンバー」のスラッグも「Members」に変えておきましょう。

それぞれの意味としては

  • アクティビティ(Activity):facebookのタイムラインのようなページ
  • メンバー(Members):メンバー一覧ページ、アカウント登録者の各プロフィールページ

という感じです。

このページは後の設定で関連付けしていきます。

 

BuddyPressの設定

112

BuddyPress設定は「コンポーネント」「固定ページ」「設定」の3つに分かれています。

  • コンポーネント:BuddyPressでアカウント登録者に提供する機能の設定
  • 固定ページ:BuddyPressで必要なページの紐付け
  • 設定:BuddyPressの管理面での設定

この設定のチェック項目によってはメニューが増えたりしますので、どの項目をチェックしたら増えるのかを把握しておきましょう。

ちょっと前まではBuddyPressは英語表記でしたが、現在は日本語表記に対応しています。ありがたいですね!

もし英語になっていたらこちらのサイトが日本語化の最新ページになっていますので参考にしてください。

最新版BuddyPress2.0.xの導入と使い方
http://acr0mania.com/how-to-buddypress/

 

コンポーネント

BuddyPress

拡張プロフィール

キャプチャ

キャプチャ

デフォルト設定では、名前だけ入れればアカウント登録は可能になります。

他の項目も設定が可能です、よくあるSNSの自己紹介ページのようなものですね。

 

アカウント設定

各ユーザーのプロフィールページから直接アカウントや通知設定を編集できるようになります。

 

友達関係

ユーザーのプロフィールに友達の一覧が表示され、一覧ページが表示されます。

 

プライベートメッセージ

各ユーザーのプロフィールページにメッセージ機能がつきます。

ユーザー同士(複数人可)の外部に見られることのないメッセージのやり取りができます。

 

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

管理者がすべてのユーザーの発言や行動をチェックすることができる項目です。

アクティビティの編集・削除、スパム設定も行う事が出来るので、ユーザーが多くなってきたら重宝する項目です。

 

通知

各ユーザーのプロフィールページに「通知」が表示されます。これによりユーザーに来たメッセージなどをチェックする事ができます。

 

ユーザーグループ

ダッシュボードに「グループ」が追加され、管理者はグループの管理・編集を行う事が出来ます。

サイトには「Group」ページ、各ユーザーのプロフィールページには「グループ」が追加されます。

「Group」ページでは各ユーザーがグループ作成を行う事ができ、

プロフィールページでは参加しているグループが一覧表示されます。

 

サイトトラッキング

マルチサイト化している場合は、全サイトの更新情報の一覧が表示されます。

無料ブログのトップにある、最新記事一覧と同じような機能です。

 

BuddyPress コア、コミュニティのメンバー

設定を外す事はできませんが、外すこともないでしょう。

 

固定ページ

キャプチャ

ここではBuddyPressを使う時に最低限使用するページの作成、関連付けするページの設定を行います。

画像のように設定してもらえたらいいですが説明していきます。

最初に自動で生成された固定ページ「アクティビティ」と「メンバー」のページはそれぞれ「アクティビティストリーム」「メンバー」の項目に設定します。

そして、新たに設定するページは「登録」「有効化」の設定になります。

  • 登録:アカウントを登録するページ
  • 有効化:登録したアカウントを有効化するページ

両ページとも「新規固定ページ」をクリックしてページを作成します。

タイトルとスラッグを決めて、本文は何も記入せずに公開します。

この例の通りに作成して問題はないと思います。

  • 登録:タイトル「アカウント登録」、スラッグ「register」
  • 有効化:タイトル「アカウント有効化」、スラッグ「activate」

作成したら「設定」→「BuddyPress」→「固定ページ」で「登録」と「有効化」が選択できるようになっています。

 

設定

キャプチャ

ツールバー

WordPressはログインすると、サイトの上部に管理バーが表示されます。

管理者と表示される内容は違いますが、ログインしていないユーザーにもツールバーを表示するかどうかの設定

アカウント削除

各ユーザー自身で自分のアカウントを削除するかどうかが選べます。これにチェックを入れないとユーザーが自分自身を削除できないので、、、まぁ、チェック入れておきましょう。

プロフィール写真のアップロード

各メンバーのプロフィールにアバター画像をアップロードできるかどうかの許可を出す項目です。

カバー画像のアップロード

各メンバーのページのカバー画像をアップロードできるかどうかの許可を出す項目です。

プロフィール同期

WordPressに登録しているユーザーなら、そのプロフィールと同期をすることができます。

ここでいうWordpressに登録とは

https://wordpress.com/

に登録しているかどうかということです。

グループを新規作成

登録ユーザーであれば誰でもグループを作れるようになるという項目です。

グループ写真アップロード

グループページのアバター画像をアップロード許可するかの項目です。

グループのカバー画像のアップロード

グループページのカバー画像をアップロード許可するかの項目です。

ブログとフォーラムのコメント

各ブログとフォーラムにコメントができるようにするための項目です。

アクティビティ自動再読み込み

更新情報があった場合アクティビティページに自動で表示させるための項目です。

BuddyPressウィジェット

キャプチャ

BuddyPressをインストールするとウィジエットに独自の項目が追加されます。

(BuddyPress)オンライン状況

SNSでオンラインになっているユーザーがわかります。

(BuddyPress)グループ

更新されているグループ順に表示されます。

(BuddyPress)メンバー

最近ログインしているメンバーがわかります。

(BuddyPress)ログイン

ログインしていない場合は「ログイン画面」が表示され、ログインしている場合は「ログアウト画面」が表示されます。

(BuddyPress)友達

自分の友達になっている人で最近ログインしたひとを表示しています。

(BuddyPress)最近の登録メンバー

SNSに新規登録したメンバーを表示します。

 

 

これらのウィジェットを必要に応じて設定してください。

グループメニュー

キャプチャ

管理者含むユーザーが作成したグループを一覧表示するのがグループページです。

管理者は、WPダッシュボード「グループ」から管理を行う事が出来ます。

管理者がこの部分をいじるのは特にありませんが、規約違反、クレーム、削除対象の内容があったら対応すればいいと思います。

それではグループの作成手順を紹介します。

詳細

キャプチャ

この項目では「グループ名 (必須)」と「グループの説明 (必須)」を設定します。

特に説明の必要はないですよね。

 

設定

キャプチャ

ここではグループの属性を決めます。

どういう条件でこのグループに参加できるのかを選択します。

 

Group Slug

キャプチャ

グループのスラッグを決めます、つまり「表示されるURL」のことです。

さきほどグループ名を「てすとです」と日本語にしました、この日本語のURLになっているので

半角英数字で設定をし直してあげましょう、そうしたらスッキリします。

キャプチャ

 

写真

キャプチャ

ここではグループのアバター画像を設定することができます。

必要に応じて画像を設定していきましょう。

カバー画像

キャプチャ

ここではグループのカバー画像を設定することができます。

 

Send Invites

キャプチャ

ここではグループに招待したいユーザーを選ぶことができます。

以上がグループの作成手順になります。

キャプチャ

 

アクティビティメニュー

アクティビティ

ユーザーの行動や発言を一覧表示してくれるのがアクティビティページです。

管理者はWPダッシュボード「アクティビティ」から管理を行う事が出来ます。

基本的にはいじることはありません、編集、削除依頼、違反報告があったときに対応すればいいと思います。

また特定のアクティビティにスパム設定も可能です。

 

マルチサイト化

マルチサイト化というのはつまりは各ユーザーが自分の記事を書けるように設定することです。

これにより、無料ブログのようにユーザーがブログを持つことが可能になります。

これにはちょっと設定が大変というか

間違えたらエラーが出てしまうので注意!

まず、マルチサイト化にはWeb上のサーバーのファイルをいじる必要があります。

ロリポップとか、エックスサーバーのようにブラウザ上でサーバーファイルをいじれるならいいのですが

そうでない場合、80code.comみたいなFTPを用いてファイルの移動をする場合はFTPソフトが必要になります。

まぁ、私が使っているFTPソフトは昔からの王道のFFFTPです。

そのFFFTPを使っての説明をしていきます。

wp-config.phpに記述

11

FFFTPの話はまた今度、使える前提でお話しを進めます。

WordPressを設置したWebサーバーのファイルにある「wp-config.php」を開きます。

ここで注意が必要です。

このファイルを開くプログラムですが、「メモ帳」で開くとファイルが壊れます!

なので絶対にメモ帳で開かないようにしてください。

実際にファイルの中にこう書いてあります。

 

// 注意:
// Windows の “メモ帳” でこのファイルを編集しないでください !
// 問題なく使えるテキストエディタ
// (http://wpdocs.sourceforge.jp/Codex:%E8%AB%87%E8%A9%B1%E5%AE%A4 参照)
// を使用し、必ず UTF-8 の BOM なし (UTF-8N) で保存してください。

 

開いた後でこれ言うなよ!って言う話ですが、何がいいのかこのサイトを見てもわかりにくいです(笑)

結果「NotePad++」が推奨されています(Windows)、Macでは?って言う話ですが、それは調べてないのでわかりませんが、「UTF-8 の BOM なし (UTF-8N)」という設定で保存ができるプログラムを使用してください。

Macのテキスト編集ツール「CotEditor」を使っている人がいました→参考サイト

これを間違えると、ダッシュボードとかにエラーの英語表示が永遠に出てきます。

なので絶対にメモ帳では編集しないようにしてくださいね。

それで話は戻しますが、

 

/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */

の上の部分に

define(‘WP_ALLOW_MULTISITE’, true);

を追加します。

12

 

編集が終わったら保存して、サーバー上のファイルをこの編集したファイルで上書きします。

 

ネットワークの作成

キャプチャ

このファイルの書き換えができたら「ツール」の中に「ネットワークの設定」が出現します

この時、プラグインはすべて停止(BuddyPressも)しておきます。

ネットワークの設定を押すと「WordPress サイトのネットワークの作成」が出現します。

13

ここでネットワークで割り振るアドレスの設定をします。

「サブドメイン」と「サブディレクトリ」がありますが、サブドメインは設定が面倒くさそうなので「サブディレクトリ」にします。

サブディレクトリを選択して「インストール」を押します。

14

そうしたら「WordPress サイトのネットワークの作成」が出てきますので、設定に従ってまたファイルを書き換えます

まずwp-config.phpを編集していきましょう。

wp-config.phpの編集

15

さきほど追加したコードの下に追加で書き込みます。

黄色い四角で囲った部分が追加した部分です。

これを追加したら保存してまたサーバー上にアップします。

次は.htaccessファイルの編集です。

.htaccessの編集

19

この画面がインターネットを探しても見つからなかったので色々間違えましたが

.htaccessに関しては追加ではなく、上書きをします。

なので指定されたコードを
# BEGIN WordPress
<IfModule mod_rewrite.c>

<ここに指定されたコードを入力>

</IfModule>

# END WordPress

という形で編集します、それが上の画像です。

 

基本的な設定は以上になります。

またこれ以降ののことは別に記事にしていこうと思いますー

 

パクリ、、参考にさせていただいたサイト(記事)様

おかげで最新情報を理解することができました。

最新版BuddyPress2.0.xの導入と使い方

[WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

BuddyPressで使えるおすすめプラグインまとめ!【2014年版】

WordPressでSNSを作ろう!BuddyPressのインストールと初期設定


PAGE TOP