WordPressをシステムとして利用したフォトコン

前回に引き続きWordpressの話題です。

とはいっても、今回はWordpressをホームページ構築ツールとしてではなく、WEBシステムとして活用するお話。

 

現在、とあるフォトコンテストの運営についてご相談を頂いています。

 

これまでのフローとしては以下の通り。

  1. 応募者がWEBからフォームで画像を送信
  2. 運営側が手分けして写真をチェック
  3. チェック済みの写真をアップロード担当者に送信
  4. アップロード担当者がWEB上にUP
  5. 手元で応募写真と応募者の対応リストを作成

このうち、4の作業がハイシーズンのダイビングショップにとっては非常に重荷であるため、少しでもシステム化出来ないか、というご相談です。

 

今回ご提案させて頂いているフローは以下の通り

  1. 応募者がWEBからフォームで画像を送信
  2. 自動で承認待ち状態の記事として保存
  3. 運営側が手分けして承認(または却下)を1クリックで
  4. 承認後、自動でWEB上にUP
  5. 自動で応募写真と応募者の対応リストが生成

これをWordpressを使って実現しようというご提案です。

 

どの様に実装を試みたかと言うと…

 

まず、考え方として、Wordpressでは1つの記事=1つのデータと考えることが出来ます。

そこで、1に関しては、任意のユーザーがフロントエンド=管理画面では無く通常表示されているページ、から記事を投稿できるようにします。

これに関して、開発するのは重たすぎると判断し、以下のプラグインを利用することにしました。

WP User Frontend

このプラグインの機能として、投稿後即時公開では無く、『レビュー待ち』という承認待ちの状態として記事(データ)を保存することが出来ます。

これで2のステップもOKですね。

 

ただし、ここで最初の壁に当たりました。

フォトコンテストにありがちですが、1名が複数の写真を応募出来る様にしなくてはいけません。

 

かといって、1枚づつ毎回フォームに記入をしてもらうのは、応募者へ手間を強いることになってしまいます。

そこで、1つのフォームで最大3つの記事を投稿できるようにしたい。

 

もちろんプラグインはこんな特殊なニーズまで想定して作られてはいません。

 

ということで、まず応募フォームは以下の様に考えました。

  • 3つのフォームを同時に表示
  • 『送信ボタン』をCSSで非表示にし、あたかも1つのフォームに見える様に
  • 3つのフォームを同時に送信するためのボタンを設置
  • 同時に送信はjavascriptで実現
  • そのままだと2枚目以降に応募者名などの情報が残らないので、1枚目の写真に入力した時、javascriptで自動的に隠し要素へ情報を入力
  • 投稿欄は3つ分用意するが、1つ目と3つ目、2つ目と3つ目など、ひねくれた記入(笑)に対応できるよう、javascriptで制御

 

こんな感じ。

 

これで2までが完了です。

  1. 応募者がWEBからフォームで画像を送信
  2. 自動で承認待ち状態の記事として保存
  3. 運営側が手分けして承認(または却下)を1クリックで
  4. 承認後、自動でWEB上にUP
  5. 自動で応募写真と応募者の対応リストが生成

4と5はWordpressであれば標準で実装可能なので、残すは3のみです。

 

これが割と苦労しました。。。

 

まず、デフォルトでは管理画面の投稿一覧にサムネイル画像は表示されません。

これを表示される様にfunction.phpをカスタマイズ。

ここまではスムーズでした。

 

投稿一覧に任意の要素(カラム)を表示し、そこに1クリックで記事を公開(写真の承認)もしくは記事を削除(写真を却下)したいのですが、なかなか参考になる情報も無く…

とはいえ、なんとかかんとかformタグとPHPを利用し実装。

formのactionを自分自身にし、記事のステータスを変更する処理をするかしないかのフラグを記事IDと共にPOST、そのフラグを常にチェックするという方法をとりました。

 

が。

ここで問題が発生。

なぜか1番目の記事の『承認』ボタンだけうまく機能しない。。。

原因はなんとなく想像出来ました。

恐らく何らかの理由でformタグが入れ子になってしまっていることが原因だと思われます。

 

案の定、Wordpressの投稿一覧画面では、『一括操作』『絞り込み表示』がformで実装されていますが、これが閉じられているのが、投稿一覧ページの最下部だったんですね。

その為、各記事に設置したformが入れ子となってしまいました。

 

仕方が無いので、ボタンをformではなくbuttonとし、onClick属性でjavascriptを発火。

javascript側でformを吐き出すと同時にPOSTすることで、form入れ子問題を解決することが出来ました。

 

こんな感じです。

 

最後に仕上げとして、2点。

クリックできる場所が多すぎても混乱を招くだけなので、基本的には投稿一覧以外のメニューは全て非表示に。
(画像ではカスタマイズ前、全てのメニューが表示されています。)

また、ログイン後に行う作業は、投稿一覧のチェックだけなので、1クリックでも減らすため、ログイン後に表示されるページをダッシュボードではなく投稿一覧に。

これらもfunctions.phpにちょこっと追記し、暫定的にテスト版の完成としました。

 

元々の画像データでなければ写真本来の出来栄えはわからないし、良さが伝わらない。

ましてPC画面上での審査なんて出来るはずない。

といったお叱りを受けてしまうかもしれませんが、コンデジでの気軽な参加を狙ったフォトコンテスト、写真の出来栄えを競うというよりは、ダイビングを盛り上げるためのフォトコンテストであれば、十分対応可能なのでは無いかなと思います。

 

お店主催でフォトコンテストをやりたいけど、事務局的な作業をやっている時間なんて無い

仲の良い何店舗か合同でショップ対抗フォトコンテストをやりたいけど、共同で管理できるシステムが無い

 

そんなお悩みがもしございましたら、お声がけくださいませ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です