【WordPress6.2対応】ローコードで作るブロックテーマ入門

動画

theme.json に少しだけコードを書きながらブロックテーマを作ってみる講座を用意しました。ブロックテーマ制作の手触りや感覚を少しだけでも味わって頂けるかと思います。

目的

小規模なコード（ローコード）を書きながらブロックテーマを作ることで、theme.json の基本を習得し、レイアウトをコントロールすることができるようになる

対象

  • ブロックテーマの基本を確認したい方
  • ブロックテーマを作ってみたい方

必要なスキル

  • ローカル開発環境やテキストエディターが利用できる方
  • 別講座[サイトエディター入門]を終了した方が望ましい

備考

  • このレクチャーではデザイン制作に関する内容は取り扱いません

サポート資料

講座内WordPress環境

style.css を作る

/*
Theme Name: My First Block Theme
Author: YOUR NAME HERE
Description: 「ローコードで作るブロックテーマ入門」で利用するブロックテーマです。
Version: 1.0
*/
Main Stylesheet (style.css) | Theme Developer Handbook | WordPress Developer Resources
The style.css is a stylesheet (CSS) file required for every WordPress theme. It controls the presentation (visual design and layout) of the…
developer.wordpress.org
コメントアウト部分に指定できる情報は他にもたくさんあります。

index.php を作る

<?php
/* Code is poetry */

theme.json を作る

{
  "$schema": "https://schemas.wp.org/wp/6.2/theme.json",
  "version": 2  
}

サイトエディターで作成できるテンプレート

  1. フロントページ
  2. 個別投稿（投稿の詳細ページ用テンプレート）
  3. 固定ページ
  4. アーカイブ
  5. 投稿者
  6. カテゴリー
  7. 日付
  8. タグ
  9. タクソノミー
  10. 検索（サイト内検索結果を表示するテンプレート）
  11. 404
  12. 個別項目：投稿
  13. カスタムテンプレート（名前は半角英数を推奨）
Template Hierarchy | Theme Developer Handbook | WordPress Developer Resources
As discussed, template files are modular, reusable files, used to generate the web pages on your WordPress site. Some template files (such…
developer.wordpress.org
テンプレート構造について。拡張子は html に読み替えればOK

theme.json にコードを書く

ここでは以下の４つの機能を実際に試してみる

  • 外観ツール
  • レイアウト
  • ルートパディングを考慮したアラインメントを使用する
  • カラーパレット
Global Settings & Styles (theme.json) | Block Editor Handbook | WordPress Developer Resources
WordPress 5.8 comes with a new mechanism to configure the editor that enables a finer-grained control and introduces the first step in…
developer.wordpress.org
Theme.json Version 2 | Block Editor Handbook | WordPress Developer Resources
This is the living specification for version 2 of theme.json. This version works with WordPress 5.9 or later, and the latest Gutenberg…
developer.wordpress.org

外観ツールを有効化する

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "appearanceTools": true
    }
}

レイアウト機能を利用する

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "appearanceTools": true,
        "layout": {
		"contentSize": "920px",
		"wideSize": "1200px"
	}
    }
}

useRootPaddingAwareAlignments を利用する


{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "appearanceTools": true,
        "layout": {
		"contentSize": "920px",
		"wideSize": "1200px"
	},
       "useRootPaddingAwareAlignments": true
    }
}

カラーパレットを利用する

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
		"color": {
		  "palette": [
		    {
		      "slug": "base",
		      "color": "#333333",
		      "name": "Base"
		    },
		    {
		      "slug": "contrast",
		      "color": "#ffffff",
		      "name": "Contrast"
		    },
		    {
		      "slug": "primary",
		      "color": "#2A3E59",
		      "name": "Primary"
		    },
		    {
		      "slug": "secondary",
		      "color": "#F2D98D",
		      "name": "Secondary"
		    },
		    {
		      "slug": "tertiary",
		      "color": "#D9665B",
		      "name": "Tertiary"
		    }
		  ]
		}
	}
}

フォントを選択できるようにする

ブラウザフォントをサイトエディターから指定できるようにする（ブラウザフォントでサンセリフ系を指定する場合の例）

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
		"typography": {
		    "fontFamilies": [
		        {
		          "fontFamily": "Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif",
		          "name": "System Sans Serif Font",
		          "slug": "system-sans-serif-font"
		        }
		    ]
		}
	}
}