2023年度 第30回 異色の?プラグイン「Buddy & BB」SNSや掲示板の機能を実装

まず、LOCALで新規サイトを作成しよう。

  • サイト名「Buddy & BB」
  • Preferred
  • username/pass = kanri/icc2023
  • ログインしたら日本語化

BuddyPress

WordPressをSNSに変えてしまうプラグイン。

BuddyPressのセットアップ

  • プラグイン > 新規追加で「BuddyPress」と検索、インストール
  • 設定 > BuddyPress を開き、すべてのコンポーネントにチェック、設定を保存
  • 外観 > テーマ > 新規追加で、BuddyPressに最適化されたテーマの1つ「Buddy X」をインストール&有効化
  • 外観 > メニュー
    • メニュー名に「メイン」と入力
    • メニューの位置は「Primary」にチェック
    • メニューを作成
    • 左の「固定ページ」から「ホーム」にチェックを付けて「メニューに追加」
    • 左の「バディプレスディレクトリ」から「アクティビティ」「メンバー」にチェックを付けて「メニューに追加」
    • メニューを保存
  • 設定 > パーマリンクをひらき、「パーマリンク構造」を「基本」に設定し、変更を保存

おもてのページを確認すると、右上に人のアイコンが表示され、クリックすると自分のプロフィールページに移動する。SNSらしいページ構成が確認できる

プロフィールの設定

  • プロフィールページにて、左メニューの「プロフィール」をクリック
  • 「編集」タブをひらき、「Name(必須)」に名前を入力(例:飯田花子)
    • 右上の人のアイコン横の名前が反映される
  • 「プロフィール写真を変更」タブにて、プロフィールに表示される画像をアップロード
  • 「カバー画像を変更」から、プロフィールページのヘッダーに表示される画像をアップロード

画像は下記のサンプルを使用。
時間に余裕がある人は自分で撮影した過去の画像を使ったり著作権に注意しながら画像素材サイトから探す。

(画像を右クリックしてデスクトップに保存)

プロフィール写真のサンプル
カバー画像のサンプル

プロフィール項目の追加

  • 管理画面 > ユーザー > プロフィール欄 をひらく
  • 新規フィールドを追加」をクリック
    • 「名前(必須)」に「自己紹介」と入力
    • 「タイプ」のドロップダウンメニューから「WordPressフィールド > 自己紹介」を選択
    • 保存
  • おもてのページからプロフィールページ > プロフィール > 編集 タブをひらくと「自己紹介」欄が追加されているので、自己紹介的な文章を入力してみよう

アクティビティに「つぶやいて」みよう

  • プロフィールページ > アクティビティ を開き、「〇〇さん、どうしていますか?」の入力欄に何か書いて(例:ただいまWordPressの授業中!)、「近況を投稿」ボタンをクリック
  • アクティビティ(タイムライン)の先頭に、今書いた内容が反映されているのを確認
  • グローバルメニュー > アクティビティ を見てみると、自分の投稿や、プロフィール画像の反映などがタイムラインに流れている(他のユーザーの投稿もここに集まってくる)

画像などのメディアを投稿できるようにする

(なぜか)BuddyPress標準では画像の投稿ができないので、プラグインに頼る。

  • プラグイン > 新規追加 > rtmedia と検索、インストール
  • プロフィールページ > アクティビティ のページをひらくと、入力欄の左下にこのようなアイコンが表示されている。クリックして添付画像を選択、投稿。

新規ユーザーを追加して、他人からどう見えるかテスト

  • 管理画面 > 設定 をひらき、「だれでもユーザー登録ができるようにする」にチェック、変更を保存
  • WordPressからいったんログアウトする(別のブラウザで試してもOK
  • おもてのページをひらき、グローバルメニュー > メンバーをクリック
  • 先程自分が登録したユーザー名が表示されるのでクリック
    • そのユーザーのアクティビティが表示される
  • 右上の「Register」をクリックしてユーザー登録してみよう
    • ユーザー名: taro、jiroなど
    • メールアドレス: 任意(taro@example.jpなど)
    • パスワード: icc2023
    • 「脆弱なパスワードの使用を確認」にチェック
    • Name(必須)に別の適当な名前をつける(例:松尾太郎)
    • 本登録のメールが届くので、LOCAL > Tools > MailHog をひらく
    • 「[Buddy & BB] アカウントを有効化」というメールが届いている
    • 本文中のURLをクリックしてひらく
    • 「有効化」をクリック
    • 本登録が完了
  • 右上のLoginから taro/icc2023 でログイン
    • WordPressの管理画面へ誘導される
  • おもてのページをひらき、自分のプロフィール画面を開いてみよう
  • グローバルメニュー > メンバー をひらき、「飯田花子」さんの「友達に追加」ボタンをクリックする
  • 「飯田花子」さんでログインしなおし、メッセージが届いているか確認してみよう

bbPress

だれでも投稿できる掲示板(フォーラム)を作成できるプラグイン。

  • プラグイン > 新規追加 > 「bbpress」で検索、インストール
  • フォーラム > 新規追加 をクリック
  • タイトル「なんでも掲示板」と入力して「公開」
  • 外観 > メニュー をクリック
  • 左メニュー「フォーラム」のアコーディオンをひらき、「なんでも掲示板」にチェックを入れて「メニューに追加」
  • メニューを保存
  • おもてのページをひらくと、グローバルメニューの右端に「なんでも掲示板」が表示されている
  • 「GD bbPress Attachments」というプラグインをインストールすると画像を添付できる。

プラグイン次第で、コーポレートサイトやECサイトだけでなく、会員制サイトや掲示板(フォーラム)などに拡張できることがわかると思います。

以上

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x