ブロックエディタを使用してWebサイトを作成した方法

お気づきの方もいらっしゃると思いますが、当ウェブサイトの見た目が若干変わりました。 ウェブサイトのスタイルを変更し、フォント、スタイル、カラーパレットを更新しました…これから移動します：

これに：

ただし、これらの変更で最も興味深いのは、外観ではありません。完全にブロックベースのサイトになるように、Webサイトを最初から再構築することにしました。 今日は、ページテンプレートに基づくカスタムメイドのテーマから、すべてをWordPressブロックに依存する別の完全にパーソナライズされたテーマに移行する方法を説明したいと思います。

私たちがどこから来たのか

3年前にNelioContentを立ち上げたとき、すべてのWebサイトを完全に再編成し、オンラインプレゼンスを単一のドメインとブランドneliosoftware.comに集中させることにしました。 論理的には、私たちが行ったタスクの1つは、新しいWebサイトのイメージのデザインを支援するためにSiloCreativoに連絡することでした。 ここでは、彼らが行った最初の提案の1つを見ることができます。

その初期デザインを承認し、リクエストに応じて、リカルドとベロニカは仕事に取り掛かり、メインページ、ブログ、投稿、ヘルプなど、ウェブサイトのさまざまな部分に必要なすべてのテンプレートを使用してカスタムメイドのテーマを実装しました。ページ、…彼らはすべてをデザインし、すべてのデザインがページテンプレートに実装されました。 編集が面倒な高速ページがありました。

そして、グーテンベルクが到着しました。

当ウェブサイトの内容を理解する

新しいWordPressブロックエディターであるGutenbergは、 WordPressでのコンテンツ作成へのパラダイムシフトです。 これまで、ページビルダーを使用していない限り、ページの作成はユーザーにとって退屈で不親切なプロセスでした。 しかし、グーテンベルクは彼の腕の下で約束をしました： WordPressで視覚的に魅力的なコンテンツを作成することは誰の手の届くところにあるべきです。 そして、この主張をテストして、グーテンベルクだけに頼る美しいウェブサイトを本当に作成できるかどうかを確認したかったのです。

以前に持っていたWebを見たことがあれば、次のような要素を含む、シンプルでエレガントなデザインであることがわかります。

• 最初に折りたたまれた注目の画像を含むページ
• 説明的なテキストと画像および/またはビデオを含むブロック
• お問い合わせフォーム
• 法務ページ
• 価格表
• ユーザーからの声
• 機能リスト

派手すぎるものはありませんが、それでも興味深いものです。 これをすべてグーテンベルクで作成できますか？ そう思い、やってみました。 これが私たちがしたことであり、私たちが見つけたものです。

私たちの新しいテーマ

新しいウェブサイトをデザインするために最初にしたことは、テーマを最初から作成することでした。 このために、有名なスターターテーマ「アンダースコア」から始めることにしました。 これは、 WordPressテーマを操作するために最小限の必要なテンプレートが付属している非常に基本的なテーマであり、十分に文書化され、適切に編成されています。

アンダースコアの適応

すべてのWordPressテーマには、すべてのWordPressインストールに共通で、最終的にWebサイトで生成するコンテンツとは関係のない一連のページがあります。 たとえば、最後の投稿が表示されるブログページ、単一の投稿のレイアウト、404エラーページ、検索結果ページなどについて話します。したがって、 WordPressブロックを使用してテーマを作成する最初のステップは次のとおりです。これらの「ジェネリック」が私たちが望むルックアンドフィールを持つように、アンダースコアを私たち自身のスタイルに適合させます。 そしてそれが私たちがしたことです。

前のスクリーンショットを見ると、 _sassifyでテーマをダウンロードしたことがわかります。 オプションが有効になっているため、テーマはSASS形式のスタイルでダウンロードされ、複数のファイルに編成され、編集が非常に簡単になります。 数時間のCSSの記述と、 functions.phpでのPHPのカスタマイズに数時間かかりましたが、テーマを適切に取得することができました。

ビルディングブロックとしてのWordPressブロック

快適に感じる最初のテーマができたら（この場合、アンダースコアから作成したテーマですが、あなたの場合は、 wordpress.orgで見つけたテーマである可能性があります。これは、いつか購入したプレミアムテーマです。以前、または私たちのようなカスタムメイドのテーマでさえ）、 WordPressブロックを使用してすべてのページをレイアウトする時が来ました。

それでは、これ以上面倒なことはせずに、この段階で直面したすべての「課題」と、WordPressブロックを使用してすべてを実装する方法を見てみましょう。

デフォルトのブロック

WordPressにデフォルトで含まれているブロックは、段落、画像、ギャラリーなど、少し制限されています。派手すぎるものはありません。これらはすべて、ページレイアウトよりもブログ投稿の作成に重点を置いているようです。

しかし、それは大丈夫です。

手始めに、ウェブサイトにはブログ投稿のように見えるページがたくさんあるので、それは問題ありません。 たとえば、法的情報またはプライバシーポリシーとCookieを含むページは、最初に考えたよりもブログ投稿に近くなります。

しかし、非常にシンプルなコンポーネントで美しいページを作成できるので、それも問題ありません。 たとえば、ではテキストとビデオを組み合わせることができます。 これは、 Media＆Textブロックで簡単に実現できるものです。

かなり近いですね

デフォルトブロックの組み合わせ

単純なブロックを組み合わせると、非常に強力になります。 たとえば、次のスクリーンショットについて考えてみます。ここには、機能のリストがあります。

どのようにこれに取り組むでしょうか？ さて、それを注意深く論理的に見ると、各機能が画像といくつかのテキストの組み合わせであることがわかります（これはおなじみですか？）。 次に、明らかに3つの列があることがわかります。したがって、 Media＆TextブロックをColumnsブロックと組み合わせるとどうなりますか？

悪くないです、私たちはかなり近いです！ ブロックを組み合わせるときは、賢くなければなりません。 単一のColumnsブロックを使用すると、各列が互いに独立して編成されるため、フィーチャが水平方向に適切に配置されない可能性があります。 この問題を解決するには、少し狡猾である必要があります。各列に複数の機能を持つ単一のColumnsブロックを追加する代わりに、複数のColumnsブロックを作成して、各列に1つの機能しかないことを確認しましょう。

そしてお尻！ これで、行が適切に配置された3列のフィーチャができました。

ステロイドのデフォルトブロック

デフォルトのブロックが私たちが望むものに十分に近いが、正しく見えない場合があります。 視覚的な問題に直面している場合は、CSSを使用して解決できる可能性が非常に高く、 GutenbergがCSSクラスで非常にうまく機能することが最も重要です。

たとえば、画像ブロックに（オプションの）影を付けたい場合は、画像に影を追加する単純なCSSクラスを作成し、画像ブロックの[詳細]セクションを使用してそのクラスを適用できます。

このソリューションの問題は、ユーザーインターフェイスと実装の詳細（CSSクラスの名前）が混在していることです。 画像にshadowを追加するシャドウと呼ばれるクラスがあることを、いったいなぜ知っている必要があるのでしょうか。 まあ、これも簡単な解決策があります。

WordPressブロックエディターのプログラミングインターフェイスは、 registerBlockStyleという関数を、その名前が示すように、ブロックスタイルを登録するために公開します。 次のような単純なもの：

 registerBlockStyle ( 'core/image', { name: 'image-with-shadow', label: __( 'Shadow', 'nelio' ), } );

Shadowと呼ばれる画像ブロック（ core/image ）の新しいスタイルを登録しましょう。これを適用すると、画像ブロックのクラスhas-style-image-with-shadowます。

カスタムブロック

最後に、デフォルトのブロックがそれをカットしない場合は、独自のブロックを作成できます（または既存のサードパーティのブロックを使用できます）。 このソリューションは、いくつかのケースで実装されました。NelioContentおよびNelio A / B Testingの価格表では、連絡先ページに表示されるマップ（ちなみに、ブロックの作成方法に関する投稿で詳細に示されています）、使いやすさの面での結果は印象的です：

独自のブロックを作成する方法がわからない場合、または作成したくない場合は、多くの目的で追加のブロックを含むプラグインをいくつか残しておきます。

• GhostKit
• アトミックブロック
• CoBlocks
• カデンスブロック

私たちの経験

数か月前、ウェブサイトを少し刷新し、グーテンベルクを使用して実装する必要があると判断しました。 私たちの目標は2つありました。1つは、ウェブサイトを少し更新して、より新鮮な空気を提供したかったことです。 一方、ユーザーレベルと開発者レベルの両方でグーテンベルクについてもっと知りたいと思いました。 結局、ウェブ全体をグーテンベルクに移行することができ、その結果は絶対的な成功を収めました。 ぜひご利用ください。ご不明な点がございましたら、お気軽にコメント欄にご記入ください。

ちなみに、今日の投稿は、WordCampリスボン2019で私が行った講演に触発されました。ここに私のスライドがあります：

UnsplashのSamuelZellerによる注目の画像。