WordPressをSNS化できるBuddyPressのカスタマイズ方法

公開日

WordPressで、FacebookやTwitterのようなSNSを作ることができる、BuddyPressというプラグインがあります。

WordPressの公式テーマディレクトリでは、テーマがBuddyPressに対応しているか絞り込めるようになっており、WordPressをSNS化する定番プラグインとなっています。

このBuddyPressをカスタマイズする際、カスタマイズ方法に関する情報が少なかったり、情報が古かったりして、非常に手間取ったので、その方法をご紹介します。

まずは、WordPressにBuddyPressをインストールし有効化します。

すると、「アクティビティ」「グループ」「メンバー」という3つの固定ページが作られ、これらのページがSNSのように機能します。

BuddyPressのデザインを独自のデザインにする

「アクティビティ」「グループ」「メンバー」のコンテンツ部分には、BuddyPress独自のデザインが適用されます。ウェブサイトのデザインにマッチするなら問題はありませんが、マッチしない場合が大半だと思います。

そこで、BuddyPressのデザインを設定しているCSSファイルを読み込ませないようにします。

BuddyPressのテンプレートは2種類あり、インストール時のデフォルト設定により「BuddyPress Nouveau」が適用されます。

この「BuddyPress Nouveau」のスタイルを読み込ませないようにするため、WordPressで有効化しているテーマのfunctions.phpに次のようなコードを追加します。

add_action( 'wp_enqueue_scripts', 'my_bp_dequeue_scripts', 11 );
function my_bp_dequeue_scripts() {
  wp_dequeue_style( 'bp-nouveau' );
}

あとは、有効化しているテーマのCSSファイルに、BuddyPress用のスタイルを追加していけば、独自デザインのSNSに仕上げられます。

ちなみに、読み込ませないようにしたCSSファイルは「/wp-content/plugins/buddypress/bp-templates/bp-nouveau/css/buddypress.css」になります。

また、このCSSファイルの生成に使用されたSCSSファイルが「/wp-content/plugins/buddypress/bp-templates/bp-nouveau/common-styles/」というディレクトリに入っています。

独自にスタイルを設定する際の参考にするといいでしょう。

BuddyPressのテンプレートをカスタマイズする

CSSだけで、思い通りの仕上がりになればいいのですが、多くの場合、HTML側にも手を加える必要が出てくると思います。

WordPressのテーマに親テーマと子テーマという概念があるように、BuddyPressのテンプレートにも親テンプレートと子テンプレートという概念があります。

WordPressで有効化しているテーマに「buddypress」というディレクトリを作り、そこに上書きしたいテンプレートを作成すると、それが子テンプレートとなって、優先的に使用されます。

「BuddyPress Nouveau」の各種テンプレートは「/wp-content/plugins/buddypress/bp-templates/bp-nouveau/buddypress/」というディレクトリに入っています。

例えば、その中の「/wp-content/plugins/buddypress/bp-templates/bp-nouveau/buddypress/activity/index.php」をカスタマイズしたい場合は、「/wp-content/themes/my-theme/buddypress/activity/index.php」を作って編集していきます (「/my-theme/」の部分はお使いのテーマ名に読み替えてください)。

テンプレートをカスタマイズする際の注意点

「BuddyPress Nouveau」は、色々な所にJavaScriptのイベントが設定されています。そのため、不用意に要素 (タグ) を削除したり、id属性値やclass属性値を変更したりすると、正常に動作しなくなる可能性があります。

そういった理由から、カスタマイズは、要素やclass属性値を追加していくようにするといいでしょう。

テンプレートをカスタマイズする際の参考

BuddyPressにはWordPressと同様に多くのテンプレートタグが用意されています。また「BuddyPress Nouveau」には、専用のテンプレートタグ (多くはBuddyPressテンプレートタグのラッパー関数) が用意されており、その数は膨大です。

どのテンプレートタグがどのような出力を行うかを調べるのには「Functions | BuddyBoss Resources」が役立つと思います。

〆

正直、BuddyPressのカスタマイズは容易ではありません。

「BuddyPress Nouveau」の各種テンプレートは100近くあり、そのコードはお世辞にも洗練されているとは言えません。

ただ、BuddyPressが持つ各種機能は有用で、魅力的ではあるので、頑張ってカスタマイズしてみてはいかがでしょうか？

関連記事