WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

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

公開日:2017(平成29)年3月18日/最終更新日:

Knowledge Base Wordpress パソコン カスタマイズ 設定



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

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

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

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

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

使用するテーマ

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

使用するプラグイン

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

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

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

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

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

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

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

会員管理

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

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

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

フォーラムの機能

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

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

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

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

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

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

その他

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

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

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

を使用。写真素材は

を使って抽出

QA AnalyticsQA Analytics

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

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

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つ作ってプロフィール画面の投稿一覧に表示されるはず・・・が、なんと表示されないではありませんか!!(どこかのテレビ番組のよう)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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