BuddyPressを使った本格的SNSサイト構築方法を徹底解説

SHARE

WordPressを利用して本格的なSNSサイトが作れてしまう”BuddyPress”。
今回はそのBuddyPressを利用した本格的なSNSサイトの構築方法を詳細に説明します。

さらに、ただBuddyPressを設定するだけではなく、標準ではできない写真の投稿もできるようにプラグインを使って構築していきます。

この手順に従ってサイトを構築すれば、あなたも直ぐにSNSサイトのオーナーになれちゃいます！

今回作成するサイトについて

今回はBuddyPressを使って下の画面のようなサイトを作ります。

タイムラインでは、写真や動画の投稿もできるようにします。
2016-08-11_18h01_06

グループを作成することもできます。
2016-08-11_18h00_29

WordPressの初期設定

最初にWordPressの初期設定を行います。

「サイトのタイトル」と「キャッチフレーズ」の設定

図1

  1. 「設定」メニューの「一般」をクリック
  2. 「サイトのタイトル」と「キャッチフレーズ」を入力（それぞれ自由に決めてください）
  3. 「変更を保存」をクリック

「パーマリンク」の設定

図2

  1. 「設定」メニューの「パーマリンク設定」をクリック
  2. 「投稿名」にチェック(お好きなパーマリンク構造を選択してください)
  3. 「変更を保存」をクリック

BuddyPressのインストールと設定

WordPressの設定が完了したら、BuddyPressのインストールと設定をします。

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

図3

  1. 「プラグイン」メニューをクリック
  2. 「新規追加」をクリック

図4

BuddyPressの「今すぐインストール」をクリック

図5

「プラグインを有効化」をクリック

BuddyPressの初期設定

図6

  1. 「設定」メニューをクリック
  2. 「BuddyPress」をクリック
  3. 「サイトトラッキング」を除くすべてにチェック
  4. 「設定を保存」をクリック

テーマの設定

BuddyPressの初期設定が完了したらテーマを設定します。
今回はStatementというテーマを利用します。Statement以外のテーマでも大丈夫ですので、好みに合わせて変更してくださいね。

Statementテーマの設定①

図7

  1. 「外観」メニューをクリック
  2. 「新規追加」をクリック

図8

「statement」と入力

図9

Statementの「インストール」をクリック

図10

「有効化」をクリック

Statementテーマの設定②

図11

Statementの「カスタマイズ」をクリック

図12

  1. Set Front Pageをクリックし以下のように設定する

    2. フロントページの表示： 固定ページ
    フロントページ： アクティビティ

  2. Layoutをクリックし以下のように設定する

    3. Container Width: 1200px
    Footer Widget: 0

  3. 「保存して公開」をクリック

サイトを表示し確認する

ここまでできたら一旦サイトを表示して確認してみましょう。

図14

ヘッダーのサイト名をマウスでホバーし「サイトを表示」をクリックする

図15

このような画面が表示されているれば大丈夫です。
ここでアクティビティを投稿し、登録されることを確認しておきましょう。

ウィジェットの追加

BuddyPressを使いやすくするために、ページの右側に表示されるサイドバーにウィジェットを設定します。
今回は以下の3つのウィジェットを追加します
・(BuddyPress)ログイン
・(BuddyPress)グループ
・(BuddyPress)メンバー

ウィジェットの追加①

図16

  1. 「外観」メニューをクリック
  2. 「ウィジェット」をクリック
  3. Right Sidebarの「検索」を開き「削除」をクリック
  4. 下の図のようにRight Sidebarが空になるまで、同様に他のウィジェットを削除する

図17

ウィジェットの追加②

図18

利用できるウィジェットにある以下のウィジェットをRight Sidebarへドラッグアンドドロップする
・(BuddyPress)ログイン
・(BuddyPress)グループ
・(BuddyPress)メンバー

サイトを表示し確認する

サイトを表示してウィジェットを確認してみましょう。
下の図のように、右側にユーザー情報、グループ、メンバーが表示されていると思います。
図19

ここまででBuddyPressの標準的な設定は完了です。
ただ、このままだと写真が投稿できないので、追加のプラグインを使って写真を投稿できるようにしていきます。

写真を投稿できるようにする

写真の投稿にはBuddyPress Activity Plusというプラグインを利用します。

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

図20

  1. 「プラグイン」メニューをクリック
  2. 「新規追加」をクリック

図21

プラグインの検索と書かれたところに「BuddyPress Activity Plus」を入力しエンター

図22

BuddyPress Activity Plusの「今すぐインストール」をクリック

図23

「プラグインを有効化」をクリック

サイトを表示し確認する

サイトを表示して写真の投稿ができることを確認してみましょう。
下のような画面が表示されているのを確認したら、アクティビティから画像を投稿してみてください。
画面をリフレッシュしてみると、投稿した画像が表示されていると思います。

図24

ユーザー登録できるようにする

今の状態では、投稿できるのはあらかじめサイトに登録されているユーザーだけになってしまいます。
多くの人にサービスを使ってもらうために、ユーザー登録をできるようにしましょう。

登録用の固定ページの作成

図26

  1. 「固定ページ」メニューをクリック
  2. 「新規追加」をクリック

図27

  1. タイトルに「登録」と入力
  2. パーマリンクの「登録」を「register」に変更する
  3. 「公開」ボタンをクリック

上記と同じ方法で以下のページを作成してください。
タイトル：有効化
パーマリンク：activation

ユーザー登録の設定

図28

  1. 「設定」メニューの「一般」をクリック
  2. 「だれでもユーザー登録ができるようにする」にチェックを入れる
  3. 「変更を保存」をクリック

BuddyPressの設定

図29

  1. 「設定」メニューをクリック
  2. 「BuddyPress」をクリック
  3. 「固定ページ」タブを開く
  4. 「登録」ドロップダウンで「登録」を選ぶ
  5. 「有効化」ドロップダウンで「有効化」を選ぶ
  6. 「設定を保存」をクリックする

サイトを表示し確認する

サイトを表示して、ユーザー登録ができることを確認してみましょう。

図30

  1. ログアウトする
  2. 右側のウィジェットに「登録」リンクがあることを確認する
  3. 「登録」リンクをクリックしてユーザーを登録してみてください

まとめ

以上でBuddyPressを利用したSNSサイトの構築は完了です。

このようにWordPressにBuddyPressを追加すると、単にブログサイトを作るだけではなく、SNSなどWebサービスも作ることができます。

また今回インストールしたBuddyPress Activity Plusのように、BuddyPress用のプラグインも多数公開されていますから、色々なプラグインをインストールしてサイトを拡張していくのも面白いので、ぜひ挑戦してみてください。

1 COMMENT

jinrikisha164

いろいろなところをぐぐりましたが解決されず、このサイトのおかげで構築できました。ココまで細かく説明されているところはありません。ありがとうございます。

返信する

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

リーンスタートアップで起業の成功率を高める方法を徹底解説

次の記事

WordPressでWebサービスを作るならテーマはOnePr…