【WordPress】ブロックテーマ(FSE対応テーマ)とクラシックテーマの違い、使ってみた感想など

公開日:2022(令和4)年9月10日/最終更新日:

WordPressのカスタマイズ方法についての画像



WordPressはFSE(フルサイト編集)化が進んでいて、従来のクラシックエディタからブロックエディタがデフォルトのエディタとなり、最近では初期のテーマがTwenty Twenty-Two(TT2)というブロックテーマ(FSE対応のテーマ)になり、そろそろブロックなんとかというのを食わず嫌いでいてはいけない心境になってきました。

そこで作ったのがこの勝手にデモサイト。

私は【HABONE】というクラシックテーマを作成し、自身のサイトでは常用し、まだまだクラシックじゃないぞなんて言っていましたが、ブロックテーマを知らずにクラシックもくそもないだろうと感じ、この勝手にデモサイトを立ち上げました。

テーマはサイトのタイトル通り、デフォルトのTwenty Twenty-Two(TT2)。

なんじゃこりゃ?ととにかく手数を..でいろいろと触り、ようやく従来のクラシックテーマとの違いや、FSEの利便性(TT2テーマの利便性)が分かってきたので、一度ここでまとめておこうと思います。

ひょっとすると違うところがあるかもしれませんが、ご容赦ください。

ブロックテーマとクラシックテーマの決定的な違い

多分はじめてTT2テーマを見た人(初めて最近WordPressを使い始めた人)は、私と同じでびっくりしたでしょう。

だって何もないんですから..(笑)。

そう、旧来のクラシックテーマ(無料ではCocoonなどが有名でしょうか..)との決定的な違いは、形がないこと。

標準状態では本当に何もないんです。

クラシックテーマは、あらかじめ表示する位置や内容がある程度指定されていて、

  • サイト全体のレイアウトを決める(決められるものもあれば右サイドバーなど固定のものもある)
  • サイドバーに入れるものを決める
  • テーマカスタマイザーやテーマの独自設定を使ってデザインを決める
  • テーマ独自の部品やプラグインで追加した部品をいろいろな場所へ配置する

といったことをして、投稿を公開していけば、まあ、それなりなサイトが完成するわけです。

しかし、前述したように、ブロックテーマ(特にTT2)は、本当に何もないんです(笑)。

そう、決めるのはあなた!というのがブロックテーマの基本なのです。

だから、TT2で投稿したりしても、素っ気ない、巨大なアイキャッチ画像が入った投稿ページしか表示されないんです。

つまり、レイアウトやデザインは自分で作ってね!というのがブロックテーマ(TT2)の基本なんです。

今このページを検索エンジン経由などで見た方は、多分パッと見Twenty Twenty-Twoとは思われないでしょう(わかっちゃう?)。

という位自由にできてしまう、それがブロックテーマのいいところです。

クラシックテーマを使ってきた方(私も含む)からすれば、面倒に見えますが、触ってみたらなんの何の、結構面白いです。

逆に型からはみ出すことが難しいクラシックテーマの方が、後々不満に思うかもしれない..なんてここ数日で思えてきた位ですよ。

ブロックテーマでできること、すべきことなど

さて、ざっくりいうと、ブロックテーマは、実はクラシックテーマでできることはほとんど実現可能です。

大きな違いは表示させる内容(テンプレート)を自身で、ブロックを使って作ること。

それも踏まえ、ここからはブロックテーマでできること、できそうなことをいろいろと紹介していきます。

TT2駆け出しの私の見解ですから、何か違うことがあるかも知れません、ご容赦ください

テンプレート(各ページの見た目)はすべて管理画面から

基本的に何も決まっていませんので、投稿を表示する、固定ページを表示する、投稿一覧を表示する、カテゴリーやタブ、作者などのアーカイブを表示するといったものはすべて「外観」→「エディタ」というメニューから、自身で作成(カスタマイズ)していくことになります。

すごいなぁと感じるのは、テンプレートに使う部品(パーツ)をいろいろ追加して、使いまわすことができるということ。

例えば、トップページ用のヘッダーやフッター、その他個別ページ用のヘッダーとフッターを用意しておいて、トップページでは画像を大きく見せたヘッダー、個別ページではタイトルとキャッチフレーズのみさらっと表示するといったこともできます(このサイトは今この状態です..)。

変更したテンプレートは、カスタム投稿タイプとして保存されます

テンプレートを修正して保存すると、データベース上では「posts」という投稿と同じテーブルに格納されます。

データベースの構造などを気にしない人には関係ない話ですが、別テーブルが作られるといった動作ではないので、「テンプレートどこいった?」とならないよう予備知識として紹介しておきます。

サイドバーという概念はありません

ページの構成としては、「ヘッダー」「本文」「フッター」という3つの領域しかないので、サイドバーという概念はなさそうです。

本文の部分をカラムブロックで分けて割合を変え、1方をメイン、他方をサイドバーとして使うのが一般的でしょう(カラムブロックはモバイル時の振る舞いも設定できるのでいいと思います)。

もちろんサイドバーにする部分はパーツにしておいて、パーツを編集したら一発で前ページの内容が変わるといった、クラシックテーマのサイドバーウィジェットのような形式での運営も可能です。

また、本文の形が決まっていませんから、本文+サイドバーの上下にまた違うレイアウトの部品を配置したりすることもでき、本当にレイアウトは無限大ですから、触りだしたら止まらない感じになりますよ。

ブロックごとのオプション設定や基本デザインはtheme.jsonで行います

ブロックで色や隙間などの調整を有効/無効にしたり、基本的な文字などの大きさや色などを決めているのは、CSSではなくtheme.jsonというファイルになります。

theme.jsonはクラシックテーマでは基本使わないので私も初めて触っていますが、PHPのように曖昧なところは許してくれないので、「,」や括弧の使い方などかなりシビアです。

また、コメントアウトも使えませんから、コードを見て何が書かれているのかを判断できるようにするしかありませんから、慣れるまでは、CSSにいつも通り書いてやっちゃうという感じでいいのかも知れません。

theme.jsonのいいところは、エディタ側、フロントエンド側で共通のデザインをこのファイル1つでできることです。CSSだと、別のファイル(管理画面側のCSSとかエディタ用のCSS)へ重複して書かないといけないことが出てきたり、それらが相違すると思ったようにならなかったりすることがありますが、theme.jsonで指定したものはそうした心配がありません。

ブロックエディタに慣れていないと戸惑うことがあるかも知れません

自由にブロックを配置してテンプレートを作っていくというなんだか夢のような機能ではあるものの、基本的なブロックの使い方などが分かってないと恐らく何もできないのではないかと思います。

ただ、ブロックエディタになってから久しいので、未だにクラシックエディタに戻して使っているという方でなく、ブロックを挿入して投稿を作っている方なら、ああしてこうして..で何とかなるだろうと思います。

投稿を作るときに邪魔だなぁと思ってたテーマ関係のブロックや投稿抽出関係のブロックなどがテンプレートでは大活躍します。

テーマカスタマイザーはありません

ブロックテーマであるTT2にはテーマカスタマイザーがありません。

これは、テンプレートは自身で作るのだし、基礎デザインはWordPressデフォルト+TT2のtheme,jsonで行うので必要ないでしょということだと思います。

色や文字の大きさ、隙間などもブロックベースですべてカスタマイズできるので、特殊なことをしなければ何とかなるかなという感じではあります。

CSSはテーマファイルの中へ記述する

テーマカスタマイザーがない、ということは「追加CSS」もないので、theme.jsonで指定できない、ブロックで加工しきれない部分は、テーマのCSSへ追記することになりそうです。

ただ、親テーマのCSSへの記述は更新と共に消えてしまうので、次項の子テーマを使って対応ということになるでしょう。

テーマの編集は可能、子テーマも使えます

クラシックテーマ同様に、子テーマは普通に使えます(私が作成したTT2の子テーマでよければこちらからダウンロードできます)。

ただ、theme.jsonで何とかなる基礎デザインや機能、ブロックでできるデザインのカスタマイズと子テーマのCSSに書いたものがごちゃごちゃにならないようにしないと、大変なことになるかも知れません。

例えば、後からブロック側で変更可能な項目についてはブロックに任せるといった判断が必要でしょう。

追加のPHPコードなどは普通に使えますが、ブロックテンプレート上でPHPは直接記述できないので、フックを使うなど工夫が必要です。

theme.jsonファイルを置けば、子テーマの内容が反映されます

TT2のCSSにはほとんど記述がなく、すべてtheme.jsonに書かれている感じです。

この親テーマのtheme.jsonをそのまま子テーマへ移行して、内容を変更すれば、子テーマのものが優先されますから、基本デザインや基本機能は子テーマのtheme.jsonで行えばいいでしょう。

私、最初は真っ新のtheme.jsonへ変更分だけ追加していましたが、余計に分からなくなるので、親テーマのものを移植してやり直しました。その方が前後関係も分かってすっきりすると思います。

子テーマの移植?ができる

TT2には(ほかのテーマにあるかは不明)テーマのエクスポート機能があります。

そして、エクスポートしたテーマには、カスタマイズしたテンプレートも含まれるようになっています。

つまり、

  1. 子テーマを有効にする
  2. カスタマイズしてエクスポートする
  3. テーマ名とテーマディレクトリ名を変更して再圧縮する
  4. 別のサイトで3をインストール&有効化する

とすれば、ブログ用の子テーマ、コーポレートサイト用の子テーマなどを作って使いまわすことも可能です。

今回知らずに通常通り「-child」で子テーマを作りましたが、この機能は有用だと思います。

テンプレートができてしまえばクラシックテーマとほぼ同じ

FSEなんていうから物怖じしていましたが、何のことはない、テンプレートさえできてしまえば特に触ることもなく、普通のクラシックテーマでの運用と何ら変わりはありません。

ただ前述したようにPHPを使ったカスタムコードは、子テーマからフックを使って挿入するか、ショートコード化して出力するか、はたまたそれ用のプラグインを使うかということになってきますから、クラシックテーマのようにテンプレートに直接書いてということはできないと考えた方がよいでしょう。

まあ、WordPressということに変わりはないし、WordPress自体いろいろなやり方が用意されていますから、何とかなるでしょう。


以上がここ一週間位、長年クラシックテーマを作成してきた私がTT2(Twenty Twenty-Two)テーマを初めて使って見た印象です。

私自身、触りだしてみたらあら便利!と感じて、現在、【HABONE】テーマで独自に追加している機能を徐々にこのサイトへ適用させていっています。

【HABONE】はもともとプラグインを極力使わずに私にとって必要な機能をテーマ上に追加したものですので、TT2へきれいに機能移行できれば、ひょっとすると開発をストップするかも..なんて思っています。

それ位有用で便利なテーマだと、現在では感じています。

皆さんも食わず嫌い、有料テーマ漁りをやめて、一度飛び込んでみては?

このサイトでは、今後【HABONE】からの機能流用や、TT2独自のカスタマイズ方法などどんどん加えていきますので、TT2を使ったサイト作りの一助になれれば幸いです。

ちなみに、現在使用しているプラグインもこちらで一覧にしていますので参考にしてみてください。

あ...固定ページ用のテンプレートまだ手付かずだった..。