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

2つのプラグイン+αでフロントエンドから投稿できる「ゲストブック」を簡単に作る方法

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

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



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

ゲストブックと言えばbbpressなどの掲示板プラグインを使ったり、標準のコメントをカスタマイズする方法などがありますが、今回はちょっと工夫を凝らして2つのプラグインでゲストブックを作る方法を紹介します。コメントはコメントとして残したい方に特におすすめの方法です。
私が管理しているOrdinary Lifeで実際に使っている方法です。

ゲストブックの作成に必要なアクション

 この仕組みができれば、不特定の方から、もしくは会員(メンバー)の方から記事コンテンツを書いてもらうという点では「ゲストブック」「掲示板」「ニュース」「フリマ」「里親さがし」などいろいろなことに転用できると思います。この仕組みで必要なアクションとしては

  1. 管理画面(バックエンド)からではなく、閲覧画面(フロントエンド)から投稿できるようにする
  2. 管理画面(バックエンド)からではなく、閲覧画面(フロントエンド)から編集できるようにする
  3. 管理画面(バックエンド)からではなく、閲覧画面(フロントエンド)から削除できるようにする
  4. 投稿された記事は承認後に公開される/承認不要で公開されるのいずれかが選べるようにする
  5. 投稿された記事は自由に内容を書くのではなくフォーム形式で入力してもらう
  6. フォームには必須項目を設け、スパム防止をする
  7. フォームに入力した情報が決まったテンプレートで表示されるようにする
  8. テンプレートはゲストブックにのみ適用し、その他の記事は通常のテンプレートで表示する
  9. 投稿者と投稿を見た人がメールなどでコミュニケーションを取れるようにする
  10. 内容別や用途別で複数設置できるようにする
  11. 管理画面(バックエンド)からではなく、閲覧画面(フロントエンド)からメンバー登録できるようにする
  12. 管理画面(バックエンド)からではなく、閲覧画面(フロントエンド)からメンバー編集できるようにする
  13. 管理画面(バックエンド)からではなく、閲覧画面(フロントエンド)からメンバー削除できるようにする

といったところでしょうか。今回は誰でも足跡を残せるようにするゲストブックなのでメンバー登録や管理、投稿者と閲覧者とのコミュニケーションについては後々考えるとして、その上の項目については網羅できるようにしたいと思います。

この仕組みを一からプログラムを書いて作るのは知識もいるし大変なのですが、WordPressならたった2つのプラグインとテンプレートの編集で実現することができます。

今回作る「ゲストブック」のいいところ

フォームを使う

このゲストブックが掲示板と違うところは「フォーム」を使って入力してもらうということです。「フォーム」を使う利点は

  1. 入力項目を補助したり限定したりできる
  2. 入力する人が何をどこに入力するのかが分かる
  3. 管理者としては必要な情報を集めやすい

ことですね。自由に書くことができる掲示板やコメントは文字を自由に入力する欄しかないのでテーマから外れた書き込みなどで管理者側が苦労することが多いのですが、フォームを使えばある程度軽減されます。

いくつでも作れる

単純な足跡的なゲストブックだけでなく、記事の評価に使ったり、口コミ情報を書き込んでもらったりとこの方法を1つ知っておけばアイデア次第でいろいろな使い方ができます。それぞれの機能を持ったプラグインはたくさん出ていますが動作の基本は今回の仕組みと同じことなのでプラグインの数も削減できますし、デザインも統一できます。

どこにでも表示できる

入力フォーム、投稿された記事のリストなどをどこにでも表示することができるようになります。

投稿後の反響や意見などは通常のコメントを使う

 投稿する場所(投稿タイプ)が違うだけで通常の記事と何ら変わりない扱いになりますから、当然コメント機能もそのまま使えます。会員制関連のプラグインをつかったりすれば、投稿者がコメントをモデレートしたり返信したりすることもできるようにはなりますが、その機能を追加しようとすると結構な大作業になるため今回はパスします。

QA AnalyticsQA Analytics

プラグインの概要とインストール方法

今回は簡単にがテーマなのでこれから紹介する「Custom Post Type UI」「WP User Frontend」というプラグインを使い、それぞれの設定を行うことでゲストブックを設置します。

Custom Post Type UI

「投稿」とは別の「記事の集まり」を作るプラグインです。

WP User Frontend

フロントエンド(訪問者が見ているページ)に独自のフォームを設置して投稿してもらうプラグインです。

この2つを使って「WP User Frontend」で入力された内容を「Custom Post Type UI」で作ったカスタム投稿タイプに保存していくというシステムを作ります。

「Custom Post Type UI」のインストールと設定

プラグインの概要と説明は

で紹介していますので参照ください。

リンク先の記事ではカスタム投稿タイプを通常の投稿と極限まで同一に使うための設定を紹介していますが、今回はゲストブックなので、pingの送信、RSSフィード、カテゴリーの統合、新着記事への参入などは好みに応じて設定してください。

「WP User Frontend」のインストールと設定

プラグインの概要と説明は

で紹介していますので参照ください。日本語化してしまえば内容は一目瞭然のプラグインなので設定は簡単だと思います。
おおまかな流れは

  1. プラグインを日本語化する
  2. フォームを作る
  3. 投稿できる権限などを設定する
  4. 固定ページなどにフォームのショートコードを追加する

です。試行錯誤しながら目的に合った設定をしてください。
※2点だけ必ず設定しなければならないのはフォームの設定で

  1. 「投稿設定」タブの中の「投稿タイプ」をフォームから投稿された記事を保存するカスタム投稿タイプに変更することです。何も指定しないと通常の投稿と同じ扱いになってしまいますので注意してください。
  2. フォーム作成時に「メタキー」欄に分かりやすい半角英数字を入力しておいてください(後ほどの表示カスタマイズ部分で使用します)

ゲストブックに投稿された内容を表示する方法

今回のテーマ「ゲストブック」作成の中ではここがいちばん難解で大変な作業だと思いますが、まあ慣れてしまえば何てことはありませんし、いったんカスタマイズ方法さえ分かってしまえば通常の投稿用テンプレートであったり、他のカスタム投稿タイプであっても思いのままに投稿テンプレートをカスタマイズできるようになりますから是非覚えていただきたいです。

サンプルとしてゲストブックを作ったサイトではSimplicity2の1.9というバージョンのテーマを使っていますので以前に行ったテンプレートの作成手順に従って設定していきます。

Simplicity2はカスタマイズしやすいようにすごく分かりやすくファイルやコードが書かれているのですが、他のテーマでは複雑なものがあったりして大変かもしれません。

基本的にはテーマのsingle.phpを探してコピーを取り、「single-カスタム投稿タイプ名.php」というファイル名を付け、その中のループになっている場所に表示したい内容をphpやhtmlでコードを書いていくことでカスタム投稿タイプに対する独自のテンプレートは完成します。

※テンプレートを使わなくても、「WP User Frontend」に表示用テンプレートが存在するのですが、入力項目の羅列になってしまいますのであまりおすすめしません。

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)