WordPressでオンラインサロンを作ろう〜SNS構築編〜

プラグインでオンラインサロンを作ろう

先 日 愛 知 で オ ン ラ イ ン サ ロ ン に つ い て 話 が あ り ま し た 。 話 題 に な っ た の が 、 大 手 オ ン ラ イ ン サ ロ ン で は 、 頑 張 っ て 会 員 数 を 増 や し て も そ の 分 運 営 側 に 10% か ら 20% の 運 営 費 を 持 っ て い か れ ち ゃ う よ ね 、 と い う も の 。　

そ こ で 「 だ っ た ら 自 分 で オ ン ラ イ ン サ ロ ン を 構 築 し よ う 」 と い う 発 想 に な り 、 本 当 に 作 れ る か 挑 戦 す る こ と に し ま し た 。

色 々 調 べ て み た と こ ろ 、 オ ン ラ イ ン サ ロ ン を 構 築 す る に は い く つ か プ ラ グ イ ン を 組 み 合 わ せ れ ば よ い み た い で す 。 過 去 に た く さ ん の プ ラ グ イ ン を 追 加 し て レ イ ア ウ ト が 崩 れ た り 、サ イ ト ダ ウ ン し た お 客 様 が い た の で 、 ま ず は 無 難 に S N S 機 能 だ け 追 加 し よ う と 思 い ま す 。

さ ら に な る べ く 費 用 を か け な い よ う に す る た め 、 テ ー マ も 無 料 に し て カ ス タ マ イ ズ 性 が 高 い も の を 選 定 し よ う と 思 い ま す 。

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

前提条件

今回の動作確認環境は下記の通りです。

プラグイン

プラグイン名	BuddyPress
バージョン	5.1.2
ダウンロードURL	https://ja.wordpress.org/plugins/buddypress/

テーマ

テーマ名	Attitude
バージョン	4.0.1
ダウンロードURL	https://wordpress.org/themes/attitude/

テーマのくわしい説明は下記のサイトをみてください。

無料ながら万能、多用途型のWPテーマ「Attitude」。魅力と使い方を徹底解説です。

http://wp-themetank.com/wordpress-theme-free-multi-purpose-attitude/

プラットフォーム

OS	macOS Cataline
バージョン	10.15.3
CPU	2.7GHzクアッドコアIntel Core i7
メモリ	16GB 2133MHz LPDDR3

ローカル環境ツール

ローカル環境ツール	Local by Flywheel
バージョン	5.2.5+2498
ダウンロードURL	https://localwp.com/

WordPressの設定

Local by Flywheelを起動して最初にWordPressの初期設定を行います。

サイトのタイトル・キャッチフレーズを設定

1. 「管理画面」＞「設定」＞「一般」をクリック
2. サイトタイトルとキャッチフレーズを入力
3. 「変更を保存」をクリック

サイトのタイトル：onlinesalon.com
キャッチフレーズ：自前オンラインサロンです

パーマリンクを設定

特に指定はありませんので、お好みのパーマリンクを選択してください。

1. 「管理画面」＞「設定」＞「パーマリンク設定」をクリック
2. “共通設定”の「投稿名」をクリック
3. 「変更を保存」をクリック

プラグインをインストール

1. 「管理画面」＞「プラグイン」＞「新規追加」をクリック
2. “プラグインの検索…”で「BuddyPress」と入力
3. 「有効化」をクリック
4. 画面が遷移したら「プラグインを有効化」をクリック

BuddyPressの初期設定

BuddyPressを構成する各部品を選びます。今後、カスタマイズすることを想定して選んでください。今回はサイトトラッキング以外を選びます。

1. 「管理画面」＞「設定」＞「BuddyPress」をクリック
2. サイトトラッキング以外を選択
3. 「設定を保存」をクリック

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

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

メンバーシップの設定

メンバーシップのチェックボックスをオンにすると誰でも登録できるようになります。オンラインサロンの運営の仕方によっては、オフにして管理者もしくは運営者が手動で登録することをオススメします。

1. 「管理画面」＞「設定」＞「一般」をクリック
2. “メンバーシップ”のチェックボックスをチェック※
3. 「変更を保存」をクリック

BuddyPressの設定

1. 「管理画面」＞「設定」＞「BuddyPress」をクリック
2. 「固定ページ」タブをクリック
3. “登録”に先ほど作成した「登録」の固定ページを設定します
4. “有効化”に先ほど作成した「有効化」の固定ページを設定します
5. 「設定を保存」をクリック

Attitudeをインストール

1. 「管理画面」＞「外観」＞「テーマ」をクリック
2. “インストール済みテーマを検索…”で「Attitude」と入力して「新規追加」をクリック
3. Attitudeの説明画面が表示されたら「インストール」をクリック
4. 画面が遷移して「有効化」をクリックするとテーマ一覧にAttitudeが表示されます

ウィジェットの設定

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

• (BuddyPress)ログイン
• (BuddyPress)グループ
• (BuddyPress)メンバー

1. 「管理画面」＞「外観」＞「ウィジェット」をクリック
2. 「グループ」「メンバー」「ログイン」をRight Sidebarへドラッグアンドドロップ

サイトをプレビュー

サイトを表示してウィジェットを確認してみましょう。

下の図のように、右側にユーザー名、パスワード、ログインボタン、登録リンクが表示されていればログイン画面の完成です。

次に、登録リンクをクリックするとアカウント作成画面が表示されます。固定ページで作成した登録用のページのことです。

ログインすると左上にサイトタイトルとキャッチフレーズ、右側にユーザー情報、グループ、メンバーが表示されます。

ここまででBuddyPressとAttitudeの基本的な設定は完了です。

BuddyPressは不定期に更新されるため、せっかく作ったSNSサイトのレイアウトが崩れるなどのトラブルは避けたいものです。

そのためにも、プラグインの子テーマを作っておくことをオススメします。くわしい説明は下記のサイトをみてください。

BuddyPress（ワードプレス プラグイン）の子テーマは必須。作成方法

https://www.hcz.jp/blog/?p=22559

まとめ

以上でプラグインBuddyPressと、無料テーマAttitudeを利用したSNSサイトを作ることができました。

BuddyPressを追加すると、単にブログサイトを作るだけではなく、SNSなどWebサービスも作ることができます。またBuddyPress用のプラグインも多数公開されています。ぜひインストールして挑戦してみてください。

AttitudeはカスタムCSSの編集もできますので、さらに素敵なSNSサイトを作ることができると思います。

 

WordPress保守運用サービス

ちょっとした作業をはじめ、WordPressの保守運用サービスに関することや、
サイトのトラブルや問題など、お気軽にお問い合わせください。

 

お問い合わせ