WordPress3.5 + Twenty Twelve + bbPressでフォーラムのDemoサイトを作り直しました

WordPress を 3.5 にアップグレードしたついでに同梱されているデフォルトテーマ「Twenty Twelve」と WordPress Plugin「bbPress 2.2.3」を使って、以前作ったフォーラムの Demo サイトを作り直してみました。

bbPress Demo Site
[button link="http://www.photoclip.net/bb-presso/" style="large light-blue" target="_blank"]bb PRESSO (Demo)[/button]

以下、そのときに行った作業手順です。
手順はわかりやすいように新規サイトに新規に bbPress をインストールしたものになっています。


Twenty Twelve で bbPress を使う手順

(ちなみに他のテーマでもこの手順は使えると思います。カラム崩れなどは別の対処が必要になると思いますが。。。)


  1. WordPress 3.5 をインストールします。
  2. WordPress Plugin「bbPress 2.2.3」をダウンロード してインストールします。
    [ダッシュボード] → [プラグイン] → [新規追加] の検索窓に「bbPress」と入力します。
  3. bbPressインストール [1]

  4. bbPress の「いますぐインストール」をクリックします。
  5. bbPressインストール [2]

  6. インストールが始まります。「プラグインを有効化」のリンクが表示されたらそれをクリックします。
  7. bbPressインストール [3]

  8. プラグイン bbPress のインストールが完了しました。
  9. bbPressインストール完了

  10. [ダッシュボード] → [固定ページ] → [新規追加] で新規固定ページを追加します。
    とりあえずタイトルに「Forums」(何でも構いません「掲示板」でも、お好きなタイトルを)、次に [ページ属性] 内にあるテンプレートのドロップダウンリストを表示します。
  11. 121219-20

  12. ここでテンプレート内に bbPress のテンプレートが表示されていないといけないのですが、なにも作業していないのでこの時点では Twenty Twelve のテンプレートしか表示されません。仕方がないのでここではこの固定ページは「下書きとして保存」にしておきます。
  13. 121219-6

  14. bbPress のテンプレート使えるように以下の作業を行います。
  15. 121219-7

    To customize bbPress:
    The directory “wp-content/plugins/bbpress/templates/default/” contains the directories “bbpress”, “css”, “extras”, and “js”, and the file “bbpress-functions.php”.
    “bbpress” contains template files; copy any you want to modify into a directory named “bbpress” in your theme’s root. eg. /wp-content/mytheme/bbpress/
    “extras” contains optional page templates and things to make life a little easier when customizing; copy any you want to use or modify into the same ‘bbpress’ folder. eg. /wp-content/mytheme/bbpress/
    “css” contains style sheets; copy any you want to modify into a directory named “css” in your theme’s root. eg. /wp-content/mytheme/css/
    via: Theme Compatibility · bbPress Codex

    • プラグイン [bbpress] フォルダ → [templates] → [default] → [bbpress] フォルダをテーマ [Twenty Twelve] フォルダへコピペ
    • プラグイン [bbpress] フォルダ → [extras] 内にあるすべての PHP ファイルを [Twenty Twelve] フォルダへコピーした [bbpress] フォルダへコピペ
  16. 上記、手順 8. の作業終了後、手順 7. で表示していたページをリロードするとテンプレート内に bbPress のテンプレート類が表示されます。
    手順 7. で新規追加しようとしていたページは Forum のトップページ (Forums) なのでドロップダウンリストにある [Forums (Index)] を選択して、[公開] ボタンを押しておきます。
  17. 121219-8

    121219-9

  18. Forum をひとつ作ってあげないとトップページに何も表示されませんので暫定的に Forum をひとつ作ります。
    [ダッシュボード] → [Forums] → [New Forum]

    青枠 は bbPress をインストールすると表示されるメニュー (アイコン) です。
  19. 121219-10

  20. タイトル (ここでは bbPress: Setting としました) を入力して [公開] ボタンを押します。
  21. 121219-11

  22. 公開ボタンを押したあと表示される [View forum] ボタンをクリックしてページを表示させると「bbPress: Setting」という Forum ができています。
    右のカラム (サイドバー) が下に落ちていますが、この対処はのちほど。
  23. 121219-12

  24. Forum ができあがったので、Forum タイトルである bbPress: Setting というリンクをクリックしてトピック (話題)を立てます。
  25. 121219-13

  26. Topic Title にトピックのタイトルを入力します。ここでは「一般」にしました。
    下のテキストエリアには、トピックに関しての簡単な説明とかを入れておくといいと思います。
  27. 121219-14

  28. 入力が終わったら [Submit] ボタンを押します。
  29. 121219-15

  30. [bbPress: Setting] という Forum の中に [一般] というタイトルのトピックが作成されました。
  31. 121219-16

  32. 手順 13. で下に落ちてしまっているカラムを上に上げるのは以下のような作業を行いました。
  33. [Twenty Twelve] フォルダ内にコピペした [bbpress] フォルダ内にある page-front-forums.php というファイルをテキストエディタ等で開きます。

    page-front-forums.php 編集前

    <?php
    
    /**
     * Template Name: bbPress - Forums (Index)
     *
     * @package bbPress
     * @subpackage Theme
     */
    
    get_header(); ?>
    
    	<?php do_action( 'bbp_before_main_content' ); ?>
    
    	<?php do_action( 'bbp_template_notices' ); ?>
    
    	<?php while ( have_posts() ) : the_post(); ?>
    
    		<div id="forum-front" class="bbp-forum-front">
    			<h1 class="entry-title"><?php the_title(); ?></h1>
    			<div class="entry-content">
    
    				<?php the_content(); ?>
    
    				<?php bbp_get_template_part( 'content', 'archive-forum' ); ?>
    
    			</div>
    		</div><!-- #forum-front -->
    
    	<?php endwhile; ?>
    
    	<?php do_action( 'bbp_after_main_content' ); ?>
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    121219-17

    page-front-forums.php 編集後 (青字 を追加しました)

    <?php
    
    /**
     * Template Name: bbPress - Forums (Index)
     *
     * @package bbPress
     * @subpackage Theme
     */
    
    get_header(); ?>
    
    	<div id="primary" class="site-content">
    		<div id="content" role="main">
    
    	<?php do_action( 'bbp_before_main_content' ); ?>
    
    	<?php do_action( 'bbp_template_notices' ); ?>
    
    	<?php while ( have_posts() ) : the_post(); ?>
    
    		<div id="forum-front" class="bbp-forum-front">
    			<h1 class="entry-title"><?php the_title(); ?></h1>
    			<div class="entry-content">
    
    				<?php the_content(); ?>
    
    				<?php bbp_get_template_part( 'content', 'archive-forum' ); ?>
    
    			</div>
    		</div><!-- #forum-front -->
    
    	<?php endwhile; ?>
    
    	<?php do_action( 'bbp_after_main_content' ); ?>
    
    		</div><!-- #content -->
    	</div><!-- #primary -->
    
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>

    121219-18

他、細かい箇所はご自身の好みに仕上げてください。


作業を行ってみて、Twenty Eleven の時よりもかなり簡単なような気がします。
bbPress に格納されているファイルフォルダの構成が 2.1.2 の時と違うのが簡単になった要因だと思いますが。。。

以上、趣味で行っている作業なのでおかしなところがありましたらご教示願います :aisatu:


。。。WordPress 3.5 で大幅に刷新されたメディア機能、いいですね :hoxtu:

コメント

  1. rei より:

    こんにちは。

    bbPressのカスタマイズに戸惑い、ここにたどり着きました。
    無事にテーマの設定ができました!
    ありがとうございます!

    すいません、1つ質問ですが、
    デモページみたいに最新のトピックを表示するにはどうしたらいいでしょうか。
    トピックをいくつか立てたのですが、表示されません・・・

    よろしくお願いします。

    • 象支店長 より:

      rei さん、こんにちは。

      デモサイトのトップページ (http://www.photoclip.net/bb-presso/) を例に取りますと

      bbpress > templates > default > extras > page-front-forums.php

      を開いて

      <h2>最近のトピック</h2>
      <?php echo do_shortcode('[bbp-topic-index]'); ?>

      というショートコード (青字) を追加しています。

      • rei より:

        こんばんは。

        さっそくのお返事ありがとうございます!
        無事にできました!ありがとうございます!

        手順8に extras/ のファイルを移動したので、移動先を編集しました。

        普段軽くWordpressをいじっているので、テンプレートを変更する際は、
        wp-content/themes/template_name 配下のファイルを修正すると理解していますが、bbpressを利用した場合、bbpressと、twentytwelveの関係性がわからずとても戸惑いました。。。

        見た目の編集(CSSなど)は、twentytwelveのファイルではなく、移動したbbpressのファイルを修正することになるのですね。。

        いろいろありがとうございました。

        • 象支店長 より:

          rei さん、こんばんは。
          無事解決されたようで何よりです。

          bbpressを利用した場合、bbpressと、twentytwelveの関係性がわからずとても戸惑いました。。。

          あー、それよくわかります。
          私自身、どこのどれがどことどう関係しているんだっってことがよくわかっているわけではないので関係していそうなテンプレートを片っ端から編集したことがありましたσ(^_^;)自分

          先日私がコメントに書いたこれ

          bbpress > templates > default > extras > page-front-forums.php

          この書き方では、コピペする前の page-front-forums.php の在りかですね。
          ご自身が使用している theme のフォルダにコピペした bbpress フォルダ内の page-front-forums.php と書くべきでした。
          紛らわしい書き方をしてお時間を取らせてしまったのでは。。。すみませんでした。

          ではでは。

  2. rei より:

    こんばんは。

    申し訳ないです。またお聞きしたいことがありまして。。

    テーマを変えるたびに、テーマ/bbpressのディレクトリーを丸ごと新テーマに移動しないといけないですね。

    bbpress関連のデザインだけはチャイルドテーマとして使う方法はわかりますでしょうか。
    いろいろやってみたのですが、やっぱりわからなくて・・・
    すいません。
    Wordpress初心者です。。

    質問ばかりでいろいろお手数をおけけします m(___)m

    よろしくお願いします。

    • 象支店長 より:

      こんばんは。

      bbpress関連のデザインだけはチャイルドテーマとして使う方法はわかりますでしょうか。

      これは必要に駆られたことがないのでわからないですね。
      テーマを変えてみたのは Twentyeleven から Twentytwelve への一回だけなので普通に移動しました。
      bbPress のオフィシャルフォーラムでキーワード「child theme」とかで検索するといいかもしれません。
      わからないことがあったときその方法で何回か手がかりをつかめたことがあります。
      悩むところは万国共通なので(笑)

      ズバリな回答ができずすみません。

  3. […] 参考にさせて頂いたサイトWordPress]プラグイン bbPress 2 でフォーラム作りにチャレンジWordPress3.5 + Twenty Twelve + bbPressでフォーラムのDemoサイトを作り直しました […]

  4. ジル より:

    こんばんは。

    普通にプラグインの機能からフォーラムを作ってその中にトピックを入れただけなんですが、なんとか使えてるような感じです。ここに書いてあるコピペはしてないんですけど大丈夫ですかね?2.5.3を使ってます。

    あとタイトルバーに出る「トピック:」や「フォーラム:」を削除できますでしょうか?
    よろしくお願いいたします。

    • 象支店長 より:

      こんにちは。

      ここに書いてあるコピペはしてないんですけど大丈夫ですかね?

      ちゃんと動作しているなら問題ないと思いますが。。。

      あとタイトルバーに出る「トピック:」や「フォーラム:」を削除できますでしょうか?

      トピック: もしくは フォーラム: ←こういう文字がどこにどう出ているのか具体的な説明がないのでなんともいえません。
      WEB ページのソースを見てテンプレート内の該当する箇所をすべて削除してしまうというのではダメですか。

      • ジル より:

        お返事ありがとうございます。説明が不足して申し訳ありません。
        トピック:はそれぞれのトピックのタイトルバーになります。
        例えば下記URLの「トピック:General | bb PRESSO」となっている部分です。
        http://www.photoclip.net/bb-presso/forums/topic/general/
        フォーラムも同様です。

        テンプレートは見たんですがどの部分を削除すればいいかわかりません。
        もし見当がつくようでしたらお教えいただけると助かります。

        • 象支店長 より:

          こんにちは。
          あっ、ブラウザのタイトルバーに表示される「 トピック:フォーラム:」の部分でしたか。
          HTML ではヘッダーの <title> 部分ですね。

          お使いのテーマの header.php は触っていないと思うのでプラグイン「bbPress」内の全ファイルを対象にキーワード「Topic:」「Forum:」 で grep を実行してみました (日本語化されていない場合は Topic:、Forum: のはずなので)

          いろいろヒットしましたが、それらしきファイルは includes\common\template.php だと思います (もしかしたらファイル名が template-tag.php になっているかもしれません)

          template.php 内の該当する箇所を編集したところ当方の環境ではタイトルバーの トピック:フォーラム: が消えました。

          詳細は、このままだとコメント欄の幅が狭いので新たに新規コメントとしてポストします。

  5. 象支店長 より:

    ジルさんへ

    includes\common\template.php を開いて以下の記述を探します。
    一番下のほうなのですぐわかると思います。

    /** Singles ***************************************************************/
    
    // Forum page
    } elseif ( bbp_is_single_forum() ) {
    	$title = sprintf( __( 'Forum: %s', 'bbpress' ), bbp_get_forum_title() );
    
    // Topic page
    } elseif ( bbp_is_single_topic() ) {
    	$title = sprintf( __( 'Topic: %s', 'bbpress' ), bbp_get_topic_title() );

    上記のコードをすべてコメントアウトするととりあえず トピック:フォーラム: の表示は消えます。

    /** Singles ***************************************************************/
    
    // Forum page
    //} elseif ( bbp_is_single_forum() ) {
    //	$title = sprintf( __( 'Forum: %s', 'bbpress' ), bbp_get_forum_title() );
    
    // Topic page
    //} elseif ( bbp_is_single_topic() ) {
    //	$title = sprintf( __( 'Topic: %s', 'bbpress' ), bbp_get_topic_title() );

    これが正しい方法なのかどうかはシロウトなのでわかりません。
    他にもやらないといけなことがあるかもしれません。

    それでは楽しい週末を!!

    • ジル より:

      おおお!出来ました!(^O^)
      ご丁寧なレスをいただきまして本当にありがとうございます。
      これからは神とあがめさせていただきます。
      すばらしいサイト&主様です。

  6. 哲やん より:

    はじめまして。
    CGIで作成していた掲示板からWPでの掲示板運営に切り替えるために参考にさせていただきました。
    作成したフォーラム内にトピックを書き込もうとしても「ERROR: Your topic needs a title. 」と表示され、書き込みができませんでした。
    サーバー依存の関係でしょうか?
    WordPress 4.2.2
    bbPress 2.5.7
    使用テーマ  BizVektor

    • 象支店長 より:

      哲やん さん

      はじめまして。
      bbPress のエラーメッセージやサーバーに関してはまったく知識がないので回答することができません。

      WordPress のフォーラムで回答が得られるかもしれません。

      » WordPress › フォーラム

      お役に立てず申し訳ありません。

  7. […] WordPress3.5 + Twenty Twelve + bbPressでフォーラムのDemoサイトを作り直しました […]

タイトルとURLをコピーしました