1. TOP
  2. WordPressプラグイン
  3. bbpressの使い方とCSSのデザインカスタマイズ方法

bbpressの使い方とCSSのデザインカスタマイズ方法

bbpressの使い方

bbpressはWordPressサイトに本格的な掲示板を設置できるプラグインです。

掲示板があると人が集まりやすいですし、サイトが盛り上がること間違いなしです。

以前は英語仕様で使いづらいプラグインでしたが、現在は日本語対応になり、簡単に設置運営ができます。

昔であれば制作するのに何十万も掛かっていた掲示板システムが無料で使えるため、導入したいプラグインです。

bbpressは、サイト訪問者に書き込みを許可したり、会員登録ユーザーだけに書き込みを許可したりといった細かい設定が可能です。

ちなみに似たプラグインにbuddypressがあります。両方の違いをおさらいします。

  • bbpress・・2chのような掲示板システム。
  • BuddyPress・・mixiのようなSNSシステム。

このぺージでは、bbpressのインストール方法や使い方、カスタマイズ方法を紹介します。

掲示板の紹介

bbpressで作ったサンプル掲示板です。完成のイメージが掴めると思います。

以下のURLで公開されています。

フォーラムに並んでいるのが、掲示板のカテゴリーです。

bbpressのフォーラム

トピックに並んでいるのが、掲示板の記事部分です。

bbpressのトピック

つまり、2段階に分かれています。

インストール方法

1.プラグインの新規追加画面から「bbpress」を検索します。インストールして有効化します。

bbpressのインストール

以前のbbpressは英語対応のため、プラグインを日本語に翻訳する必要がありました。現在のbbpressは日本語化されています。

2.管理画面のサイドバーに「フォーラム」「トピック」「返信」が表示されます。bbpressはこの3つが掲示板を運営するための部分です。

bbpressのサイドバー

  • 「フォーラム」・・掲示板の作成や編集ができます。
  • 「トピック」・・トピックの作成や編集ができます。
  • 「返信」・・コメントの作成や編集ができます。

フォーラムの設定

サイドバーの「設定」項目にある「フォーラム」を選択すると、bbpressのフォーラム設定ができるようになっています。

bbpressのフォーラムの設定

bbpressの初期設定やオプション設定が可能です。

フォーラムユーザー設定

編集を無効にするまでの期限

掲示板にコメントした後に、再編集が可能な時間の設定です。

例えば、「5分」に設定したなら、コメントを投稿後に5分以内なら「編集」ボタンが表示されていて、投稿者が編集が可能です。5分を過ぎると「編集」ボタンは消えます。

なお、最小設定時間は「1分」です。

投稿スロットル時間

掲示板にコメントを投稿した後に、連続で投稿できる時間間隔を設定します。連続したスパム投稿を予防できます。初期設定の「10秒」が一般的です。

匿名の投稿

サイトに会員登録していないゲストユーザーにトピック作成とコメント投稿を許可します。

誰でも投稿可能な掲示板にするならチェックを入れます。掲示板に投稿してくれる割合が増えます。但し、掲示板が荒れることもあります。

自動権限グループ

ユーザーがアカウントを作成登録した際に自動的に与える権限を設定します。

項目にチェックを入れた場合の初期設定は「参加者」になっています。

  • キーマスター・・全てのフォーラムやトピック、コメントの新規作成や編集ができます。
  • モデレーター・・全てのトピックとコメントの新規作成や編集ができます。
  • 参加者・・トピックとコメントが投稿できます。
  • 観覧者・・観覧のみが可能になります。
  • ブロックされています・・全ての機能が制限されます。

キーマスター以上の権限を付与すると編集や削除が可能になり、リスクを伴います。通常は「参加者」を選択します。

フォーラム機能

リビジョン

トピックとコメントの編集された際に、リビジョン(以前のデータ)を保持するかを指定します。

トピックやコメントを編集前に戻したい場合は便利です。但し、保存データが増えて容量も必要になります。

なお、リビジョンデータを確認や復元する際は各トピックやコメントの編集画面にある「リビジョン」で作業をします。

お気に入り

登録ユーザーが気に入ったトピックをお気に入りに追加できます。追加したお気に入りはプロフィールページで確認できて便利です。

購読

ユーザーが気に入ったフォーラムやトピックを購読できます。

  • フォーラムを購読・・フォーラム内にトピックが作成されるとEメールで知らせます。
  • トピックを購読・・コメントが投稿されるとEメールで知らせます。

購読しているフォーラムやトピックはプロフィールページで確認できます。

トピックタグ

ユーザーがトピックとコメントを作成・投稿する際に「タグ」が設定できます。

タグを許可するとトピックとコメントを作成・投稿する際にタグの入力欄が表示されます。

タグを入力するフォーム

タグを作成すると掲示板専用のタグページができます。タグページがあると便利ですが大量にタグが作成されたり、意図せぬタグページも作られることもあります。

検索

掲示板内のフォーラム全体(トピック、コメント)からキーワードを検索できるようになります。

掲示板のフォーラムを開くと検索バーが表示されます。

検索バーでコメントやトピックを検索する

WordPressサイトのサイドバーなどのウィジェットエリアに表示したい場合は管理画面の「外観」>「ウィジェット」にある「(bbpress) フォーラム用検索フォーム」を使用すると検索バーが表示されます。

投稿の整形

掲示板でトピックやコメントを投稿するテキストエリアにHTMLの整形ツールを表示するか指定します。

HTMLの挿入に便利な機能

自動埋め込みリンク

掲示板のトピックやコメントにメディア(Twitter/YouTube/Flickrなど)のURLが記述された場合に、動画やツイートを呼び出して表示するか指定します。

返信スレッドのルール

コメントの返信に対してスレッド化するか指定します。

スレッド化すると画像のようになります。

掲示板をスレッド化した場合の見え方

1ページに表示するトピック・返信数

トピック

掲示板のフォーラムで1ページ当りに表示するトピックの最大数です。

返信

掲示板の各トピックで1ページ当りに表示するコメントの最大数です。

RSSページごとのトピック・返信数

トピック

掲示板のフォーラムにはRSSがあります。このRSSに表示するトピックの数を指定します。

返信

掲示板の各トピックにはRSSがあります。このRSSに表示するコメントの数を指定します。

更に、詳しい設定方法は以下の外部サイト記事で紹介されています。

bbpressのショートコード

bbpressには様々なショートコードが存在します。

ショートコードを使用するとサイトのレイアウトやコンテンツ部分にbbpressのフォーラムやトピックが表示できます。

また、フォーラムやトピックなどが一覧も表示することも可能です。

便利な機能ですので、是非覚えといて損はありません。

テーマ内ではショートコードを使用する場合は、以下のようなコードで記述します。

フォーラム

  • [bbp-forum-index] – フォーラムのインデックス全体が表示されます。
  • [bbp-forum-form] – ‘New Forum’フォームを表示します。
  • [bbp-single-forum id = $ forum_id] – 単一のフォーラムトピックを表示します。例えば。[bbp-single-forum id = 32]

トピック

  • [bbp-topic-index] – あなたのすべてのフォーラムで最新の15のトピックをページネーションで表示します。
  • [bbp-topic-form] – このトピックを関連付けるフォーラムをドロップダウンメニューから選択できる ‘New Topic’フォームを表示します。
  • [bbp-topic-form forum_id = $ forum_id] – 特定のフォーラムIDの ‘新しいトピックフォーム’を表示します。
  • [bbp-single-topic id = $ topic_id] – 単一のトピックを表示します。例えば、[bbp-single-topic id = 4096]

返信

  • [bbp-reply-form] – ‘New Reply’フォームを表示します。
  • [bbp-single-reply id = $ reply_id] – 単一の返信を表示します。例えば、[bbp-single-reply id = 32768]

トピックタグ

  • [bbp-topic-tags] – すべてのトピックタグのタグクラウドを表示します。
  • [bbp-single-tag id = $ tag_id] – 特定のタグに関連付けられているすべてのトピックのリストを表示します。例えば、[bbp-single-tag id = 64]

ビュー

  • [bbp-single-view] – シングルビュー – 特定のビューに関連するトピックを表示します。bbPressで現在表示されている「ビュー」は「人気」
  • [bbp-single-view id = ‘popular]’と「No Replies」です。例えば、[bbp-single-view id = ‘no-replies’]

サーチ

  • [bbp-search] – 検索入力フォームを表示します。
  • [bbp-search-form] – 検索フォームテンプレートを表示します。

アカウント

  • [bbp-login] – ログイン画面を表示します。
  • [bbp-register] – 登録画面を表示します。
  • [bbp-lost-pass] – パスワードを忘れた場合の画面を表示します。

統計

  • [bbp-stats] – フォーラムの統計情報を表示します。

*まだ実装されておらず、将来のリリース予定です。

bbpressのカスタマイズ

bbpressのデザインや設計をカスタマイズするためには以下のような.phpファイルを自分で編集する必要があります。

基本的なHTMLやCSS、PHPなどの知識が必要ですが、デザインの幅が広がり、オリジナルのデザイン設計ができるので、詳しい方はカスタマイズしてみてください。

  1. 使用中のテーマ内にplugin-bbpress.phpを作成します。これらbbpressのフォームレイアウトをカスタマイズできるphpです。
  2. wp-content/plugins/bbpress/bbp-themes/bbp-twentyten/css/bbpress.cssを使用中のテーマ内にコピーして、以下の設定で読み込ませます。
    後は自分で CSS が編集できます。

フォーラムで使用されるファイル

  1. plugin-bbpress.php
  2. bbpress.php
  3. forums.php
  4. forum.php
  5. generic.php
  6. page.php
  7. single.php
  8. index.php

フォーラムを表示する際は上記のファイルが使用されます。数字は優先順位を表します。

各ページで使用されるファイル

フォーラムやトピックなどの各ページ毎にレイアウト等を変えるファイルは、「/wp-content/plugins/bbpress/templates/default/extras」にあります。

これらのphpファイルを「使用中のテーマ」内にコピーして編集します。これらのファイルがあった場合は、plugin-bbpress.php などよりも優先で使用されます。

bbpressのフォーラム各種ファイル
bbpressのトピック各種ファイル
bbpressのトピックタグファイル

bbpress ディレクトリ内ファイル

フォーラムやトピック、コメントなどの各ページ内で出力される内容を変えるファイルは、「/wp-content/plugins/bbpress/templates/default/bbpress」にあります。

これらのphpファイルを「使用中のテーマ/bbpress」内にコピーして編集します。

フォーラム関係

bbpressのフォーラム関係のファイル

トピック関係

bbpressのトピック関係のファイル

返信関係

bbpressの返信関係のファイル

入力フォーム関係

bbpressの入力フォーム関係のファイル
bbpressの入力フォーム関係のファイル2

ユーザー関係

bbpressのユーザー関係のファイル

ページネーション関係

bbpressのページネーション関係のファイル

タグ関係

bbpressのタグ関係のファイル

その他

bbpressのその他のファイル

CSSのカスタマイズ

bbpressのデザインは、初期設定の状態で使用するとレスポンシブサイトやスマホなどの表示ではデザインが崩れることもあります。更に、簡素なデザインのためCSSをカスタマイズする方が良いです。

bbpressのCSSは少し複雑なため、1からカスタマイズすると非常に時間が掛かります。そのため、出来上がったCSSのコピペを使用する方が無難かもしれません。

以下の外部サイトの記事では詳しいCSSのデザイン方法が紹介されています。

bbPress forum utility pack

*以下は、bbPress用のユーザー登録型の会員制掲示板作成プラグインです。

bbPress-forum-utility-pack

bbPress forum utility pack

bbPress forum utility pack

bbpressには、「bbPress forum utility pack」といった会員制の掲示板作成プラグインが存在します。

これを使用するとユーザー登録した人だけが、掲示板に書き込みをできるシステムが簡単に実装できます。

ユーザーの新規登録や退会まで自動で行えるため、一度プラグインを設定すれば、後は簡単に運用ができます。

bbpressは誰もが書き込める掲示板も良いですが、ユーザー登録した人だけが書き込める掲示板にしたい場合は、このプラグインを使用すると便利です。