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

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

目次

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

導(dǎo)入

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

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

免責(zé)事項(xiàng)：私はブロックテーマの専門家ではなく、味付けされたWordPressユーザーです。私の目的は、WordPress 5.9を批評(píng)することではなく、ブロックエディターでの実踐的な経験に基づいて、心のこもった學(xué)習(xí)者の視點(diǎn)を提供することです。

重要な用語(yǔ)

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

ブロックエディター

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

ブロックテーマ

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

サイトエディター

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

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

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

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

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

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

テーマファイル構(gòu)造をブロックします

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

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

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

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

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

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

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

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

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

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

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

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

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

普遍的なテーマ

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

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

Twenty22は、FSE向けに設(shè)計(jì)されたテーマの優(yōu)れた例であり、ブロックテーマの機(jī)能を紹介しています。

ハイブリッドテーマ

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

コミュニティのテーマ

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

現(xiàn)実世界のブロックテーマの例

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

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

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

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

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

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

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

個(gè)人的な反省

私の経験は、いくつかの重要な側(cè)面を強(qiáng)調(diào)しています：

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

ブロックテーマは、軽量でマークアップに焦點(diǎn)を當(dāng)てた構(gòu)造を提供することにより、膨満感のあるワードプレステーマに関するJamstackの批判に対処しています。

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

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

簡(jiǎn)素化されたカスタマイズ

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

エントリの障壁を下げる

ブロックテーマは、テーマ開発を簡(jiǎn)素化し、コンテンツとパターンに焦點(diǎn)を當(dāng)てます。

リソース

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

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

以上がWordPressブロックテーマの深い紹介の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。