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サイトを設計するための主要なツールです。多くのテーマのカスタマイズタスクのカスタマイザーを置き換えます。
[外観]→エディターを介してアクセスされるサイトエディターは、おなじみのブロックベースのインターフェイスを提供しますが、サイト全体のテンプレートを管理するための拡張機能を備えています。サイト、テンプレート、テンプレートパーツのセクションを備えており、グローバルな設計調整を可能にします。 Kebobメニューを使用して、カスタマイズを簡単にクリアできます。
テンプレートはサイトエディター内で作成および管理されており、手動のPHPファイル作成の必要性を排除します。ブロックエディターハンドブックは、手動HTMLの作成やサイトエディターのインターフェイスを使用するなど、テンプレートとテンプレートパーツを作成するための方法を詳述しています。
theme.json
ブロックテーマでは、スタイリングはtheme.json
ファイルを介して管理されており、さまざまなソースからのスタイルをきれいに制御します。このファイルを使用すると、テーマ作成者はデフォルトスタイルを定義し、ユーザーのカスタマイズオプションを管理し、エディターのデフォルトを設定できます。スタイリングへの集中的なアプローチを提供し、保守性を向上させます。
ブロックテーマ開発のためにいくつかの戦略が出現しています:
Automatticの普遍的なテーマであるBlockbaseは、アンダースコアテーマと同様の出発点として機能し、子テーマ開発の基盤を提供します。
Twenty22は、FSE向けに設計されたテーマの優れた例であり、ブロックテーマの機能を紹介しています。
ハイブリッドテーマは、従来のアプローチとFSEアプローチをブレンドし、スタイリングにtheme.json
を使用し、ブロックテンプレートを組み込む可能性があります。
WordPressテーマディレクトリは、コミュニティが作成したブロックテーマの選択を増やし、多様なアプローチを実証しています。
多数のWebサイトがすでにブロックテーマを使用しており、汎用性を紹介しています。
子どものテーマはブロックテーマに関連していますが、アプローチはまだ進化しています。
Automatticの「Blockbaseテーマの作成」プラグインは、ブロックベースのテーマの子テーマ作成を簡素化します。
theme.json
ファイルを使用しますtheme.json
ファイルを交換すると、ブロックテーマの外観を大幅に変更できます。非コーダーのこのプロセスを簡素化するためにツールが出現しています。
私の経験は、いくつかの重要な側面を強調しています:
ブロックテーマは、軽量でマークアップに焦点を当てた構造を提供することにより、膨満感のあるワードプレステーマに関するJamstackの批判に対処しています。
カスタマイザーのコードインジェクション機能を失うには、サイトエディターのインターフェイスに適応する必要があります。
ブロックテーマをカスタマイズすることは、開発者以外であっても、古典的なテーマよりもはるかに簡単です。
ブロックテーマは、テーマ開発を簡素化し、コンテンツとパターンに焦点を当てます。
ブロックテーマとFSEについて詳しく学ぶために、多数のリソースが利用できます。これには、さまざまなソースからの公式のWordPressドキュメント、チュートリアル、ブログ投稿が含まれます。
サイトエディターは、まだ進化している間、エキサイティングな可能性を提供します。私はブロックテーマを積極的に探求し、将来の開発を楽しみにしています。あなたの経験とフィードバックを共有してください!
以上がWordPressブロックテーマの深い紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。