にっぽん招き猫100人展という2000年から現在も続いている創作招き猫の公募展があります。この公募展のスタティックなサイトをWordPressでリプレイスし、つい先日公開しました（補足すると、その前年の1999年に愛知県瀬戸市の市制70年を記念して開催された「平成の招き猫70人展」が100人展の前身）。1800作品をどう移行するかに加えて、毎年9月下旬から開始されるオンライン投票のワークフローを考えるなど、個人的にチャレンジングな取り組みでした。今後にも活かしたいので書ける範囲でまとめておきます。
要件としては以下。
・100作品が作品番号順に表示される一覧があること
・作品がそれぞれ個別のページに表示されること
・投票期間中に、今年の作品の個別ページに投票ボタンが表示されること
・作品の個別ページには前の作品、次の作品へのリンクがあること
・複数作品に投票可能だが、同じ作品に連続投票はできないこと
・サイト管理者は投票結果の一覧が見られること（要ログイン）
・今後の作品だけでなく、過去作品も表示できること
・作家名などで年をまたいだ検索ができること
リプレイス作業の項目としては以下になります。
1.WordPressのテーマ選定
2.作品のデータベース化（カスタム投稿タイプ）
3.作品のビュー検討（ワードプレスのテンプレート）
4.最新年の作品のオンライン投票
5.作品の一覧表示（ワードプレスのテンプレート）
6.作品の検索
7.データベースにインポートするワークフロー
8.管理画面のカスタマイズ
9.投票期間前後のワークフロー
また、期間と人員が限られていたこともあり、極力作り込まないことを念頭に入れました。つい、データベースはスクラッチ開発で、とか、テーマは独自に作りましょう、となりがちですが、そんな経験も余裕もなかったので、ふさわしいテーマやプラグインを見つける方が速いだろうと考えた次第です。
思い返すと、リプレイスに先んじてドメイン移管の作業もあったのですが、そちらの方が胃が痛かったですね。
1.テーマについて
テーマはふさわしいものを探す、というよりも、テーマの改変は必須と思えたため、情報が多くて、すぐに理解できるものという意味で日本製であること。すぐに試せる無料版があった方がいいという意味でLightningにしました。
作品周りのテンプレートは固定ページ分で4つ、共通処理分で3つほど新たに作りましたが、それ以外はほぼ変えていません。ちなみにLightningコピーライトカスタマイザーだけ購入しました。
2.作品カスタム投稿タイプ
Lightning制作会社のプラグインVK All in One Expansion Unitのカスタム投稿の機能を使い、作品のカスタム投稿を追加して、Advanced Custom Fieldsプラグインを使いフィールドを定義しました。展示年をカテゴリーとし展示年で分類できるようにしました。また、カスタム投稿のURLをカスタマイズするために、Custom Post Type Permalinksプラグインも使っています。
やり方としては、これまでのサイトからカスタムフィールドにする項目を洗い出し（作品タイトル、作家名、キャプション、作品画像、作家プロフィール、大賞かどうかなど）、フィールドを定義して、テスト的に登録してみました。
3.作品のテンプレート
個別投稿のテンプレートsingle.phpを真似て作品用のsingle-作品.php（「作品」は作品のスラッグ名）を作り、その中身を上記で定義したフィールドを表示するようにカスタマイズしました。
作品の年度別一覧については当初はLightningのサイトで紹介されていた方法（module_loop_作品.phpを作成）で対応しましたが、archive.phpからmodule〜.phpを呼ぶ方法だとやりたいことが実現できないため他にもテンプレートを作りました（5に記載）。
4.オンライン投票
見た目はこれまでのやり方（投票期間中に最新年の各作品のページを表示した時に投票ボタンが表示される）を踏襲することにしました。ただ投票に特化したプラグインが探しきれず、記事のランキングなどに使われるWP-PostRatingsを使いました。
また、管理者だけが見られる投票結果画面には作品タイトルと得票数だけでなく、例年、作品番号と作家名で付き合わせているとのことで、これらも表示するようにしました。
10件程度のテストデータでここまでを試すのに3日くらいでできたので、意外と余裕と思っていましたが、以降の作品検索や、実際のデータをインポートするのに相当時間をかけることになりました。
5.作品の一覧表示
作品一覧は3通りあり、以下のそれぞれを固定ページとし、それぞれに対してテンプレートを作ることにしました。
- 投票用のギャラリー
- 全年分検索可能なアーカイブ
- 大賞一覧
このやり方のメリットとしては、作品一覧を表示する前に表示させたいものがあれば、固定ページの本文欄に記載できることです。例えば、投票用ページの場合は、投票中のときとそうではないときの記載を書き直すことが可能になります。特記事項を書いておきたい年があった場合などに柔軟に対応できそうです。
デメリットとしてはあくまでも運用でカバーなので、運用を間違うといつまでも投票中であるかのような記載のままになってしまうことでしょうか。
見た目のカスタマイズとしては、Lightningの一覧表示が1行1つで縦積みだったのに対して、横一列に6個のサムネイルとその下に作品名と作家名を表示するように変更しました。これにより作品名が長い場合にbootstrapのスタイルが崩れるため、そうならないように作品名は半角で38バイトとし1記事分の表示スタイルをblockにして高さを多めにとりました。
6.作品の検索
作品検索が可能なアーカイブページを例にすると、以下のような感じ。
- 作品アーカイブ.phpから2つのテンプレートを呼び出す（作品検索フォーム、作品検索）。
- 作品検索テンプレートで検索を行い、検索結果分module_loop_作品を呼び出してページに表示。
対応したことはざっとこのくらい。
- アーカイブの初期状態は最新年を作品番号順に
- 検索フォームで、年をドロップダウンで指定可能（全年も可能）、キーワード検索可能
- 入力されたキーワードのサニタイズ
- POSTで送受信
- 結果表示も同じページで
- 検索条件はset_query_var、get_query_varで受け渡し
- wp_queryで検索
7.過去作品のインポート
過去作品を抽出する以下の作業が大変でした。
- これまでのサイトのHTMLページからデータを抽出
- スクリプトや手作業でどうにかしてフィールド別x100行の表形式にする
- 100作品の画像は、年-作品番号.jpgのファイル名にする
なお、基本的にプラグインReally Simple CSV Importerでインポートしますが、一般的にも言われている注意点としては、以下があります。
- エクセルのCSV出力は使わない（UTF-8エンコーディングにしたいため）
- 各フィールドはダブルクォーテーション（”）でクォートする
いざワードプレスにインポートしてみると、作品が作品番号順に登録されない、失敗して何度も繰り返していると同じ画像が何個も登録される、同じフォルダに画像が1万件以上になってしまうなどあり、最終的にインポートの際は以下のようにすることにしました。
7.1CSVインポート時のルール
- 1年分ずつ行う
- 1年分の100作品が作品番号順に並ぶように、作品番号順にpost_dateを少しずつずらして設定
7.2画像インポート用の踏み台を用意
- テストサイトを2つ用意し、テストサイト1に全ての画像をアップロード
- 作品はテストサイト2にインポートするが、CSVファイルの画像URLにはテストサイト1の画像URLを指定
7.3画像は展示年別のフォルダに入れる（テストサイト2）
- ワードプレスが年月フォルダで整理するのと同様に考え、例えば2000年の作品であれば、2000年9月のフォルダに作品画像を入れることにします。ちなみに100作品が1画像ずつだとしても、ワードプレスが作るサムネイルなど5ファイル作成されるので、年月フォルダでの整理が妥当と考えました。
- プラグインExtend Media UploadとOrganize Media Library by Foldersを入れます。
- 管理画面＞メディア＞フォルダーを作成＆設定で、uploadsフォルダーに2000/09〜2017/09フォルダまで18年分つくります。
7.4インポート時の注意点（テストサイト2）
- 管理画面＞メディア＞新規追加を表示させて、表示オプションを表示するとExtend Media Upload用のフォルダー指定ができます。ここでインポートする年のフォルダーを選択し、適用ボタンをクリックします。
- その状態で、管理画面＞ツール＞インポート＞CSVで該当年のCSVファイルを指定すると、テストサイト1の画像をテストサイト2の指定した年月フォルダにインポートされます。
7.5失敗した場合に備えて
- CSVインポート前に現状をバックアップしておきます（プラグインUpDraftPlus）。
- CSVをインポートした度に、ワードプレスのメディアで所定の年月分に入っているか、FTPソフトで実際のuploads配下の年月フォルダに500個程度の画像が入っているか、作品が作品番号順に入っているか確認します。
- インポートが失敗したらバックアップで前の状態に戻して、インポートし直します。
8.管理画面のカスタマイズ
- 投票期間管理：
投票期間かどうかを管理する画面を設定に設ける - カスタム投稿作品一覧画面のカスタマイズ：
展示年で絞り込めるようにする
作家名を表示する
作品番号を表示する
post_idを表示する（CSVインポートをやり直したい場合はpost_idを指定すると上書きされるので、見る必要があった）
9.今後のワークフロー
（一段落したら書きます）