designsupply.llc
  • aboutabout
  • servicesservices
  • worksworks
  • mediamedia
  • contactcontact
  • homeサイトトップ
  • about会社概要
  • services業務内容
  • works実績紹介
  • mediaメディア
  • contactお問い合わせ
ja/

media

メディア

  1. サイトトップ
  2. メディア
  3. デザインの記事
  4. bbPressのカスタマイズでオリジナルテーマの掲示板サイト作成(導入編)

bbPressのカスタマイズでオリジナルテーマの掲示板サイト作成(導入編)

  • 2017.06.03
  • デザイン
  • WordPress
Updated: 2018.01.07
ブログサイトの作成に特化したWordPressですが豊富なプラグインを使うことでいろんな機能を実装することができます。今回は「bbPress」というプラグインを使って掲示板サイトをWordPressで作成しカスタマイズしてみたいと思います。  
bbPressとは?
bbPressとは掲示板機能をサイトに導入できるWordPressのプラグインです。WordPressのサポートフォーラムサイトでも使用されている公式のプラグインで信頼性もバッチリな上、豊富な機能がついているのが特徴です。  
bbPressプラグインの導入
1. プラグインのインストール WordPressの管理画面よりプラグインをインストール、もしくは公式のダウンロードページからファイルをダウンロードして、「plugins」フォルダへアップロードします。管理画面からインストールする場合は検索フォームに「bbPress」と入力すると出てきます。   プラグインのインストールが完了しプラグインを有効化することで掲示板機能が使えるようになります。管理画面の投稿に「フォーラム」「トピック」「返信」が新たに追加されます。   bbPressのカスタマイズでオリジナルテーマの掲示板サイト作成(導入編)   2. プラグイン日本語化の作業 プラグインが日本語化されていない場合、別途日本語化の作業を行います。日本語化を行うには日本語化用のファイルがあるのですが、ウェブ上に公開配布されているのでそれを使用します。   「bbpress-ja.mo」というファイルがダウンロードされるので、/plugins/bbpress/languages/配下にアップロードします。そうすると英語表記されている部分が日本語に変更されます。   導入についてはここまでですが、オリジナルテーマ内でカスタマイズして使用する場合は下記の作業を引き続き行います。   3. テーマ内にbbpressを入れる まずは/theme/テーマフォルダ/に「bbpress」フォルダを作成します。フォルダを作成後、/plugins/bbpress/templates/default/bbpressのファイルをコピーして、先ほどテーマフォルダ内に作成したbbpressフォルダに全てアップロードします。   そして、/theme/テーマフォルダ/に、plugins/bbpress/templates/default/extras/に含まれる全てのファイルをコピーしてアップロードします。この時点で下記のフォルダ・ファイル構成になっているかと思います。   /theme/  ┗ /テーマフォルダ/   ┝ bbpress(フォルダ)    ┗ /plugins/bbpress/templates/default/bbpress/に含まれるテンプレートファイル   ┝ /plugins/bbpress/templates/default/extras/に含まれるテンプレートファイル   ┗ その他サイトテンプレートファイル   これで、bbpressのテンプレートファイルを編集することでオリジナルテーマ内で掲示板サイトをカスタマイズすることが可能になります。テンプレートファイルには掲示板投稿のアーカイブページやシングルページ、投稿フォームのテンプレートファイルに関数用のテンプレートファイルなどが含まれます。それではbbPressでの掲示板の構成についてみていきたいと思います。  
bbPressの掲示板構成
bbPressでの掲示板構成について、主要な部分については下記のようなページ構成とURLになります。 ※設定などはデフォルトの状態です   /forums/:A.フォーラム一覧  ┝ /forums/forum/POST_SLUG/: B.フォーラム詳細   ┝ /forums/topic/POST_SLUG/:C.トピック詳細    ┗ /forums/topic/POST_SLUG/edit/:D.トピック編集   ┝ /forums/topic-tag/TERM_SLUG/:E.トピックタグアーカイブ    ┗ /forums/topic-tag/TERM_SLUG/edit/:F.トピックタグ編集   ┗ /forums/reply/POST_ID/edit/:G.返信編集  ┗ /forums/user/USER_SLUG/:H.ユーザートップ   ┝ /forums/topic/USER_SLUG/topics/:I.ユーザー開始トピック一覧   ┝ /forums/topic/USER_SLUG/replies/:J.ユーザー返信トピック一覧   ┝ /forums/topic/USER_SLUG/favorites/:K.ユーザーお気に入りトピック一覧   ┝ /forums/topic/USER_SLUG/subscriptions/:L.ユーザー購読中フォーラム・トピック一覧   ┗ /forums/topic/USER_SLUG/edit/:M.ユーザープロフィール編集   イメージとしては「forums」の投稿タイプに紐づく「topic」と「reply」の投稿タイプがあるイメージです。ユーザーはWordPressユーザー(=著者)になり、掲示板サイト上にユーザープロフィールの編集画面が存在する形になります。  
bbPressのページテンプレートファイル
bbPressをカスタマイズするには上記のページ構成にそれぞれ対応するページテンプレートファイルを把握しておく必要があります。命名規則については通常のテンプレートファイルと同じですのでそちらをイメージしてもらうとわかりやすいです。  
A.フォーラム一覧 archive-forum.php
B.フォーラム詳細 single-forum.php
C.トピック詳細 single-topic.php
D.トピック編集 single-topic-edit.php
E.トピックタグアーカイブ taxonomy-topic-tag.php
F.トピックタグ編集 taxonomy-topic-tag-edit.php
G. 返信編集 single-replay-edit.php
H. ユーザートップ single-user.php → content-single-user.php → user-profile.php
I. ユーザー開始トピック一覧 single-user.php → content-single-user.php → user-topics-created.php
J. ユーザー返信トピック一覧 single-user.php → content-single-user.php → user-replies-created.php
K. ユーザーお気に入りトピック一覧 single-user.php → content-single-user.php → user-favorites.php
L. ユーザー購読中フォーラム・トピック一覧 single-user.php → content-single-user.php → user-subscriptions.php
M. ユーザープロフィール編集 single-user-edit.php → content-single-user.php → form-user-edit.php
  ユーザー情報に関する画面のテンプレートは複数のテンプレートファイルから構成されていますので、編集する箇所を確認しましょう。  
  少し複雑ですがそれぞれの画面に対応するテンプレートファイルを把握し編集することでかなり柔軟にカスタマイズができるのではないでしょうか。WordPressで掲示板サイトを作成する時にはbbPressプラグインがオススメです!ぜひ参考にしてみてはいかがでしょうか。  

【参考】
wordpressで掲示板を作るならbbpress!使い方の完全マニュアル

   

この記事を書いた人オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はダイエットコーラとチョコレートが欠かせないアラフォーWebクリエイター。

Sponsored Link

categories

  • デザイン(30)
  • Photoshop(26)
  • ワークショップ(24)
  • コーディング(18)
  • Sketch(16)
  • Illustrator(12)
  • カラースキーム(10)
  • タイポグラフィ(8)
  • Adobe その他(8)
  • フォトグラフィ(7)
  • Lightroom(4)
  • WordPress(4)
  • ナレッジ(4)
  • サイト運営(3)
  • Figma(2)
  • AfterEffects(2)
  • InVision(1)
  • Premiere(1)
  • 次の記事
  • 一覧に戻る
  • 前の記事

まだ依頼内容が決まっていなくても、ご相談ください。

課題の整理や小さな検証、UI/UX・フロントエンドの部分的な支援から始められます。

お問い合わせやご相談はこちらから

Webサイト・プロダクトの企画設計/UI・UXデザイン/フロントエンド開発合同会社デザインサプライ(DesignSupply. LLC)

Office:大阪府大阪市天王寺区清水谷町3-22
Email:info@designsupply-web.com
home
  • サイトトップ
about
  • 3つのポリシー
  • 経営理念
  • 代表・クリエイター紹介
  • 会社概要
services
  • ビジネス・プロダクト支援
  • UI/UX・フロントエンド開発支援
  • プロジェクトの進め方・支援体制
  • エデュケーション事業
works
  • 開発プロジェクト
  • クリエイティブ支援
  • 自社プロダクト
media
  • デザイン
  • プログラミング
  • マーケティング
  • Web開発
  • 写真・動画制作
contact
  • お問い合わせ
news
  • インフォメーション
privacy
  • プライバシーポリシー

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

WE THINK WITH YOU, DESIGN FOR PEOPLE, AND BUILD WHAT WORKS.

© 2013 - 2026 DesignSupply.LLC
サイトトップへ
contact