単一のJSONファイルを使用したブロックベースのWordPress子テーマの設計
公開: 2021-10-262008年に最初のテーマショップをオープンした瞬間から、ただいじくり回すだけの人として現在に至るまで、私の計画は常にCSS ZenGardenの型で単一のテーマを構築することでした。 これは、デザイナーがCSSだけでサイトを操作する方法を示すためにDaveSheaが2000年代初頭に立ち上げたプロジェクトでした。 HTMLは同じままですが、デザインは何でもかまいません。
私はいくつかのプロジェクトでその目標を何度も達成しました。 技術的には、WordPressテーマのアーキテクチャ的に適切なマークアップと子テーマのカスタムCSSだけが必要でした。
コンセプトはシンプルでしたが、時間が経つにつれて私のビジョンは変わりました。 このような子のテーマをもっと簡単にデザインできるようなものを作りたかったのです。 そのため、テーマデザインの領域でWordPressのツールが不足していることを回避するためにカスタムシステムを構築しました。 自慢しすぎないように、便利な方法を作ったような気がしました。 子テーマの設計者は、フォントファミリ名やカラーコードなどの値を構成ファイルにプラグインできます。 これらのほとんどは、カスタマイザーを介してエンドユーザーによって上書きされる可能性もあります。
2018年までに、私は自分の最高傑作となるもの、これまでに作成した中で最高のWordPressテーマに取り組むことにすでに熱心に取り組んでいました。 私もそれが私の最後になることを計画していました。 しばらくゲームから抜け出すことを考えていました。 しかし、これは私が見通さなければならなかったプロジェクトでした。
次に、新しいブロックエディタがすべてを爆破しました。 発売前から何ヶ月も使っていましたが、テーマの開発は決して同じではないことはわかっていました。 グーテンベルクプロジェクトは成熟を続け、WordPressの未来を再形成するでしょう。
最終的にテーマを立ち上げました。 これは、新しいブロックシステムをサポートした最も初期の商用製品の1つでした。 しかし、私もしぼんでいました。
これらは初期のブロックエディタの時代でした。 3年以上で何を見ているのかは誰にもわかりませんでしたが、少しでも注意を払っていれば、テーマが当時とは大きく異なるものに進化していくことがわかります。 私は1年以上かけて、短期間で無関係になるテーマシステムを構築しました。当然のことながら、この目的地にもっと早く到着したと思いました。
WordPress 5.9は、フルサイト編集の最終サブコンポーネントを出荷します。 これには、内部のブロックテーマのサポートが含まれます。 それらをインストールするユーザーは、サイトエディターとグローバルスタイルインターフェイスを介してそれらをカスタマイズできます。
私が最も興奮しているのは、13年前に毎朝目が覚めたもの、つまり子供のテーマです。
ブロック子テーマは、Gutenbergプラグインで数か月間部分的に機能しています。 しかし、私が最も楽しみにしていた機能は、1週間前まで準備ができていませんでした。 新しいパッチを使用すると、子テーマで親のtheme.jsonファイルの単一の値を上書きできます。 基本的に、2つのファイルがマージされ、子が優先されます。
なぜ私はこの機能にとても興奮したのですか？ それは私が何年も前に構築したのと同じシステムだったからですが、それよりも優れています。
グーテンベルクの開発版でこの土地を見た後、私が最初にしたことは、私が手を出しているカスタムテーマをロードすることでした。 それは私が楽しみと私自身の啓蒙のために構築してきたプロジェクトです。
次に、コードエディタで新しいプロジェクトを作成しました。 必要なstyle.cssファイルを追加し、適切なヘッダーフィールドに接続しました。 それ以上は必要ありません。 私の子供のテーマのデザインは、まったく別の機能に依存します。
子テーマのルートレベルでtheme.jsonを追加し、長い間テーマを使用していたよりも楽しくなり始めました。
秋の色と楽しいヘディングフォントをいくつか選びました。 数分以内に、テストインストール全体に新しいペンキがはねかけられました。 デザインは革命的なものでも、そのようなものでもありませんでした。 いくつかの値をプラグインすることでデザインを変換するのがいかに簡単であるかに驚かされました。
これは私がいつも憧れていたタイプの子供のテーマです。 さまざまな季節や休日にテーマのデザイン要素を切り替える力が欲しいです。 そして、これらの子テーマを他の人と共有できるようにしたいと思います。
私が言ったように、私は以前にそのような子テーマのメソッドを構築しました（JSONの代わりにPHPを使用しました）。 ただし、これは標準のブロックシステムに依存しており、ほんの一握りの人しか使用しないカスタムではないため、はるかに強力です。
子テーマを作成する代わりに、サイトエディタを介してこれらの変更を行わなかった理由を質問される方もいらっしゃるかもしれません。 リッチ・ターボルは、本質的に、今日の初めにツイッターで同じ質問を投げかけました。 「テーマがJSONとブロックテンプレートで構成されており、どちらもグローバルスタイルを介して変更できる場合、子テーマは何のためにありますか？」
ブロックテーマをインストールし、いくつかの色調整を行ったとしましょう。 さて、クリスマスが始まるときにこれを混ぜたいと思ってください。いくつかの色を入れて、お祝いのホリデーフォントを見つけてください。 これらの変更を行うと、アクティブなテーマに基づいてユーザーのカスタマイズが保存されるため、シーズンが終了すると古いデザインは表示されなくなります。 もちろん、古い設定をすべてメモして、後で元に戻すこともできます。 ただし、子テーマを介して行うということは、いつでもテーマを切り替えることができるということです。 私の古い設定はそのまま残ります。
おそらく、これは非常にエッジケースです。 最近、季節ごとにデザインを変更しているのは誰ですか？
エキサイティングな部分は、単一のJSONファイルで作成された子テーマを他の人と共有できることです。
この機能がWordPressに導入されて以来、子供のテーマは私の情熱です。 いくつかの点で、それはあまり変わっていません。 Themersは、親からのテンプレートを引き続き上書きできます。 必要に応じて、カスタムCSSを追加し続けることができます。 しかし今では、単一の標準化されたファイルから設計の任意の部分を構成できます。 これは、開発者のキャップを元に戻して、もう1つのテーマを構築する価値のあるものです。
また、デザイン要素を共有することと同じメリットがある、子供をテーマにしない未来も見ています。
ブロックパターンディレクトリは、適切に構築されたWordPressテーマで機能するレイアウトをすでに提供しています。 ただし、将来的に分解される可能性のある設計のコンポーネントは他にもあります。
WordPressがColorLoversが提供するようなインストール可能なカラーパレットを持つことができる未来を想像します。 新しいテーマを見つけることなく、ディレクトリを参照し、インストールして、配色を変更するだけです。 最近のエイドリアンプラグインに似たものが、フォントに対して同じ目的を果たす可能性があります。 これらは、コミュニティが将来的に検討したいと思うかもしれないことです。 この時点でアイデアがテーブルから外れることはありません。
今のところ、子供をテーマにしたすべての力を自由に使えるようになったことを嬉しく思います。 変更は今週Gutenberg11.8に、そして今年後半にWordPress5.9に反映されるはずです。