【Gutenbergいい】WordPressでレシピサイトの材料欄を作る方法7パターン

WordPressで料理レシピページの材料欄を作るにはどうすればいいか検討しました。

材料欄とは以下のようなやつです。マークアップはdl（dt,dd）です。

なおGutenbergエディターです。できるだけGutenbergの長所を生かす形にしたいです。というのはこのエディターはまさにレシピページのようなものをブロックで作るためにあるように感じるからです。

他にもあるかもしれません。また上記は細かく分けていますが、大きな括りで考えればけっこうダブっています。

結論としてはとりあえず3.の再利用ブロックの活用を選びましたが、今後変えるかもしれません。

以下検討した7つすべてについて書いてみます。

1.カスタムフィールド

まずは定番のカスタムフィールドです。Gutenbergエディターでも普通にカスタムフィールドを使うというパターンです。

仮に表形式にするならAFCプラグインがはやいです。

ただ最初に書いた通り今回はGutenbergの長所を生かしたいです。カスタムフィールドを使ったら自由度が全くなくなるのでこれはボツ。

2.カスタムHTML

毎回元になるコードをコピペしてテキスト部分を変えるという方法です。

実装の面では一番簡単です。

ただコンテンツ作成時の毎回の手間ですし納品物だとすると未完成感が強いのがネックです。

3.再利用ブロックの活用

2のカスタムHTMLを登録しておくというパターンです。

毎回通常のブロックに変更後、テキスト部分を変えます。

慣れれば一番ラクかもしれません。なにより一瞬で実装できます。というわけで私は現状この方法を選びました。

ネックは通常ブロックに変更するのを忘れると登録内容が変わってしまうことです。この問題がある以上納品物には使えないかなと思います。

4.パターンに登録する

2の再利用ブロックと同じような方法ですが、こちらは誤編集を防げます。

ただ特定のdtやddにclassをつけたりとHTML化しての編集が多いなら2のほうが便利かもしれません。

まだあまり試していないので2よりも良いと判断したら移行してみるかもしれません。

Reusable Blocks Extendedというプラグインを使用するのも便利そうです。

5.オリジナルブロックを作成する

これができるなら一番よさそうです。大きなメリットとして、表示されるビジュアルで編集を進められます。

ただ単純な一対のセットならよいですが、複雑なものを作るのは難しいです。例えば材料欄はAなどの記号を振るパターンもありますし、その他柔軟に書きたいケースもあり得ます。

仮に作れても制作の手間のほうが大きいかもしれません。

というわけで保留しています。

6.コード呼び出しプラグインの使用

例えばAddQuicktagを有効活用する手が考えられます。

Gutenbergの場合「クラシック」にすれば使えるようです。ただしGutenbergを使っているのに、このプラグインを使うためにクラシックエディターを呼び出すなどもはや何がしたいのかわかりません。本末転倒すぎて×。

7.ショートコードの使用

ショートコードの使用という手も考えました。今回タイトルをimgにしたので部分的に使おうか、など。

ただこれもGutenberg有効活用を考えるなら本末転倒です。ショートコードのようなものを避けて直感的に作業するためにこのエディターがあるからです。

そしてこの方向性で考えるなら3の再利用ブロックのほうがよいはずです。

今回の条件

一応今回の条件と内容をメモしておきます。

• 全体はsectionで囲われている
• ”材料”という見出しはh2,img（srcは常に固定）
• 何人分は半角数字
• 材料名はdtで分量はdd
• 材料にはAやBなどのグループ分けもある
• 材料名、分量ともに詳しく書いて長くなる可能性もある
• サイトの運営は自分個人。ただいずれ誰かに提供もできるように徐々に汎用化していきたい。

まとめ

Gutenbergでレシピページの材料欄のようなものを作るとしたら、5.オリジナルブロックを作成する、が理想です。ただし難易度と制作コストが高い。

なのでとりあえず一番簡単にスタートできる3.再利用ブロックの活用をチョイス。4.パターンに登録するほうがよさそうなら移行。

いずれにしてもレシピサイトのようなものをつくる場合は「Gutenbergいい！」と思いました。

最後に独り言として…Gutenbergデフォルトのブロックにdlが無い気がします。私が発見できていないだけだろうか。dlって需要ないんでしょうか。