[WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

こんにちは、@cappeeです。

最近コミュニティ系のサイト制作を依頼されることが多くなってきました。プラスSNSにあるような友達機能も今では必須ですよね。

そんなわがままをWordpressで簡単に叶えてくれるのが「BuddyPress」というプラグインです。とにかく使える機能がすごいです。

今「BuddyPress」を使ってコミュニティサイトを構築中なのですが、インストールの手順や使い方を探していると結構情報が古くなっていて色んな記事を横断したり自分で四苦八苦したので、「BuddyPress」の使い方をメモしておきたいと思います。

WordPressのインストールに関してはこちらを参考にしてください。
【初心者向け】WordPressを使ってゼロから1時間でブログを公開する方法

BuddyPressとは

BuddyPressとは、SNS(ソーシャルネットワーキングサービス)やコミュニティサイトを簡単につくることのできるWordpressのプラグインです。こちらがBuddyPressの公式サイト(英語)になります。

設定画面から機能を拝借すると、下記のようなことが可能で、ユーザーをフォローしたり、メッセージのやり取りをしたり、グループを作成してトピックをたてられたりとプラグインとは思えないほどの便利機能を盛り込んでいます。

一見は百聞に如かず、デモサイトもつくったので手っ取り早く確認したい方はこちらをご覧ください。ご自由に書き込んで使ってみてください。(※適さない発言があった場合は削除する可能性があります)

 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

Cappee BuddyPress デモサイト

拡張プロフィール
ユーザーが自己紹介できる編集可能なプロフィール欄を使って、コミュニティをカスタマイズしましょう。

アカウント設定
ユーザーがプロフィールから直接アカウントや通知設定を編集できるようにします。

友達関係
ユーザーがお互い友だちになり、気になっている人の活動を集中してフォローできるようにします。

プライベートメッセージ
ユーザー同士が直接、非公開で話すことができるようになります。一対一の話し合いだけではなく、メッセージは複数メンバー間でも送信できます。

活動動向
完全な RSS フィードとメール通知に対応した、スレッド形式コメント付きの全体・個人・グループアクティビティストリーム、直接投稿、お気に入り機能、@ 返信。

ユーザーグループ
グループを使うことで、アクティビティストリームやメンバー一覧とは別の、メンバー同士が話し合える公開または非公開の場を設定できます。

ディスカッションフォーラム
サイト全体およびグループで bbPress ベースのフォーラムを使うと、集中的な掲示板スタイルの会話が可能になります。

サイトトラッキング
サイトの新しい記事とコメントを記録します。

BuddyPressのインストール

47a91ca1e7865977c856078b448bd2d9 1024x196 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法
Wordpressの管理画面を開き、[プラグイン]→[新規追加]から「BuddyPress」を検索して、「いますぐインストール」後、「プラグインを有効化」してください。

有効化するとプラグインページが開くと思いますが、BuddyPress の Settings を押すと「このページにアクセスするための十分なアクセス権がありません。」と表示されてしまいます。すごい焦ってパーミッションとか確認もしたんですがこの画面は初期設定をまずしないと表示されないようです。非常に紛らわしい文章ですね。。

ちなみに今回インストールしたバージョンは1.6.4です。

BuddyPressの初期設定

初期設定の画面はなんと「ダッシュボード」に隠れています。(こりゃ見つけられないですよね。。)
「BuddyPress Setup」画面を開いてください。

1. Components

eec480eb15802f6cacaa3014e23be348 1024x602 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

どの機能を導入するかを選択できます。設定はあとで変更できるのでとりあえず「Save & Next」を押して次に進みます。

2. Pages

dc705df52a9c34540e2c8dbf72c02b1a [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

メンバーページやグループページを決められたURLで自動生成する場合(一番楽です)は「Automatically create a page at: http://xxx/xxx/」にチェックを入れます。

URLを変えたい場合は「固定ページ」でページを作成して「スラッグ」にURLで表示する名前を入れてから、また初期設定を行なってください。

※下でご紹介する「BuddyPressの日本語化」を初期設定の前に対応してしまってもいいのですが、2. Pages でURLも日本語化されてしまうため、あとで固定ページからスラッグを変更する必要があります。

3. Permalinks

c8d02badc19c0037d7454ba0d5baece4 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

パーマリンク(記事を投稿した場合のURL)の設定を行います。カスタムにしたい場合はあとで[設定]→[パーマリンク設定]から変更できます。

4. Theme

41b7a9d8da9052c4a31f907fdcfafa7e [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

サイトのテーマを選択します。デフォルトのデザインを使うか、デフォルトのデザインからCSSでカスタマイズする場合は「Yes, please!」にチェックしてください。

既存のテーマをBuddyPressに対応させたい場合は、「Install BuddyPress Template Pack」をクリックして別途プラグインをインストールします。
既存のテーマを使う場合、後ほど説明するテンプレート用の設定を行うと、デフォルトのテーマファイルが既存テーマのフォルダにコピーされるため、新しく追加されたファイルの調整が必要になります。
HTMLとCSSの知識がないと難しいかと思いますのでご注意ください。

5. Finish

「Finish & Activate」をクリックして初期設定は完了です!
完了するとダッシュボードからリンクがなくなり、今後は設定画面から行うことになります。(完了するとその設定画面が開きます)

現時点でのユーザー画面を確認してみましょう。

003677877b8335801727600cff1ac47f 1024x646 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

無事に表示されましたか?次からは細かい設定に移ります:)

BuddyPressの日本語化

現状だと管理画面がすべて英語表記なのでBuddyPressの日本語化を行います。

61a275bb269bb8fc671f81f6abf9a270 1024x836 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

GlotPressのBuddyPressページから「Active」と表示されている数字でかかれた最新バージョンをクリックし、次に言語の一覧から「Japanese」を選択すると上記のような画面が表示されます。
(ちなみに現時点での日本語対応率は97%でした)

画面一番下のプルダウンから「.mo」を選択し、「Export」をクリックして日本語化ファイルをダウンロードします。
ファイル名を「buddypress-ja.mo」に変更し、下記の場所へアップロードしてください。

/wp-content/languages

BuddyPressの設定画面をリロードして日本語で表示されたら成功です!

ちなみに上記 languages フォルダには同じファイル名で「.po」ファイルと「.mo」ファイルがあると思います。
2つの違いは下記になり、用意されたファイルを使って日本語化するだけなら「.mo」のみアップすれば問題ないはずです。

  • 「.po」ファイル … 人が編集できる言語のファイル
  • 「.mo」ファイル … プログラム側で読み込める言語のファイル(.poから.moファイルに変換して使用します)

BuddyPressの詳細設定

日本語化が完了したら改めて管理画面の[設定]→[BuddyPress]よりBuddyPressの設定画面を開きます。

コンポーネント

2bb5e6f412cd021602e44ea60db97adf 1024x494 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

コンポーネントタブではBuddyPressで使える機能一覧が表示されているので、必要のない機能はチェックをはずしてください。

固定ページ

bf41050a0d19eba4383eed22a38f48eb [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

固定ページタブでは、初期設定の「2. Pages」で自動生成または設定したページが表示されていると思います。

e0981cea35924d0c695b710a74839a32 1024x481 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

このままだとメニューの名前が英語表記のままなので、管理画面左メニューの[固定ページ]→各ページの[クイック編集]でページタイトルを修正しておきましょう。

設定

5474be2920f3d0a138b10589c6bc7c9a [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

設定タブではコンポーネントで有効にした機能の詳細設定ができますので、必要なものにチェックを入れます。

フォーラム

03f55fbd1d48d31e279b6a09b9fe86ee 1024x425 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

フォーラムを設置すると掲示板のようにトピックをたてることが可能になり、グルーム毎にフォーラムを使えるようにするか、サイト全体でフォーラムを使うかを選ぶことができます。

「グループとサイト全体のフォーラムの両方を有効化できますが、メンバーには使いづらくなってしまうこともあるかもしれません。」という注意書きもあるのでどちらかを選んだほうがよさそうです。
デモで両方インストールしてみたんですがグループを選択しないと投稿できなかったりして改善できませんでした。どなたか教えてくださいm(_ _)m

グループフォーラムをインストール

グループフォーラムを作成する場合は「グループフォーラムをインストール」ボタンを押し、次画面の「インストール完了」ボタンをクリックすればOKです。

フォーラムの機能は掲示板がつくれるプラグイン「bbPress」を使っており、すでにプラグインをインストールしている場合は「既存のインストールを使用」ボタンを押してください。
WordPressのフォーラムサイトも「bbPress」プラグインを使ってつくられているそうですよ。)

29668c78111c9cd0e129437aa4601898 1024x384 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

ユーザー画面より「フォーラム」というメニューが追加されているのを確認してください。

サイト全体のフォーラム

グループに依存しないサイト全体のフォーラムを作成する場合は「サイト全体フォーラムの導入」をクリックし、次画面にでる「The bbPress Community」プラグインをインストールして有効化してください。

「Welcome to bbPress」というページが表示されるので、一番下の「Go to Forum Settings」をクリック。フォーラムの細かい設定ができます。

4e540e10da78a25f67b2de371c212eed 194x300 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

日本語化する場合は上記と同じくGlotPressから.moファイルをダウンロードすることが可能です。(現時点での翻訳率は68%)

設置する場所は異なるので注意してください。下記のプラグインフォルダに置きアップロードします。

/wp-content/plugins/bbpress/languages

グループの作成

現段階で「トピックの作成」をしようとしてもグループがまだないためトピックをつくることができませんので、まずグループを作成してみたいと思います。

ユーザー画面のグループページを開き、「グループ作成」ボタンをクリックします。

1.説明

cb21329c0ed8499668fb859ef6ba37df [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

グループ名と説明を入力し、「グループを作成して続行」ボタンを押して次に進みます。

2.設定

b1bf99f96d62a8a7aaf41e3ef8c08f7d [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

公開設定と招待設定をし、ここでグループのフォーラム作成を有効化するか選択します。

3.アバター

8d0179fff078db5bc214c10edb28c221 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

何のグループか一目でわかるような画像を設定します。「ファイルを選択」から画像を選択し、「画像をアップロード」ボタンをクリックします。

ed38796f7b5fc77e48ec59fd591a567c [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

ここが嬉しい機能。画像を自分で正方形にトリミングすることができますので、ドラックして位置を調整したら「画像切り抜き」ボタンで次に進みます。

4.招待

c644f2ceab5406adeb821021e811b40e [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

友達がいれば、グループに招待することもできます。

最後に「完了」ボタンを押してグループの作成は終了です。

トピックの作成

ab1497cc1eb8136f1f663804e3ce679e 300x226 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

フォーラムのトピックを作成するには、[グループ]→該当のグループ名を選択→[トピックの作成]か、[フォーラム]→[トピックの作成]から可能です。

サイドバーのウィジェット

95848c5bea5d05f4c8432111224e3c8c 300x200 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

サイドバーにグループ一覧やフォーラムを表示できるウィジェットが追加されていますので必要なものを右にドラッグしてください。

活動の管理

d533d42b2dc0aa9a87ea35de04a8b114 300x151 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

ユーザーの新規登録や友達申請、またはグループやフォーラムで投稿された内容などの活動状況は管理画面左にある[活動]メニューから管理出来ます。

既存のテーマを利用する

既存のテーマをBP化(BuddyPressに最適化)して利用する場合、上記初期設定の「4. Theme」で記述した「BuddyPress Template Pack」プラグインが必要になります。

デフォルトのテーマにあるファイル(/wp-content/plugins/buddypress/bp-themes/bp-default)が既存テーマのフォルダにコピーされるため、新しく追加されたファイルの調整が必要になるのでHTMLとCSSの知識がないと難しくなりますのでご注意ください。

プラグインをインストールしたらまずは[外観]→[テーマ]から使用したいテーマを有効化してください。

そのあと[外観]→[BP Compatibility]を開いて一番下に表示されているボタンをクリックして進むとBP用のテーマファイルが作成されます。

一番最後の画面に表示される「Disable BP Template Pack CSS」と「Disable BP Template Pack JS / AJAX」はチェックしなくても大丈夫です。

be3783098668f7ca6255c1a03ff6ab54 300x197 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

「Twenty Twelve」のテーマでBP化した場合は上記のようになり、この作業はテーマを変更する度に設定する必要があります。

ホームの表示を変更

デモサイトの用にグループやアクティビティなど上記で作成したページをホームに設定したい場合は、[設定]→[表示設定]→[フロントページの表示]から可能です。

607647c0cfb72efdb7a30fac01482a4b 300x95 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

「固定ページ」にチェックし、「フロントページ」から表示したいページタイトルを選択してください。

BuddyPress デモサイト

ぜひこちらのデモサイトで使い勝手など確認してみてください。ご自由に使っていただいて大丈夫です。(※適さない発言があった場合は削除する可能性があります)

 [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

Cappee BuddyPress デモサイト

「BuddyPress」プラグインに関する基本的な設定方法は以上です。間違っている箇所があったらお気軽にコメントくださいm(_ _)m

タイトルに「簡単」と入れたましたが、1から実装することを考えれば簡単便利なプラグインと言えますが、機能が充実している分設定は複雑になっていますね。

これからさらにカスタマイズしていく予定ですので、デザインのカスタマイズやBuddyPressの拡張プラグインについても今後ご紹介していこうと思います。

Pocket
article clipper [WordPress]簡単にコミュニティサイトやSNSがつくれるプラグイン「BuddyPress」の設定方法

[WordPress] ページ内の目次を自動でつくるプラグイン「Table of Contents Plus」の設定方法

こんばんは、@cappeeです。

最近長い記事も多くなってきたので、ページ内の目次を自動生成してくれるプラグインを導入する時期がきたかなと。

ちょっと前までは「Table of Contents Generator」というプラグインを導入していました。下記などを参考にプラグインを入れた後は問題なく表示されたんですが、すぐにアップデートのアラートがでて、アップデートするとなぜか目次が消えてしまいました。。しばらくアップデートせず初期のまま表示していたんですが、やっぱりアラートが気になる。。
ページ内目次を生成するTable of Contents Generator WordPress pluginを導入

ので、別の目次プラグインを探していたところ、ちょうどいつも拝見してるかちびと.netで「Table of Contents Plus」が紹介されていたので導入してみました。いい感じだったので設定方法など書いておきます。

少しカスタマイズしてますが、こんな感じで目次が表示されますよ。

「Table of Contents Plus」プラグインの設定方法

「Table of Contents Plus」プラグインをインストール

WordPressの管理画面で、プラグインの「新規追加」から「Table of Contents Plus」を検索してインストール、有効化します。

設定ページを開く

「インストール済みプラグイン」の「Settings」か、「設定」の「TOC+」リンクから設定ページを開きます。

プラグインの設定

現時点での私の設定はこんな感じです。カスタマイズしなくても5種類のデザインから選択できるのは嬉しいですね!

TOC Cappee Design WordPress1 [WordPress] ページ内の目次を自動でつくるプラグイン「Table of Contents Plus」の設定方法

  • Position … 目次を掲載する位置。「Before first heading (default)」は最初の見出しの前に掲載
  • Show when … いくつ見出しがあれば目次を自動表示するか
  • Auto insert for the following content types … 目次を表示するページの種類(ブログは「post」をチェック)
  • Heading text … 目次エリアの見出し
  • Allow the user to toggle the visibility of the table of contents …目次をユーザーが隠せるかどうか
  • Show hierarchy … h2,h3の見出しの階層を表示するか
  • Number list items … リストの左にある数字を表示するか
  • Enable smooth scroll effect … 目次のリンクをクリックした時に滑らかなスクロールで移動するか
  • Width … 目次枠の幅
  • Wrapping … 目次を左に表示するか、右に表示するか
  • Font size … フォントの大きさ
  • Presentation … 目次のデザイン。カスタムにするとボーターや背景、見出し文字色、リンク色などを選択できます

設定が完了したら「Update Options」ボタンを押して目次が表示されているか確認します。

また、目次の掲載位置を記事ごと好きな場所に設定したい場合は、投稿画面の「テキスト」タブをクリックし、下記のように記述すれば表示されます。(プラグインの方で位置を設定していても、この記述の位置が優先されます)

<!--TOC-->

残念ながら記事の一覧ページには目次は表示されないようです。(設定ご存知の方いたら教えてください><)

目次をさらにカスタマイズ

以上でも十分なくらいですが、個人的に細かいところをプラグインのphpファイルとCSSを変更してさらにカスタマイズしました。

wp-content/plugins/table-of-contents-plus/toc.php
wp-content/plugins/table-of-contents-plus/screen.css

ulタグをolタグに変更
目次のリストには数字を表示しており、順序のあるリストとなっているので、ulタグではなくolタグに変更しました。
ソースコード内を「ul」で検索してphpファイルとcssファイルを置換します。

リストの数字はリンクさせない
デフォルトだと数字にもリンクが貼られているので、細かいですがSEOを考慮して文字だけにリンクさせました。
「Table of Contents Plus」の設定画面で「Number list items」にチェックをしてください。(チェックしないとリンクが消えてしまいます。)

toc.phpファイルは下記のように変更するときっと同じように表示されると思います。(バージョン 1211 1303.1 現在)
プラグインの書き換えは自己責任で、必ずバックアップをとってから編集するようにお願いします。

// list item 部分を書き換える
<a href=”#’ . $this->url_anchor_target( $matches[$i][0] ) . ‘”>を</span>の後ろに移動します。

// list item
if ( in_array($matches[$i][2], $this->options['heading_levels']) ) {
if ( $this->options['ordered_list'] ) {
// attach leading numbers when lower in hierarchy
$html .= '<span class="toc_number toc_depth_' . ($current_depth - $numbered_items_min + 1) . '">';
for ($j = $numbered_items_min; $j < $current_depth; $j++) {
$number = ($numbered_items[$j]) ? $numbered_items[$j] : 0;
$html .= $number . '.';
}
$html .= ($numbered_items[$current_depth] + 1) . '</span>
<a href="#' . $this->url_anchor_target( $matches[$i][0] ) . '">';
$numbered_items[$current_depth]++;
}
$html .= strip_tags($matches[$i][0]) . '</a>';
}

// assemble flat list 部分を書き換える
<a href=”#’ . $anchor . ‘”>をcount($replace)の後ろに移動します。

// assemble flat list
if ( !$this->options['show_heirarchy'] ) {
$items .= '<li>';
if ( $this->options['ordered_list'] ) $items .= count($replace) . '<a href="#' . $anchor . '">';
$items .= strip_tags($matches[$i][0]) . '</a></li>';
}

目次があると最初に記事全体をざっくり把握できるので読み手は効率的に読むことができるのでいいですよね。
長い記事の場合はマストです。

 

Pocket
article clipper [WordPress] ページ内の目次を自動でつくるプラグイン「Table of Contents Plus」の設定方法

[WordPress] jQuery Colorbox が動かないのは Head Cleaner の設定が原因

こんにちは、@cappeeです。

WordPress3.5にバージョンアップしてプラグインも色々と追加していたところ、「jQuery Colorbox」プラグインが動かないことに気が付きました…。

もしかしてjavascriptかなと思い関連がありそうだった「Head Cleaner」プラグインを疑う。検索したところ動作しなくなったという声もあり、設定を何回か試して動作を確認してみました。

今回は「jQuery Colorbox」が問題なく動作する「Head Cleaner」の設定方法をご紹介します。他のプラグインでもjavascript関連の不具合はまず「Head Cleaner」を疑ったほうがよさそうですね。試しに一旦「停止」して試してみましょう。

「jQuery Colorbox」が動作する「Head Cleaner」の設定方法

下記の赤枠のチェックボックスを外してください。ただし、その分表示速度の改善率は低くなるのでどちらを優先するかですね。

ちなみに、元々は適切な「Head Cleaner」の設定方法を調べた時にチェックすべき項目として、下記のチェックされた項目+赤字の項目をチェックするようにという記事が多かったです。

head cleaner [WordPress] jQuery Colorbox が動かないのは Head Cleaner の設定が原因

別の方法として「jQuery Colorbox」プラグインのバージョンを3.8.3にダウングレードすると問題なく動作するという記事もありましたが、その方のWordPressのバージョンが書かれてないしリスクも大きいので今回はやめておきます。

WordPressプラグインってどうやってダウングレードするんだろう、と気になったので調べてみました。こちらが参考になります。

WordPressプラグインをダウングレードさせる方法(古いバージョンをダウンロードする方法)

 

Pocket
article clipper [WordPress] jQuery Colorbox が動かないのは Head Cleaner の設定が原因