ホームページ > ウェブフロントエンド > CSSチュートリアル > WordPressブロックテーマの深い紹介

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

尊渡假赌尊渡假赌尊渡假赌
リリース: 2025-03-14 11:33:13
オリジナル
691 人が閲覧しました

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.phpstyle.csstheme.jsontemplates/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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート