無料のブログツールやhtmlで作るホームページから脱却してWordPressに切り替えてから作りたいサイトといえば、「掲示板サイト」や「誰でも投稿できるサイト」といった不特定多数の方が投稿できるコミュニケーション系のサイトではないでしょうか？
もちろんWordPressを使いこなしていけば、そうしたコンテンツだけのサイトを作ることもできますし、サイトの中の１つの機能として組み込むこともできます。とはいえただでさえPHP?CMS?CSS?と訳のわからない単語が並んでサイト自体を作るのも大変いう状態の方がいきなりそうしたコンテンツを作るのはかなり敷居が高いですね。
サイトをきちんと表現することに疲れてしまっていつの間にか投稿もしなくなって放置・・・という方も少なくないと思います。そんな方のために、今回は会員制で、会員が自由に投稿できるようなコンテンツを作ったときの設定や経緯をできるだけ細かく紹介できるページを作成することにしました。
さらに工夫したり、使うものを替えたりすればもっと違う表現や動作を行うサイトが作れるかもしれませんが、まずはユーザー登録した人が投稿できるサイトを作るという目的が実現できるところまでを紹介しますので、どんなものかを知るきっかけになればと思います。
１つだけ注意点があります。
それは作成に関してではなく作成後のこと。結局「誰かに情報を追加してもらってアクセスアップを図る」というのがこういう機能を使う人の根底には必ずあるはずです。違いますか？？
でも、環境を作れば早速どんどん投稿してもらえるということはめったにありません。自身のコンテンツ作りをしてベースとなる情報を増やしながら、他の方にも参加してもらうというスタンスで臨むことが必要だと思います。
また、自分以外の人が投稿するということは、当然セキュリティや投稿内容の精査が必要になりますから、管理の仕方によってはサイトの品位を損なう可能性もあるということを理解した上で、今回紹介する投稿コンテンツの作成を行っていただきたいと思います。
さて、前置きが長くなりましたが、ここから本題スタートです。かなり長い文章になりますし、設定事項も多いですからブックマークでもして時間のある時にゆっくり読んで作業を進めてくださいね。
会員制の投稿サイトでやりたいこととテストで使用したテーマ
使用しているテーマは「Simplicity2」です。表現部分を除けば他のテーマでもやることは一緒なので参考になるかと思います。WordPressを始めたばかりの方は同じテーマで設定すれば大丈夫だと思います。
今回行いたいことは
- フロントエンド（訪問者が閲覧する画面）からユーザーが投稿できるようにする
- フロントエンドから会員登録・ログインなどの処理を行う
の大きく２つの動作をさせることです。順を追って経過を書いていきます。途中当サイト内で紹介している参考情報へのリンクなども挿入しますから読みづらいかもしれませんがこの記事１つで完成させてもらえれば・・・という思いでやってることなのでご容赦ください。
それではさっそく作っていきますね。作りながらこの記事を書くのでまとまりがないかもしれませんがご愛敬ということで。
フロントエンドからの投稿環境を作る
会員制サイトを作っても、投稿を行うのにバックエンド（管理画面）を使うのはセキュリティから考えてもあまりよくないので、今回はフロントエンドに投稿画面を作って投稿できるプラグインを使用しました。
使ったのは「WP User Frontend」というプラグイン。他にもいくつか同様のプラグインはあるのですが、「WP User Frontend」のいいところは入力窓をいくつも作っておき、そこに入力してもらうような「フォーム」が作れることで後々の投稿の管理がしやすくなるからです。それ故設定がちょっと複雑になりますが、後先のことを考えたらこれを使うのが一番だと思います。
プラグインの概要と日本語化ファイルについては
で紹介していますから、より詳しく見たい方はどうぞ。
さて、早速プラグインを有効化すると・・・
という画面がプラグインの一覧一番上に出てきました。
「Install WPUF Pages」をクリックすると、「WP User Frontend」で使う固定ページが自動で作成されます。不要なものは後で削除するなりすればいいので「Install WPUF Pages」をクリックして完了。たくさんの固定ページができました。ひとまずこれは置いといて、管理画面を日本語化します。方法は上の紹介記事を見てくださいね。
まずはフロントエンドからの投稿を体験してみよう
ごちゃごちゃした設定は抜きにして、ひとまずどんな機能なのかを体験しましょう。次の手順通りに設置してみてください。
- ダッシュボードから「User Frontend」→「フォームの設定」を開きます
- Sample Formというのがありますので、右にある[wpuf_form id=”〇〇”]というショートコードをコピーします
- 固定ページを新規作成します。タイトルは適当に入力してください
- 先ほどコピーしたショートコードを本文へ貼りつけて「公開」してください
- 固定ページを表示してください
こんな感じのフォームが表示されます
ね！！びっくりしますけどこれでフロントエンドから投稿するフォームと機能が追加されました。驚くほど簡単です。
早速そのまま投稿してみることにしましょう。必須項目をすべて入力して「送信」をクリックします。
・・・ん？？できないじゃん！！いきなり問題発生？？
ではなく、フロントエンドから投稿するユーザーが「ビジュアルリッチエディターを使用しない」設定になっていると動作しないようです。ダッシュボードの「ユーザー」からテストするユーザーの編集を開き、「ビジュアルリッチエディターを使用しない」のチェックを外して更新しましょう。
そして再度フロントエンドから投稿してみたら・・・OKですよね？？通常ユーザー登録したときはこの「ビジュアルリッチエディターを使用しない」のチェックが外れた状態ですから、使用に際して問題はないと思います。
無事に投稿できると今フロントエンドから投稿した記事が表示されますね。これで閲覧画面からの環境は完璧です。
新しくフォームを作ってみよう
前項ではあらかじめ作られているサンプルを使いましたが、「WP User Frontend」プラグインでは複数の投稿フォームをいくつでも作ることができます。
手順は簡単
- ダッシュボードから「User Frontend」→「フォームの設定」をクリックします
- 「新規フォーム追加」をクリックします
- 次の画面で「Blank Form」か「Post Form」を選びます
似たものですが、「Post Form」を選択すると通常の投稿で使う画面に表示されるものがすべて入ったフォーム要素がすべて追加された形になります。一からフォームを作る場合は「Blank Form」を選択します。
今回は「Post Form」を加工してオリジナルの入力画面（フォーム）を作っていきます。
「Post Form」となっているタイトルは適当なものに変更します
これはフォーム用のタイトルなのでフロントエンドで表示されることはありませんから管理上分かりやすいタイトルにしましょう
各項目の設定をします
表示されているのは通常の投稿画面と同じ項目が場所別で表示されていますので
【文字を入力するタイプの項目】
- 必須項目にするかどうか
- フォームの項目ごとに表示するタイトル
- 項目の説明
フォームの入力窓下に表示する文章です。「〇〇を入力してください」など
入力支援文
入力窓に薄い色で表示する入力のヒントなどを設定します
- 無記入の場合に自動で入力される文字列
- 入力窓のサイズ
項目によって文字数の指定または行列の指定ができます
エディタの種類
標準（テキストエディタ）、リッチテキストエディタ（ビジュアルエディタ）、簡易リッチテキストから選択します
画像追加ボタン
本文などで画像をアップロードするボタンを表示するかどうかの設定です。先ほどのテストで見た方もいると思いますが、アップロードするファイル選択の画面が出るだけで過去の画像などは表示されません（メディアライブラリ内は表示されない）ので安心です。
【選択するタイプの項目（カテゴリー）】
選択方法
ドロップダウンやボタン表示など投稿する人が使いやすいものへ変更できます
- 並び替えの方法と順序
- 特定カテゴリーの除外
などを設定します。個別の項目にCSSでデザイン要素を与える場合には適当な「CSS Class名」を半角英数字で設定します
※今表示されている内容はテーマに特別な設定をしなくても表示できる項目です。右画面にたくさんの項目がありますが、これらに入力された値を閲覧画面で表示するにはテンプレートの編集が必要です。
そして必要のない項目は「×」をクリックして削除します（前項のテストフォームはタイトルと本文だけでしたね）。
完成したら保存して、あとは固定ページにショートコードを設置すれば、投稿フォームの完成です。うーーんつくづく簡単ですね。
要は
- フォームを作る
- 固定ページへフォームのショートコードを挿入する
だけですぐに実現できるんですね。
フォームの条件を追加設定しよう
フォームの入力項目そのものの設定を前項で行いました。ただそのほかにもいろいろな設定ができます
先ほど作成したフォームの「編集」を開いてください
フォームの上の方にタブがいろいろありますね。ここでこのフォームに関するその他の設定を行います。【投稿設定タブ】に関して説明すると・・・
- 投稿の状態／入力して「送信」を押したときに「公開」にするのか「下書き」にするのかなどの設定
- 基本カテゴリー／カテゴリー項目を入力者が設定できない（しない）ときに自動設定するカテゴリー
- 訪問者の投稿／ログインユーザーでなくても投稿できるようにするかどうか
- 未ログイン状態の場合のメッセージ／ログインしているユーザーのみが投稿できる環境で、ログインしていない場合のメッセージ
- リダイレクト先／投稿が終わった後で表示されるページ（初期状態で投稿編集画面になっていますが、通常のテーマなら投稿したページそのものへリダイレクトされます）
- コメントの状態／投稿された記事に対してコメントを許可するかどうか
- 送信ボタンの文言／先ほどから「送信」と書いていますが、ここで「送信」の文言を変更できます
- 投稿の下書き／下書きできるようにするかどうかですが、通常はなしにした方が管理はしやすいと思います
いろいろと変更して試してみてくださいね。
これで基本的なフロントエンドからの投稿環境が完成しました。ここまでお疲れさまでした。
一歩進んだ投稿フォームの使い方
今まで作ったフォームでは投稿本文へ自由な文章が書ける反面、書き方や内容を制限したりすることができません。これでは投稿する人が何を書いていいか迷ってしまうこともありますし、全く関係のない投稿をされたりすることもあります。
また、通常の投稿と混ざってしまうので管理上不都合になることもあるかもしれません。
ここからは
- 独自のテンプレートを作ってフォームに入力した情報を無加工できれいに表示したい
- 通常の「投稿」タイプはサイトの更新情報などを表示するのに使いたい
という考え方でフロントエンドからの投稿機能の使い方について紹介します。
今回は、カスタム投稿タイプを作り、作成したカスタム投稿タイプ用にオリジナルテンプレートを作って表示させるという方法を紹介します。
カスタム投稿タイプの作成方法については
を参考にしてくださいね。
少し脱線して「カスタム投稿タイプ？？」となってしまった方のために、カスタム投稿タイプについて簡単に説明しますね。
カスタム投稿タイプは、WordPressで標準搭載されている「投稿」と「固定ページ」というページを作る機能とは別の「投稿」を作るための機能。これを作ることで他のユーザーが作ったページが管理人のものと混ざってしまうことを防ぐ役割があります。もちろん後で投稿タイプを作って分けることもできますし、逆に投稿に含まれた一覧を特定のユーザーだけに限定したりできますから後で作業しても問題ありません。でも、どうせやるなら・・・ということでここでは分けることにします。
作成する投稿タイプ名は半角英数字が使えます。この投稿タイプ名が実際にサイトで表示された際に
「http://サイトのURL/test-posttype/〇〇」
と表現されますから、実際に使うことを考えて設定してください。
カスタム投稿タイプで使うフォームの作成と設定
基本的なフォーム作成の手順は変わりません。ただカスタム投稿タイプでは、カスタムフィールドを使って入力する内容を限定した項目をいろいろと作っていきます。
フォームの編集画面の右側に「カスタムフィールド」という項目がありますね。この中から、管理者が入力してほしい項目や選択項目をどんどんフォームへ追加して設定していきます。基本的に個別で設定できる項目は変わりませんから見れば分かると思います。
１つだけ必要なのは「メタキー」という項目。後ほど出てくるテンプレートを作る際に必要となる項目なので、各パーツごとに半角英数字で入力しておいてください。
そしてフォームを保存したらフォームのショートコードが挿入されている固定ページを表示してみてください。きちんと設定したフォームが表示されてますね！うーーんやっとここまで来た！！感動ものです。
これである程度入力内容を限定したフォームの設置ができました。でも・・・基本的なフォームのところで書いた通り、これらの項目は通常では表示されません。
この項目は「カスタムフィールド」と呼ばれ、カスタムフィールドの内容を表示するようにテーマのテンプレートを作る必要があります。
今回はテストで使っている「Simplicity2」テーマでのテンプレート作りを紹介します。作り方は
を参考にしてください。
テンプレートができたら、実際の閲覧画面で表示したい場所へ
文字が結果になる入力項目なら
<?php echo post_custom("「メタキー」で設定した英数字"); ?>画像なら
<?php echo wp_get_attachment_image( $attachment_id=post_custom('「メタキー」で設定した英数字') , $size='画像サイズ', $icon='false', $attr=''); ?>※画像サイズは「thumb（サムネイル）」「中（medium）」「大（large）」「オリジナルサイズ（full）」から大きさを設定します
をテンプレート項目分追加していきます。
そのほかにもカスタムフィールドを呼び出すphpはあるのですが、これが一番簡単なコードです。
こうすることで、
- フロントエンドから投稿される
- 投稿されたものは指定したカスタム投稿タイプに保存される
- カスタム投稿タイプが作成したカスタムテンプレートを通じて表示される
という表示までの経路が確立でき、カスタムテンプレートにはカスタムフィールドに入力された値を引っ張り出す細工がしてあるのできちんとページが表示されるようになるのです。
※上の方のリンク先「WP User Frontend」プラグインの紹介記事ではショートコードを使ってフォームに入力した値を呼び出す方法を紹介していますが、ショートコードはテンプレートタグでは使用できません。また、ショートコードをテンプレートタグとして使う方法を
で紹介していますが、「WP User Frontend」のショートコードではこの方法でエラーが出て表示されませんでした。
いかがでしたか？脱線しながらもできるだけ細かく分かりやすく説明させていただいたつもりですが、仕組みは理解いただけたでしょうか？？
まずは通常の投稿を使って管理人でない人からの入力環境を作って運用してみて、カスタム投稿タイプ云々を理解してきたら分けるという方法でも対処できますから焦らずに設置しましょう（投稿されたものはデータとして残っていますから、後からカスタム投稿タイプへ統合することもできます）。
おまけ 複数の画像を扱うのは難しい
「WP User Frontend」では「画像のアップロード」をフォームに挿入して複数の画像がアップロードできるようになっています。私の知識不足かもしれませんが、プラグイン作者のサイトに掲載されているコードを参考にテストしてみましたが同じカスタムフィールド中にある複数の画像IDを取得して順番に表示するという動作でエラーが発生して表示できませんでした。
複数の画像を扱う簡単な方法は、「画像のアップロード」を複数フォームの中に挿入し、カスタムフィールド名（フォームのメタキー）を分け、それぞれの画像を先ほどのテンプレートタグで呼び出せば解決できます。
フロントエンドの投稿フォームにはアップロードボタンが複数表示されますが、逆にこの方が親切なのかもしれませんよ。
おまけ テンプレートタグを使う前に
いきなりテーマのテンプレートタグを追加したりするのはちょっと敷居が高いという方におすすめのテスト方法があります。それは、フォームから公開した投稿の編集画面を開き、本文へphpを記述してイメージをつかむという方法です。
ここで十分にテストしてからそのままテンプレートタグへコピペすればいろいろな画面を見たり、慣れないテーマの編集で悩むことも少なくなりますからおすすめの方法です。
手順は
- 投稿の中でphpが使えるようにするプラグインである「EXEC PHP」をインストールする
※「EXEC PHP」だけでなく他にもたくさん同類のプラグインがありますが、phpのバージョン7では動作しません。プラグインのインストールに失敗したり、動作しない場合にはWordPressを動かしているphpのバージョンを確認してください。
- フロントエンドの投稿フォームから適当に値を入力して公開する
- バックエンド（管理画面）から２で公開した投稿の編集画面を開く
- 先ほど紹介したテンプレートタグなどを使ってプレビューしながらフォームに入力した値を適用した完成形を作る
- 投稿を保存する
※フォームの設定によってはプレビューから「編集」をクリックすると「WP User Frontend」の編集フォームが表示されてしまい、せっかく本文に入力したphpなどの文章がクリアされてしまいますから、上記３の画面下にあるフォームでデータの訂正等は行ってください。
最後に本文で設定した内容をテンプレートへコピーすれば完了です。テーマの編集に慣れていない方はこの方法の方が無難に設定できると思います。
おまけ メール機能を使う
ユーザーによる投稿サイトなどを作り、できた！！と思った矢先に突き当たる問題、それは「その後の連絡はどうする？？」ということだと思います。
WordPressで標準装備されている機能を使うとすればコメント機能ということになるのですが、それでは全員に公開されてしまいますね。最初の差し障りないやりとりはそれでいいとしても、連絡を取るうちに例えば個人情報などのやり取りが発生した場合はどうしますか？
・・・でたどり着くのが投稿後のやり取りはメールでしてもらおう！！という方法。
せっかくフロントエンド投稿機能ができたのですから、ついでにその後のコミュニケーション部分も実装してしまいましょう。
フォームに入力してもらうにせよ、ユーザー登録したメールアドレスを使うにせよ、「メールを送る」コードを挿入する必要がありますね。ここでは簡単に設置できるコードを２つ紹介します。
【フォームに入力したメールアドレス宛にメールを送信させる方法】
<a href="mailto:<?php echo post_custom('フォーム内のメールアドレス入力欄のカスタムフィールド'); ?>">投稿者にメールで問い合わせる</a>【ユーザー登録時のメールアドレス宛にメールを送信させる方法】
<a href="mailto:<?php echo the_author_meta('user_email'); ?>">投稿者にメールで問い合わせる</a>で簡単に機能が実装できます。
さらに、件名や本文を自動で入力するには
【フォームに入力したメールアドレス宛にメールを送信させる方法】
<a href="mailto:<?php echo post_custom('フォーム内のメールアドレス入力欄のカスタムフィールド'); ?>?subject=問い合わせ&body=本文">投稿者にメールで問い合わせる</a>【ユーザー登録時のメールアドレス宛にメールを送信させる方法】
<a href="mailto:<?php echo the_author_meta('user_email'); ?>?subject=問い合わせ&body=本文">投稿者にメールで問い合わせる</a>※赤字の部分は自身の言葉やフィールドに合わせて変更してくださいね
それからもう１つ、メールアドレス情報は常に狙われています。情報収集ロボットなどと呼ばれ、サイト内に掲載されているメールアドレスと思われる情報を自動で抜き取って悪用するなどの行為を行うプログラムによってメールアドレスが流出し、迷惑メールの嵐になってしまう可能性があります。対策として
など、メールアドレスを暗号化して情報収集されないように対策することで、投稿する人が安心してメールアドレスを使えるようになります。メールアドレスを暗号化する機能ですから完全に防御できる訳ではありませんが、サイト管理者としてこういう気づかいというか機能は絶対に必要だと思います。
会員登録と管理を行う機能を追加する
ここまではフロントエンドに投稿機能を持たせるプラグイン「WP User Frontend」の使い方について紹介してきました。これだけでもたいそう長い文章になってしまったので記事を分けようかとも思いましたが、会員登録機能を持たせてユーザー登録の後にフロントエンドでの投稿機能を使うようにしないと
投稿後に投稿者自身が修正したい場合にどうするか？？
という問題が出てきます。「WP User Frontend」には登録ユーザーでなくても記事を投稿できるようには設定できます。でもそこに編集機能を付加してしまうと誰が投稿したものでも編集できるようになってしまうので必ず問題が発生します。
この問題を解決するためには、登録するという作業が加わる分投稿してもらうのに多少敷居が上がったとしてもユーザー登録が必須になりますので、一気に紹介しますね。
まずはプロフィールを自由に設定（追加）できる「Ultimate Member」というプラグインがあり、追加で「Ultimate Member + WP User Frontend – Addon」というプラグインを使うことで「WP User Frontend」のユーザープロフィールに「Ultimate Member」で追加したプロフィールも表示できるという夢のようなシステムがあるのですが、テストしてみた結果設定するだけで疲弊してしまう（笑）可能性がありますので、今回は簡単にできるものを紹介します。
今回紹介するのは「Theme My Login」というプラグイン。
で紹介しています。設定方法などはプラグインの紹介記事内で解説していますのでそちらを参照いただけば簡単に機能を追加できます。
前述した「Ultimate Member」にあって「Theme My Login」にない機能は
- ユーザーのプロフィールはWordPress標準のものだけ
- 退会（ユーザー削除）できる機能がない
- 新規登録時の２段階認証機能がない
- ユーザーのログイン履歴や状態を見る機能がない
といった感じです。
３の２段階認証とは
- ユーザー登録をしたら、登録したメールアドレスへ確認メールを送る
- メールに書いてあるURLへアクセスすると登録が完了する
という段取りでより確実に登録を完了する段取りのことで、いわゆる「捨てアドレス」や「メールアドレスっぽいものでの登録」を防止するための機能。また、マッチング系のサイトでは投稿されたものを閲覧した方が連絡を取るときにメールが送れないといったトラブルを防ぐためにも有効な機能ですから、こうした機能が必要なサイトでは「Ultimate Member」を使ったほうがいいかもしれません。
また、「Theme My Login」には前述した２段階認証を行っていない（仮登録だけしたユーザー）を見ることも、幽霊部員（長期ログインしていないユーザー）を見つけることもできませんから、たくさんの会員が登録した際には管理が大変かもしれません。
「Theme My Login」にない退会機能は別の方が配布している
を使えば実装できますから併用すれば問題ないと思います。
最後に
本当に長い長い文章を読んでいただき、ありがとうございました（書いている方も疲労困憊・・・）。
今回紹介した「Theme My Login」という会員登録やログイン・ログアウトを行うプラグインと、閲覧画面（フロントエンド）から投稿できる環境を作る「WP User Frontend」プラグインを使うことで、テーマだった
閲覧画面から投稿できるサイトを作る
という目的は達成できますね。
恐らく「WP User Frontend」での投稿環境を作ることができれば、「Theme My Login」の設定なんてすぐに終わってしまうという位、フロントエンドでの投稿環境作りはちょっと大変です。考えてみれば普段投稿しているバックエンドの機能をそのままフロントエンドで機能させつつ、独自の入力欄を作ろうというものですから複雑な設定が必要なのも納得できます。
もしも、登録ユーザーが「WP User Frontend」の標準投稿画面のような「タイトル」と「本文」程度のもので投稿するようなサイトでいい、また、後に記事の修正なんかさせない！というサイトでいいなら、むしろ「WP User Frontend」のような複雑なものではなく、
のような単純なプラグインの方が簡単に設置できると思いますから検討されてもいいかもしれません。
冒頭に書きましたが、この機能を追加したところで認知度が上がらなければ誰からも投稿されないサイトが完成してしまうわけですから、宣伝するなり検索経由でアクセスしてもらえるような有用なコンテンツを作る努力は必須だと思います。
