ブロックテーマの構築方法: 2023 年の 4 つのベストな方法

WordPress テーマの開発が初めての場合は、ブロック テーマを構築する方法を疑問に思うかもしれません。 ブロックエディターの導入以来、それに対応するために WordPress テーマの構築方法が変更されました。

古典的なテーマ (たとえば、Twenty Seventeen) とブロックテーマ (たとえば、Twenty Twenty Three) を比較すると、多くの違いがわかります。

主な違いは、クラシック テーマでは、Web ページが PHP テンプレートのおかげでレンダリングされることです。 ブロック テーマでは、ブロック、HTML テンプレート (パーツおよびテンプレート フォルダー内)、および PHP ブロック パターン (パターン フォルダー内) を介してレンダリングされます。

ブロックテーマにはfunctions.phpファイルがないことにも気づくかもしれません。 これはブロックテーマではオプションです。 style.cssファイルはありますが、ヘッダー以外は空白です。 テーマの色とタイポグラフィは、代わりに、 theme.jsonファイルで処理されます。

この投稿では、新しい WordPress サイト エディターのエクスペリエンスを活用することがどのようなものかを理解できるように、ブロック テーマの構築方法を詳しく説明します。

📚目次:

• なぜブロックテーマを構築するのでしょうか?
• テーマハンドブックを使用してブロックテーマを構築する方法
• FullSiteEditing.com でブロック テーマを構築する方法
• Blockbase テーマを開始点として使用する
• Create Block Themeプラグインを使用してブロックテーマを構築する方法

なぜブロックテーマを構築するのでしょうか?

👉 ブロックテーマを構築すると、次のようないくつかの利点があります。

• ブロック テーマは、ページ上にレンダリングされるブロックに必要なスタイルのみをロードするため、パフォーマンスが向上します。
• ブロック テーマでは、スタイルシートを手動でキューに入れる必要はありません。
• add_theme_support()関数を使用する代わりに、 theme.jsonファイルはカスタム ロゴなどのテーマ固有の側面を処理します。
• アクセシビリティ機能 (コンテンツへのスキップ、キーボード ナビゲーション、ランドマークなど) を実装するために追加のコードを記述する必要はありません。 これらは自動的に作成されます。
• ユーザーはテーマとブロックの色とタイポグラフィをカスタマイズできます。
• ユーザーは、Web サイトのすべての部分を編集するためのコードを知る必要はありません。

テーマハンドブックを使用してブロックテーマを構築する方法

WordPress テーマ ハンドブックには、ブロック テーマと従来のテーマとの比較が含まれており、ブロック テーマの概要がわかりやすく記載されています。 ブロックテーマは、WordPress 5.9 の導入以来サポートされています。 これらはフル サイト編集テーマとしても知られることもあります (ただし、WordPress はフル サイト エディターという用語からは離れています)。

ブロック テーマの構築を開始するには、 style.cssファイルとtemplates/index.htmlファイルが必要です。 theme.jsonファイルはオプションですが、強くお勧めします。

テーマ構造の例を以下に示します。

theme.jsonファイルには、色、タイポグラフィ、レイアウト、間隔などのテーマのスタイル設定が含まれています。 また、テンプレート パーツ (ヘッダー、フッターなど) をページ上でどのように編成するかを制御し、カスタム ページ テンプレートとグローバル スタイルを定義できるようにします。

サイト エディターを使用すると、サイトのデザインを完全に制御できます。 これを使用するには、サイトにアクティブなブロック テーマが必要です。 WordPress にはいくつかの機能が付属していますが、 [外観] > [テーマ] > [新規追加]に移動して[ブロック テーマ]でフィルタリングすると、さらに多くの機能を見つけることができます。 目的のテーマの上にマウスを置き、 「インストール」ボタンをクリックしてインストールし、 「アクティブ化」ボタンをクリックしてアクティブなテーマにします。

次に、 [外観] > [エディタ]に移動して、サイト エディタをアクティブにします。

ブロック エディター インターフェイスを使用して、テーマ テンプレートを変更できます。 以下は、Twenty Twenty Three の 404 テンプレートを変更する例です。

次に、Twenty Twenty Three の Post Meta テンプレート パーツを編集する例を示します。

テンプレートまたはテンプレート パーツを選択し、半月型のスタイルアイコンをクリックして、テーマ スタイルを編集することもできます。 以下は、 [スタイル]パネルを使用してカラー パレットを編集する例です。

テンプレートまたはテンプレート パーツ HTML ファイル内のテキストは翻訳できません。 テーマを翻訳可能にしたい場合は、PHP パターン ブロックを作成する必要があります。 例は、ブロック テーマ ハンドブックの「国際化」ページに記載されています。

サイト エディターを使用して、既存のテーマをカスタマイズし、変更を新しいテーマとしてエクスポートできます。 テーマを完全にサポートするには、WordPress 6.0 以降を使用することをお勧めします。 ブロック テーマを作成するためにテーマ単体テスト データをダウンロードすると便利な場合もあります。

エクスポート オプションは、テーマ テンプレートまたはテンプレート パーツを編集するときに使用できます。 3 つの点を選択し、 [エクスポート]を選択します。

テーマにはアクティブなテーマと同じ名前が付けられます。 したがって、サイトにテーマをインストールする前に、zip ファイルの名前を新しいテーマ名に変更する必要があります。 また、 style.css ファイル内のテーマ名とテキストドメイン、およびstyle.cssとreadme.txt内の作成者名とリンクの名前を変更する必要があります。

👉 検索および置換ツールを使用して、以下を変更できます。

• 翻訳文字列内のテキストドメイン
• PHP 関数のプレフィックス
• パターンブロックで使用されるスラッグ

FullSiteEditing.com でブロック テーマを構築する方法

Carolina Nymark は、FullSiteEditing.com でブロック テーマの構築に関する優れたリソースを提供しています。これは、ブロック テーマの構築方法に関するもう 1 つの優れたツールです。

彼女は、 style.css 、 templates/index.html 、 theme.json 、 functions.phpファイルの作成から始めて、ブロック テーマを最初から構築する方法をガイドします。 チュートリアルに従うには、Gutenberg プラグインをインストールする必要があります。

チュートリアルに従い、指定されたコードを追加することでさらに学習できますが、間違っても心配する必要はありません。コードは GitHub でダウンロードできます。

theme.jsonの設定セクションでは色やタイポグラフィなどの設定を定義し、スタイル セクションではそれらの設定をテーマに適用します。

Theme.json次の形式に従います。

 { "version": 2, "settings": { "color": {}, "typography": {} }, “styles”: {} }

これは、テーマの色とタイポグラフィがtheme.jsonで定義された後の外観です。

設定での色の定義は次のとおりです。

 "color": { "palette": [ { "slug": "primary", "color": "#111", "name": "Primary" }, { "slug": "secondary", "color": "#fefefe", "name": "Secondary" }, { "slug": "tertiary", "color": "#383838", "name": "Tertiary" }, { "slug": "quaternary", "color": "#00838f", "name": "Quaternary" }, { "slug": "quinary", "color": "#4fb3bf", "name": "Quinary" } ],

スタイルセクションでの使用例:

 "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--secondary)" }, "elements": { "link" :{ "color": { "text": "var(--wp--preset--color--quinary)" } } },

以下は、ヘッダーとフッターのテンプレート部分へのスタイルセクションの参照です。

 "templateParts": [ { "name": "header", "area": "header", "title": "Header" }, { "name": "footer", "area": "footer", "title": "Footer" } ]

後のレッスンでは、 theme.json構文をさらに詳しく掘り下げ、次の方法を示します。

• カラーパレット、ダブルトーンフィルター、グラデーションを有効または無効にします。
• 境界線とリンクの色の設定
• 要素とブロックに色を適用する
• Google Fontsを含むフォントファミリーを追加する
• フォントサイズを定義する
• Gutenberg で流れるようなタイポグラフィを使用する
• 行の高さを有効または無効にする
• 以下を無効にします。
  • ドロップキャップオプション
  • フォントのウェイトコントロール
  • イタリック体
  • テキストを大文字に変換する
  • 文字間隔オプション
  • テキスト装飾コントロール
• コンテンツの幅を定義する
• マージンとパディングを有効にする
• blockGap (ブロック間の垂直方向の間隔) を設定します。
• カスタム間隔スケールを追加または無効にする
• グループと投稿コンテンツ ブロックの最小高さを設定する
• グループブロックの位置をスティッキーに設定します
• ホバーとフォーカスのスタイルを追加する
• ボックスシャドウ効果を追加する
• カスタムCSSを追加する
• グローバルスタイルのバリエーションを実装する
• PHPでtheme.jsonをフィルタリングする
• ブロックスタイルのバリエーションを変更する

スタイルはグローバルに、またはブロックごとに設定できます。 適切なブロックをターゲットにするには、コア ブロック リファレンスを参照してください。

Blockbase テーマを開始点として使用する

Blockbase テーマは、カスタマイズできるシンプルなスターター テーマです。 PHP バージョン 5.7 以降、および WordPress 6.1 以降が必要です。

Blockbase には次のテンプレートが含まれています。

• 404
• アーカイブ
• 空白
• フッターのみ
• ヘッダーとフッターのみ
• 索引
• ページ
• 検索
• シングル

そして、次のテンプレート部分:

• フッター
• ヘッダ
• ヘッダー中心
• ヘッダーのデフォルト
• ヘッダーリニア
• ヘッダー最小
• ヘッダー全体
• ポストメタ
• ポストメタアイコン

サイト エディターを使用して、これらのテンプレートとテンプレート パーツを変更したり、 theme.jsonファイルを編集したりできます。 [スタイル] オプションを使用して、タイポグラフィ、色、レイアウトを変更することもできます。

これはコンテンツの幅を 800px に変更しています。

そして、これが Ruby Wine スタイルのバリエーションです。

そして、フッター テンプレート パーツに追加された著作権ブロックは次のとおりです。

カスタマイズが完了したら、必ずテーマをエクスポートし、名前とテキスト ドメインを変更してください。

エクスポートされたテーマでは、フッターのコードが著作権ブロックの追加で更新されます。

Create Block Themeプラグインを使用してブロックテーマを構築する方法

ブロック テーマを作成するもう 1 つの方法は、WordPress.org チームが作成した Create Block Theme プラグインを使用することです。

WordPress 6.0 以降、および PHP 7.0 以降が必要です。 プラグインを使用するには、アクティブなテーマとしてブロック テーマが必要です。

プラグインをインストールしたら、 [外観] > [ブロック テーマの作成]に移動し、次の 6 つのオプションのいずれかを選択します (私は Twenty Twenty Three テーマを使用しています)。

トゥエンティ・トゥエンティ・スリーをエクスポート

[アクティブ化されたテーマをユーザーの変更とともにエクスポート]

このオプションにより、twentytwentythree という名前の新しい zip ファイルが作成されます。 サイトで使用するには名前を変更する必要があります。そうしないと、Twenty Twenty Three の更新があるときに名前が置き換えられます。

Twenty Twenty-Three の子を作成する

[新しい子テーマを作成します。 現在アクティブ化されているテーマが親テーマになります。]

このプラグインは、テーマを作成するために入力するフォームを提供します。

クローン・トゥエンティ・トゥエンティ・スリー

[アクティブ化されたテーマのクローンを作成して新しいテーマを作成します。 結果として得られるテーマには、アクティブ化されたテーマのすべてのアセットとユーザーの変更が含まれます。]

子テーマの場合と同じフォームを入力します。

223を上書きする

[USER の変更をテーマの変更として保存し、USER の変更を削除します。 変更はフォルダー上のテーマに保存されます。]

このオプションを選択すると、テーマの更新時にテーマの変更が上書きされることに注意してください。

空のテーマを作成する

[このサイトのテーマ ディレクトリ内に定型的な「空の」テーマを生成します。]

フォームにカスタマイズ内容を入力し、テーマの構築時にアクティブ化します。 テーマには、インデックス ページ、フッター、ヘッダーだけの最小限のテンプレートとテンプレート パーツが付属しており、あとはそれらを追加してカスタマイズするだけです。 また、スタイルも適用されていません。

スタイルのバリエーションを作成する

[ユーザーの変更をTwenty Twenty-Threeのスタイルバリエーションとして保存します。]

バリエーションを作成するには、 「バリエーション」フィールドに入力し、 「生成」ボタンを押します。

テンプレートまたはテンプレート パーツを編集しているときに、新しいスタイル バリエーションがサイト エディターの[スタイル]パネルに表示されます。

作成したスタイル バリエーションを選択し、 [色]セクションに移動して色を編集し、テーマに適用します。

Google フォントの管理

[外観] > [テーマ フォントの管理]に移動して、 Create Block Themeプラグインでフォントを追加または削除できます。

リストには、使用しているフォントが表示されます。 フォントファミリーまたはフォントバリエーションを削除するには、 「フォントファミリーの削除」または「削除」リンクをクリックします。

新しい Google フォントを追加するには、 [Google フォントの追加]ボタンをクリックします。 ドロップダウン メニューから希望のフォントを選択し、希望のフォント バリアントにチェックを入れます。 次に、 「Google フォントをテーマに追加」ボタンを選択します。

ローカル フォントを追加するには、 [ローカル フォントの追加]ボタンを使用して、システムで使用するフォントを参照します。 .otf 、 .ttf 、 .woff 、または .woff のいずれかにある必要があります。 woff2ファイル形式。 完了したら、 「フォントをテーマにアップロード」ボタンをクリックします。

テーマで新しいフォントを使用するには、 「スタイル」パネルに戻り、変更するタイポグラフィを選択します。 ドロップダウン メニューから希望のフォントを選択します。

完了したら、テーマの変更を忘れずに保存してください。

以上がブロックテーマの作成方法です。 🚀

よくやった; これで、ブロックテーマを構築する方法を学びました。 ブロック テーマは WordPress の未来であり、プログラマでない人でも独自の Web サイトを構築し、ブロックを使用してカスタマイズする機会を開きます。

デザイナーと開発者は、テーマの色、タイポグラフィ、間隔のオプションを作成するために、 theme.json構文を学習し、ブロック パターンを利用してテーマを翻訳可能にすることができます。

ブロックテーマの作成方法についてまだご質問がありますか? コメントでお知らせください！