『グーテンベルク時代の
『グーテンベルク時代のWordPressノート テーマの作り方 2（ランディングページ＆ワンカラムサイト編）』では、WordPress 5.xのブロックエディタ「Gutenberg」を使う方法、使わない方法の両方で、ランディングページ＆１カラムサイトを作成していきます。
テーマの作り方の２冊目としてはいろいろな方向性が考えられたのですが、決め手となったのは１冊目の入門編を書いている段階で、
「現状のグーテンベルクでもいろいろなWebページが作れるのでは…？」
と感じたことでした。
そこで本書では、グーテンベルクの実力を図るためにも、「全幅・幅広」の機能を活かすことができ、１カラムでさまざまなパーツが必要になる「ランディングページ」を作成することにしました。
グーテンベルクを使わない従来の制作スタイルに対し、グーテンベルクを活用し、エディタでブロックを並べ、テキストや画像を入れていくだけでフロントと同じ見た目でランディングページが出来上がっていくのは、想像以上に楽しい作業でした。
そして、これからのWordPressでは「今まで以上にCSSが重要になる」と強く感じることになります。
コーダー目線のグーテンベルク
今までのWordPressでは、テンプレートのデザイン部分はコーダーの仕事でしたが、機能部分はエンジニアの仕事でした。
これに対し、グーテンベルクを活用したWordPressでは、機能部分はグーテンベルクが担うため、ページ制作者は「ブロックをどう組み合わせて利用するか」「ブロックのデザインをCSSでどうアレンジするか」など、コーダー目線の作業に注力できるようになります。
「CSSがわかっていればどうとでもできる」ようになっているのです。
利用頻度の高いパーツを構成できるだけの基本的なブロックは標準で揃っていますし、「もうちょっとこうしたい」「こういうパーツが欲しい」といった大抵のことは、ブロックの組み合わせとCSSで解決できます。
CSSによるアレンジも、ブロックスタイルとして用意すればエディタのインターフェースで簡単にオン・オフし、切り替えることが可能です。
もちろん、それだけでは実現が難しいこともありますが、プラグインとしてリリースされているサードパーティ製のブロックに目を向けると、すでに高機能で多種多様なブロックの選択肢が広がっています。
一方で、CSSが重要になった結果、これからのテーマ制作で求められるのは
- どのようなブロックがどのような組み合わせで利用されたとしても、テーマ側のCSSが邪魔をすることがないようにしておくこと
- ブロックのデザインがどのように実現されているかを把握し、「!important」に頼らずにアレンジすること
といったことになっていくのではないかと感じています。
今回の本でも、こうした部分に気をつけながら作業を進めていますので、手にとってみていただければ幸いです。
