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

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

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

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

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

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

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

前提条件

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

プラグイン

テーマ

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

プラットフォーム

ローカル環境ツール

WordPressの設定

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

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

「管理画面」＞「設定」＞「一般」をクリック
サイトタイトルとキャッチフレーズを入力
「変更を保存」をクリック
サイトのタイトル：onlinesalon.com
キャッチフレーズ：自前オンラインサロンです

パーマリンクを設定

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

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

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

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

BuddyPressの初期設定

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

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

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

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

ユーザー登録用と有効化用の固定ページ作成

「管理画面」＞「固定ページ」＞「新規追加」をクリック
固定ページの名前とパーマリンクを入力
「公開」をクリック

固定ページの名前タイトル：登録
パーマリンク：membership-registration

上記と同じ方法で登録したユーザーを有効化する画面を作成します。

固定ページの名前タイトル：有効化
パーマリンク：activation

メンバーシップの設定

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

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

BuddyPressの設定

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

Attitudeをインストール

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

ウィジェットの設定

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

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

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

サイトをプレビュー

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

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

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

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

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

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

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

まとめ

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

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

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

WEBさん

WordPressの不具合をなおす人

TwitterInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。