BuddyPressで街のポータルサイトを作ろう

19,778 views

Published on

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

Published in: Technology
2 Comments
11 Likes
Statistics
Notes
No Downloads
Views
Total views
19,778
On SlideShare
0
From Embeds
0
Number of Embeds
2,621
Actions
Shares
0
Downloads
44
Comments
2
Likes
11
Embeds 0
No embeds

No notes for slide

BuddyPressで街のポータルサイトを作ろう

  1. 1. BuddyPress で 街のポータルサイトを作ってみよう! 街のポータルサイトを作ってみよう!
  2. 2. 今更ですが、 IT かあさんです 。 本名:松田千尋 職業:フリーのプログラマ  主に CakePHP で WEB システム作ったり、サーバ ーやったりしてますが、 BuddyPress が好きすぎる 28 歳
  3. 3. 本日の内容 BuddyPress って何? BuddyPress のインストールと日本語化のおさらい BuddyPress のプラグイン紹介 BuddyPress の簡単使い方ガイド 街のポータルサイトを作ろう! BuddyPress の functions.php Bu d d yPre s s のユーザーページカスタマイズ
  4. 4. BuddyPress ってなに?
  5. 5. SNS 作れる WordPress プラグイン
  6. 6. BuddyPress で出来ること
  7. 7. BuddyPress の基本機能 ユーザー登録フロー ユーザーマイページ いいね 友達機能 ユーザー同士のメッセージ グループ
  8. 8. SNS を作るほどじゃないし〜っていう時 ( そもそも SNS とか興味ないし。 )
  9. 9. BuddyPress をミニマムに使う 必要な機能を限定する
  10. 10. BuddyPress の管理ページで必要な機能だけチェック
  11. 11. ユーザーページがいいのよ 手軽にマイページが持てる アバター プロフィール
  12. 12. マイページに独自機能を追加も出来る 特定のユーザーの投稿一覧ページとか
  13. 13. BuddyPress のここがいい! 会員制サイトの基本フローが全て整っている BuddyPress プラグイン一つだけで作れる いらない機能は簡単にオフ出来る
  14. 14. あらゆる会員制サイトの可能性 それが BuddyPress なんですわ。
  15. 15. 5分で出来るBuddyPress のインストと日本語化BuddyPress のインストと日本語化 第一回のおさらい
  16. 16. 公式サイトよりダウンロード http://wordpress.org/extend/plugins/buddypress/
  17. 17. 所々英語表記になってるになってる
  18. 18. 日本語化ファイルファイル http://translate.wordpress.org/projects/buddypress/dev/ja/def po  と  mo ファイル
  19. 19. buddypress-dev-ja.po  →  buddypress-ja.po buddypress-dev-ja.mo  →  buddypress-ja.mo buddypress-ja.mo /plugins/buddypress/bp-languages BuddyPress の日本語化ファイルを設置する
  20. 20. 日本語化 OK 管理画面も日本語化になっているよ
  21. 21. 登録時の固定ページを追加 ユーザー登録させる場合は固定ページ追加を
  22. 22. 投稿 URL の変更
  23. 23. 誰でもユーザー登録にチェック
  24. 24. BuddyPress インストの5ステップ
  25. 25. BuddyPress のプラグインを有効化 日本語化ファイル設置 登録時の固定ページの紐付け 投稿 URL の変更 誰でも登録出来るようにする にチェック
  26. 26. イケてる BuddyPress のプラグイン
  27. 27. 今回使うプラグイン BuddyPress Activity Plus BP Profile Search WP User Frontend Buddypress Profile Widget for Blogs (おまけ)
  28. 28. BP Profile Search カスタムしたプロフィールからユーザーを検索
  29. 29. 5 分で分かる BuddyPress テーマ そんなに伝えることも無くてですね・・・
  30. 30. BuddyPress テーマの基本 BuddyPress のデフォルトテーマの子サイトとして デフォルトテーマの CSS を継承するか・しないか ゼロからコーディングしないほうが、身のためだ!
  31. 31. ゼロからコーディングしようとして、挫折しました ページ数が膨大 デフォルトテーマの HTML を利用した方が楽! 極力デフォルトテーマの HTML を少しずつ書き換えて カスタマイズするのが安全。
  32. 32. 子テーマを作ろう まずは bp-default を複製し、任意の名前を付ける
  33. 33. 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 を書く
  34. 34. 親スタイルを継承するかどうか functions.php// これで継承しない。 if ( !function_exists( 'bp_dtheme_enqueue_styles' ) ) : function bp_dtheme_enqueue_styles() {} endif;
  35. 35. あとは CSS を ひたすら書くべしっ!!! !!
  36. 36. ユーザーページをカスタム!
  37. 37. あるユーザーが投稿した記事一覧
  38. 38. ユーザー投稿機能 マイページから記事投稿出来るようにカスタムした
  39. 39. ページを追加する
  40. 40. bp-custom.php BuddyPress 版 fuctions.php
  41. 41. plugins 下に bp-custom.php functions.php じゃないよ! 何かページを追加したり、大きくカスタマイズしたい時 bp-custom.php を追加して、編集する
  42. 42. 親メニューの追加 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'// メニュ ) ); }
  43. 43. 最低一つの子ページ 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 ' 実績一覧 '; }
  44. 44. 子ページ追加 plugins 下に bp-custom.php add_action( 'bp_setup_nav', 'works_nav'); でメニュー 追加を宣言 親メニューのオプションを定義 親メニューを表示するには最低一つ以上の子ページ を定義 子ページのタイトルを設定
  45. 45. functions.php テーマ単体に関わるカスタマイズは functions.php インストした Buddy Press 全体に関わる内容は bp-custom.php
  46. 46. global $bp; でユーザー情報取得
  47. 47. 現在表示中のユーザー $bp->displayed_user;
  48. 48. [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 )
  49. 49. ログイン中のユーザー $bp->loggedin_user (表示される内容は同じ)
  50. 50. ログインしているユーザーだけが表示 if($bp->loggedin_user->id == $bp->displayed_user- >id)
  51. 51. ユーザーページカスタマイズには plugins 下に bp-custom.php $bp->displayed_user $bp->loggedin_user
  52. 52. 質疑応答
  53. 53. お疲れさまでした!

×