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

bbPress Demo Site
bb PRESSO (Demo)

以下、そのときに行った作業手順です。
手順はわかりやすいように新規サイトに新規に 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 の時と違うのが簡単になった要因だと思いますが。。。

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


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