ブロックテーマを作ろう。【STEP:1】基本構成を整理する。

たか

はい、こんにちは。少し前に依頼があったサイトをブロックテーマで作ってやろうと目論んでいる「にじいろのたか」です。

え？勉強し始めなのに無謀?
いえ、こういうのはいかに手を動かして試行錯誤するかが大事なのです。
実際にクリアしないといけない課題が目の前にあるからこそ
動けたりするので、これはチャンスと捉えて動きます。

さて。

今回は必要最低限のファイル構成から少し肉付けをしていきます。
必ず使うフォルダ名とかファイルとかが増えているので、
そのへんも把握しながら進めていきたいと思います。

各種フォルダと仮のファイルを作成する

assetsフォルダと内包するフォルダ、仮ファイルを作成する

assets/ はブロックテーマ固有の仕組みではありませんが、CSS・JavaScript・画像などを整理するために導入しておくと便利です。

この中には以下のようなサブフォルダを設置しておくとよいでしょう。

• assets
  • scss
    • style.scss
  • css
  • js
    • base.js
  • images

cssはSCSSを使う場合、出力先として指定

scssを使わない場合は、css/style.css を直接書いて使えばOK

imagesは今の段階では空でも問題ありません（後でロゴ等を入れる）

functions.phpとfunctions/フォルダを作成する

functionsも今までのテーマでも使用していたものですが、ブロックテーマでも使用できるようなので追加しておきます。

functions.phpは内容が増えやすいので分割管理しやすいようにfunctionsフォルダも作成しておきます。

• functions.php
• functions

parts/フォルダを作成し、header.htmlとfooter.htmlを用意する

partsフォルダには、ヘッダーやフッター、サイドバーなどの共通パーツを格納します。これらはすべてブロックエディタで構成されるため、templates/ フォルダ内のテンプレートと同様に .html 形式のファイルで作成します。

各パーツは、テンプレート内から template-part ブロックを使って呼び出すことで再利用できます。

ただし、テンプレートパーツとして機能させるためには theme.json で templateParts として定義する必要があります。定義がないと編集画面に出てこなかったり、正しく読み込まれなかったりするので注意しましょう。

• parts
  • header.html
  • footer.html

ブロックテーマでは必ずpartsフォルダという名前を指定しなければいけません。my-partsフォルダにパーツを置いても呼び出してもらえないよ。

templates/にsingle.htmlやpage.html、404.htmlを追加する

現在は templatesフォルダにフォールバック用の index.html しか存在しないため、他のテンプレートファイルも追加してテーマとしての完成度を高めていきましょう。

基本的には、クラシックテーマと同様に用途ごとのテンプレートを用意していく方針で問題ありません。

templatesフォルダもブロックテーマのシステムで固定された名前なので変更できません。

• templates
  • index.html
  • single.html
  • page.html
  • 404.html
  • archive.html・・・

投稿用テンプレート

• single.html（投稿詳細）
• page.html（固定ページ）
• attachment.html（添付ファイルページ）
• singular.html（single や page のフォールバック）

アーカイブ用テンプレート

• archive.html（投稿タイプ全般）
• author.html（投稿者アーカイブ）
• category.html、tag.html、taxonomy.html
• date.html（日付アーカイブ）

その他のテンプレート

• front-page.html（フロントページ）
• home.html（投稿一覧トップ）
• search.html（検索結果）
• 404.html（ページが見つからない場合）

これらはすべて .html ファイルとして templatesフォルダ内に格納し、必要に応じて追加・編集していくのが基本的な運用です。

ここまでのディレクトリ構成

• theme
  • assets
    • scss
      • style.scss
    • css
    • js
      • base.js
    • images
  • templates
    • index.html
    • single.htmlなど
  • parts
    • header.html、footer.htmlなど
  • finctions.php
  • functions

theme.jsonにテンプレートを登録するコードを記載する

下記のコードを記載するとブロックテーマにテンプレートとテンプレートパーツが登録されます。

{
  "version": 3,
  "templateParts": [
    {
      "name": "header",
      "title": "Header",
      "area": "header"
    },
    {
      "name": "footer",
      "title": "Footer",
      "area": "footer"
    }
  ],
  "templates": [
    {
      "name": "single",
      "title": "Single"
    },
    {
      "name": "page",
      "title": "Page"
    },
    {
      "name": "404",
      "title": "404"
    }
  ]
}

nameは固有のIDのようなものです。
titleはエディタで表示される名称です。
areaは（”header”、”footer”、”uncategorized”）を登録可能でエディタがパーツをどの位置に挿入可能か指定できます。

テンプレートを追加するたびにtheme.jsonにも登録用のコードを追加するのを忘れないようにしないと！

たか

最初のうちは忘れそうだ・・・！

まとめ

ここまで、

• テンプレートとテンプレートパーツのフォルダを作成した
• 各フォルダに必要最低限のテンプレートファイルを作成した
• theme.jsonにテンプレートを登録するためのコードを記載した

と進めてきました。

次回からはグローバルスタイルの設定とパターンの追加をしていきたいと思います。
パターンは各テンプレートを構成する部品です。

たか

パターンを色々追加できるのがブロックテーマの楽しい部分だと僕は思ってます！

早く使い方、追加の仕方を覚えて色んなパターンを追加していきたい！です。