Wordpressに体重やら記録するカスタムフィールドを追加する

太るための筋トレやらトレーニングの成果を確認するために、ブログに記録することにする。その際スピーディに更新できるようにするために、カスタムフィールドを使うことにするでごわす。

プラグインの準備・設定

有名テンプレート、カスタムフィールドテンプレートを採用。参照記事も多いので便利。プラグイン設定にはこちらの参照記事を参考にする。

Custom Field Templateの設定は以下のように。


[calorie-balance]
type = text
size = 10
label = カロリーの差し引きいくら？

[weight-today]
type = text
size = 10
label = 今日の体重はいくら？

[weight-balance]
type = text
size = 10
label = 体重はプラスマイナス前日差いくら？

[fat-bercentage]
type = text
size = 10
label = 今日の体脂肪率はいくら？

[fat-bercentage-balance]
type = text
size = 10
label = 体脂肪率のプラスマイナス前日差はいくら？

[workout]
type = checkbox
value = ストレッチ # ジョギング # 筋トレ

[memo]
type = text
size = 30
label = 一言メモ

アウトプットの仕方で、single.phpにコードを埋め込んでしまうかショートコードを記事に入れるかで迷う。カスタマイズ性が高そうなので、後者を選択。記事中にcft format=Xと入力すると表示されます（コードは[ ]の括弧でくくる）。Xはそれぞれ設定した番号で。

ショートコードの中身はこちら。

<table class="cft">
<caption>昨日のからだ</caption>
<tr>
<th>カロリー差引</th>
<td>[calorie-balance]kcal</td>
 </tr>
<tr>
<th>体重</th>
<td>[weight-today]kg (前日差：[weight-balance]kg)</td>
 </tr>
<tr>
<th>体脂肪率</th>
<td>[fat-bercentage] % (前日差：[fat-bercentage-balance]%)</td>
 </tr>
<tr>
<th>今日のワークアウト</th>
<td>[workout]</td>
 </tr>
<tr>
<th>メモ</th>
<td>[memo]</td>
 </tr>
</table>

CSS側の調整

そのままでも使ってるテンプレートのCSSがキレイに出力したタグを見せてくれるけど、ちょっとだけ見た目を変更する。以下CSSをテーマのCSSに追記。


body table.cft {
width:100%;
margin-top: 60px;
}
body .cft caption {
font-weight: bold;
padding: 10px;
}
body .cft th {
width:25%;
background: rgba(145, 149, 152, 0.77);
}
body .cft ul {
list-style: none;
padding: 0;
margin: 0;
}
body .cft li {
float: left;
margin: 0 0.5em 0 0;
}

というわけでほとんど申し訳程度。元のテーマファイルがよく出来ている！

はてさて、実際出力してみたのが下。

昨日のからだ
カロリー差引	+215kcal
体重	55.7kg (前日差：0kg)
体脂肪率	11.6 % (前日差：0%)
今日のワークアウト	ストレッチ
メモ	つけはじめ