WordPressの参加型Q&A(フォーラム)サイトを作ったときの備忘録

WordPressには公式のフォーラムがありますが、基本英語なので理解できないことが多く、また、「Yahoo知恵袋」や「おしえてGoo」「OKWAVE」などのQ&Aサイトでは実際にはWordpressを使っていない人も多く、中には「専門家に頼むといい」といった全く回答になっていないものや、「素人にはわからないだろうね」といった半ば誹謗中傷のような回答も多く、質問された方や、親身になって回答しようとする方が不快に思うことも少なくありません。

とは言ってもやっぱり解らないことは誰かに聞きたい、できれば使っている方や同じ環境でテストを行った上で回答をしてもらえる方がいるようなフォーラムがあれば・・・という思いの元、以下のようなWordpressに特化したフォーラムサイトを作成してみることにしました。

ここではそのサイトを作るにあたって行った作業やカスタマイズについて後に似たサイトを作るときの参考のため、備忘録として書いておきます。

なお、このページは「完全にサイトができるまで」というものではなく、いろいろ試行錯誤していった過程になりますから、その通りにやれば同一サイトができるという性質のものではありませんので、あくまで参考として読んでいただければ結構です。

スポンサーリンク



使用するテーマ

私が作るサイトでは必ず使用する「Simplicity」で構築しています

私がWordpressでサイトを作るときには現状100%「Simplicity」というテーマを使っています。もちろん今ご覧になっているサイトも「Simplicity」で作ってます。公式サイトでもこのテーマについてすごく細かく解説されてますから今更書くこともないとも思いつつ、一人のユーザーとして私の言葉で紹介しようと思います。

使用するプラグイン

手組で作れればなおいいとは思いますが、コードの知識が私にはありませんのでプラグイン頼りで作成していきます。おそらく結構な数のプラグインになると思います

セキュリティ関係やいつも使うもの

まずは何と言ってもこの部分ですね。使用したプラグインは次の通り

コメント欄を使うのでスパム対策として「Throws SPAM Away」。これを使うことで日本語以外のコメントをブロックしてくれるので日本人用の回答欄がついでに実現できる

多重にping送信されないように

「WordPress Ping Optimizer」はこの重複ping送信を制限することのできるプラグインです。たくさんありそうなプラグインですが、Wordpressの公式サイトで検索しても同様の機能のものがない、唯一のプラグインではないかと思われます。

Google様などにサイトの構造をお知らせするサイトマップを作成するために「XML Sitemap & Google News feeds」

アーカイブページのスラグからユーザー名を類推されないように

「Edit Author Slug」は単純にフロントエンドでのユーザー投稿一覧で表示されるURLを任意のものに変更し、ユーザー名の類推を防ぐことができるプラグインです。

会員管理

会員管理はすべてを1つでできるように

【Ultimate Member】はWordpressで会員制のサイトを作成するには欠かせない、かつ、これだけあればOKという完全無料のプラグインです。使ってみると「ユーザーの登録と管理をするにはこの設定やこの機能が必要だな」と作りこんだプラグイン作者の情熱のようなものが伝わってくる秀逸でおすすめのプラグインです。

を使用します。また、このプラグインは後述するフロントエンド投稿プラグインとも連携できるので便利です。

質問は投稿で受け付けるためこのプラグインの機能であるアーカイブで「質問一覧」はできますが、回答をコメントを使って実装するので一覧表示にはちょっと苦労しそうです。

フォーラムの機能

bbpressなどの掲示板プラグインや、Q&Aに特化したプラグインを使ってもいいのですが、後々制限が出てくるといけないですし、何より質問する内容をできるだけ限定したいので独自のフォームが使える

「WP User Frontend」は日本語化してしまえば使い方は一目瞭然なので、一度使ってみてほしいプラグインです。もう一度書きますが、入力項目を指定できる(通常の何でも入力できる本文なしでフォームの作成ができる)のはおそらくこのプラグインだけだと思います。

でフロントエンドからの「投稿」として受け付けるようにします。

また、Q&A用にカスタム投稿タイプを作り、カスタムタクソノミーで「テーマ」「プラグイン」「CSS」「その他」程度のカテゴリー分けをします。

そして、そこへの返信はコメント欄をカスタマイズして実装します。コメント欄を使うことでリプライ(返信)もできるようになるので便利ですしね。使うプラグインは

何とか今の環境のまま、掲示板やカスタマーレビューなどコミュニケーション系の機能を作れないか・・・と探して見つかったのが、今回紹介する【WordPress Comments Fields】プラグインです。

そしてコメント送信時のバリデーション(入力確認)でエラー時に別ページへ移動しないように

訪問者の方が貴重なコメントを寄せてくれるシーンで起こる不都合というば、未入力時やエラー発生時に画面が切り替わってしまうこと。「comment validation computy」は同一画面上でエラーメッセージを表示できるようになるちょっと便利なプラグインです。

を使います。会員制にするのでcapthaなどの機能は今回は使いません(後々使うかもしれません)

その他

管理者だけが不相応なユーザーや不相応な質問・回答を管理できるはずもありませんので

「Report Content」はコメントや投稿などとは全く別の投稿タイプを使って「表に決して表示されない通報」をしてもらうことができるようになるプラグインです。また、違反通報だけでなく、表示される文言を変えれば意見や要望を募集する際にも使えますから利用用途は結構広いと思います。

を使って違反通報機能をつけます。

デザイン要素としてやっぱり動的なバックグラウンドイメージが何となくいい雰囲気なので

「Unlimited Background Slider」はサイトの雰囲気を出す上で重要な背景画像を複数設定し、フェードイン/フェードアウトさせながら一定時間毎にどんどん入れ替えることができるプラグインです。

を使用。写真素材は

「Pixabay」は商用使用も可能な無料の画像やイラスト・動画を提供しているサイト。Pixabayに登録されているメディアをWordpressの投稿編集画面から検索して画像を挿入できるのが「Pixabay Images」プラグインです。

を使って抽出

その他必要だと思うこと、不要だと思うこと

「いいね」機能や「ベストアンサー」のような機能を付けることもできますが、自身無意味だと思うので今回はパス。

Yahooではベストアンサーを選ぶと回答が終了するようになっています。実装できそうですが今回はパス。

作成過程

全体デザイン

まあ、きちんと機能してからでもいいのでは?と言われそうですが、やっぱり作ってる実感が欲しいので、サイトデザインを設定。バックグラウンドスライダーとCSSで調整して透明感のある黒基調のものにしました。うーーんいい雰囲気(自画自賛すぎ??)。実はこのCSSは私が作成している別のサイトからのコピペ。同じテーマを使うからこそできる手抜き技ですね。あとは作りながら微調整でOKかな?

会員制サイト部分を作る

今まで1度も作ったことのなかった会員制サイト化。「Ultimate Member」プラグインでいろいろ設定してチェック。このプラグインは後に設定する「Wp User Frontend」と連携できるところも便利。

今回は

  1. 会員登録があったら仮登録にしてメールで通知
  2. メールの中のリンクをクリックして本登録完了

というオーソドックスなスタイル。この方法でなくても、すぐに登録完了させたり、管理人である私がいちいち(面倒臭さ感バリバリ)承認する方法もとれますが、メールで2段階認証することで、いわゆる「なんちゃって」メアドで登録されることを避けるのが目的。

自分で翻訳ファイルを作って(上のプラグイン紹介リンクからダウンロードできるようにしてます)動作させてみたら、特にフロントエンドなどの文言で???というのがいくつかあったので修正。

よくわからないのでデフォルトフォームに欲しい項目を追加して終了。フォームデザインはひとまずそのままにして後から調整しよう

案外簡単にできた!!(苦労して1400行を超える翻訳してよかった)

でもって早速テストユーザーで登録してみると・・・ん?2段階認証にならない!!素直に登録されてしまった・・・

さらに、このユーザーは管理者じゃないからバックエンドに入れなくなってしまった!!どうしよう・・・パニックキー控えてないし・・・でしばらく悩んで「そうだ、ログアウトしよう」でログアウト後に管理ユーザーでログインしたら即解決!!

新しいものの設定は結構大変

とはいえ、2段階認証ができるようにしなきゃと思っていろいろ見てたらユーザー権限の項目にユーザー登録時の動作設定があった。

初めて使うときは結構ここで躓くかもしれません。

設定のメール設定は権限の設定に応じて必要ならメールするという関連付けがされているようで実際の動作とは関係ないんですね。でも、2段階認証にして、仮登録のメールをオフにしたらいったいどうなるんだろう・・・まあまた検証するとしよう。

管理ユーザーでログインするとバックエンドで再度ログインを促され、テスト登録したユーザーでログインすると絶対にバックエンドにはいかない。これで大丈夫。

WordPressの基本設定

ここで後から悩まないようにWordpressの基本設定部分を変更しておくことにします。

今回は回答にコメント機能を使用するので、ディスカッション設定で

  1. 新しい投稿へのコメントを許可する→ON
  2. ユーザー登録してログインしたユーザーのみコメントをつけられるようにする→ON
  3. コメントが投稿されたときの通知→OFF
  4. コメントがモデレーションのために保留されたときの通知→OFF
  5. コメントの手動承認を必須にする→OFF

こうしておかないとうまく機能しないのでまず設定。動かしてみてその他の項目の調整をすることにしました。結構こんなところで「なんで動かないの??」と悩むことが多いので頭がクリアなうちにしておくといいでしょう。

そして、パーマリンクの設定を単純な「投稿ID」へ変更。

必須なプラグインの導入

さて、それでは肝心の投稿機能とコメント機能へ・・・の前に少しブレイクして、いつもサイトを作るときに使っているプラグインをいくつか導入して設定。

カスタム投稿タイプの追加

当初の予定通り、質問はカスタム投稿タイプへフロントエンドから投稿してもらうようにするということで、「Custom Post Type UI」を使って追加。ここは慣れたものなので簡単に終了。そしてテスト投稿を1つ作ってプロフィール画面の投稿一覧に表示されるはず・・・が、なんと表示されないではありませんか!!(どこかのテレビ番組のよう)

さっさと先に進めなくてよかったと思いつつ、でもやっぱり最初の設計方針は変えたくないのでいろいろググってみたら、海外のサイトにヒントが載っていました。それを参考に修正して完成!!ここでかなり時間を取られてしまいました(泣)。

まあ素直に投稿を質問用にしてカスタム投稿タイプを「更新情報」として、テンプレートを逆にすればいい話なのですができるものならこれを機会に解決しておきたいということで意地で改造しました。

一応そのときの対処の方法を記事にしたので同じことをしたい方、同じところで躓いた方は参考にしてくださいね

「Ultimate Member」のプロフィール画面で表示できる、そのユーザーが投稿した記事の一覧にはカスタム投稿タイプが反映されないという事態が発生。対応できる方法がありましたので紹介しておきます

それからカスタム投稿タイプを追加したらping送信やRSSへの追加、カテゴリーやタグアーカイブへの参入などなどやっておくべきことがあるのでそれを設定。

ワードプレスで通常の投稿とは別に「投稿の集まり」を作れる機能であるカスタム投稿タイプ。カスタム投稿タイプ用にテンプレートを作ってカスタムフィールドの入力のみで記事を作成できたり、カスタムタクソノミーといってカスタム投稿タイプごとに独自のタグやカテゴリーを設けられたりと、Wordpressでこれを覚えたらやりたい放題になる機能ですが、そもそも機能を使うのにもちょっと知識が必要だし、カスタム投稿タイプは導入しただけでは通常の記事のように動作しないし、いろいろと設定をしないと検索エンジンクローラーが来てくれない(インデックスされない)など忘れてはいけない設定がたくさんあるので、忘れないように手順を書いておこうと思います。これだけやればカスタム投稿タイプを100%活用できる手順です。

フロントエンドからの投稿環境づくり

ここで使うのが「Wp User Frontend」というプラグイン。いろいろとフロントエンドからの投稿環境を作るプラグインはありますが、カスタムフィールド使って自由にフォームが作れるところがこのプラグインの最大の利点。表示するためのテンプレートを作成する必要はありますが、それさえクリアすれば、投稿する側も便利なフォーム型の投稿画面が使えます。

ということで早速プラグインインストールとフォームづくり。何度か使ってますから設定はお茶の子さいさいです。

無料版ではカスタムタクソノミーが使えないのでここは妥協して通常のカテゴリーやタグを使うようにカスタム投稿タイプの設定を変更。

・・・とここまで来て、特にカスタムフィールド使って投稿する意味がないことに気づく・・・まあ後々のために投稿タイプは分けておこう。それに、通常のテンプレートがそのまま使えるのでカスタマイズの手間が省けました。

いろいろな文言等を調整してとりあえず終了

動作確認をかねていくつか質問と回答を追加・全体の微調整

過去記事を含めてこのサイトにあるQ&Aを実際のフロントエンド投稿とコメント欄を使って追加してみました。ひとまず動作しているので大丈夫そうです。

トップメニューを消し、サイドバーの表示項目を調整。

「IP Address Widget II」というプラグインを1つ追加。これは、ウィジェットへ接続元の情報を表示するもの。何も記録しないのであまり必要なさそうだけど、見られてる感を出すことでスパムが減る方向に働けばいいかと思い設置しました。

あとはトップページの表示項目を調整してサイトとしては完成!!かな??まあ走らせてみないと何とも言えないですね。

----ここまでで基本機能ができたので、ひとまずサイト公開-----

出来上がったサイトは

です。よかったら参加してくださいね

トップへ戻る