WordPressあれこれ

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

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

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

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

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

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

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

前提条件

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

プラグイン

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

テーマ

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

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

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

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

プラットフォーム

OSmacOS Cataline
バージョン10.15.3
CPU2.7GHzクアッドコアIntel Core i7
メモリ16GB 2133MHz LPDDR3

ローカル環境ツール

ローカル環境ツールLocal by Flywheel
バージョン5.2.5+2498
ダウンロードURLhttps://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. 「公開」をクリック

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

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

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

メンバーシップの設定

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

  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の保守運用ならWEB先案内!

WordPressでのお困りの不具合等を復旧致します!

ココナラでも提供しております。ココナラだけでも、多数のご依頼を頂いています。またココナラではうれしい五つ星評価(最高評価)も頂いております。

WordPressの作業代行

お見積もりも、もちろん無料です。

日祝・時間を問わず対応しております。お気軽にご相談ください。

こんな不具合を解消しています。

下記のようなエラー復旧のご依頼を頂いています。

    • 『WordPressにログインできない』
    • 『ユーザー名、パスワードがわからなくなった』
    • 『ワードプレスを更新したらおかしくなった』
    • 『XXXX年間ビジターアンケートが表示された』
    • 『ログインしようとしたら画面が真っ白(表示されなくなった)』
    • 『サイトによくわからない文字が表示されている』
    • 『400、500などのエラー表示が出ている』
    • 『ウィジェットやバーが表示されない』
    • 『ページが真っ白、エラーページが表示される』
    • 『プラグインが動かない』
    • 『403エラーが出て、サイトが見れなくなった』
    • 『ホームページが改ざんされてしまった』
    • 『不正なアクセスの検知をした旨のメールが届いた…』
    • 『Fatal error: Uncaught Error:
      Call to undefined function wp_unregister_GLOBALS() 』に関するエラー
    • 『作業はやるので代わりに調べて欲しい』
    • 『調べた内容は本当にできる?』
    • 『詳しい人のアドバイスが欲しいだけ』
    • 『WordPressを始めてみたけどこの後どうすればいいの?』
    • 『インストールしたテーマの使い方がわからない…』
    • 『外観>カスタマイズ』で設定できる内容
    • 『ERR_TOO_MANY_REDIRECTS』に関するエラー
    • 『WordPressのバージョンを上げたらおかしくなった』
    • 『テーマを更新したらデザインが崩れてしまった』
    • 『サーバーを移行したら表示がおかしくなった』
    • 『phpのバージョンを上げたらおかしくなった』
    • 『画像をメディアにアップロードできない』
    • 『サイト内の画像がすべて表示されなくなった』
    • 『ドメインを変更したら表示がおかしくなった』
    • 『サーバー移管SSL化(https)』
    • 『他のブログからの引っ越し(アメーバブログ・他のWordPress等)』
    • 『用途に応じたサーバー選び』

    その他『とにかく助けて欲しい!』など、お気軽にお問い合わせ下さい

    どのようなエラーでも復旧可能?

    下記3点のケースを除けば基本的に復旧は可能です。 復旧出来ない可能性のあるケース

    • 元データ自体が無くなってしまっている
    • サイトを改ざんされてり内部ファイルを書き換えられたり削除されている
    • データを誤って削除してしまい、バックアップが無い場合

     

    バックアップをお持ちではなくともサーバー側で自動的にバックアップを取っている場合があり、復旧出来ることもあります。諦めずまずはお問い合わせ下さい。

    お問い合わせ

    「お見積もり無料です!」

    費用は作業完了後にご納得の上でのお支払です。

    作業の流れ(お見積もり)

    • ご連絡頂く
    • 詳細をお聞きする
    • ログイン情報を頂く
    • サーバー・サイトにログインして状況を確認
    • お見積もり金額の提示
    • 依頼頂くかキャンセルされるかご判断下さい。(ここでキャンセルも可)
    • ご依頼確定となれば作業開始
    • 作業完了
    • サイトの確認をして頂く(問題ないようでしたらお支払いに進む)
    • お支払いのご案内(メールにてご請求の案内)
    • ご依頼・作業終了となります。

    WordPress保守管理します!

    WordPress保守管理(月額)サービスも行っております。

    WEB先案内