茅場町コワーキングスペースCo-EdoでWordPressでSNSサイトを作れるプラグインBuddyPressのプラグインについての勉強会を行いました。

1. BuddyPress で
街のポータルサイトを作ってみよう！
街のポータルサイトを作ってみよう！

2. 今更ですが、 IT かあさんです
。
本名：松田千尋
職業：フリーのプログラマ
主に CakePHP で WEB システム作ったり、サーバ
ーやったりしてますが、 BuddyPress が好きすぎる
28 歳

3. 本日の内容
BuddyPress って何？
BuddyPress のインストールと日本語化のおさらい
BuddyPress のプラグイン紹介
BuddyPress の簡単使い方ガイド
街のポータルサイトを作ろう！
BuddyPress の functions.php
Bu d d yPre s s のユーザーページカスタマイズ

4. BuddyPress ってなに？

5. SNS 作れる WordPress プラグイン

6. BuddyPress で出来ること

7. BuddyPress の基本機能
ユーザー登録フロー
ユーザーマイページ
いいね
友達機能
ユーザー同士のメッセージ
グループ

8. SNS を作るほどじゃないし〜っていう時
( そもそも SNS とか興味ないし。 )

9. BuddyPress をミニマムに使う
必要な機能を限定する

10. BuddyPress の管理ページで必要な機能だけチェック

11. ユーザーページがいいのよ
手軽にマイページが持てる
アバター
プロフィール

12. マイページに独自機能を追加も出来る
特定のユーザーの投稿一覧ページとか

13. BuddyPress のここがいい！
会員制サイトの基本フローが全て整っている
BuddyPress プラグイン一つだけで作れる
いらない機能は簡単にオフ出来る

14. あらゆる会員制サイトの可能性
それが BuddyPress なんですわ。

15. ５分で出来るBuddyPress のインストと日本語化BuddyPress のインストと日本語化
第一回のおさらい

16. 公式サイトよりダウンロード
http://wordpress.org/extend/plugins/buddypress/

19. 所々英語表記になってるになってる

20. 日本語化ファイルファイル
http://translate.wordpress.org/projects/buddypress/dev/ja/def
po と mo ファイル

21. buddypress-dev-ja.po → buddypress-ja.po
buddypress-dev-ja.mo → buddypress-ja.mo
buddypress-ja.mo
/plugins/buddypress/bp-languages
BuddyPress の日本語化ファイルを設置する

22. 日本語化 OK
管理画面も日本語化になっているよ

23. 登録時の固定ページを追加
ユーザー登録させる場合は固定ページ追加を

24. 投稿 URL の変更

25. 誰でもユーザー登録にチェック

26. BuddyPress インストの５ステップ

27. BuddyPress のプラグインを有効化
日本語化ファイル設置
登録時の固定ページの紐付け
投稿 URL の変更
誰でも登録出来るようにする にチェック

28. イケてる BuddyPress のプラグイン

29. 今回使うプラグイン
BuddyPress Activity Plus
BP Profile Search
WP User Frontend
Buddypress Profile Widget for Blogs （おまけ）

30. BP Profile Search
カスタムしたプロフィールからユーザーを検索

31. 5 分で分かる BuddyPress テーマ
そんなに伝えることも無くてですね・・・

32. BuddyPress テーマの基本
BuddyPress のデフォルトテーマの子サイトとして
デフォルトテーマの CSS を継承するか・しないか
ゼロからコーディングしないほうが、身のためだ！

33. ゼロからコーディングしようとして、挫折しました
ページ数が膨大
デフォルトテーマの HTML を利用した方が楽！
極力デフォルトテーマの HTML を少しずつ書き換えて
カスタマイズするのが安全。

34. 子テーマを作ろう
まずは bp-default を複製し、任意の名前を付ける

35. style.css の編集
/*
Theme Name: BuddyPress kaasan
Theme URI: http://example.org/themes/kaasan/
Description: Simple theme for BuddyPress.
Version: 1.0 // バージョン
Author: ITkaasan
Author URI: http://www.kaasan.info/
Template: bp-default
Tags: buddypress, two-column, grey, dark
*/
タグに buddypress を書く

36. 親スタイルを継承するかどうか
functions.php// これで継承しない。
if ( !function_exists( 'bp_dtheme_enqueue_styles' ) ) :
function bp_dtheme_enqueue_styles() {}
endif;

37. あとは CSS を
ひたすら書くべしっ！！！
！！

38. ユーザーページをカスタム！

39. あるユーザーが投稿した記事一覧

40. ユーザー投稿機能
マイページから記事投稿出来るようにカスタムした

41. ページを追加する

42. bp-custom.php
BuddyPress 版 fuctions.php

43. plugins 下に bp-custom.php
functions.php じゃないよ！
何かページを追加したり、大きくカスタマイズしたい時
bp-custom.php を追加して、編集する

44. 親メニューの追加
add_action( 'bp_setup_nav', 'works_nav');
// ユーザーメニュー追加の独自関数をセット
function works_nav() {
global $bp;
bp_core_new_nav_item( array(
'name' => ' 実績 ', // メニューの表示名
'slug' => 'works', // スラッグ
'position' => 75,// 追加メニューの表示順位
// http://hoge.com/members/ ユーザー ID/works/ と、なる
'screen_function' => 'works',
'show_for_displayed_user' => true,// ユーザに表示するか
'default_subnav_slug' => 'works',// ユーザに表示する
'item_css_id' => 'works'// メニュ
) );
}

45. 最低一つの子ページ
function works () {
add_action( 'bp_template_title', 'works_title' );// カスタムユーザーページに見出し
add_action( 'bp_template_content', 'works_content' );// カスタムユーザーページに表示したい内容
bp_core_load_template( apply_filters( 'bp_core_template_plugin', 'members/single/plugins' ) );// テーマ
ファイルの呼び出し ( この記述で、メンバーページのファイル )
}
function works_title() {
echo ' 実績一覧 ';
}

46. 子ページ追加
plugins 下に bp-custom.php
add_action( 'bp_setup_nav', 'works_nav'); でメニュー
追加を宣言
親メニューのオプションを定義
親メニューを表示するには最低一つ以上の子ページ
を定義
子ページのタイトルを設定

47. functions.php
テーマ単体に関わるカスタマイズは
functions.php
インストした Buddy Press 全体に関わる内容は
bp-custom.php

48. global $bp; でユーザー情報取得

49. 現在表示中のユーザー
$bp->displayed_user;

50. [domain] => http://websta.info/members/kaasan/
[userdata] => stdClass Object
(
[ID] => 1
[user_login] => kaasan
[user_pass] => $P$BV.qKAxDJ4aciLwWNWCQ3rJ1gs/IVd1
[user_nicename] => kaasan
[user_email] => seven.mazda@gmail.com
[user_url] =>
[user_registered] => 2013-03-07 01:59:39
[user_activation_key] =>
[user_status] => 0
[display_name] => kaasan
)

51. ログイン中のユーザー
$bp->loggedin_user
（表示される内容は同じ）

52. ログインしているユーザーだけが表示
if($bp->loggedin_user->id == $bp->displayed_user-
>id)

53. ユーザーページカスタマイズには
plugins 下に bp-custom.php
$bp->displayed_user
$bp->loggedin_user

54. 質疑応答

55. お疲れさまでした！