WordPressブロックテーマの深い紹介

2018年のデビュー以来、WordPress Block Editor（Gutenberg）はWebサイトの作成に革命をもたらしています。 CSSをサポートするテーマで使用できますが、ブロックテーマは大きな進歩を表しています。これらのテーマは、完全なサイト構築のためにブロックエディターを活用して、テーマの役割をコンテンツコントロールから設計ガイダンスにシフトします。このアプローチは、フルサイト編集（FSE）として知られており、ユーザーがブロックを使用してサイト全体を構築できるようにします。

この変革的な技術を探りましょう。

目次

• 導入
• 重要な用語
• クラシックテーマを持つブロックエディター
• ブロックテーマを理解する
• ビルディングブロックテーマ
• グローバルスタイルとtheme.json
• テーマ開発戦略をブロックします
• 現実世界のブロックテーマの例
• ブロックチャイルドテーマを作成します
• 個人的な反省
• リソース

導入

ブロックエディターの進化はユーザーに大きく見られますが、GitHubでの根本的な開発は絶えず進歩しています。私自身の旅には、クラシックエディターとブロック編集者の両方を使用し、コアプラットフォームに戻る前にギャツビーとフロントティとヘッドレスのワードプレスに挑戦することさえ関係していました。

Githubでの実験的なブロックベースのテーマに当初興味をそそられていた私は、最近、個人プロジェクトに積極的に探索し始めました。 WordPress 5.9（ "Joséphine"）は極めて重要な瞬間をマークし、フルサイトの編集とブロックテーマを最前線にもたらしました。以前は反復的な機能が存在していましたが、このリリースはゲームチェンジャーです。この記事では、私の実践的な学習経験と個人的な観察を共有しています。

免責事項：私はブロックテーマの専門家ではなく、味付けされたWordPressユーザーです。私の目的は、WordPress 5.9を批評することではなく、ブロックエディターでの実践的な経験に基づいて、心のこもった学習者の視点を提供することです。

重要な用語

ブロックテーマを掘り下げる前に、重要な用語を明確にしましょう。

ブロックエディター

これは、ブロックベースの構造により適切に命名されたWordPressエディターを指します。各要素（テキスト、画像、ビデオなど）はブロックであり、モジュラーページレイアウトを有効にします。これは、「クラシック」編集者の事前定義されたレイアウトアプローチとは対照的です。ブロックエディターは、単一のインターフェイス内でコンテンツとレイアウト編集を統合します。

ブロックテーマ

WordPressドキュメントで定義されているように、ブロックテーマはブロックを使用してすべてのサイトテンプレート（ヘッダー、フッター、サイドバーなど）を構築し、ブロックエディターのリーチをポストコンテンツを超えて拡張します。 PHPテンプレートに依存するクラシックテーマとは異なり、ブロックテーマは、サイトエディターとtheme.jsonを介してスタイルと配置されたブロックベースのHTMLテンプレートを利用しています。

サイトエディター

サイトエディター（多くの場合、フルサイト編集またはFSEと呼ばれます）は、ブロックベースのテンプレートを作成および管理するための中心的なツールです。これにより、まとまりのあるインターフェイス内で、さまざまなテンプレート、テンプレートパーツ、スタイリングオプションを編集できます。これにより、従来のPHPテンプレートベースのテーマ開発を視覚的なブロックベースのアプローチに置き換えます。

公式のWordPress Glossaryは、さらなる定義を提供します。

クラシックテーマを持つブロックエディター

ブロックエディターは、クラシックテーマとブロックテーマの両方で動作します。クラシックエディター（Classic Editorプラグインを介して）は引き続き利用可能であり、後方互換性を提供します。最初はGutenbergプラグインを介して、WordPress Coreに統合されたブロックエディターの段階的な導入は、FSEへの道を開きました。

ブロックテーマを理解する

実験的なブロックテーマは2020年初頭から開発中です。Githubテーマ実験リポジトリは、さまざまなアプローチを紹介しています。 Twenty21は重要なステップであり、ブロックスタイルとパターンを統合しました。現在、多くのテーマには、ブロックエディターのパターンとスタイルが含まれています。

テーマファイル構造をブロックします

ブロックテーマは、古典的なテーマとは大きく異なります。古典的なテーマはPHPとJavaScriptにマークアップに依存していますが、ブロックテーマはコアのマークアップと基本的なスタイリングを活用しています。シンプルなブロックテーマには、 index.php 、 style.css 、 theme.json 、 templates/index.html 、および再利用可能なコンポーネント用のpartsフォルダーが含まれます。

テンプレートとテンプレートパーツ

テンプレートはブロックのグループであり、多くの場合、再利用可能な「テンプレートパーツ」（例えば、ヘッダー、フッター）を組み込んでいます。これらは、ページレイアウトを作成するために組み立てられます。

ビルディングブロックテーマ

サイトエディターは、WordPress Webサイトを設計するための主要なツールです。多くのテーマのカスタマイズタスクのカスタマイザーを置き換えます。

WordPressサイトエディターインターフェイス

[外観]→エディターを介してアクセスされるサイトエディターは、おなじみのブロックベースのインターフェイスを提供しますが、サイト全体のテンプレートを管理するための拡張機能を備えています。サイト、テンプレート、テンプレートパーツのセクションを備えており、グローバルな設計調整を可能にします。 Kebobメニューを使用して、カスタマイズを簡単にクリアできます。

テンプレートとテンプレートパーツの作成

テンプレートはサイトエディター内で作成および管理されており、手動のPHPファイル作成の必要性を排除します。ブロックエディターハンドブックは、手動HTMLの作成やサイトエディターのインターフェイスを使用するなど、テンプレートとテンプレートパーツを作成するための方法を詳述しています。

グローバルスタイルとtheme.json

ブロックテーマでは、スタイリングはtheme.jsonファイルを介して管理されており、さまざまなソースからのスタイルをきれいに制御します。このファイルを使用すると、テーマ作成者はデフォルトスタイルを定義し、ユーザーのカスタマイズオプションを管理し、エディターのデフォルトを設定できます。スタイリングへの集中的なアプローチを提供し、保守性を向上させます。

テーマ開発戦略をブロックします

ブロックテーマ開発のためにいくつかの戦略が出現しています：

普遍的なテーマ

Automatticの普遍的なテーマであるBlockbaseは、アンダースコアテーマと同様の出発点として機能し、子テーマ開発の基盤を提供します。

デフォルトのテーマ（たとえば、222）

Twenty22は、FSE向けに設計されたテーマの優れた例であり、ブロックテーマの機能を紹介しています。

ハイブリッドテーマ

ハイブリッドテーマは、従来のアプローチとFSEアプローチをブレンドし、スタイリングにtheme.jsonを使用し、ブロックテンプレートを組み込む可能性があります。

コミュニティのテーマ

WordPressテーマディレクトリは、コミュニティが作成したブロックテーマの選択を増やし、多様なアプローチを実証しています。

現実世界のブロックテーマの例

多数のWebサイトがすでにブロックテーマを使用しており、汎用性を紹介しています。

ブロックチャイルドテーマを作成します

子どものテーマはブロックテーマに関連していますが、アプローチはまだ進化しています。

ブロックベーステーマプラグインを作成します

Automatticの「Blockbaseテーマの作成」プラグインは、ブロックベースのテーマの子テーマ作成を簡素化します。

Alternate theme.jsonファイルを使用します

theme.jsonファイルを交換すると、ブロックテーマの外観を大幅に変更できます。非コーダーのこのプロセスを簡素化するためにツールが出現しています。

個人的な反省

私の経験は、いくつかの重要な側面を強調しています：

ジャムスタックの批判に対処する

ブロックテーマは、軽量でマークアップに焦点を当てた構造を提供することにより、膨満感のあるワードプレステーマに関するJamstackの批判に対処しています。

カスタマイザーがありません

カスタマイザーのコードインジェクション機能を失うには、サイトエディターのインターフェイスに適応する必要があります。

簡素化されたカスタマイズ

ブロックテーマをカスタマイズすることは、開発者以外であっても、古典的なテーマよりもはるかに簡単です。

エントリの障壁を下げる

ブロックテーマは、テーマ開発を簡素化し、コンテンツとパターンに焦点を当てます。

リソース

ブロックテーマとFSEについて詳しく学ぶために、多数のリソースが利用できます。これには、さまざまなソースからの公式のWordPressドキュメント、チュートリアル、ブログ投稿が含まれます。

サイトエディターは、まだ進化している間、エキサイティングな可能性を提供します。私はブロックテーマを積極的に探求し、将来の開発を楽しみにしています。あなたの経験とフィードバックを共有してください！

以上がWordPressブロックテーマの深い紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。