WordPressでコメント機能を使って「口コミ」コンテンツを作ったときの備忘録

公開日:2017年3月5日 サイト作成日記
WordPressでコメント機能を使って「口コミ」コンテンツを作ったときの備忘録

WordPressには口コミサイトを作るためのプラグインが本当にたくさんリリースされています。ただ、いろいろと試しても無料版ではほとんど使い物にならないし、無料で使えるWordPressでなぜ有料のプラグインを使わなければならないの?という私的な疑問もあって何とか無料で似たものでもいいから作りたい!!そんな感じで調べていると・・・標準のコメント機能を使って何とかなりそう!!ということで、いくつかのプラグインを使って作ってみたときの備忘録です。

口コミコンテンツで必要な要件としては

  1. ユーザーor誰でもコメントが寄せられる
  2. 評価を付けることができる
  3. 評価の平均や口コミの数などの集計ができる

といったところでしょうか??

そして、口コミ情報オンリーのサイトではなく、今あるサイトにこのコンテンツを増やしたいということもかなえつつ作業を進めて行きました。

実際に作ったサイトは

金魚・熱帯魚・海水魚を飼育しよう!

で、趣味でやっている観賞魚に関するさまざまな情報を掲載しているサイトへ、観賞魚関係の用品や生き物が買える店舗の情報を足して、そこに自由にコメントをもらおうというプロジェクト(といえばかっこいい)です。成功すればいろいろなところに転用が効くのでちょっと楽しみです(ご覧いただいた段階で完成して稼働しているかどうか分かりませんのであしからず)。

作りながら書いているので、お見苦しい点が多いかもしれませんが、サイト作りの参考になれば幸いです

使用したプラグインやテーマ

テーマは私の作るサイトでは定番の「Simplicity2」を今回も使っています。

使ったプラグインは

  1. Custom Post Type UI

固定ページで作ればいいかとも思いましたが、全く違う情報の集まりにしたいのでカスタム投稿タイプを使うことにしました。ポストタイプを分けておけば情報作りもやりやすいですし、何かのリストを出すときにもごちゃごちゃと除外する必要がないですからね。

  1. Advanced Custom Fields

情報ページをできるだけテンプレート化したかったので、フォーム入力にするために使用しました

  1. WP Comments Fields Manager

これが今回のキモとなるプラグイン。通常のコメントフォームに独自の項目を追加できるプラグインです。これがなかったら今回のようなコンテンツを作る気にはなりませんでした

  1. Are you robot? google recaptcha for wordpress

「Google Recaptcha」を使ってスパムコメントを防止するために使用しました

  1. Advanced Comment Form

今回はリキャプチャ機能を使ってメールアドレスによる認証を止めたかったので、不要となるメールアドレスやサイトアドレスの項目を非表示にするために使いました

  1. EXEC PHP

投稿や固定ページの本文でphpを使うためのプラグイン。テンプレート化すれば不要

  1. Add Post Url

ボタン1つで投稿の中へ定型文を挿入できるプラグイン。テンプレート化すれば不要

基本的には上の7個のプラグインを使っています。この機能だけに7個も使うの??と思われるかもしれませんね。ネットで調べるとたくさんのプラグインを使ったら速度が落ちるとか不具合が起こるとかいろいろ書いてありますが、私の知る限りではプラグイン同士の競合で不具合が発生しなければ、50個程度のプラグインを使っても特に影響はありませんよ(現に私が作るサイトは結構な数になってます)。

最後に★評価をつけて集計するプラグインの導入をどうしようかと考えましたが、ひとまずこれで口コミ機能を作ってから検討することにします。

口コミ機能の製作過程

ショップ情報だけの投稿タイプを作る

投稿や固定ページにそのまま追加するのが通常の方法ですが、これだと他の情報ページと混ざってしまうので後々大変ということでカスタム投稿タイプを使います。

「Custom Post Type UI」でカスタム投稿タイプと、地域別に分類するためのカスタムタクソノミーを作りました。

テンプレートに関しては、カスタム投稿タイプ用のものを作れば後から改造も一括でできるのは分かっていますが、テーマの構造上少々面倒だし、後からテンプレート化もできるので、ひとまず各投稿の本文へ「Add Post Url」プラグインで登録した内容をボタンで挿入することにしました。

入力フィールドを作る

後々テンプレート化したときに

  1. カスタムフィールドに値を入れておいた方が便利
  2. 入力項目をきっちりしたい
  3. 管理上検索しやすいようにしておきたい

という観点から「ACF」プラグインを使ってフィールド化しました。

データを入力してみる

なにをどう表現して・・・というのは実際にデータを入れないと話にならないので、

  1. カスタムタクソノミーに県や市など地域の分類を設定
  2. カスタムフィールドがきちんとカスタム投稿タイプに表示されるかの確認
  3. 入力したカスタムフィールドの値をphpで呼び出すコードを本文に挿入して表示させる

ちなみにカスタムフィールドに入力した値は

<?php the_field("カスタムフィールドのスラグ", $post->ID); ?>

で呼び出せます(要投稿本文でphpを動かすためのプラグイン)
を作業。1件何かがあれば検証できるので適当にやってみることにします。ページが1つあれば口コミフォームを作っていくことができますからね。

実際に入力して表示してみると「あれも情報として必要かも」という項目が増えてくるので都度カスタムフィールド追加&phpタグ追加して調整。この辺が自由にできるのがカスタムフィールドのいいところ。

よしできた、公開して表示です・・・ん??しまった、肝心の「コメント」をこの投稿タイプに追加するのを忘れた!!ということでカスタム投稿タイプの編集をして無事にコメント欄出現。

コメント欄のカスタマイズ

コメント欄を早速カスタマイズ。とはいえ通常のコメント欄にも適用される部分があるので慎重に作業。

まずは、メールの必須入力を停止。これはWordPressの設定で完了

無法地帯になってしまったので、「Are you robot? google recaptcha for wordpress」を設定してキャプチャ認証追加。

ログインしていないユーザーとして表示するために2つのブラウザを使用すると確認が簡単にできますね(私の場合はGoogle Chromeで設定しつつIEで確認してます)。

さらに不要なフォームを削除して、文言を変更。これは「Advanced Comment Form」で設定。はい消えました!そして「メールアドレスが公開されることはありません。 * が付いている欄は必須項目です」という文言も変更。

早速テスト・・・送信後にエラーが・・・メッセージを見ると、「WP Comments Fields Manager」でエラーが出てる。まさか競合??

で、「WP Comments Fields Manager」で何も項目を追加してなかったので設定しました。

そして、再度テストしたら無事成功!!テストではなく聞きたいことを追加したら一通り終了です。

あと懸念されるのが「コメント」とか「コメントをどうぞ」という文言。Simplicity2ではここをカスタマイズできるので、それぞれ「コメントや情報」、「コメントや情報をお寄せください」に変更すれば通常の投稿のコメント欄でも口コミでも不都合ないかな?という感じ。通常の投稿でコメントをOFFにしてる場合や、投稿タイプ用のテンプレートを作ったときは「口コミ」と書いてしまえばOKですね。

それから、コメントはテンプレートの中で順位が一番下なので、これはテーマの編集で順序を入れ替えればOK。

ということで、今回の環境づくりは完了です。

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。