作って
これからのWordPressテーマ制作で中心となる「ブロックテーマ」。制作のワークフローや、サイトエディターの使い方、theme.jsonを中心としたスタイリングなど、ブロックテーマを理解するために必要なことまとめた１冊です。
はじめに
WordPressのテーマ制作が、大きな変化を始めました。
サイトエディターを中心としたブロックテーマの制作環境が整い、ノーコードでのテーマ制作やサイトの構築が一気に形になってきました。
それに合わせるようにWordPressの開発も、ブロックテーマを前提としたものへと変化を始めています。この変化の影響は大きく、クラシックテーマであってもブロックテーマの機能を取り込むために、theme.jsonを採用するものが増えてきました。
まだまだ先かと思っていたブロックテーマですが、あっという間にWordPressのテーマ制作の中心に据えられています。
しかし、ブロックテーマはノーコードな環境で制作するテーマです。その制作方法も、考え方も、これまでのテーマとあまりに違います。そこで本書では、ブロックテーマを作成する中で、
- ブロックテーマの作成の流れ
- サイトエディターの使い方
- theme.jsonの作成方法とその目的
- theme.jsonを中心とした、これからのWordPressのスタイリング
といったポイントを、しっかりと解説しています。
これからのテーマ制作に活用していだければと思います。
本書について
本書ではWordPressのブロックテーマを作成していきます。このとき、どのようにサイトのデザインやスタイルを管理し、エディターのUIを機能させ、ブロックをカスタマイズできるようにするのかがポイントになります。Figmaのデザインデータとしてデザインシステム（デザイントークン＆パーツ）もセットで用意していますので参考にしてください。
制作ステップ
Chapter 1ではGutenbergによるWordPressの変化とそこで扱われるスタイル、そしてtheme.jsonの基本を確認します。Chapter 2からステップ・バイ・ステップでブロックテーマを作成していきます。
ページ構成
制作ステップごとに次のようにページを構成しています。
ダウンロードデータ
本書で作成するWordPressの完成テーマ、使用する画像素材、インポート用のコンテンツデータ、Figmaのデザインデータなどは、ダウンロードデータに収録してあります。詳しい収録内容や使い方については、ダウンロードデータ内のreadmeを参照してください。
ハイブリッドテーマPDF
本書はWordPressによるブロックテーマ作成の解説をメインとしています。そのため、クラシックテーマにブロックテーマの要素を取り込む「ハイブリッドテーマ」の作成についてはPDFにまとめ、ダウンロードデータに同梱しています。ブロックテーマをベースにハイブリッドテーマを作成していきますので、必要に応じて利用してください。
もくじ
- Chapter 1 ブロックテーマの作成をはじめる前に
- 1.1 Gutenbergの登場によるコンテンツデータの変化
- ツリーデータになったコンテンツデータ
- スタイルの情報を持ったコンテンツデータ
- 1.2 テーマとエディターの関係
- Classic Editor（クラシックエディター）
- 初期のGutenberg（グーテンベルク）
- 自己完結する形になったGutenberg（グーテンベルク）
- 1.3 テーマの分類
- ブロックテーマ
- クラシックテーマ
- ハイブリッドテーマ
- 各テーマで利用できる機能の比較
- 1.4 スタイル
- ブロックのスタイル
- グローバルスタイル
- テーマのスタイル
- ユーザーのスタイル
- スタイルの出力順
- 1.5 Gutenbergの進化にともなうスタイリングの変化
- レイアウト機能を持つコンテナの導入とブロックのネスト
- スタイルエンジンによるスタイルの最適化
- 1.6 theme.jsonの基本
- グローバルスタイルを構成するtheme.json
- theme.jsonの作成と編集
- theme.jsonの統合
- 1.7 theme.jsonの構成
- $schema
- version
- settings
- styles
- templateParts
- customTemplates
- patterns
- title
- 1.1 Gutenbergの登場によるコンテンツデータの変化
- Chapter 2 コンテンツとブロックテーマの準備
- 2.1 WordPressの下準備
- 2.2 サイトのページ構成と必要なデータ
- 2.3 コンテンツをブロックでどう構成するかを検討する
- 2.4 ブロックで構成したコンテンツを確認する
- 2.5 ブロックテーマを作成する
- 2.6 ブロックテーマのファイル構成を確認する
- 2.7 functions.phpを用意して外部CSSを読み込む
- 2.8 サイトエディターでテンプレートを編集する
- 2.9 ブロックの横幅のコントロールとレイアウトタイプ
- 2.10 サイトエディターでのカスタマイズ結果をテーマに反映する
- Chapter 3 theme.jsonの作成
- 3.1 theme.jsonでグローバルスタイルを整えていく
- 3.2 フォントサイズのプリセットを作成する
- 3.3 フォントファミリーのプリセットを作成する
- 3.4 色のプリセットを作成する
- 3.5 スペース（余白）のプリセットを作成する
- 3.6 ベースとなるスタイルの作成
- 3.7 ベースとなるテキストのスタイルを作成する
- 3.8 ベースとなる見出しのスタイルを作成する
- 3.9 ベースとなるレイアウトのスタイルを作成する
- 3.10 ベースとなるリンクのスタイルを作成する
- 3.11 ベースとなるボタンのスタイルを作成する
- 3.12 ベースとなる画像のスタイルを作成する
- Chapter 4 個別のブロックのカスタマイズ
- 4.1 ブロックのスタイルを個別にカスタマイズする
- 4.2 ブロックが持つ機能を使ったシンプルなカスタマイズ
- 4.3 複数のブロックを組み合わせたパーツの作成
- 4.4 theme.jsonでは扱えないスタイルによるカスタマイズ
- 4.5 ブロックの個別のカスタマイズ結果をテーマで扱う
- Chapter 5 ページの基本構造の作成
- 5.1 ブロックの構成とスタイリングによるページとパーツの作成
- 5.2 ページの基本構造（ヘッダー、メインコンテンツ、フッター）を作る
- 5.3 コンテンツの内外でリンクの色を変える
- 5.4 テンプレートパーツを編集する
- 5.5 ヘッダーを作成する
- 5.6 フッターを作成する
- 5.7 ページを構成する主要パーツの間隔を指定する
- Chapter 6 テンプレートによるページの作成
- 6.1 単一テンプレートで記事ページを仕上げる
- 6.2 固定ページテンプレートでアバウトページを仕上げる
- 6.3 インデックステンプレートで記事一覧のトップページを作成する
- 6.4 記事一覧をテンプレートパーツにする
- 6.5 アーカイブテンプレートでアーカイブページを作成する
- 6.6 404テンプレートで404ページを作成する
- 6.7 検索テンプレートで検索結果ページを作成する
- Chapter 7 サイト型のトップページ
- 7.1 サイト型のトップページと記事一覧ページを作成する
- 7.2 タイトルを出力しないカスタムテンプレートを作成する
- 7.3 背景の装飾の入れ方を検討する
- 7.4 カラムブロックでメインビジュアルを作成する
- 7.5 斜めにカットした背景を入れる
- 7.6 最新記事の一覧を作成する
- Chapter 8 エディターを使いやすくする
- 8.1 エディターを使いやすくする機能
- 8.2 ブロックパターンを用意する
- 8.3 コンテンツの新規作成時に雛形を選択できるようにする
- 8.4 記事一覧、ヘッダー、フッターの選択肢を追加する
- 8.5 スタイルバリエーションを用意する
- 8.6 機能を制限する
- 8.7 ブロックテーマの構成
- Appendix
- メタデータの出力
- 子テーマを使ったカスタマイズ
- カスタム投稿タイプとカスタムタクソノミーでお知らせを管理する
