このサイトはWordPressのプラグインを組み合わせて作成しました。

会員登録制で、利用者さん同士が気軽に質問しあえるフォーラム・掲示板を作りたかったです。
WordPressはアフィリエイトやホームページ受注制作で操作には慣れていましたが、会員サイトを作るのは初めての経験でした。
最初は「掲示板は自作した事がなくて作り方がよく分からない。会員制サイトの構築に詳しい会社に依頼しよう」と思い見積もりを依頼しました。
予算は30万円程度。
機能の要望をお伝えし、お見積もり依頼。
いただいたお見積もり金額は約280万円でした。オーマイゴット
↑他の制作会社様にも相談してみようかなと思っていた時に、私のTwitterの呟きを見て、WordPressを利用して作成してくださるという方が声をかけてくださいました。
ですが提案してくださったプラグインが長期間更新が止まっていたり、お名前を教えていただけなかったりで心配になり。
せっかく声をかけていただいたのに申し訳なかったですが今回はお断りさせていただきました。
1人で唸っていた時だったので連絡をいただけてすごく嬉しかったです。
で、自分で調べたらわいひらさんの記事にたどり着き「wpForo」というプラグインを知りました。

- 会員登録をしたら投稿できる
- 会員がプロフィールを編集できる
- 登録したくない人は閲覧は自由にできる
- 会員が自分のサイトなどを宣伝できる(プロフィールや投稿内で)
- 回答数などで点数加算でランク付け
- ランクが高いメンバーに何か謝礼を送るなどの企画をしたい
- カテゴリーごとに情報を分けたい
- 質問を検索できる機能がほしい
- 会員一覧ページを作りたい
- 打ち間違いした人の為に、投稿して数分は再編集や削除ができるようにしたい
↑こんな掲示板にしたい。と思っていた要望がこのプラグイン1つで全部解決できました。
WordPress・CSS・HTMLを知っている方なら、プラグインを使えば、必要最低限の会員制の掲示板を自作できると思います。
自分用の備忘録がてら、wpForoを使って会員制掲示板を作成した流れを書き残します。
作成者(私)のスキル
- WordPress…ばっちり。1ページの小さなサイトを含めると500サイト以上作成
- デザイン…本業なので自分でできる
- HTML、CSS…基本は覚えた
- JavaScript…調べれば書いてある意味がなんとか理解できる
- PHP…未知の世界。分からない時は詳しい方に依頼して解決
分からない部分はプログラマーさんに依頼して、相談させてもらいながら進めました。
サーバーとドメイン
レンタルサーバーはMixHost
、ドメインはお名前.com
を使いました。
会員制の掲示板サイトで避けたいトラブルは、会員の方が投稿してくれたデータが消えてしまう事だと思います。
私はWordPressのバックアッププラグインを使った復旧は自分でできますが、データベースの話が出てくるとお手上げです。
外部に依頼して修正してもらうにはやりとりに時間もかかります。
mixhostは自動で14日分のデータを自動でバックアップ、尚且つ復旧も自分のタイミングで行えます。過去に1度バックアップからの復旧を行いましたが、簡単にできて助かりました。
エックスサーバーも好きですが、バックアップからの復旧は依頼してから返事を待つ間タイムラグができそうなのでやめました。
作成の大まかな流れ
- WordPressをインストール
- いらないテーマ、プラグイン、投稿、固定ページ、メニュー、ウィジェット削除
- テーマはcocoonをインストール
- cocoon設定を変更
- プラグイン検索でwpForoをインストールして有効化
- その他必要なプラグインをインストールして有効化
- wpForoを日本語化。ファイルを1,000円で購入(https://www.momosiri.info/trwp/wpforo-ja/)
- WordPress標準の設定(パーマリンク等)を編集
- wpForoの設定を上から順に編集
- 特殊な変更
- CSSで見栄えを微調整
- 第三者にテスト利用してもらう
- 改善して完成
WordPress・テーマ・プラグインの各基本設定については、他に丁寧な解説サイトがあるので説明を省きます。
有料テーマを複数利用した経験がありますが、私が1番使いやすいと感じたのは無料のcocoonです。アップデートも頻繁・「そんな事まで」と思うほど細やかな機能が豊富です。
利用したプラグイン一覧
Adminimize
権限ごとに管理画面に表示させる内容を変更できるプラグインです。
会員の方がWordPressのダッシュボードに訪れてしまった際に、余計なものが表示されないようにしました。
Akismet Anti-Spam
スパムからサイトを保護するプラグインです。
有効化して案内に沿って設定して終わり。
All-in-One WP Migration
手動でバックアップする為に入れました。
自動バックアッププラグイン(UpdraftPlus – Backup/Restore)などを使うなら無くても大丈夫だと思います。
Contact Form 7
お問い合わせフォームを利用できるプラグインです。
Custom New User Mail
会員登録後の自動返信メールの内容を変更したくて利用させてもらいました。
↑こちらのサイト様を参考にしました。
EWWW Image Optimizer
画像ファイルを縮小するプラグインです。
Google XML Sitemaps
Googleにサイトマップを送るプラグインです。
MailPoet 3 (New)
WordPressの管理画面でメルマガを送信できるプラグインです。
会員登録された方にお知らせなどメールを送れるようにと入れてみました。
会員数が増えてきたら有料メルマガスタンドに切り替えようと思っています。
SiteGuard WP Plugin
セキュリティを上げるプラグインです。
UpdraftPlus – Backup/Restore
自動でバックアップを残してくれるプラグインです。
Dropboxに4時間ごとにバックアップを残す設定にしました。
WebSub/PubSubHubbub
サイトの更新を素早く伝えてインデックススピードを上げてくれるプラグインです。
Wordfence Security
セキュリティ向上のプラグインです。
利用しているテーマcocoonの推奨プラグインに掲載されていたので入れておきました。

WP Multibyte Patch
WordPressを日本語で利用する際の不具合修正を強化してくれるプラグインです。
WP User Avatar
新規登録者のデフォルトのアバター画像を変更する為に利用しました。

デフォルトのアバターのままでよければ、不要なプラグインです。
wpForo
WordPressに掲示板(質問フォーラム)を作成できるプラグインです。
特殊な変更
会員の管理画面の管理バーを非表示にしたい

↓子テーマのfunction.phpに追記
add_filter( ‘show_admin_bar’, ‘__return_false’ );
フレーズを変更
wpForoには、フレーズを自由に変更できる機能があります。

英語表記になってしまっている部分を日本語に変更しました。

↑こういった細かな箇所が、英語表記のままになっています。

↑管理画面フォーラム>フレーズ の中から該当箇所を探して任意の言葉に編集します。

↑サイト上の表記が変わりました。
ログインしている会員の名前をヘッダー部分に固定表示

テスト利用していただいた方から「ログインできているのかどうか分かりづらい」と教えていただいて実装しました。
未会員は「ゲスト」と表示、ログインするとログインユーザー名が表示されます。
<div class=”user-name”>ようこそ<?php if(is_user_logged_in()): ?><?php global $current_user; echo $current_user->nickname ?><?php else: ?>ゲスト<?php endif; ?>さん</div>
↑cocoon子テーマの head-insert.php (tmp-user/head-insert.php)に追記
/*トップにユーザー名を表示*/
.user-name {
background:#e2e2e2;
color:#5c5c5c;
padding:2px;
text-align:right;
position: fixed;
/*基準を画面の左上に*/
top: 0;
left: 0;
/*余白が入らないように*/
margin: 0;
/*以下装飾*/
width: 100%;
display:block;
z-index:9998;
}
/*ヘッダーのキャッチフレーズの位置を調整*/
.tagline {
margin-top:50px;
margin-bottom:-5px;
}
↑CSS追加(後述する「追加したCSS」と重複します)
追加したCSSのメモ
外観>カスタマイズに追加したCSSのメモです。
(利用テーマは「cocoon」です)
/*管理画面
--------------------------------------------*/
/*管理画面の配色*/
#wpadminbar {
background:#06b2a5;
}
#adminmenuback {
background:#9ED4D0;
}
/*管理バーの名前を押してもリンクさせない*/
li#wp-admin-bar-my-account {
pointer-events: none;
}
/*アピールエリア
--------------------------------------------*/
/*アピールエリアの装飾*/
.appeal-content .appeal-button {
color: #fff;
}
.appeal-content {
background-color: rgba(255, 255, 255, 0.80);
}
/*アピールエリアタイトルの装飾*/
.appeal-title {
position: relative;
display: inline-block;
margin: 0;
padding: 10px 15px;
min-width: 120px;
max-width: 100%;
color: #06B2A5;
font-size: 16px;
background: #bfeae7;
border-radius: 30px;
}
.appeal-title:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top: 10px solid #bfeae7;
}
.appeal-title p {
margin: 0;
padding: 0;
}
/*ヘッダー
--------------------------------------------*/
/*サイトトップにユーザー名を固定表示*/
.user-name {
background:#e2e2e2;
color:#5c5c5c;
padding:2px;
text-align:right;
position: fixed;
/*基準を画面の左上に*/
top: 0;
left: 0;
/*余白が入らないように*/
margin: 0;
/*以下装飾*/
width: 100%;
display:block;
z-index:9998;
}
/*ヘッダーのキャッチフレーズの位置を調整*/
.tagline {
margin-top:50px;
margin-bottom:-5px;
}
/*記事内投稿した画像に枠線と余白*/
.wp-block-image {
max-width: 100%;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
border: 2px solid #e2e2e2;
padding: 2%;
}
/*投稿本文
--------------------------------------------*/
/*投稿タイトルを非表示*/
header.article-header.entry-header {
display: none;
}
/*画像のキャプションの文字の装飾*/
.wp-block-image figcaption {
margin-top: .5em;
margin-bottom: 1em;
color: #555d66;
text-align: center;
font-size: 15px;
background-color: #ffeddd;
padding: 2%;
}
/*大見出しの装飾*/
.article h2 {
color:#fff;
background:#06b2a5;
}
/*サイドバー
--------------------------------------------*/
/*サイドバーのカスタムメニューの装飾*/
.widget_nav_menu ul li {
border-bottom:2px dotted #ccc;
padding-left:5px;
}
.widget_nav_menu ul li a {
color:#11c;
}
/*サイドバーの投稿一覧の装飾*/
p.postuser {
font-size: 12px;
}
p.posttitle {
border: 2px solid #eee;
padding: 5px;
font-size: 14px;
}
/*フォーラム
--------------------------------------------*/
/*フォーラムデザイン微調整*/
#wpforo-wrap #wpforo-menu{
background-color:#9ED4D0;
}
#wpforo-wrap #wpforo-stat-header {
background-color:#9ED4D0;
}
#wpforo-wrap #wpforo-poweredby {
background-color:#9ED4D0;
}
#wpforo-wrap .wpforo-post ul, #wpforo-wrap .wpforo-post ul li {
font-size: 16px;
}
#wpforo-wrap .wpforo-post ol, #wpforo-wrap .wpforo-post ol li {
font-size: 16px;
}
#wpforo-wrap .wpforo-post blockquote {
border: none;
background: #ddd;
border-radius: 5px;
}
/*プロフィールのアバター画像設定など不要なものを非表示に*/
.wpf-field-wrap li:nth-child(1) {
display: none;
}
.wpf-field-wrap li:nth-child(2) {
display: none;
}
.wpf-field.wpf-field-type-checkbox.wpf-field-name-secondary_groups {
display: none;
}
.wpf-field.wpf-field-type-text.wpf-field-name-title.wpf-field-required {
display: none;
}
/*プロフィールページの画像の影を非表示*/
#wpforo-wrap .wpforo-profile-wrap .h-picture .avatar {
border-radius:50%;
border: 4px solid #ffffff;
box-shadow: none;
}
/*自己紹介文のフォントイタリックをノーマルに*/
#wpforo-wrap .wpforo-profile-wrap .wpforo-profile-home .wpf-field-name-about .wpf-field-wrap{
font-style:normal;
}
/*フォーラム内のリンクに下線*/
#wpforo-wrap a {
border-bottom: 1px solid;
}
/*質問回答の投稿画面の余計なものを非表示と質問するのボタンの位置調整*/
.wpf-main-fields {
display: none;
}
.wpf-topic-sbs {
display: none;
}
#wpforo-wrap .wpf-topic-create input[type="submit"] {
float: right;
margin-top: 15px;
}
/*質問回答の文字装飾欄非表示*/
div#mceu_23 {
display: none;
}
/*追記コメントの文字装飾欄非表示*/
div#mceu_50 {
display: none;
}
div#mceu_69 {
display: none;
}
第三者にテスト利用してもらう
ココナラのリクエストボードを利用して、テスト利用してくださる方を募集しました。
簡単!「イラストで稼ぎたい人特化のQ&Aサイト」を見て、感想を教えてください

- 質問回答に後から追記や補足ができるように
- ログインできているのかどうか分かりやすく
- などなど
自分では気がつけなかった改善ポイントを見つけてもらえました。
つぶやき
大まかな流れはこんな感じです。
wpForoについては公式のガイド(https://wpforo.com/docs/root/)で詳細に解説されています。英語ですが翻訳表示をすれば理解できました。
自己解決できない箇所もあったので、プログラマーさんに代金をお支払いして相談しながら進めました。
今回は以前の仕事で知り合った方が相談に乗ってくださいました。
プログラマーの知り合いが居なくても、ココナラで「WordPress制作・カスタマイズ 」のカテゴリーでも相談できる方が見つかります。
wpForoプラグインの使い方についての日本語の情報が少ないため、慣れるまでに時間がかかりました。ですがフォーラムが活発なので助かりました。
WordPressでのサイト運営に慣れている方なら、1ヶ月あれば基本は網羅できそうな気がしています。
何かの参考になれば幸いです!
コメント
かきうちさん
まずはサイト作成ありがとうございます、そしておつかれさまでした
この一連の流れを見ていて、かきうちさんはビジネスマンとしても凄いなーと思いますよ😃
まだPIXTAさんが産声を上げた頃ですが(当時は知らなかった)
私も写真の会員制販売サイトを立ち上げようと法人成りをしました
カメラマンと組んでインハウスで写真撮って会員制の会員で販売するってスキームです
当時私が欲しかった機能を実装すると開発期間1年で700万の見積もりが出てきて断念しましたが
やらなくて良かったですね笑
あっという間にこんな競争が激しくなるなら開発費用をペイできたか
こちらこそいつも有益な情報をありがとうございます^^
0からサービスを開発してもらうとなるとまとまった資金が必要ですが、
既存のシステムを利用すれば個人事業主の私でもなんとか形にできて、やってみて良かったです。
開発してもらうと700万円…!
今はダウンロードコンテンツを販売するネットショップを、安価で作れるサービスがあるので本当に便利ですね。
数年前と比べると選択肢が増えている気がします。