カスタムフィールドを使おう

🏞

WordPress には、記事に追加情報を設定できるカスタムフィールドがありますが、NKSSG にも同様の機能があります。ここでは、NKSSG でカスタムフィールドを使う方法を説明していきます。

記事にカスタムフィールドを追加する

例えば、あなたのブログでは、本を読んだ感想を記事にすることが多いとしましょう。そのときに、読んだ本のタイトル、著者などの情報を記事に設定しておくと便利です。

記事に追加で情報を設定するには、フロントマターに追加します。例えば、次のようにします。

---
book_title: "人間失格"
book_author: "太宰治"
---

こうすると、キーbook_titleに、値「人間失格」が登録されます。

著者が複数いる場合、次のようにすれば配列設定ができます。

---
book_author: ["著者1", "著者2"]
---

ちなみに、著者が複数いる場合に、次のように設定しようとするとエラーになります。

---
book_author: "著者1"
book_author: "著者2"
---

同じキーを複数回設定することはできませんので注意してください。

同じような項目はグループ化したい場合もあるでしょう。その場合は、次のようにすることもできます。

---
book: 
  title: "人間失格"
  author: "太宰治"
---

こうすると、book の下に、title と author の情報を持つようにできます。

カスタムフィールドの設定は、YAML 記法を使って書きます。詳しく知りたい人は、次の記事が参考になるでしょう。

YAML

カスタムフィールドの内容をページに反映させる

カスタムフィールドを設定するだけでは、ページに内容が反映されません。ここでは、カスタムフィールドに設定した値を、記事の中で使う方法を見ていきます。

カスタムフィールドの値を呼び出すには、次のようにします。

{{ meta.book_title }}

カスタムフィールドの値には、meta でアクセスできます。このように書くと、先ほどの例であれば、「人間失格」と表示されます。

実は、フロントマターで設定した値は、すべて meta からアクセスできます。例えば、次のように書いてみましょう。

{{ meta.title }}

こうすれば、フロントマターで設定した title が表示されます。何も設定していない場合は、何も表示されません（エラーにはなりません）。

この波かっこ2つで囲んで表示させる記法は、Jinja2 の文法です。記事の中でも、Jinja2 の構文が使えます。

もう少し複雑な内容を書いてみます。

<div>
  <div>本のタイトル： {{ meta.book.title }}</div>
{%- if meta.book.author == meta.book.author | list %}
  <div>著者： {{ meta.book.author | join(', ')}}</div>
{%- else %}
  <div>著者： {{ meta.book.author }}</div>
{%- endif %}
</div>

こうすると、次のように表示されます。

<div>
  <div>本のタイトル： 人間失格</div>
  <div>著者： 太宰治</div>
</div>

「著者」の部分は、もしlistであれば、,で値を繋ぎ、listでない場合（著者を一人だけ設定している場合）は、そのまま表示する、という処理を行っています。

ただ、毎回このようなコードを記事内に書くのは大変です。いくつかの記事で同じ処理を使うのであれば、処理をまとめて呼び出せるようにしておいた方がいいですね。また、カスタムフィールドをひな型に入れておいた方が便利かもしれません。次は、これらの処理を行う方法を見ていきます。

カスタムフィールドをもっと便利に使う

例えば、本のレビュー記事を書くために、次のような情報をカスタムフィールドに追加したいとしましょう。

score:
  おもしろさ: 4.5
  読みやすさ: 3.8
  デザイン: 4.2
  値段: 3.0
  総合: 4.0

本のレビュー記事を書く機会が多いなら、毎回このカスタムフィールドの項目を追加するのは面倒ですね。そこで、ひな型を作っておきましょう。ひな型の作り方はこちらに書いています。

🐤 新規記事のひな型を作ろう

この記事を参考にして、例えば、new_book.html を作って、カスタムフィールドを記事のひな型に入れておくといいでしょう。

score:
  おもしろさ: 0.0
  読みやすさ: 0.0
  デザイン:   0.0
  値段:      0.0
  総合:      0.0

こうすれば、nkssg new bookコマンドを使うと、このひな形を使って新規記事が作成されます。

さらに、これを見やすいテーブルの形にして記事の本文中に書けるようにしてみます。ショートコードを追加してみます。

/themes/child の下にある import/short-code-child.html を開いてみましょう。ここへ、次のように書いてみます。詳しい内容は、Jinja2 のページなどを見てください。TODO

{% macro score_table(score) -%}
<table class="score">
{% for key, value in score.items() %}
<tr>
  <th>{{ key }}</th>
  <td>{{ display_rate(value) }}</td>
</tr>
{% endfor %}
</table>
{%- endmacro %}


{% macro display_rate(rate) -%}
  {%- set rate_i = (rate | int) -%}
  {%- set rate_f = rate - rate_i -%}
  {%- set rate_r = ((5 - rate) | int) -%}
  {%- for i in range(rate_i) -%}🌕{%- endfor -%}
  {%- if 1.00 > rate_f and rate_f >= 0.75 -%}🌖{%- endif -%}
  {%- if 0.75 > rate_f and rate_f >= 0.25 -%}🌗{%- endif -%}
  {%- if 0.25 > rate_f and rate_f >  0.00 -%}🌘{%- endif -%}
  {%- for i in range(rate_r) -%}🌑{%- endfor %}
  ({{rate}})
{%- endmacro %}

2つの macro を書いてみました。前半は、score を受け取って、キーと値をテーブルの行に表示する、というものです。後半は、値に応じて月の満ち欠けで数字を表現しています。

こうしてから、記事ファイル内で、次のように呼び出してみましょう。

{{ scc.score_table(meta.score) }}

記事本文中で子テーマの macro を使うには、scc を頭につけます。そして、先ほど作った score_table に meta.sore を渡しています。つまり、カスタムフィールドの値を渡しているわけですね。

macro を作っておけば、記事からは上のように1行で呼び出すことができます。例えば、次のように表示されます。

おもしろさ	🌕🌕🌕🌕🌗 (4.5)
読みやすさ	🌕🌕🌕🌖🌑 (3.8)
デザイン	🌕🌕🌕🌕🌘 (4.2)
値段	🌕🌕🌕🌑🌑 (3.0)
総合	🌕🌕🌕🌕🌑 (4.0)

さらにデザインなどを調整する必要はありますが、なかなかいい感じですね。

もう一度まとめると、まず、事前に次の作業をしておきます。

• カスタムフィールドの項目を追加したひな型を作る
• カスタムフィールドを見やすく表示する macro を作る

この事前準備をしておけば、各記事の作成時には次のようにすればいいです。

• ひな型から新規記事を作る
• カスタムフィールドに値を設定する
• 記事中から macro を呼び出す

ここで見た内容をもとにカスタムフィールドを使いこなせば、サイト作りがはかどるでしょう。