EBISUCOM エビスコム
  1. 著者NOTE

『グーテンベルク時代のWordPressノート テーマの作り方 2(ランディングページ&ワンカラムサイト編)について

グーテンベルク時代のWordPressノート テーマの作り方 2(ランディングページ&ワンカラムサイト編)』では、WordPress 5.xのブロックエディタ「Gutenberg」を使う方法、使わない方法の両方で、ランディングページ&1カラムサイトを作成していきます。

テーマの作り方の2冊目としてはいろいろな方向性が考えられたのですが、決め手となったのは1冊目の入門編を書いている段階で、

「現状のグーテンベルクでもいろいろなWebページが作れるのでは…?」

と感じたことでした。

そこで本書では、グーテンベルクの実力を図るためにも、「全幅・幅広」の機能を活かすことができ、1カラムでさまざまなパーツが必要になる「ランディングページ」を作成することにしました。

グーテンベルクを使わない従来の制作スタイルに対し、グーテンベルクを活用し、エディタでブロックを並べ、テキストや画像を入れていくだけでフロントと同じ見た目でランディングページが出来上がっていくのは、想像以上に楽しい作業でした。

グーテンベルクのブロックエディタを使った編集

そして、これからのWordPressでは「今まで以上にCSSが重要になる」と強く感じることになります。

コーダー目線のグーテンベルク

今までのWordPressでは、テンプレートのデザイン部分はコーダーの仕事でしたが、機能部分はエンジニアの仕事でした。

これに対し、グーテンベルクを活用したWordPressでは、機能部分はグーテンベルクが担うため、ページ制作者は「ブロックをどう組み合わせて利用するか」「ブロックのデザインをCSSでどうアレンジするか」など、コーダー目線の作業に注力できるようになります。

CSSがわかっていればどうとでもできる」ようになっているのです。

利用頻度の高いパーツを構成できるだけの基本的なブロックは標準で揃っていますし、「もうちょっとこうしたい」「こういうパーツが欲しい」といった大抵のことは、ブロックの組み合わせとCSSで解決できます。

CSSによるアレンジも、ブロックスタイルとして用意すればエディタのインターフェースで簡単にオン・オフし、切り替えることが可能です。

グーテンベルクのブロックスタイルを使ったデザインアレンジ

もちろん、それだけでは実現が難しいこともありますが、プラグインとしてリリースされているサードパーティ製のブロックに目を向けると、すでに高機能で多種多様なブロックの選択肢が広がっています。

一方で、CSSが重要になった結果、これからのテーマ制作で求められるのは

といったことになっていくのではないかと感じています。

今回の本でも、こうした部分に気をつけながら作業を進めていますので、手にとってみていただければ幸いです。

グーテンベルク時代のWordPressノート テーマの作り方

入門編 + ランディングページ&ワンカラムサイト編