WordPressの今までの解説書は全部過去のものに、制作の仕様が大きく変わったブロックテーマの使い方がよく分かる解説書 -作って学ぶWordPressブロックテーマ
Post on:2023年3月3日
「ブロックテーマ」とは、WordPressのサイトエディタのために用意された新しいテーマのフォーマットで、Gutenbergのブロックを使用してテンプレートを構成するものです。WordPressが後方互換を考慮するかぎり、今までのクラシックエディタや初期のGutenbergも使用できると思いますが、これからWordPressのテーマを制作するなら、このブロックテーマが必須になります。
WordPressのこれからのテーマ制作の標準「ブロックテーマ」をしっかり学べる解説書を紹介します。

著者はHTMLやCSSをはじめ、JavaScriptの解説書などWeb制作系の解説書で、はずれ無しのエビスコム様。ていねいで詳しい解説は分かりやすく、実践的なサンプルもたくさんあるので、かなり役立つと思います。
本書もWordPressのブロックテーマをその基礎知識から実践的なテクニックまで詳しく解説されており、ブログのテーマを作成しながら学びます。素材やデータ、Figmaファイル、完成したテーマファイルなどはサポートサイトからダウンロードでき、クラシックテーマにブロックテーマの要素を取り込むハイブリッドテーマの解説PDFもダウンロードできます。
Kindle版も同時発売されています!
版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

WordPressのテーマ制作は、Gutenbergの登場により大きく変化し、現在ではブロックテーマを前提してものになりました。クラシックテーマであってもこのブロックテーマの機能を取り組むtheme.jsonを採用するものもかなり増えています。まだまだ先、と思われていたブロックテーマですが、現在ではWordPressのテーマ制作の中心になっています。

現在WordPressでは3種類のエディタ、クラシックエディタ、初期のGutenberg、自己完結のGutenbergのどれかを使用している状況です。本書では、Guntenbergのブロックを使用してテーマのテンプレートを作成します。

ブロックテーマのtemplatesフォルダは、HTMLファイルで構成されているように見えますが、その中身はGutenbergのコンテンツデータと同様に、ブロックの構成をオブジェクトツリーとして保存したものです。

WordPressでのCSSもモダンCSSが利用できるようになったことで、スタイリングも大きく変化しました。WordPressの公式テーマファイルを見ると分かりますが、style.cssにはテーマ名などの情報しか記述がありません。ではどこのCSSがあるのか、それはtheme.jsonファイルです。スタイルはtheme.jsonを元に生成されます。

このtheme.jsonは、テーマのスタイルとブロックに関する設定を管理するためのファイルです。現在のWordPressにとって、非常に重要なファイルとなります。

本書は8章構成で、第1章ではブロックテーマの基礎知識を学び、第2章からブロックテーマを使ったテーマファイルの制作方法を学びます。制作に必要な素材やデータはサポートサイトからダウンロードできます。また、Figmaファイルや完成したテーマファイルもダウンロードできます。

ブロックテーマで重要なポイントは、できるだけ具体的なコンテンツを用意し、ブロックでどのように構成するかを検討することです。複数のブロックを組み合わせる必要があるもの、個別のスタイルが必要なものなど、確認しておきます。

第3章では、サイト全体で使用するグローバルスタイルのCSSをtheme.jsonに定義します。テーマカラー、レスポンシブ対応のフォントサイズ、スペースのバリエーション、さまざまな見出し、ベースとなるレイアウトなど、かなり詳しくていねいに解説されています。第4章では個別ブロックのカスタマイズをします。

第5章と第6章は、ゼロからブロックを組み立てて各ページを作成します。複数のページで共通のヘッダ・フッタなどはテンプレートパーツとして管理し、記事ページや固定ページなど作成します。

解説はコードも図解も豊富で、非常に分かりやすいと思います。さすが、エビスコム様の解説書という感じです。

WordPressでのトップページは記事一覧を表示したものが多いですが、「サイト型」と呼ばれるページに置き換えて、ビジネスサイトやランディングページ風にできる機能も使用できます。いわゆる固定ページみたいなもので、投稿エディタで編集もできます。

最後の第8章では、エディタを使いやすくするための機能やカスタマイズです。コンテンツのひな形を用意したり、エディタの機能を制限して誤動作を防いだり、効率よく作業ができます。
作って学ぶWordPressブロックテーマの目次

作って学ぶWordPressブロックテーマの目次
ここ1,2年でWordPressの制作環境が大きく変わりましたね。クラシックテーマであってもブロックテーマの機能を取り入れるために、theme.jsonを採用するテーマが増えてきました。これからWordPressのテーマを作成するなら、必須と言える解説書です。
献本の御礼
最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors