メタボの食事記録をワードプレスでつけることに

あまりめでたくもありませんが、メタボ境界線をうろちょろするのも4年目くらいに突入し、担当の指導の先生から、今年は何かいつもと違うことをしてみようと提案されました。

そして、食べたものを写真に撮るということになりました。

メタボ食事記録サイトイメージ

写真に撮るのは、ブロガーゆえにまったく苦労ではありませんが、問題は撮った写真をどうやって、先生にみてもらうかです。

紙ベースで打ち出すと、紙もインクももったいない。場所もとる。

ということで、もういっそのことサイト作ります、ということになりました。

そんなことできるのですか?と言われて、それが仕事ですから、ふ・・・みたいな。

サイト作る方がめんどくさくないとか、どんだけサイト作成マニアなんや、ITオタクなんや、という話しなんですが、ポイントさえおさえれば、毎日記録すれば、それほどしんどくないと思うんですよね。

ということで、メタボの食事記録サイトを作ることになりました。

ワードプレスでカスタムフィールドを駆使することに

とは言っても、わたしには、ほかにメインサイト更新のお仕事がありますので、この食事記録サイトばっかりに手をかけるわけにはいきません。

ぶっちゃけ、収益は見込めないでしょう。収益見込めないところに、手をかけすぎるのはあかん。

半分趣味ですからね。

なので、今回は、まだ使ったことのないWPのカスタムフィールドの勉強がてら、カスタムフィールドを駆使して、サイトを作ってみることにしました。

カスタムフィールドを使って、自動化できる部分は自動化して、極力記録の手間を省いていく方針です。

今回のサイト設計

今回のサイトで実現したいこと。

  • 朝食、昼食、夕食、おやつに分けて記録。
  • 食事は画像を最大3枚表示(のちに挫折しておやつを4枚に増やした・・・)
  • 食事に関するテキストは表示必須。
  • ついでにやった運動についても記録
  • ついでに行動計画も毎日できたかどうかチェック

これをカスタムフィールドを駆使して表示させます。

カスタムフィールドは、サイト作成者が自分でデータを格納するための箱を作れる便利な機能です。

通常は、ワードプレスでは、記事本文の箱、カテゴリの箱、アイキャッチの箱などなど、あらかじめデータを入れる箱が準備されているわけですが、カスタムフィールドを使えば、自分で自由に箱が作れるわけですね。

そして、この箱からデータを取り出すための記述をテンプレートに付け加えれば、カスタムフィールドに入力された値がサイトに表示されるというわけです。

そして、それをCSSでレイアウトする、と。

サイト作成時の主な作業

普段のサイト作成に加えて、カスタムフィールドを表示させるためには、次の4ステップが必要です。

あ、と言ってもプラグインインストールは必須じゃないかもしれません。今回はとりあえず、これを使います。

  1. Advanced Custom Fieldsプラグインのインストール
  2. フィールドグループ、フィールドを作成、公開
  3. カスタムフィールドを表示させるようテンプレートを修正
  4. 管理画面から日々カスタムフィールドにデータを入力

カスタムフィールドのプラグインAdvanced Custom Fieldsをインストール

ワードプレスのカスタムフィールドは、デフォルトでも使えるらしいのですが、今回は、プラグインを使ってみることにしました。

使ったプラグインは、Advanced Custom Fields というプラグインです。

ワードプレスの管理画面から新規インストールできるので、そちらから追加してください。

プラグインのサイトはこちら。

 Advanced Custom Fields

フィールドグループの作成

では、データを入れる箱づくりからやってみましょう。

解説に画像を入れてありますが、クリックで拡大表示できるので、わからないところは拡大して見てください。

Advanced Custom Fieldsをインストールすると、WPのサイドバーにこんな表示が出ますので、「カスタムフィールド」をクリック!

140714custom_field1

フィールドグループの画面が表示されるので、まず最初にカスタムフィールドのフィールドグループを作成します。

140714custom_field2

フィールドグループの新規追加をクリックすると、この画面になるので、

140714custom_field3

まずは、適当にフィールドグループのタイトルを入力します。

フィールドを追加していく

次にフィールドを追加していきます。

右にある青い「フィールドを追加する」ボタンを押すと、どんどん新規フィールドが追加できます。

140714custom_field4

今回作ったフィールド

今回作ったフィールドは以下のとおりです。

テキスト・・・朝食コメント、昼食コメント、夕食コメント、おやつコメント、運動コメント
画像・・・朝食画像1、朝食画像2、朝食画像3、昼食画像1、昼食画像2、昼食画像3、夕食画像1、夕食画像2、夕食画像3、おやつ画像1、おやつ画像2、おやつ画像3、おやつ画像4
セレクトボックス・・・行動計画1、行動計画2

朝食コメント、昼食コメント、夕食コメント、おやつコメント、運動コメント

朝食コメント、昼食コメント、夕食コメント、おやつコメント、運動コメントは、テキストを入力します。

140714custom_field5

「フィールドラベル」には、記事投稿画面で表示されるラベルを入力。自分がわかればいいです。

「フィールド名」は、テンプレートでデータを呼びだす時に使うので、英数文字にしました。ほかのフィールドと、重ならないようにつけます。

「フィールドタイプ」は、プルダウンメニューから「テキスト」を選択。今回はそれほど長い文章ではありません。もしかすると段落がある長文の場合は、「テキストエリア」を選択するようになるのかも。

140714custom_field6

「必須かどうか?」は、必須を選択。食事の写真はうっかり撮影を忘れることは容易に想像できるので、とりあえず、入力もれがないように、毎回テキストで食事内容や運動内容を入力するのは必須にしておきます。

「条件判定」は、よくわからんけど「いいえ」。

画像フィールド

朝食画像、昼食画像、夕食画像、おやつ画像は、フィールドタイプに画像フィールドを選択します。

140714custom_field7

「必須かどうか?」は、「いいえ」にします。写真取りわすれることもあるからね。

「返り値」は、「画像URL」を選択

「プレビューサイズ」は、投稿記事画面で表示させる画像の大きさ、今回は「中」を選択。

「ライブラリ」はよくわからんので、とりあえず「全て」で。

「条件判定」は、「いいえ」。

行動計画1、行動計画2

フィールドを作ってるうちに、毎日実行する行動計画もできたかどうか表示させるといいかも!と思って、フィールドを付け加えた。

フィールドタイプは、迷った末に「セレクトボックス」にした。

140714custom_field8

「必須かどうか?」は、「必須」で。

セレクトボックスの選択内容の指定は、「選択し」というところで、指定できます。「なんで、「し」がひらがななんだ?とちょっとツッコミを入れてみる。

140714custom_field9

書き方は、

「テンプレートで出力させる入力値」「半角スペース」「半角コロン」「半角スペース」「記事投稿画面でセレクトボックスに表示させるラベル」

となる。

今回は、こんな感じで。

選択したかどうかをはっきりさせるため、「未選択」という選択肢も入れてみた。最初の一行がデフォルト表示されるので、うっかり選択するのを忘れていたら、「未選択」で表示される。

公開ボタンを押す

フィールドが追加できたり、あと修正したら、必ず最後に右サイド上にある「公開」ボタン、修正の場合は「更新」ボタンを押す。

140714custom_field10

これを押し忘れると保存されません。

最初、よくわからずに画面遷移して、作った20個のフィールドが保存されず、もう一回作るはめになったのは、わたしです・・・。

文章長すぎなので、テンプレート作成編に続きます。

続く  WPのカスタムフィールドを使ってメタボ食事記録を記録するサイト!カスタムフィールド出力用テンプレ編