WordPressブロックテーマの紹介

典型的なWordPressテーマを構成するコンポーネントは、何年にもわたってあまり変わっていません。 プロジェクトの共同創設者であるMattMullenwegが、古い学校のKubrickテーマ（2005年にリリース）が現在でも最新バージョンのコンテンツ管理システムで機能することを認めたほどです。

確かに、テーマ開発者は独自の追加を追加しました。 複雑な設定UIから統合されたページビルダーまで、あらゆるものを見てきました。 しかし、その核となるのは、テーマが一貫した構造を維持していることです。 つまり、ブロックテーマが導入されるまでです。

ブロックテーマはWordPressの未来になるように設定されています。 彼らは私たちがウェブサイトを構築し維持する方法を変えるでしょう。 さらに、それらは「古典的な」対応物よりもグーテンベルクブロックエディタとより緊密に統合されています。

すべての騒ぎが何についてであるか疑問に思いますか？ 今日は、WordPressブロックテーマの基本について説明します。 その過程で、それらが従来のテーマとどのように比較対照されるかを探ります。 始めましょう！

なぜテーマをブロックするのですか？

その存在の最初の数年間、ブロックエディタは主にコンテンツのスタイル設定と構築の手段でした。 古典的なテーマと組み合わせると、これはページや投稿があなたの心の欲望に合わせて作成できることを意味しました。

テーマ全体に影響を与える変更を加えることになると、WordPressカスタマイザーは引き続き頼りになるリソースです。 このツールは、テーマの作成者によって利用可能にされたデザインとレイアウト設定へのアクセスを提供します。 カスタマイザーにない場合は、コードを掘り下げる必要があります。

ただし、ブロックエディターの重要な信条の1つは、WordPressダッシュボード内でより統一されたインターフェイスを作成することでした。 ウィジェット画面がブロックベースのUIに移動すると、これが発生することはすでに見てきました。 カスタマイザーは単にこの型に適合しません。

フルサイト編集（FSE）の導入は、このプロセスの次のステップです。 それは単に私たちのページや投稿をスタイリングするだけではありません。 これで、テーマのデザインのあらゆる側面（ヘッダー、フッター、ページテンプレートなど）をWordPress内で直接管理できるようになりました。

ブロックテーマは、この機能へのゲートウェイとして機能します。 そのため、それらはブロックを念頭に置いて排他的に構築されています。

WordPressブロックテーマの内部動作

クラシックテーマとブロックテーマの間に多くの類似点はありません。 しかし、どちらにも、構成をガイドする一連の基本的なルールがあります。 ブロックテーマをダウンロードしてそのファイル構造をナビゲートする場合、いくつかの重要な対比が目立つ場合があります。

テンプレートファイルはPHPではなくHTMLです

古典的なテーマでは、 index.phpやheader.phpなどの名前のテンプレートファイルがあります。 ブロックテーマはPHPを廃止し、代わりに.htmlファイル拡張子を付けます。

内部には、テンプレートファイルにHTMLとブロックマークアップの組み合わせが含まれています。 たとえば、WordPressの公式ドキュメントからこのテンプレートを見てみましょう。

 <!-- wp:site-title /--> <!-- wp:image {"sizeSlug":"large"} --> <figure class="wp-block-image size-large"> <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:post-title /--> <!-- wp:post-content /--> </div> <!-- /wp:group --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:heading --> <h2>Footer</h2> <!-- /wp:heading --> </div> <!-- /wp:group -->

ブロックマークアップは、HTMLコメントに非常によく似ています。 ただし、特定のブロックをテンプレートに呼び出すための構文が含まれています。 WordPressフルサイト編集Webサイトには、各デフォルトブロックのマークアップを含む便利なリファレンスがあります。

そして、このタイプのコードがおなじみのようであれば、グーテンベルクのコードエディタビュー内で似たようなものを見たことがあるかもしれません。

フォルダの使用

クラシックテーマはテンプレートをフォルダ内に保存できますが、必須ではありません。 ブロックテーマには、いくつかのサブフォルダーが必要です。

/parts
ヘッダー、フッター、サイドバーなどの再利用可能なアイテムが含まれています。

/templates
さまざまなタイプのコンテンツのテンプレートを収容します。 ページ、投稿アーカイブ、単一の投稿などのアイテムが一般的な例です。 それらの命名規則は、WordPressテンプレート階層に従っていることに注意してください。これは、従来のテーマとのもう1つの類似点です。

この配置のプラスの副作用の1つは、テーマがより適切に編成されることです。 標準化されたフォルダ構造を持つことは、特定のファイルの検索に費やされる時間が少なくなることを意味します。

Theme.jsonスタイリング

theme.jsonファイルは、デフォルト設定をブロックエディターに割り当てるために使用されます。 これは、とりわけ、デフォルトのカラーパレット、タイポグラフィ、および間隔を設定できることを意味します。 設定はサイト全体に適用することも、特定のブロックに適用することもできます。

theme.jsonは、その構成に基づいて適切なCSSを自動的に生成するため、テーマのstyle.cssファイルにそれほど多くの情報を入力する必要がない場合があります。 そのシナリオでは、スタイルシートを使用していくつかの基本を定義しますが、他のすべてはこのnewfangledファイルに依存します。

テンプレートの作成と編集

WordPressは長い間、ダッシュボード内でテーマのテンプレートファイルを直接編集する機能を提供してきました。 小さなコーディングエラーでもWebサイトにアクセスできなくなる可能性があるため、これはしばしば推奨されませんでした。 テーマが更新されたときに変更が上書きされる可能性は言うまでもありません（したがって、子テーマを使用する理由の一部です）。 一部の開発者は、大惨事のわずかな可能性さえも回避するために、この機能を完全にオフにします。

ただし、ブロックテーマは、ダッシュボード内での編集がすべてです。 テーマに含まれているテンプレートは、ブロックエディターを介して微調整でき、新しいカスタムテンプレートも作成できます。

ご想像のとおり、このシナリオではコードは完全にオプションです。 ブロックテーマがアクティブ化されると、従来のカスタマイザーに置き換わる新しいサイトエディター（[外観]> [エディター] – WordPress 5.9以降が必要）を介してすべてを編集できます。 また、ページや投稿と同様に、サイトエディターはおなじみのブロックエディターUIを使用します。

そして、それだけではありません。 WordPress内で行った変更はすべてエクスポートできます。 これにより、カスタマイズしたブロックテーマを複数のWebサイトで使用できるようになります。

これにより、テーマをカスタマイズしたり、作成したりする場合の参入障壁が低くなります。 現在、デザインの基本的な目とブロックの実用的な知識は、カスタムWebサイトにつながる可能性があります。

心に留めておくべきこと

飛び込んですべてのWebサイトを切り替えてブロックテーマを使用する前に、知っておくべきことがいくつかあります。

何よりもまず、ブロックテーマは初期のテクノロジーです。 すべての機能が完成しているわけではなく、いくつかのベストプラクティスを解決する必要があります。 さらに、これらのテーマが実稼働環境でどのように機能するかを確認し始めたところです。 物事が進化するにつれて、いくつかの変化を期待してください。

クライアント向けのサイトを構築し、将来の柔軟性を維持したい場合は、ハイブリッドテーマが興味深いかもしれません。 これらは、クラシックテーマのPHP構造を維持しながら、FSE機能の使用を可能にします。 この機能を使用するために、既存のテーマを改造することもできます。

最後に、ブロックテーマは、少なくとも予見可能な将来においては、古典的なテーマの終わりを意味するものではありません。 これにより、この新しいテーマの方法への移行をすぐに行う必要はありません。 たとえば、本番環境でお気に入りのクラシックテーマに依存しながら、ローカル環境でブロックを試してみるのは問題ありません。

テーマリソースをブロックする

WordPressのブロックテーマについて詳しく知りたい場合は、いくつかの優れたリソースを利用できます。 ここに私たちのお気に入りのいくつかがあります：

• WordPressによるブロックテーマのドキュメント
• AutomatticによるBlockbaseテーマ
• CarolinaNymarkによるフルサイト編集
• リッチターボルによるグーテンベルクのWordPressブロックテンプレートへの究極のガイド
• WordPressのブロックテーマ革命はジャスティンタッドロックによって静かに勢いを増しています
• WordPressによるWordPressテーマ実験