WordPress ブロックテーマを作ってみよう その５
前回、theme.jsonの「設定」セクションを作成しました。
今回は残りの「スタイル」セクションで、テーマのベースとなるスタイルを作成していきます。
01. theme.jsonのスタイル
「設定」セクションで定義したプリセットを使いながら、テーマのスタイルを作成します。
ルートスタイル
WordPress テーマの「ルート」とは、 HTMLの<body>要素のことです。
ルート要素にスタイルを設定すると、デザイン全体に適用されるグローバルスタイルが追加されます。
通常のCSSと同様に、要素のスタイルやブロックのスタイルで上書きされない限り、ルート要素に設定されたスタイルが使用されます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": { 省略 },
"styles": {
"color": {
"background": "#FFF",
"text": "#333"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--noto-sans-jp)",
"fontSize": "var(--wp--preset--font-size--normal)"
}
}
}ルートスタイルにカラーとタイポグラフィを設定すると、次のようにCSSが出力されます。
body {
background-color: #FFF;
color: #333;
font-family: var(--wp--preset--font-family--noto-sans-jp);
font-size: var(--wp--preset--font-size--normal);
}サイトを見ると、フォントが変わってすっきりしました。
要素スタイル
以下の要素は、HTML要素にスタイルを設定することができます。
button：<button>要素と、ボタンブロックcaption：<figcaption>要素で囲まれたメディアのキャプションcite：引用ブロックなどで使われる<cite>要素heading：すべての見出し要素h1 - h6：<h1>から<h6>の個別の見出し要素link：リンクを作成するための<a>要素
また、ボタン要素とリンク要素は、:hoverや:focusといった疑似クラスのスタイルも指定できます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": { 省略 },
"styles": {
"color": { 省略 },
"typography": { 省略 },
"elements": {
"link": {
"color": {
"text": "var(--wp--preset--color--main)"
},
":hover": {
"color": {
"text": "var(--wp--preset--color--sub)"
}
}
}
}
}
}次のようにCSSが出力されます。
a {
color: var(--wp--preset--color--main);
}
a:hover {
color: var(--wp--preset--color--sub);
}リンクの色が、メインカラーに変わりました。
ブロックスタイル
ブロックごとのスタイルを設定していきます。
ルートスタイルを設定している場合、ref:で同じスタイルを参照できます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": { 省略 },
"styles": {
"color": {
"background": "#FFF",
"text": "#333"
},
"typography": { 省略 },
"elements": { 省略 },
"blocks": {
"core/heading": {
"color": {
"background": "var(--wp--preset--color--sub)",
"text": { "ref": "styles.color.text" }
},
"spacing": {
"padding": "10px 20px"
},
"border": {
"radius": "10px"
}
}
}
}
}次のように、見出しブロックのCSSが出力されます。
.wp-block-heading {
background-color: var(--wp--preset--color--sub);
border-radius: 10px;
color: #333;
padding: 10px 20px;
}見出しブロックにサブカラー・余白・角丸を設定しました。
ブロックのスタイルバリエーション
コアブロックのスタイルバリエーションに対して、カラーなどを設定することもできます。
- ボタンブロック：輪郭、塗りつぶし
- 画像ブロック：角丸
- 区切りブロック：幅広線、ドット
- 表ブロック：ストライプ、など
02. テンプレートパーツ
theme.jsonには「設定」や「スタイル」以外にも追加できるセクションがあります。
その２などで作成したテンプレートパーツを登録しておくと、タイトルを設定でき、管理画面でリスト表示できます。
name：ファイル名title：管理画面で表示したいタイトルarea：パーツを使用するエリア（デフォルトはheaderとfooter）
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": { 省略 },
"styles": { 省略 },
"templateParts": [
{
"name": "header",
"area": "header",
"title": "ヘッダー"
},
{
"name": "footer",
"area": "header",
"title": "フッター"
},
{
"name": "sidebar",
"title": "サイドバー"
}
]
}管理画面からエディターを確認すると、一覧リストが表示されました。
03. カスタムテンプレート
テンプレートパーツと同様に、固定ページ、投稿、カスタム投稿タイプのカスタムテンプレートを登録できます。
templatesフォルダ内で、page.htmlを複製してpage-wide.htmlを作成します。
name：ファイル名title：管理画面で表示したいタイトルpostTypes：適用する投稿タイプを配列で指定（デフォルトは[ "page" ]）
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": { 省略 },
"styles": { 省略 },
"templateParts": { 省略 },
"customTemplates": [
{
"name": "page-wide",
"title": "固定ページ（幅広）",
"postTypes": [ "page", "post" ]
}
]
}管理画面に新しいテンプレートとして表示されました。
04. パターン
公式のパターンディレクトリから、パターンを追加することもできます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": { 省略 },
"styles": { 省略 },
"templateParts": { 省略 },
"customTemplates": { 省略 },
"patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
}おわりに
ブロックテーマの基礎的な作り方としては以上になります。
ここからは作成したいテーマに合わせたカスタマイズが必要ですが、慣れればPHPやCSSを書くよりも早いかもしれません。
ノーコードで編集しやすいように、裏側から整えていくイメージですね。
引き続き、ブロックテーマの進化にも注目しつつ、楽しみながら取り組んでいきたいと思います。
この記事を書いた人
