WordPressで運営しているWebサイト内に、簡単に掲示板を設置できるプラグイン「bbPress」をご紹介します。

「bbPress」をインストールする方法

  1. WordPressの管理画面から左サイドバーにある「プラグイン」より「新規追加」をクリック
  2. 画面右上にある薄い文字で「プラグインの検索」と見える入力ボックスに「bbPress」を入力かコピペしてリターンを押す
  3. 画面左上に「bbPress」が表示されているはずなので、「今すぐインストール」をクリック
  4. 画面が切り替わったら「プラグインを有効化」をクリックして完了

日本語化は特に必要ない

「bbPress」についてネットで調べていたら、「bbPressを日本語化する」というような記載が多いのですが、インストール後、特に何もすることなく、日本語で表示されています

「bbPress」の古いバージョンでは日本語化が必要ということで、現在は日本語化をしなくてもすぐに利用できます。

「bbPress」の設定事例

当サイトに「bbPress」で掲示板を設置した事例をご紹介します。

誰でも投稿できるようにする

今回の掲示板はユーザーを限定せず、広く使えるようにしたいので、特別アカウントを取得していなくても、誰でも書き込めるように設定します。

設定方法

  • WordPressの管理画面、左サイドバーにある「設定」から「フォーラム」をクリック
  • 「フォーラムの設定」画面に遷移後、「フォーラムユーザー設定」から「匿名の投稿」で「アカウントを持たないゲストユーザのトピック作成と返信を許可」にチェックを入れる
  • 画面一番下の「変更を保存」ボタンをクリックして完了

なお、「匿名の投稿」の下にある「自動権限」はプルダウンから「観客」に設定しています。今後の運用状況を見ながら変更を検討しています。

掲示板のURLを変更

「bbPress」をインストール後、デフォルトの掲示板のURLは「ドメイン/forums」となっていますが、「forums」の部分を好みで変更できます。

今回の場合は「http://webdesigner.fans-web.net/bbs/」となるように変更しました。

設定方法

  • WordPressの管理画面、左サイドバーにある「設定」から「フォーラム」をクリック
  • 「フォーラムの設定」画面に遷移後、「フォーラムルートのスラッグ」から「フォーラムルート」を「forums」から「bbs」に変更
  • 画面一番下の「変更を保存」ボタンをクリックして完了

投稿をシンプルにする

今回はシンプルな掲示板にしたかったので、あまり使わなそうな機能をOFFにしました。

設定方法

  • WordPressの管理画面、左サイドバーにある「設定」から「フォーラム」をクリック
  • 「フォーラムの設定」画面に遷移後、「フォーラム機能」から「お気に入り」の「ユーザーがトピックをお気に入りに追加するのを許可」と「購読」の「ユーザーがフォーラムとトピックを購読できるようにする」のチェックを外す(ユーザー機能は使ってないのでOFFにしました)
  • 「トピックタグ」の「トピックにタグの追加を許可」のチェックを外す
  • 「検索」の「フォーラム全体の検索を許可する」のチェックを外す(検索結果画面のh1タグなどの調整が必要だったので、一旦機能をOFFにしました)
  • 同様に「投稿の整形」の「HTML 整形補助ツールバー・ボタンをテキストエリアに追加する」のチェックを外す
  • 画面一番下の「変更を保存」ボタンをクリックして完了


ここまでの変更でも最低限、掲示板として利用できますが、以下より細かいカスタマイズをしていきます。

各名称の変更

各デフォルトの名称を好みの名称に変更します。名称の変更には特殊なソフトやファイルが必要です。

名称を変更するための準備

全体の流れとしては以下の通りです。

  • 『Poedit』というフリーソフトをインストールする
  • 名称を変更するためのファイルを入手する


『Poedit』のインストールや使い方については、以下の記事をご参考ください。

関連記事賢威で「(カテゴリー名)」の記事一覧の文字を変更する方法


名称を変更するためのファイルは、「halsinan.com」さんの『WordPressの掲示板プラグイン、bbPress 2 日本語化ファイル0.6と設置方法』から、ページの下の方にある「おまけ:改良したい人用のpoファイル。bbpress-ja.po(Version 0.63)ダウンロード」よりダウンロードして利用させてもらいました。

変更手順の流れ

  • ダウンロードしたpoファイル「bbpress-ja.po」を「Poedit」で名称変更し、保存すると「bbpress-ja.mo」ファイルが出現
  • 「bbpress-ja.po」と「bbpress-ja.mo」をサーバー上の「/wp-content/plugins/bbpress/languages」にアップロード

これで名称を変更できます。

変更内容

  • デフォルトの掲示板自体の名称が「フォーラム」なので「Webデザイナー掲示板」に変更
    ソーステキスト「Forums」:対訳「Webデザイナー掲示板」
  • ソーステキスト「Author」:対訳「著者」から「投稿者」に変更
  • ソーステキスト「Keymaster」と「Key Master」:対訳「キーマスター」から「管理人」に変更
  • ソーステキスト「Started by: %1$s」:対訳「トピック制作者 by: %1$s」から「制作者 by: %1$s」に変更
  • ソーステキスト「Author」:対訳「著者」から「投稿者」に変更
  • ソーステキスト「Create New Topic in “%s”」:対訳「“%s” 内に新規トピックを作成」から「新規トピックを作成」に変更

管理人のみアバターを設定

WordPressのユーザー機能は使わず、管理人以外の掲示板投稿者はユーザー登録が不要なゲスト投稿のみとする仕様にしましたが、管理人だけはアバターがほしかったので、WordPressのプラグイン『WP User Avatar』をインストールして、アバターを設定しました。

設定方法

『WP User Avatar』プラグインをインストールすると、WordPress管理画面の左サイドバーにある「ユーザー」から、画面一番下に「Avatar」が追加されているので、「Image」より、画像を「Choose Image」ボタンで指定し、画面一番下の「プロフィールを更新」ボタンをクリック。

スタイルシートの設定

CSSの調整です。当サイトや事例のサイトでは、WordPressのテーマ(テンプレート)『賢威7』を利用していますが、子テーマで運用しているため、子テーマディレクトリの「base.css」と「rwd.css」を編集します。

「base.css」に以下を追記

/*--------------------------------------------------------
掲示板
--------------------------------------------------------*/

/*掲示板全体のスタイル*/
#bbpress-forums{
	padding-top:10px;
}

/*掲示板のパンくずリスト*/
.bbp-breadcrumb{
	font-size: 0.8em;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	line-height: 1.5em;
	color: #999999;
}
.bbp-breadcrumb a{
	text-decoration: none;
	color: #999999;
}

/*掲示板内検索入力欄の位置調整*/
.bbp-search-form{
	padding-top: 20px;
	padding-bottom: 10px;
}

/*表の見出しのスタイル*/
.forum-titles,
.bbp-header div{
	font-size: 11px;
}

/*フォーラムタイトルのスタイル*/
.bbp-forum-title,
.bbp-topic-permalink{
	font-size: 16px;
	line-height:1.75em;
	font-weight:bold;
}

/*フォーラム説明文のスタイル*/
.bbp-forum-content{
	font-size: 14px !important;
	line-height:1.5em;
}

/*投稿からの時間表示のスタイル*/
.bbp-forum-freshness a,
.bbp-topic-freshness a{
	text-decoration: none;
}

/*アバターのスタイル*/
#bbpress-forums p.bbp-topic-meta img.avatar, #bbpress-forums ul.bbp-reply-revision-log img.avatar, #bbpress-forums ul.bbp-topic-revision-log img.avatar, #bbpress-forums div.bbp-template-notice img.avatar, #bbpress-forums .widget_display_topics img.avatar, #bbpress-forums .widget_display_replies img.avatar {
	border: 1px double #fff;
	float: none;
	margin-bottom: -3px;
	padding-right:0px;
}

/*フォーラムの状況説明枠は不要なので削除*/
.bbp-template-notice{
	display: none;	
}

/*フッターは不要なので削除*/
.bbp-footer{
	display: none;	
}

/*入力欄のスタイル*/
.bbp-form{
	background-color: #FFF;
}

/*入力欄の幅をレスポンシブデザインに対応*/
.bbp-form input{
	width:90%;
}

/*入力欄のタイトルのスタイル*/
.bbp-form legend{
	background-color: #FFF;
	border-radius:6px;
}

/*「これらの HTML とタグ、属性を使用できます:」の部分は不要なので非表示*/
.form-allowed-tags{
	display: none;	
}

/*送信ボタンの位置、スタイル調整*/
.bbp-submit-wrapper {
	width:100%;
	text-align: center;
	margin-bottom: 20px;
}
.bbp-submit-wrapper button {
	text-align: center;
	font-size:14px;
	width:100px;
}

/*アバターのスタイル調整*/
#bbpress-forums div.bbp-forum-author img.avatar, #bbpress-forums div.bbp-topic-author img.avatar, #bbpress-forums div.bbp-reply-author img.avatar {
	margin: 12px auto 4px;
	max-width: 40px;
}
#bbpress-forums .reply a {
    background: none;
    padding-left: 0px;
}

/*本文の文字スタイル*/
.bbp-reply-content{
	font-size:14px;
}

/*ユーザーページ:h1非表示*/
.bbp-user-page h1.section-title{
	display: none;	
}

/*ユーザーページ:アバターのスタイル調整*/
#bbpress-forums #bbp-single-user-details #bbp-user-navigation li.current a {
	background: none;
}
.bbpress .vcard a img{
	max-height:80px !important;
	max-width:80px !important;
}
#bbp-user-navigation{
	clear: both;
}

/*ユーザーページ:プロフィールの文字スタイル*/
.bbp-user-page h2.entry-title{
	background-color:#FFF5DF;
	padding-left: 0px;
	border-color: #FFF5DF;
}
.bbp-user-page h2.entry-title::before{
	border: none;
}

/*掲示板のみ、独自に設定していたコンテンツ下の破線を非表示*/
.bbpress .section-wrap {
	border: none;
}

「rwd.css」に以下を追記

/*--------------------------------------------------------
解像度1200px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 1200px){

/*--------------------------------------------------------
掲示板
--------------------------------------------------------*/

/*掲示板全体のスタイル*/
#bbpress-forums{
	margin-top: -20px;
	padding-top: 0px;
}

/*掲示板内検索入力欄の位置調整*/
.bbp-search-form{
	padding-top: 0px;
	padding-bottom: 0px;
}

/*スマホの本文上部の空きを詰める*/
.bbp-reply-author{
	margin-bottom:-20px !important;
}

/*スマホで返信があると隙間ができるので詰める*/
.bbp-reply-content{
	margin-top:0px !important;
	margin-bottom:0px !important;
}

/*ユーザーページ:プロフィールの文字下の空きを調整*/
#bbp-single-user-details{
	padding-bottom:30px;
}

}

まとめ

テーマによると思いますが、表示される内容が崩れたりしているので、CSSの調整が結構手間です。

また、titleタグ等のmetaタグの調整やソーシャルボタンの設置など、まだまだ課題が多いのですが、最低限の設置までを解説しました。