ようこそゲストさん!

WordPressで会員制の掲示板サイトを作成した手順

サイト運営者のかきうちかな(@kana_Illustaka)です。

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

WordPressのプラグインwpForoで作成したシンプルな会員制の掲示板サイト

会員登録制で、利用者さん同士が気軽に質問しあえるフォーラム・掲示板を作りたかったです。

WordPressはアフィリエイトやホームページ受注制作で操作には慣れていましたが、会員サイトを作るのは初めての経験でした。

最初は「掲示板は自作した事がなくて作り方がよく分からない。会員制サイトの構築に詳しい会社に依頼しよう」と思い見積もりを依頼しました。

予算は30万円程度。

機能の要望をお伝えし、お見積もり依頼。

いただいたお見積もり金額は約280万円でした。オーマイゴット

↑他の制作会社様にも相談してみようかなと思っていた時に、私のTwitterの呟きを見て、WordPressを利用して作成してくださるという方が声をかけてくださいました。

ですが提案してくださったプラグインが長期間更新が止まっていたり、お名前を教えていただけなかったりで心配になり。

せっかく声をかけていただいたのに申し訳なかったですが今回はお断りさせていただきました。

1人で唸っていた時だったので連絡をいただけてすごく嬉しかったです。

で、自分で調べたらわいひらさんの記事にたどり着き「wpForo」というプラグインを知りました。

Cocoonテーマとあわせて使用するのにお勧めなプラグインまとめ
WordpressテーマCocoonは、ある程度自前でサイト運営に必要な機能を備えています。ただ、すべての機能を同梱するわけにはいかないので、この記事で紹介するプラグインで機能を補完することで更にサイト運営能力を高めることができます。
  • 会員登録をしたら投稿できる
  • 会員がプロフィールを編集できる
  • 登録したくない人は閲覧は自由にできる
  • 会員が自分のサイトなどを宣伝できる(プロフィールや投稿内で)
  • 回答数などで点数加算でランク付け
  • ランクが高いメンバーに何か謝礼を送るなどの企画をしたい
  • カテゴリーごとに情報を分けたい
  • 質問を検索できる機能がほしい
  • 会員一覧ページを作りたい
  • 打ち間違いした人の為に、投稿して数分は再編集や削除ができるようにしたい

↑こんな掲示板にしたい。と思っていた要望がこのプラグイン1つで全部解決できました。

WordPress・CSS・HTMLを知っている方なら、プラグインを使えば会員制の掲示板を自作できると思います。

自分用の備忘録がてら、wpForoを使って会員制掲示板を作成した流れを書き残します。

スポンサーリンク

作成者(私)のスキル

  • WordPress…ばっちり。1ページの小さなサイトを含めると500サイト以上作成
  • デザイン…本業なので自分でできる
  • HTML、CSS…基本は覚えた
  • JavaScript…調べれば書いてある意味がなんとか理解できる
  • PHP…未知の世界。分からない時は詳しい方に依頼して解決

分からない部分はプログラマーさんに依頼して、相談させてもらいながら進めました。

サーバーとドメイン

レンタルサーバーはMixHost 、ドメインはお名前.com を使いました。

会員制の掲示板サイトで避けたいトラブルは、会員の方が投稿してくれたデータが消えてしまう事だと思います。

私はWordPressのバックアッププラグインを使った復旧は自分でできますが、データベースの話が出てくるとお手上げです。

外部に依頼して修正してもらうにはやりとりに時間もかかります。

mixhostは自動で14日分のデータを自動でバックアップ、尚且つ復旧も自分のタイミングで行えます。過去に1度バックアップからの復旧を行いましたが、簡単にできて助かりました。

エックスサーバーも好きですが、バックアップからの復旧は依頼してから返事を待つ間タイムラグができそうなのでやめました。

作成の大まかな流れ

  1. WordPressをインストール
  2. いらないテーマ、プラグイン、投稿、固定ページ、メニュー、ウィジェット削除
  3. テーマはcocoonをインストール
  4. cocoon設定を変更
  5. プラグイン検索でwpForoをインストールして有効化
  6. その他必要なプラグインをインストールして有効化
  7. wpForoを日本語化。ファイルを1,000円で購入(https://www.momosiri.info/trwp/wpforo-ja/)
  8. WordPress標準の設定(パーマリンク等)を編集
  9. wpForoの設定を上から順に編集
  10. 特殊な変更
  11. CSSで見栄えを微調整
  12. 第三者にテスト利用してもらう
  13. 改善して完成

WordPress・テーマ・プラグインの各基本設定については、他に丁寧な解説サイトがあるので説明を省きます。

利用したプラグイン一覧

Adminimize

権限ごとに管理画面に表示させる内容を変更できるプラグインです。

会員の方がWordPressのダッシュボードに訪れてしまった際に、余計なものが表示されないようにしました。

Akismet Anti-Spam

スパムからサイトを保護するプラグインです。

有効化して案内に沿って設定して終わり。

All-in-One WP Migration

手動でバックアップする為に入れました。

自動バックアッププラグイン(UpdraftPlus – Backup/Restore)などを使うなら無くても大丈夫だと思います。

Contact Form 7

お問い合わせフォームを利用できるプラグインです。

Custom New User Mail

会員登録後の自動返信メールの内容を変更したくて利用させてもらいました。

[WordPress]新規ユーザー登録時に送信されるメール内容を変更する方法
こんばんは、ゾノ( @ozonosho )です。 さて、今日のブログではWordPressで新規ユーザー登録時に送信されるメール内容を変更する方法を紹介したいと思います。 Codexの関数リファレンス

↑こちらのサイト様を参考にしました。

EWWW Image Optimizer

画像ファイルを縮小するプラグインです。

Google XML Sitemaps

Googleにサイトマップを送るプラグインです。

MailPoet 3 (New)

WordPressの管理画面でメルマガを送信できるプラグインです。

会員登録された方にお知らせなどメールを送れるようにと入れてみました。

会員数が増えてきたら有料メルマガスタンドに切り替えようと思っています。

SiteGuard WP Plugin

セキュリティを上げるプラグインです。

UpdraftPlus – Backup/Restore

自動でバックアップを残してくれるプラグインです。

Dropboxに4時間ごとにバックアップを残す設定にしました。

WebSub/PubSubHubbub

サイトの更新を素早く伝えてインデックススピードを上げてくれるプラグインです。

Wordfence Security

セキュリティ向上のプラグインです。

利用しているテーマcocoonの推奨プラグインに掲載されていたので入れておきました。

Cocoonテーマとあわせて使用するのにお勧めなプラグインまとめ
WordpressテーマCocoonは、ある程度自前でサイト運営に必要な機能を備えています。ただ、すべての機能を同梱するわけにはいかないので、この記事で紹介するプラグインで機能を補完することで更にサイト運営能力を高めることができます。

WP Multibyte Patch

WordPressを日本語で利用する際の不具合修正を強化してくれるプラグインです。

WP User Avatar

新規登録者のデフォルトのアバター画像を変更する為に利用しました。

デフォルトのアバターのままでよければ、不要なプラグインです。

wpForo

WordPressに掲示板(質問フォーラム)を作成できるプラグインです。

特殊な変更

会員の管理画面の管理バーを非表示にしたい

【WordPress】会員サイト構築時に役立つ!ツールバーをユーザー全員非常時にする方法
先日、WordPressで会員サイトを作成するという機会がありました。使用したのはWp-membersというプラグインです。WP-membersを使ったWordPressの会員サイトを作成する場合、会員=WordPressユーザーのような扱

↓子テーマのfunction.phpに追記

add_filter( ‘show_admin_bar’, ‘__return_false’ );

フレーズを変更

wpForoには、フレーズを自由に変更できる機能があります。

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

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

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

↑サイト上の表記が変わりました。

ログインしている会員の名前をヘッダー部分に固定表示

テスト利用していただいた方から「ログインできているのかどうか分かりづらい」と教えていただいて実装しました。

未会員は「ゲスト」と表示、ログインするとログインユーザー名が表示されます。

WordPress:会員ユーザーがログイン後、ユーザー名を表示 | 問題を解決して成果を上げる東京新宿のWeb制作|raisez(ライセス)

<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プラグインの使い方が分かれば、サイト自体は2〜3日あれば作成できそうです。

今回このサイトを作成してみて、データベースやPHPなどを1から勉強したいなと思うようになりました。自分で作るの事が好きなので、できることが増えて楽しそうです!

1ヶ月あれば基本は網羅できそうな気がしています。

「WordPressで作成した会員制掲示板」をしばらく運営してみての気付きがあれば、また追記します。

何かの参考になれば幸いです!

コメント

  1. アバター siro より:

    かきうちさん
    まずはサイト作成ありがとうございます、そしておつかれさまでした
    この一連の流れを見ていて、かきうちさんはビジネスマンとしても凄いなーと思いますよ😃

    まだPIXTAさんが産声を上げた頃ですが(当時は知らなかった)
    私も写真の会員制販売サイトを立ち上げようと法人成りをしました
    カメラマンと組んでインハウスで写真撮って会員制の会員で販売するってスキームです

    当時私が欲しかった機能を実装すると開発期間1年で700万の見積もりが出てきて断念しましたが
    やらなくて良かったですね笑
    あっという間にこんな競争が激しくなるなら開発費用をペイできたか

    • こちらこそいつも有益な情報をありがとうございます^^

      0からサービスを開発してもらうとなるとまとまった資金が必要ですが、
      既存のシステムを利用すれば個人事業主の私でもなんとか形にできて、やってみて良かったです。

      開発してもらうと700万円…!
      今はダウンロードコンテンツを販売するネットショップを、安価で作れるサービスがあるので本当に便利ですね。

      数年前と比べると選択肢が増えている気がします。

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