WordPressをSNS化するBuddyPressの導入まとめ

BuddyPressはWordPressをSNS化してくれる「プラグイン」(拡張機能)だ。あなたが今見ている杉並区おた助は、まさに両者で出来ている。この記事では、杉並区おた助を構築した手順を最初から振り返り、BuddyPress導入の仕方を簡単に紹介する。

この記事は、杉並区おた助がBuddyPressを採用していた時に投稿したものです。2010年10月現在、SNS機能はTwitterを活用して実現しています。

BuddyPress-logoWordPressとは、MovableTypeと類似するブログ構築ツール(CMS)。基本CMSなので普通のサイトも作れる。BuddyPressは、WordPressに機能を追加できるプラグインの一種で、TwitterMixiのようなSNS環境を追加導入できるもの。

断っておくが、私はWordPress、BuddyPressともに1カ月ほどしか触った経験が無い。phpや関数の知識などほぼ0で、記述や論理構成に不備があるかもしれないが、その辺り割り引いて読んでいただきたい。

また、そんな人間でもある程度格好のつくサイトが出来てしまう、WordPressとBuddyPressの”凄さ”を感じていただけたらと思っている。またこの記事はあくまで、杉並区おた助を作った手順を振り返るものであり、これがそのまま他のサイトでも流用できるか分からない。参考程度にご覧ください。

特に、BuddyPressをそのままインストールするだけでなく、既存のテーマを保持することに重点を置いた内容となっています。

目次

  1. WodPressとBuddyPressと設置サーバーの環境
  2. BuddyPressのインストール
  3. 何やら表示される英文、どゆこと?
  4. BuddyPressと互換性のあるテーマを設置する
  5. BuddyPress-Template-PackでどんなテーマもBP化
  6. トップにActivity(活動)を表示させる
  7. BuddyPressの日本語化
  8. BuddyPress is readyを消す
  9. BuddyPress関連の有用なリンク
  10. WordPressをSNS化するBuddyPressの導入まとめ

WordPressとBuddyPressと設置サーバーの環境

ちょっと眠たい話から始まることはご容赦されたい。杉並区おた助は、

  • WordPress2.9.2(muでなく、シングルタイプ
  • BuddyPress1.2.3
  • ロリポップ!レンタルサーバー

という環境で構築されている。近々、WordPress3.0やBuddyPress1.3のリリースが取りざたされているため、この記事もすぐに役立たずになるかもしれない。最新機能を求める方は、これらが出るまでもう少し待ったほうがいいかもしれない。バージョンが違えば仕様も変わる。このあたり留意してお読みください。

サーバーはどうしよう?

あなたがWebサイト作成初心者ならば私は迷わずロリポップ!レンタルサーバーをお勧めする。高機能と低価格を両立している。さらに特筆すべきは、WordPress簡単インストール機能の存在。通常、WordPressのインストールには若干の専門知識が必要だったが、このWordPress簡単インストール機能により、わずかな手順でWordPressのインストールが可能になっている。

BuddyPressのインストール

環境が整ったなら、BuddyPressをインストールする。管理画面>プラグイン>新規追加から検索ボックスに「BuddyPress」といれればリストにあがってくるだろう。画像一番左のBuddyPressをクリックすればhttp://buddypress.org/download/[英語]へ飛んでしまう。右端の「インストール」をクリックしよう。

バージョンは現時点で1.2.3が最新。WordPressの必須バージョンはなんと、2.9.1以上とある。かなり要件は高い。古いWordPressをお使いの方は、先に本体をアップグレードする必要があるかもしれない。

ここで表示されるWordPress.orgプラグインページというのは、WordPressのプラグインを登録する公式スペースのようなもの。

右上に表示される「いますぐインストール」をクリック後、プラグインを有効化しよう。

何やら表示される英文、どゆこと?

BuddyPressを有効化すると管理画面上部に表示されるのが

BuddyPress is ready. You’ll need to activate a BuddyPress compatible theme to take advantage of all of the features. We’ve bundled a default theme, but you can always install some other compatible themes or upgrade your existing WordPress theme.

拙訳すると、、、

BuddyPressの準備は整いました。全ての機能を活用するには、互換性のあるBuddyPressテーマを有効にする必要があります。既にデフォルトのテーマを同梱しましたが、他の互換性のあるテーマをインストールすることも、既にあるWordPressテーマをアップグレードすることもできます。

そう、BuddyPressの導入は、テーマとの、男と男の闘いなのだ。

BuddyPressと互換性のあるテーマを設置する

WordPressの「テーマ」とは、見た目の着せ替え機能のこと。BuddyPressの機能をフルに活用するには、テーマがBuddyPressと互換性のあるものでなくてはならない。既に、親切にもデフォルトのテーマをインストールしてくれたようだ。

上の英文メッセージで、activate a BuddyPress compatible themeがリンクになっているはずなのでクリック。そこにBuddyPressと互換性のあるテーマが表示されているはずだ。

使用するをクリックすればテーマが切り替わり、BuddyPress色満載なWebサイトが完成する。上のスクリーンショットのように、右側にサイドバー、左8割くらいがメインカラムのタイプとなる。

既にお気づきと思うが、BuddyPressインストールの時点で、サイト一番上に黒いバーが表示されている。これがBuddyPressAdminBarだ。管理棒。ここにSNSの機能が入り込む形になっている。多少変更を加えているが杉並区おた助でも表示されているので確認してみてほしい。

さて、互換性のあるテーマを有効化したらBuddyPressの導入は終了だ。 でもこのテーマ、満足できますか?私はできませんでした。あるいは、既存のテーマは有料で購入したものだったので未練があった。既存のテーマを流用したい!この想いはどこにぶつければいいのか。

それは、さきほどの英文のinstall some other compatible themesをクリックして他のテーマを探すか、あなたが真の男闘呼ならばupgrade your existing WordPress themeをクリックしよう。

BuddyPress-Template-PackでどんなテーマもBP化

そのクリックで、管理画面>プラグイン>新規追加でBuddyPress Template Packが選ばれた状態へあなたを導く。

このプラグインは、既存のテーマに愛着がある、BuddyPressが用意してくれたテーマに不満がある、互換性のあるテーマはどれも嫌だ、なあなたへ送る、WordPressからの贈り物だ。インストールする前に、WordPressによるこのプラグインの公式アナウンスや、私が既に書いたBuddyPress Template Packはあなたの夢を大事にするプラグインを読んでおくと予備知識になるだろう。 踏み切りますか?踏み切るならばインストールをクリック。すると、管理画面>外観>BP Compatibilityが現れるのでクリック。またまた英文が。

Adding support for BuddyPress to your existing WordPress theme can be a straightforward process by following the setup instructions on this page.

Step One

BuddyPress needs some extra template files in order to display its pages correctly. This plugin contains these extra templates, but right now they are in the plugin directory. They need to be inside your active theme directory to work correctly. First of all we can try moving them automatically, please click the button below to attempt to move the templates:

拙訳すると、、、

既にあるあなたのWordPressテーマでBuddyPressの機能を実現するには、このページにあるセットアップ手順をひとつづつクリアしていく必要があります。

ステップ1

BuddyPressのページを正しく表示するために、いくつかの新しいテンプレートファイルが必要です。このプラグイン(BuddyPress-Template-Pack)はこれらの新しいテンプレートファイルを持っているが、今の今はプラグインディレクトリーに入ったままです。それらは、正しく動作するために、有効化されたあなたのテーマディレクトリーの中にある必要があります。まず私たちは、自動的にそれらの移動を試むことができます。テンプレートファイルの移動を試みたいのなら、下のボタンをクリックしてください。

クリックすると、次のメッセージが。

Step Two

Templates moved successfully! This is great news, BuddyPress templates are now in the correct position in your theme which means you can skip step two and move on to step three.

拙訳すると、、、

ステップ2

テンプレートの移動が成功しました!この、BuddyPressテンプレートが今、あなたのテーマの正しい位置に移動したという素晴らしいお知らせは、ステップ2を飛ばしてステップ3に進めることを意味します。

さて、ステップ3が、最大の鬼門、のように見受けられます。

Step Three

Now that the template files are in the correct location, click through your site (you can come back to this page at any point). You should see a BuddyPress admin bar at the top of the page, try visiting some of the links in the “My Account” menu. You should find that BuddyPress pages now work and are displayed. If you find that the pages are not quite aligned correctly, or the content is overlapping the sidebar, you will need to tweak the template HTML. Please follow the “fixing alignment” instructions below. If the content in your pages is aligned in the correct place then you can skip to the “Finishing Up” section at the bottom of this page.

Fixing Alignment

By default BuddyPress templates use this HTML structure:

[HEADER]

<div id="container">
	<div id="content">
		[PAGE CONTENT]
	</div>

	<div id="sidebar">
		[SIDEBAR CONTENT]
	</div>
</div>

[FOOTER]

If BuddyPress pages are not aligned correctly then you will need to modify some of the templates to match your theme’s HTML structure. The best way to do this is to FTP to your theme’s files at:

現在のテーマが保存されているURL

Then open up the page.php file (if this does not exist use index.php). Make note of the HTML template structure of the file, specifically the <div> tags that surround the content and sidebar. You will need to change the HTML structure in the BuddyPress templates that you copied into your theme to match the structure in your page.php or index.php file. The files that you need to edit are as follows (leave out any folders you have not copied over in step two):

  • /activity/index.php
  • /blogs/index.php
  • /forums/index.php
  • /groups/index.php
  • /groups/create.php
  • /groups/single/home.php
  • /groups/single/plugins.php
  • /members/index.php
  • /members/single/home.php
  • /members/single/plugins.php
  • /registration/register.php

Once you are done matching up the HTML structure of your theme in these template files, please take another look through your site. You should find that BuddyPress pages now fit inside the content structure of your theme.

Finishing Up

You’re now all done with the conversion process. Your WordPress theme will now happily provide BuddyPress compatibility support. Once you hit the finish button you will be presented with a new permanent theme options page allowing you to tweak some settings.

拙訳すると、、、

ステップ3

さあ今やテンプレートファイルは正しい位置に追加されたので、あなたのサイト全体をクリックして廻ってみてください(いつでもこのページに戻ることができます)。ページのトップに、BuddyPress管理バー(Admin bar)見えるでしょう、”My Account”メニューのいくつかのリンクに行ってみてください。BuddyPressのページがうまく表示されていることが確認できるでしょう。 もし、ページが正しい位置になかったり、コンテンツがサイドバーを上塗っていたりするのが確認されたなら、テンプレートHTMLをいじる必要があるでしょう。下の、”位置調整”説明を見てください。もし正しく表示されているなら、このページの一番下にある”終えちゃう”セクションまでスキップできます。

位置調整

初期状態では、BuddyPressテンプレートはこのHTML構造を使います:

[HEADER]
<div id="container">
	<div id="content">
		[PAGE CONTENT]
	</div>
	<div id="sidebar">
		[SIDEBAR CONTENT]
	</div>
</div>
[FOOTER]
もし、BuddyPressのページが正しい位置にないならば、あなたのテーマのHTML構造に適合するために、テンプレートのいくつかを変更する必要があるでしょう。一番の方法は、FTPを使ってあなたのテーマファイルにアクセスすること:

現在のテーマが保存されているURL

そして、page.php(もしなければindex.php)ファイルを開いてください。特にcontentとsidebarを囲む<div>タグに注目して、ファイルのHTMLテンプレート構造をメモしてください。 あなたのpage.php、あるいはindex.phpの構造と適合させるために、あなたのテーマに移動したBuddyPressテンプレートのHTML構造を変更する必要があるでしょう。記述する必要のあるファイルは以下の通り(ステップ2で上書きしなかったフォルダーは除外する):

  • /activity/index.php
  • /blogs/index.php
  • /forums/index.php
  • /groups/index.php
  • /groups/create.php
  • /groups/single/home.php
  • /groups/single/plugins.php
  • /members/index.php
  • /members/single/home.php
  • /members/single/plugins.php
  • /registration/register.php

これらのテンプレートファイルであなたのテーマのHTML構造を適合させたなら、もう一度サイトを確認してみてください。あなたのテーマのcontent構造の中に、BuddyPressページが納まっているのが確認できるでしょう。

終えちゃう

今、あなたはこの変換行程について終わりにいます。あなたのWordPressテーマは今や、ハッピーなことに、BuddyPressへの互換サポートを提供します。フィニッシュボタンをクリックすれば、いくつかの設定を可能にする新しいオプションページが現れます。

重要なのであえて言いますが、この訳を信頼しないでください。何かトラブルがあっても責任は持てません。杉並区おた助ではステップ2後、BuddyPressのコンテンツが上手く表示されなかったので、テンプレートファイルに手を入れた記憶があります。ただ、申し訳ありません、具体的に何をしたかは忘れてしまいました。

恐らくですが、BuddyPressを<div class=contetnt></div>の中に入れ込むために、あまりいじくられていない、WordPress純正のHTML構造が必要だ、ということだと思います。フィニッシュボタンを押した後に現れるオプションは全部無視して大丈夫です。

トップにActivity(活動)を表示させる

杉並区おた助のトップ(index)には、Twitterのタイムラインのような、ブログの更新や、登録者の発言などが次々と流れてくるSite-Wide-Activityがある。おそらく初期状態ではこれは表示されず、それまでの設定でした、ブログの最新記事や、固定ページが表示されているはず。トップにActivityを表示させるには、管理画面>設定>表示設定にいき、

フロントページを[Activity Stream]にする。結果どうなるかは現時点での杉並区おた助トップページをご覧ください。

BuddyPressの日本語化

さてここまでで、BuddyPressのインストールが済んでWordPressにSNSの機能が加わり、既存のテーマも保持できて、トップにActivity(活動)を表示させて満足感に浸れるかもしれない。しかし、メニューが全て英語のままのはず。ぜひとも日本語化したいところ。これについては別途記事を作ります。

BuddyPress is readyを消す

さぁもう気付いているだろう。BuddyPressインストール後から出現していたあのメッセージが、いまだに出ていることを。今後編集作業をするにあたりこれは「非常に」邪魔になってくるので、早い段階で消しておこう。これについては別の記事を参照いただきたい。簡単である。WordPressをSNS化するプラグインBuddyPressのアレを消す

BuddyPress関連の有用なリンク

BuddyPressに関するサイトは、日本語ではまだまだ少ないのが現状。実際に構築されているサイトも少なければ、作り方を説明しているサイトも見つけにくい。それでも、いくつかの有用なリンクを挙げておくのは無駄にならないはず。

公式系

  • BuddyPress.org [英語]公式サイト。ダウンロードやコミュニティがある
  • Codex BuddyPress [英語]Codex。How-toガイドやテンプレードタグの説明などがある
  • trac BuddyPress [英語]trac。開発を補助(?)するオープンプラットフォーム

告知系

その他

WordPressをSNS化するBuddyPressの導入まとめ

いかがでしたでしょうか。意外に、簡単ではないでしょうか。正直、これまでにhtml,css,phpを勉強したことが無い人でも、プレーンな物ならマイSNSが持てちゃう、と言いきれるのではないでしょうか。インストール、カスタマイズ、の中で、随時調べ学習していけば、自分好みのサイトが持てるのでは、と思います。杉並区おた助も、ほとんどコピペで出来ています。

今、始まったばかり

杉並区おた助は始まったばかり。同時に、日本でのBuddyPressの本格的な運用も始まったばかり。BuddyPressの可能性を拡げるのは、あなたです。WordPressと同じように、プラグイン追加やテンプレートファイル編集により、様々なカスタマイズが可能、それがBuddyPressです。10年後にまだあるサービスを目指して、杉並区おた助はBuddyPressと共に歩き続けるつもりです。

質問・注文・お叱りの前に…

杉並区おた助を作っているまちいくはグラスハートな20代男で、Web系の知識経験はにわか雨で出来た水溜りのように浅いです。正確な記述を心がけていますが、他の記事を含め、誤りを含んでいる可能性があります。建設的なご指摘は大歓迎ですが、心無いコメントには気持ちが折れてしまいます。杉並区を面白く、BuddyPressを楽しく活用、するスタンスで協働できたらと思います。コミュニケーションは、杉並区おた助に登録いただくか、Twitterでフォローしてください。フォローボタンはページ下部に。

最後まで読んでいただき、ありがとうございました。

14 Comments
  1. […] Compatibility」にて設定。 参考:杉並区おた助「WordPressをSNS化するBuddyPressの導入まとめ」の「BuddyPress-Template-PackでどんなテーマもBP化」 AKPC_IDS += "144,";Popularity: 3% […]

  2. yusuken 7年 ago

    失礼致します。
    BuddyPressについてまとめている記事は、必死に探してもあまり見つからないので、こちらの記事はとても貴重です。
    とてもありがたく思います。

    さて、ただいまWordPress3.0.1、BuddyPress1.2.5.2で試行錯誤しております。
    実験的に、複数のユーザーを登録していますが、ブログの投稿が「活動(Activity)」に反映されません。
    何かいじらなければならないのでしょうか。
    ご教授いただけると幸いです。

    • まちいく 7年 ago

      ダッシュボード>BuddyPress>一般設定で、
      「ブログやフォーラムの投稿へのコメントを活動動向に載せないようにしますか」
      が”はい”になっていませんよね。

      サイト拝見しましたがWP3のネットワーク(マルチブログ)ご利用でしょうか。BPがネットワークに対応しているか私には分かりません。

      コメントありがとうございます。お役にたてれば嬉しいです★

  3. まちいく 7年 ago

    ダッシュボード>BuddyPress>一般設定で、
    「ブログやフォーラムの投稿へのコメントを活動動向に載せないようにしますか」
    が”はい”になっていませんよね。

    サイト拝見しましたがWP3のネットワーク(マルチブログ)ご利用でしょうか。BPがネットワークに対応しているか私には分かりません。

    コメントありがとうございます。お役にたてれば嬉しいです★

  4. 杉並区おた助で一番読まれている記事。WordPressをSNS化するBuddyPressの導入まとめ | 杉並区おた助 http://t.co/1wO8djZ

  5. "WordPressをSNS化するBuddyPressの導入まとめ" (杉並区おた助) http://bit.ly/bhb3jy くどいね。

  6. このページが一番読まれています。 @machiiku WordPressをSNS化するBuddyPressの導入まとめ (杉並区おた助) http://bit.ly/dkAPaH

  7. Kat Amuko 7年 ago

    WordPressをSNS化するBuddyPressの導入まとめ | 杉並区おた助 http://t.co/00IqMyX #wordpress #buddypress

  8. RT @katamuko: WordPressをSNS化するBuddyPressの導入まとめ | 杉並区おた助 http://t.co/00IqMyX #wordpress #buddypress

  9. Yusuke Kobayashi 6年 ago

    WordPressをSNS化するBuddyPressの導入まとめ | 杉並区おた助 http://htn.to/JnbNtM

  10. […] BuddyPress | ちえなび WordPressをSNS化するBuddyPressの導入まとめ | まちいく WordPress […]

  11. yukiyan 1年 ago

    検索でこちらにたどり着きました。
    現在、BuddyPressを用いて会員サイトを制作しているのですがつまづいており、
    参考になるサイトなり構築方法をお教え頂けないかと思いメールいたしました。
    テーマは独自のテーマを利用しています。

    会員ユーザーに記事投稿させて、
    例えばAユーザーの記事ページから
    1)Aユーザーのマイページへのリンク方法
    2)記事ページ下部にAユーザーへのお問い合わせフォーム

    1)の場合は、BuddyPressのテンプレートタグ?を用いて、Aユーザーの値取得でリンクさせれば問題ないと思うのですが、タグはどんなものかが見つけられないでいます。もしくはそんなものはないのかもしれませんが。

    2)の場合、Aユーザー記事ページを拝見した購読者がページ下部に設置した、お問合せフォームから直接連絡取れるようにしたいです。
    そうなったとき、Aユーザーのメールアドレス値取得と、コンタラクトフォームの設定などをしないといけないと思います。

    1)2)とも、投稿ユーザーの値が取得できる方法を、アドバイス頂けないでしょうか。
    よろしくお願いいたします。

    • まちいく 1年 ago

      実は私もテンプレートタグ、PHPはあまり詳しくありません。その前提でお読みください。

      1)2)とも、BuddyPressとは関係なく、複数ユーザーのいるWPブログにて、個別記事(single.php)内で執筆者のIDがとれればいいのかなと思いました。執筆者のID=BuddyPressのID、のはずですから。それでいうと、下記の通りです。
      https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_author_meta

      また独自テーマとのことについて、既存のBuddyPressテーマでよくできているものを探してきて参考にするなども良いかと思いました、あわせてご検討くださいませ。

Leave a reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

©2017 まちいく

Log in with your credentials

Forgot your details?