これが最新のWordPressテーマ開発である場合は、サインアップしてください

私はしばらくの間、私の脳の中でガタガタと音を立てるブロックテーマのアイデアを持っていました。 何ヶ月もの間、私は単一ページのプロフィール/カードのテーマを作成することを検討しました、そして私はついに座って週末に仕事をしました。 部分的に、私はただ楽しみのためにこれをしたかっただけです。 しかし、私の別の部分は、開発者の観点から、ブロックのテーマがどのように進んでいるかを見たかったのです。

このテーマのインスピレーションは、他の数人の人々やプロジェクトから来ました。 2020年10月からのKjellReigstadの2列のランディングページの実験が最初にそれを引き起こしました。 コンパクトで居心地の良いテーマについてのAskthe Bartenderコラムへの最近の質問は、私の創造的なジュースを再び流しました。 ただし、テーマチームがCarolinaNymarkによる同様のブロックテーマであるMiniblockOOAKを承認するのを見ると、ルールが緩くなり、このようなものを世に出す可能性があります。

問題の1つは、ブロックベースのテーマが以前に私をやけどさせたことです。 昨年、貴重な空き時間に新しいプロジェクトを構築するのに何ヶ月も費やしましたが、数週間後にGutenbergプラグインの更新で進捗状況が一掃されました。 アルファレベルのソフトウェアの不安定な基盤によって状況が変わる可能性があることはわかっていましたが、それでも収縮していました。 言うまでもなく、私はそれを取り戻す動機を見つけることができませんでした。

WordPress 5.9と、より安定したブロックテーマシステムがほんの数日先にあるので、もう一度試してみる時が来ました。

ブロックテーマを深く学びたかった。 それができる唯一の方法は、最初に戻ることでした。 私は、昔ながらのHTML、CSS、およびPHPの基本的な要素を再確認する必要がありました。 そして、私が知っていると思っていたものすべてを、現代のWebの上に構築することを忘れてください。 私は再び初心者になる必要がありました。

技術的には、ある種の記憶喪失を起こさずに私が知っていることをすべて忘れることは不可能です。 しかし、たぶん—たぶん—ウェブの構成要素に戻ることができたのかもしれません。

/node_modulesフォルダー内の900を超えるプロジェクトにまたがる複雑な依存関係のWebなしでWordPressテーマを起動できますか？

Composerを介してベースPHPスクリプトを忠実に取り込むことなく、何かを作成できますか？

WordPressテーマを作成するだけでいいですか？

最初のステップは、ドアで私のエゴをチェックすることでした。 何年にもわたる最新のツールとそれらを中心に構築されたワークフローを脇に置いたとき、私が見つけたのは、WordPressのルーツに敬意を表するが、高度なビルドに拡張できるほど柔軟な、美しくシンプルなテーマシステムでした。

これは、途中で問題が発生しなかったということではありませんが、問題については十分に聞いています。 さらに、プログラミング/開発は問題を解決するための技術だと思います。

落ち着きのない週末を過ごしました。 私は金曜日と土曜日の夜の間に4時間、おそらく5時間のしっかりとした睡眠を得ました。 たぶん、私は非常に多くのプロジェクトや事柄が進行中であったので、私の心はそれらを締め出すことができませんでした。 とにかく、私は日曜日の朝の午前3時30分に起きて、疲れていましたが、それらの切望されていたZを捕まえることができませんでした。 そこで、コードエディタを開いて、新しいテーマプロジェクトを作成しました。

1時間以内に、それは機能していました。 Twitterで友達と2人で共有するのに十分な形でした。

以下は、現在のホームページのスクリーンショットです。 技術的には、これが唯一のページです。 最初のコミットをライブでプッシュしてから、少しいじくり回しました。

これは「Reflections」という名前のブロックパターンです。 湖の写真に映る山はWordPressPhotosからのもので、AnneMcCarthyが撮影したものです。 背景に使われているグラデーションも画像の色を反映したもので、いい感じだと思いました。

テーマには他のいくつかのパターンが含まれています。 目標は、ユーザーが自分のプロファイルカードにお気に入りを選択し、コンテンツをカスタマイズして保存できるようにすることです。 簡単に簡単。 私はこれで引っ掛かりを打ちました、そしてそれは私がポストの終わりに飛び込みます。 ほとんどの場合、すべてがうまくいきました。

経験から学んだこと

ブロックを使用してWordPressテーマを作成するのは簡単です。 ほとんどのものは、標準的なルールのセットによって構造化され、再生されます。 テンプレートはここにあります。 部品はそこに行きます。 設定をプラグインします。 将来のWordPressバージョンではさらに多くの構造が見られる可能性があります。

コードエディタとローカルのWordPressインストールのみを使用して、テーマを最初から作成しました。 ノードモジュールはありません。 PHPライブラリはありません。 ビルドのセットアップは一切ありません。

このプロジェクトが完了する前に、私はおそらくそれらのものを使用します。 一部のツールは、単に開発を容易にします。 ただし、それらを必要としないか、より複雑なPHP APIに飛び込むことで、参入障壁が低くなりました。

複雑な部分をすべて処理するためのより良いシステムが整っただけで、2000年代半ばに戻ったように感じました。 かつては、ほぼ完全にデザインに集中することができました。

基盤となるシステムには多くの問題があります。 ワイドアラインされたブロックの周りの余分なラッパー要素のような奇妙なものは、まだエディターに存在します。 そして、いくつかのブロックを更新する必要があります—既存のButtonブロックを再利用しないためのFileブロックを見ています。

基本的に、癖があります。 テーマとして、あなたはそれらを念頭に置いて作業することを学び、上流で修正を待つか、回避策を見つけようとして正気を危険にさらします。

私は未完成の作品を共有することに躊躇していますが、証拠も提示する必要があります。 興味のある人は、この記事の日付でGitHubリポジトリをチェックすることができます。少なくとも、私がそれに夢中になる前に。

一部のテーマ作成者は、私のプロジェクトを見て、例としては単純すぎると思うかもしれません。 しかし、私はそれに関するすべてを本格的なテーマに簡単に適用することができました。 サイズに関係なく、基準は同じです。

多分私たちはテーマが何であるかを再考し始めるべきです。 ブロックベースのテーマは非常に若いので、私たちは皆、少し実験を行う必要があります。

逃した機会

バランスの取れたユーザーエクスペリエンスの機会を逃したことを説明するために重要であるため、このビットについては少し技術的になります。 サイトエディタは、上級ユーザー向けに簡単に構築できる場所にあります。 パターンは、技術的でない人たちのギャップを埋めるのに役立ちますが、十分ではありません。

Webページの主要なセクションについて考えてみてください。 ヘッダー、フッター、サイドバー、コンテンツ、さらにはそれらのサブセクションなどの部分。 ユーザーとして、すでに画面に表示されているコンテンツ領域のデザイン全体を別のコンテンツパターンに置き換えるにはどうすればよいですか？

そこにあるものを削除して、新しいパターンを挿入することができます。 ただし、ページのセクションの削除と挿入はリスクの高いアクションです。

変更したい領域がテンプレートパーツの場合は、別の領域に置き換えることができます。 これは、テーマの作成者がその領域に登録していることを前提としています。 これはリスクの低いアクションであり、サイトエディタの最高の機能の1つです。

たとえば、「置換」ツールバーメニュー項目の下に表示されるTwentyTwenty-Twoが登録するヘッダーテンプレートは次のとおりです。

ただし、これはテーマのヘッダーパターンの配列全体ではなく、合計18個あります。 ほとんどのエンドユーザーは決してそれらを発見しないと思います。

特定のテンプレートパーツ用のパターンを作成することの欠点の1つは、エンドユーザーがパーツの卸売りを新しいパターンに置き換えたり変換したりする方法がないことです。

テーマの作成者は、PHPが混在していないことを前提として、パターンコードをテンプレートパーツにコピーすることで作業を複製できます。または、これらのパーツを作成し、Patternブロックを介して関連するパターンを取り込むことができます。

 <!-- wp:pattern { "slug":"namespace/slug" } -->

このアプローチの問題は、サイトエディタが[置換]ドロップダウンにパターンコンテンツを表示しないことです（バグを発見しただけですか？ ）：

解決策は単純でなければなりません。 テンプレートパーツに登録されているパターンは、UIを介して交換可能である必要があります。 または、Patternブロックを使用するパーツは、[置換]ドロップダウンに正しく表示されるはずです。