WordPressブロックテーマの深い紹介-CSSチュートリアル-php.cn

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