bbpressの使い方とCSSのデザインカスタマイズ方法
bbpressはWordPressサイトに本格的な掲示板を設置できるプラグインです。
掲示板があると人が集まりやすいですし、サイトが盛り上がること間違いなしです。
以前は英語仕様で使いづらいプラグインでしたが、現在は日本語対応になり簡単に設置運営ができます。
昔であれば制作するのに何十万も掛かっていた掲示板システムが無料で使えるため、導入したいプラグインです。
bbpressはサイト訪問者に書き込みを許可したり、会員登録ユーザーだけに書き込みを許可したりと細かい設定が可能です。
ちなみに同じようなプラグインにbuddypressがあります。両方の違いをおさらいします。
- bbpress・・2chのような掲示板システム。
- BuddyPress・・mixiのようなSNSシステム。
このぺージでは、bbpressのインストール方法や使い方、カスタマイズ方法を紹介します。
目次
掲示板の紹介
bbpressで作ったサンプル掲示板です。完成のイメージが掴めると思います。
以下のURLで公開されています。
美容掲示板：現在サイトは閉鎖されました。
フォーラムに並んでいるのが、掲示板のカテゴリーです。
トピックに並んでいるのが、掲示板の記事部分です。
つまり、２段階に分かれています。
サンプルサイト
bbpressで作成された掲示板サイトです。
サンプルサイト：無料相談ココトモ
インストール方法
１．プラグインの新規追加画面から「bbpress」を検索します。インストールして有効化します。
以前のbbpressは英語対応のため、プラグインを日本語に翻訳する必要がありました。現在のbbpressは日本語化されています。
２．管理画面のサイドバーに「フォーラム」「トピック」「返信」が表示されます。bbpressはこの３つが掲示板を運営するための部分です。
- 「フォーラム」・・掲示板の作成や編集ができます。
- 「トピック」・・トピックの作成や編集ができます。
- 「返信」・・コメントの作成や編集ができます。
フォーラムの設定
サイドバーの「設定」項目にある「フォーラム」を選択すると、bbpressのフォーラム設定ができるようになっています。
bbpressの初期設定やオプション設定が可能です。
フォーラムユーザー設定
編集を無効にするまでの期限
掲示板にコメントした後に、再編集が可能な時間の設定です。
例えば、「５分」に設定したなら、コメントを投稿後に５分以内なら「編集」ボタンが表示されていて、投稿者が編集が可能です。５分を過ぎると「編集」ボタンは消えます。
なお、最小設定時間は「1分」です。
投稿スロットル時間
掲示板にコメントを投稿した後に、連続で投稿できる時間間隔を設定します。連続したスパム投稿を予防できます。初期設定の「10秒」が一般的です。
匿名の投稿
サイトに会員登録していないゲストユーザーにトピック作成とコメント投稿を許可します。
誰でも投稿可能な掲示板にするならチェックを入れます。掲示板に投稿してくれる割合が増えます。但し、掲示板が荒れることもあります。
自動権限グループ
ユーザーがアカウントを作成登録した際に自動的に与える権限を設定します。
項目にチェックを入れた場合の初期設定は「参加者」になっています。
- キーマスター・・全てのフォーラムやトピック、コメントの新規作成や編集ができます。サイト管理者と同等の権限を有します。
- モデレーター・・自分のフォーラムを新規作成や編集ができ、全てのトピックとコメントの新規作成や編集ができます。
- 参加者・・トピックとコメントが投稿できます。
- 観覧者・・観覧のみが可能になります。
- ブロックされています・・全ての機能が制限されます。
モデレーター以上の権限を付与すると編集や削除が可能になり、リスクを伴います。通常は「参加者」か「観覧者」を選択します。
フォーラム機能
リビジョン
トピックとコメントの編集された際に、リビジョン（以前のデータ）を保持するかを指定します。
トピックやコメントを編集前に戻したい場合は便利です。但し、保存データが増えて容量も必要になります。
なお、リビジョンデータを確認や復元する際は各トピックやコメントの編集画面にある「リビジョン」で作業をします。
お気に入り
登録ユーザーが気に入ったトピックをお気に入りに追加できます。追加したお気に入りはプロフィールページで確認できて便利です。
購読
ユーザーが気に入ったフォーラムやトピックを購読できます。
- フォーラムを購読・・フォーラム内にトピックが作成されるとEメールで知らせます。
- トピックを購読・・コメントが投稿されるとEメールで知らせます。
購読しているフォーラムやトピックはプロフィールページで確認できます。
トピックタグ
ユーザーがトピックとコメントを作成・投稿する際に「タグ」が設定できます。
タグを許可するとトピックとコメントを作成・投稿する際にタグの入力欄が表示されます。
タグを作成すると掲示板専用のタグページができます。タグページがあると便利ですが大量にタグが作成されたり、意図せぬタグページも作られることもあります。
検索
掲示板内のフォーラム全体（トピック、コメント）からキーワードを検索できるようになります。
掲示板のフォーラムを開くと検索バーが表示されます。
WordPressサイトのサイドバーなどのウィジェットエリアに表示したい場合は管理画面の「外観」>「ウィジェット」にある「(bbpress) フォーラム用検索フォーム」を使用すると検索バーが表示されます。
投稿の整形
掲示板でトピックやコメントを投稿するテキストエリアにHTMLの整形ツールを表示するか指定します。
自動埋め込みリンク
掲示板のトピックやコメントにメディア（Twitter/YouTube/Flickrなど）のURLが記述された場合に、動画やツイートを呼び出して表示するか指定します。
返信スレッドのルール
コメントの返信に対してスレッド化するか指定します。
スレッド化すると画像のようになります。
1ページに表示するトピック・返信数
トピックや返信（コメント）を1ページ当たり何件表示するかを設定します。
トピック
掲示板のフォーラムで１ページ当りに表示するトピックの最大数です。
返信
掲示板の各トピックで１ページ当りに表示するコメントの最大数です。
RSSページごとのトピック・返信数
フォーラムやトピックのRSSにトピックや返信（コメント）を何件表示するかを設定します。
トピック
掲示板のフォーラムにはRSSがあります。このRSSに何件トピックの数を表示するか指定します。
返信
掲示板の各トピックにはRSSがあります。このRSSに何件コメントの数を表示するか指定します。
フォーラムルートのスラッグ
掲示板のフォーラムのURLに関する設定です。
フォーラムルート
フォーラムのスラッグ（URL）を設定します。デフォルトでは「forums」になっています。
フォーラム接頭辞
bbpress内の全てのURLの先頭にフォーラムルートのスラッグが設定されます。通常は適用したままにします。
フォーラムルートで表示
フォーラムルートのURLで表示する内容を設定します。
「フォーラムインデックス」を選択すると、各掲示板が一覧表示されます。
「新着順トピック」を選択すると、各掲示板で立てられたトピックが新着順に一覧表示されます。
個別フォーラムのスラッグ
トピックやコメントなど各ページのURLを選択します。
フォーラム
各掲示板を表示するページのスラッグ（URL）を設定します。デフォルトでは「forum」になっています。
<例>https://ドメイン/forums/forum/各掲示板のスラッグ（URL）
トピック
各トピックを表示するページのスラッグ（URL）を設定します。デフォルトでは「topic」になっています。
<例>https://ドメイン/forums/topic/各トピックのスラッグ（URL）
トピックタグ
各トピックを表示するページのスラッグ（URL）を設定します。デフォルトでは「topic-tag」になっています。
<例>https://ドメイン/forums/topic-tag/各トピックタグのスラッグ（URL）
トピック表示
トピックを表示するページのスラッグ（URL）を設定します。デフォルトでは「view」になっています。
<例>https://ドメイン/forums/view/各トピック表示のスラッグ（URL）
返信
個別の返信（コメント）を表示するページのスラッグ（URL）を設定します。デフォルトでは「reply」になっています。
<例>https://ドメイン/forums/reply/各トピックのスラッグ（URL）
検索
掲示板の検索フォームで検索した結果が表示されるページのスラッグ（URL）を設定します。デフォルトでは「search」になっています。
<例>https://ドメイン/forums/search/検索キーワード
フォーラムユーザースラッグ
各ユーザーのプロフィールページのスラッグ（URL）を設定します。
フォーラムユーザースラッグ
ユーザーベース
各ユーザーのプロフィールページのURLを設定します。デフォルトは「users」です。
<例>https://ドメイン/forums/users/各ユーザー名
開始したトピック
ユーザーが立てたトピックが一覧表示されるページのスラッグ（URL）を設定します。デフォルトは「topics」です。
<例>https://ドメイン/forums/users/各ユーザー名/topics
返信リスト
ユーザーが投稿した返信（コメント）が一覧表示されるページのスラッグ（URL）を設定します。デフォルトは「replies」です。
<例>https://ドメイン/forums/users/各ユーザー名/replies
お気に入りのトピック
ユーザーがお気に入りに設定したトピックの一覧が表示されるページのスラッグ（URL）を設定します。デフォルトは「favorites」です。
<例>https://ドメイン/forums/users/各ユーザー名/favorites
購読トピック
ユーザーが購読しているトピックの一覧が表示されるページのスラッグ（URL）を設定します。デフォルトは「subscriptions」です。
<例>https://ドメイン/forums/users/各ユーザー名/subscriptions
BuddyPress 連携
SNSが構築できるBuddyPressプラグインとの連携に関する設定です。 なお、BuddyPressを有効化している必要があります。
グループフォーラムを有効化
BuddyPressにはSNSのコミニティーのようなグールプが作成できます。ここで使われるフォーラムをbbpressのフォーラムにするか指定します。
グループフォーラムの親フォーラム
グループ内で作成されたフォーラムの親ページをbbpress のフォーラムの中から決めます。「フォーラムのルート」から指定したいフォーラムを選択します。
Akismet 連携
掲示板のスパムを防止するAkismetプラグインの設定項目です。なお、Akismetを有効化している必要があります。
Akismet を使用
Akismet を使用する場合は適用します。
bbpressのショートコード
bbpressには様々なショートコードが存在します。
ショートコードを使用するとサイトのレイアウトやコンテンツ部分にbbpressのフォーラムやトピックが表示できます。また、フォーラムやトピックなどの一覧表示も可能です。
便利な機能ですので、是非覚えてください。
投稿記事ページや固定ページでショートコードを使用する場合はそのままの形で記述できますが、テンプレート.php内で使用する場合は、以下のようなコードで記述します。
|
1 |
<?php echo do_shortcode('[ショートコードの文字列]'); ?> |
フォーラム
- [bbp-forum-index] – フォーラムのインデックス全体が表示されます。
- [bbp-forum-form] – フォーラムの新規作成ページを表示します。
- [bbp-single-forum id=$forum_id] – 単一のフォーラムトピックを表示します。例えば、[bbp-single-forum id=32]のような使い方です。
トピック
- [bbp-topic-index] – 全てのフォーラムの中から最新の15トピックを一覧表示します。
- [bbp-topic-form] – トピックの新規作成ページを表示します。
- [bbp-topic-form forum_id=$forum_id] – 特定のフォーラムIDの ‘新しいトピックフォーム’を表示します。
- [bbp-single-topic id=$topic_id] – 単一のトピックを表示します。例えば、[bbp-single-topic id=4096]のような使い方です。
返信
- [bbp-reply-form] – 返信（コメント）フォームを表示します。
- [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のカスタマイズ
bbpressのデザインや設計をカスタマイズするためには以下のような.phpファイルを自分で編集する必要があります。
基本的なHTMLやCSS、PHPなどの知識が必要ですが、デザインの幅が広がり、オリジナルのデザイン設計ができるので、詳しい方はカスタマイズしてみてください。
CSSのカスタマイズ
wp-content/plugins/bbpress/bbp-themes/bbp-twentyten/css/bbpress.cssを使用中のテーマ内にコピーして、以下の設定で読み込ませます。後は自分で CSS が編集できます。
|
1 |
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/bbpress.css" /> |
フォーラム部分で使用するテンプレート.php
使用中のテーマ内にplugin-bbpress.phpを作成します。これらbbpressのフォームレイアウトをカスタマイズできるphpです。
- plugin-bbpress.php
- bbpress.php
- forums.php
- forum.php
- generic.php
- page.php
- single.php
- index.php
フォーラムを表示する際は上記のファイルが使用されます。数字は優先順位を表します。
各ページで使用されるファイル
フォーラムやトピックなどの各ページごとにレイアウト等を変えるファイルは「/wp-content/plugins/bbpress/templates/default/extras」にあります。
これらのphpファイルを「使用中のテーマ」内にコピーして編集します。これらのファイルがあった場合は、plugin-bbpress.php などよりも優先で使用されます。
bbpress ディレクトリ内ファイル
フォーラムやトピック、コメントなどの各ページ内で出力される内容を変えるファイルは「/wp-content/plugins/bbpress/templates/default/bbpress」にあります。
これらのphpファイルを「使用中のテーマ/bbpress」内にコピーして編集します。
フォーラム関係
トピック関係
返信関係
入力フォーム関係
ユーザー関係
ページネーション関係
タグ関係
その他
CSSのカスタマイズ
bbpressのデザインは、初期設定の状態で使用するとレスポンシブサイトやスマホなどの表示ではデザインが崩れることもあります。更に、簡素なデザインのためCSSをカスタマイズする方が良いです。
bbpressのCSSは少し複雑なため、1からカスタマイズすると非常に時間が掛かります。そのため、出来上がったCSSのコピペを使用する方が無難かもしれません。
以下の外部サイトの記事では詳しいCSSのデザイン方法が紹介されています。
bbPress forum utility pack
＊以下は、bbPress用のユーザー登録型の会員制掲示板作成プラグインです。
bbPress forum utility pack
bbpressには、「bbPress forum utility pack」といった会員制の掲示板作成プラグインが存在します。
これを使用するとユーザー登録した人だけが、掲示板に書き込みをできるシステムが簡単に実装できます。
ユーザーの新規登録や退会まで自動で行えるため、一度プラグインを設定すれば、後は簡単に運用ができます。
bbpressは誰もが書き込める掲示板も良いですが、ユーザー登録した人だけが書き込める掲示板にしたい場合は、このプラグインを使用すると便利です。