たかはい、こんにちは。ブロックテーマでサイトを作るように勉強を始めたいと思っている「にじいろのたか」です。
さて。
みなさん、ブロックテーマ導入進めてますか？Wordpress公式テーマがブロックテーマに変わってから数年経ちましたが、僕は全然ブロックテーマ制作に取り組めていませんでした。
たかなんか取り残されてる感ある・・・
そう思ったので、思い切って重い腰を上げて、ブロックテーマ作りの勉強をスタートしたいと思います。
まずは最小構成をつくって動作確認しよう。
いきなりしっかりしたもの作ろうとしても挫折しそうなので、まずはちっちゃく始めます。
最小構成を調べてみたところ下のような構造でいけるようでした。
- theme
- style.css
- templates
- index.html
- theme.json
index.phpが無くなっているのと、theme.jsonという見慣れぬファイル。
今までのテーマとはだいぶ違いますね。
index.phpがなくなった
今までのindex.phpやsingle.phpなどのようなテンプレートは無くなって、themeのルート階層がだいぶスッキリしそうです。間違って今までのようにindex.phpを配置するとブロックテーマとして認識してもらえない可能性があるらしいので念の為注意します。
代わりにテンプレートを配置する「templates」というフォルダ（必須）と内包するindex.htmlファイル（必須）が設置されます。
たかえ、php書けなくなっちゃったの？カスタマイズしにくくない？
って思ったんですが、そこはブロックテーマ独自の仕組みで何とかしてくれるみたいです。
theme.jsonが追加された。
theme.jsonはブロックテーマの設計図・設定ファイルのようなものらしいです。
エディターで使える機能・色・フォント・余白などの設定をまとめたファイルで、このファイルが存在していることもブロックテーマとして必須らしいです。
{
"version": 2
}最小限これでブロックテーマとして認識されるみたいですが、これだけだと設定がされないため、次回以降の投稿で設定を記述方法を勉強していこうと思います。
ブロックテーマでもstyle.cssは必須
これまでも必須だったstyle.cssはブロックテーマでも必須です。
テーマとして認識させるだけであれば下記のコードで行けます。
/*
Theme Name: My Theme
Version: 1.0
*/僕の運用方法だと、このstyle.cssには基本的にはスタイルは適用しない方針です。
スタイルはassetsフォルダなんかに別に格納したcssファイルで管理していきたいと思っています。
なのでこのコメントだけで大丈夫。
でもこれじゃあ物足りないよね、ちゃんとしたいよね。
次回以降テーマの情報をどれぐらい記載するかちょうどいい塩梅を探りながら作っていきたいと思います。
まとめ：これだけでブロックテーマの設定が使えるようになった！
ここまでで、ブロックテーマとして必要な最低限のファイルと設定がそろいました。
style.css にテーマ情報を記述し、theme.json で機能やスタイルの初期設定を行い、templates/index.html を用意するだけで、WordPressはこのテーマを「フルサイト編集対応のブロックテーマ」として認識してくれます。
以前のように、複雑なPHPファイルを何枚も用意しなくても、HTMLとJSONだけでサイトの基本構造が構築できて、ブロック(パターン）を蓄積していくことで、サイトを作るたびにバリエーションを増やすことができます。
作るたびに成長するサイトを作れるってすごい魅力です。
今はまだなんのブロックもない状態ですが、ここからスタートして、たくさんのブロックを作って、自分だけのブロックテーマのベースを作っていきたいです。
コメント