【ブロックテーマ】クラシックテーマの違いと基本操作方法
ワードプレスversion5.9からリリースされたフルサイト編集機能を伴うブロックテーマですが、version6.1になった今そろそろ真面目に勉強しようかな、と思い立ちました。なので、今回から数回に分けてブロックテーマについて紹介記事を書いてみたいと思います。
今回はまず手始めとしてブロックテーマと従来のクラシックテーマとでダッシュボードで操作できる範囲の違いについて簡単にまとめたうえで、ブロックテーマの基本操作について紹介します（テーマの構造的な項目については触れていません）。
- ブロックテーマとは（簡単に説明します）
- ブロックテーマとクラシックテーマの違い（比較表で説明します）
- ブロックテーマの主な操作ポイント
（テーマTT3を主に事例として使います）
・スタイルの変更
・テンプレートの作成・編集
・テンプレートパーツの作成・編集
・ナビゲーションの作成・編集
ブロックテーマとは
ワードプレスversion5.9（2022年2月18日リリース）から導入された、フルサイト編集を使える新しい形式のテーマです。
ブロックテーマのリリースにより、それ以前の従来からあるテーマをクラシックテーマと呼ぶようになりました。
フルサイト編集（以降FSE）とは、従来のエディターが投稿や固定ページといったコンテンツ（記事内容）のみを作成・編集できたのに対し、コンテンツ部だけでなくヘッダー・フッターおよびサイドバーなどを含むページ全体を作成・編集できるエディター機能のことをいいます。
結果として、ブロックテーマではコンテンツ領域以外を含めて、ダッシュボード内の操作だけで作成・編集できる範囲が大きく広がりました。以下に表にまとめたのでご覧ください。
ブロックテーマとクラシックテーマの違い概要
| 操作 | ブロック テーマ | クラシック テーマ |
|---|---|---|
| 投稿の 作成・編集 | ブロックエディターのみ | ・クラシックエディター ・ブロックエディター |
| 固定ページの 作成・編集 | ブロックエディターのみ | ・クラシックエディター ・ブロックエディター |
| サイト全体の スタイル変更 | 外観＞エディターでFSEを開け スタイルインターフェイスで操作 | 外観＞カスタマイズ で操作 |
| 各ページの表示要素 およびレイアウトの変更 | テンプレートで決まるが編集可 （新規作成も可） | テーマに依存 |
| 投稿一覧表示 のカスタマイズ | クエリーループブロックで カスタマイズ可能 | テーマに依存 |
| テンプレート の新規作成 | ダッシュボード内で FSEを使って新規作成可能 | 別途PHPファイルの 作成が必要 |
| サイト内共通パーツ の設置 | テンプレートパーツを使用 | ウィジェットを使用 （テーマに依存） |
| ヘッダーの編集 | テンプレートパーツを編集 （自由にブロックを配置できる） | テーマに依存 |
| フッターの編集 | テンプレートパーツを編集 （自由にブロックを配置できる） | テーマに依存 |
| サイドバーの編集 | テンプレートパーツを編集 （自由にブロックを配置できる） | テーマに依存 |
| ナビゲーションメニュー の作成・編集 | FSEを開け ナビゲーションブロックを使用 | 外観＞メニュー で操作 |
以上のように、ダッシュボード内で操作できるか否かという観点からは、クラシックテーマはテーマ依存性が高く、ブロックテーマの方が圧倒的に自由度が高いといえます。
ここでの「テーマに依存」の意味は、あくまでダッシュボードの中でできる範囲ならばテーマによって可不可が大きく変わるという意味です。
ダッシュボード内の操作以外のカスタムCSSやフック、PHPを使ったテンプレートファイルの編集、といったことをすればクラシックテーマでも自由度はかなりアップします。しかしそれなりのスキルが必要なのは言うまでもありません。
ブロックテーマの基本操作
投稿・固定ページの作成と編集
投稿や固定ページの作成・編集作業としては、ブロックテーマとクラシックテーマに大きな差異はありません。ただし、クラシックエディターはブロックテーマでは使えないと考えてよいでしょう。
ブロックエディターがリリースされてすでに4年以上経過しているので、正常進化の範囲だと考えます。
サイト全体のスタイル変更
クラシックテーマでは、テーマカスタマイザー（外観＞カスタマイズ）を開けると、テーマによっては配色やフォント、レイアウトといった項目を変更することができましたが、ブロックテーマにはテーマカスマイザーがありません。
代わりに、FSEを開けてスタイルインターフェイスを操作して、スタイルを変更することができます。
①外観＞エディター からFSEを開ける
②画面右上のスタイルボタンをクリック
③スタイル操作パネルが開く
上記はテーマTwenty Twenty-three（以下TT3）の場合の事例です。
スタイル操作パネルからタイポグラフィ、色、レイアウトを操作できるのがわかります。それぞれをクリックしてスタイルを変更するわけですが、選べるスタイルの選択師にはテーマ依存性があります。
テーマTT3とTT2のフォント選択師比較
例えばタイポグラフィをクリックして選択できるフォントの種類をテーマTT3とTT2（Twenty Twenty-two）とで比較すると以下の通りです。
TT3では5種類のフォント選択師がありますが、TT2では2種類しかありません。これらはテーマが準備しているtheme.jsonファイルの記述が反映されているのです。したがってtheme.jsonを編集すれば選べるスタイルを変更・追加することができるのですが、本記事ではそこまで踏み込みません。
テーマTT3とTT2のカラーパレット比較
同じことは色を開けて表示されるカラーパレットでも同じことがいえます。テーマTT3とTT2の背景色カラーパレットを比較すると以下の通りです。
このようにテーマが準備しているカラーパレットが異なります。ただし配色ツールを開けばカラーパレット以外の色を自由に設定することは可能です。
テーマTT3とTT2のレイアウト設定比較
レイアウトについてはコンテンツ領域の幅と幅広の幅を設定できるようになっています。幅広の設定がTT3とTT2とで少し異なりますが、数値を変更すれば同じ設定にできます。
ちなみにコンテンツ領域の幅とはブロックの基本表示幅、幅広の幅とはブロックの配置を幅広に変更した場合の幅となります。
スタイル一覧からスタイルを変更
タイポグラフィ、色、レイアウトを個別に設定変更する方法とは別に、テーマが準備したスタイルのセットからスタイルを変更することもできます。
変更手順は”スタイル一覧へ”をクリックしてスタイルを選択するだけです。
テーマTT3とTT2のスタイルセットを比較すると以下の通りです。
TT2は4種類、TT3は11種類のスタイルセットが準備されています。
変更したスタイルをデフォルトスタイルに戻す方法
スタイルを変更した後にデフォルト状態に戻すには、以下の操作で可能です。
①画面右上のスタイルボタンをクリック
②開いたスタイル操作パネルの中の3点メニューをクリック
③デフォルトにリセット
テンプレートについて（各ページの表示要素およびレイアウト）
各ページの中に何を表示するのかは、テーマが準備したテンプレートで決まります。
例えばブログ記事一覧ページに表示する要素として、アイキャッチ画像・記事タイトル・抜粋・日付・カテゴリー・タグ・投稿者など・・・が考えられますが、このうちどれをどのような順番に表示するのか、はテーマが設定したブログ記事一覧ページ用のテンプレートで決まります。これはクラシックテーマでもブロックテーマでも同じです。
しかしクラシックテーマの場合、ダッシュボード内でテンプレートの内容変更が可能かどうかはテーマの機能に依存します。テーマカスタマイザーなどに一覧の表示要素を選択・削除する機能があれば可能ですが、そのような機能のないテーマであれば変更は不可能です。
しかしブロックテーマの場合はどのテーマであっても、ダッシュボード内でテンプレートをFSEで編集が可能となっており、テーマ依存性はありません。
とはいえテーマが最初から使いやすいテンプレートを準備しておいてくれれば編集する必要性もないわけなので、サイトの目的に合った使いやすいテーマを選ぶことは大切です。
テンプレートの編集手順
ブロックテーマでテンプレートを編集する手順は以下の通りです。
１．外観＞エディター をクリック
２．テンプレート一覧を表示させる
①中央上部のドロップダウンボタン（”テンプレートの詳細”）をクリック
②”すべてのテンプレートを探す”をクリック
以上で、テンプレート一覧が表示されます。テーマTT3の場合、以下のようなテンプレート一覧となります。
テンプレート一覧の中から編集したいテンプレートをクリックすれば、ブロックエディターが開いて編集できるようになります。
テーマTT3の主なテンプレート
テーマTT3の主なテンプレートと用途は以下の通りです。
| テンプレート | 用途 | 主な表示要素 |
|---|---|---|
| ホーム | トップページ | 投稿一覧 |
| 単一 | 個別投稿ページ | ブログ記事内容 |
| 固定ページ | 固定ページ | 固定ページ内容 |
| アーカイブ | アーカイブ | アーカイブ記事一覧 |
| 検索 | 検索 | 検索結果表示 |
| 404 | 404ページ | 404表示 |
テーマTT3のホームテンプレートを確認（投稿一覧の表示）
上の表のとおり、サイトのトップページの表示にはホームテンプレートが採用され、投稿一覧が表示されるようになっています。実際にホームテンプレートをクリックして開き、確認してみましょう。
リスト表示してブロックの配置を確認すると、クエリーループブロックが配置され、投稿記事一覧の表示要素として
- 投稿のアイキャッチ画像
- 投稿タイトル
- 投稿の抜粋
- 投稿日
が表示される仕様となっているのがわかります。また、表示レイアウトはグリッド表示が選択されています。
カテゴリーやタグ・投稿者など、表示したい情報を追加したければ該当するブロックを挿入してテンプレートを保存するだけでOKです。
あるいは投稿一覧をグリッド表示でなくリスト表示に変更する、ということも簡単にできてしまいます。
クラシックテーマで同じことをしようとしても、テーマカスタマイザー等にその機能がなければ、自分でフィルターフックを使った記述をfunctions.phpに記述したり、直接home.phpファイルを編集した上でCSSを調整する必要がありましたが、ブロックテーマではノンコードで同じことができるのです。
テーマTT3の個別投稿ページ用テンプレートを確認（投稿ページの表示）
次に個別投稿ページ用テンプレートである”単一”を選択して、どのようなブロックが並んでいるかをリスト表示してみましょう。
投稿タイトルの上にアイキャッチ画像が表示されるレイアウトになっているのがわかります。アイキャッチ画像を表示させたくなければアイキャッチ画像ブロックを削除すればよいでしょう。
テンプレートの新規作成
テンプレートを新規作成するには、テンプレート一覧の画面で右上の”新規追加”をクリックします。すると新規作成テンプレートの候補一覧が表示されます。
テーマTT3の場合、すでに存在するホームや404、アーカイブなどのテンプレートは新規作成候補には表示されません。
どのようなテンプレートを新規追加すべきかは、テンプレート階層を知っておく必要があります。テンプレート階層とは、ワードプレスが各ページごとに使うテンプレートを自動選択する優先順位を示したものです。次のリンク先がワードプレス公式ページのテンプレート階層となります。
https://developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png
例えばテーマTT3で特定の固定ページAをトップページに、投稿一覧を別の固定ページBに指定した場合（いわゆる通常のホームページ設定です）、トップページには固定ページ用テンプレート、投稿一覧にはホームテンプレートが採用されます。
| テンプレート | 用途 | 主な表示要素 |
|---|---|---|
| ホーム | 投稿一覧ページ | 投稿一覧 |
| 固定ページ | ・トップページ ・トップページ以外の固定ページ | 固定ページ内容 |
この場合、固定ページ用テンプレートをサイトのトップページに使用するとトップページならではのレイアウトを採用したい場合に何かと不都合です。
そこでフロントページを新規テンプレートして新規作成すると、トップページにはフロントページテンプレートが採用されることになり、トップページ専用テンプレートとしてカスタマイズが可能となります。
| テンプレート | 用途 | 主な表示要素 |
|---|---|---|
| ホーム | 投稿一覧ページ | 投稿一覧 |
| フロントページ | トップページ | トップ用固定ページ内容 |
| 固定ページ | トップページ以外の固定ページ | 固定ページ内容 |
サイト内共通パーツの設置（テンプレートパーツ）
どのページのフッターにも同じリンクボタンやナビゲーションを設置するなど、サイト内で共通のパーツを配置するには、クラシックテーマではウィジェットを使用します。外観＞ウィジェットから操作するのが一般的です。
しかしブロックテーマにはそもそもウィジェットという概念がなくなっています。代わりにテンプレートパーツを使用します。
例として先ほど確認したテーマTT3の単一テンプレートのブロック構成には、ヘッダーとフッターというパーツが配置されているのがわかります。
このようにテンプレート内にテンプレートパーツとしてヘッダーやフッターを配置しておくと、各テンプレートパーツを編集するだけでサイト全体のヘッダーやフッターに反映することができます。
例えばフッター内にナビゲーションを表示したければ、フッター用のテンプレートパーツをFSEで編集してナビゲーションブロックを配置すれば全ページに反映される、というわけです。
FSEで作成・編集するのでどのブロックをどのようなレイアウトで配置するのかは自由です。
ちなみに先ほどの単一テンプレート内にあった”投稿メタ”と”コメント”もテンプレートパーツです。このようにヘッダー・フッターだけでなく、テンプレートパーツは自由に追加作成できてテンプレート内の任意の場所に設置可能なのです。
クラシックテーマのウィジェットの場合は、テーマが設定したウィジェットエリアにしかコンテンツを配置できませんでしたが、ブロックテーマのテンプレートパーツはテーマ依存性が非常に少ない、といえるでしょう。
テンプレートパーツの編集
テンプレートパーツの編集は、テンプレート一覧の画面の左メニューを”テンプレートパーツ”に切り替えれば可能となります。
上記はテーマTT3のテンプレートパーツ一覧です。すでに紹介したようにフッター・ヘッダー・投稿メタ・コメントの４つのテンプレートパーツが準備されているのがわかります。
一覧表をクリックすれば、それぞれブロックエディターが開いて編集が可能となります。
テンプレートパーツの新規作成
手順概要は以下の通りです。
- テンプレートパーツ画面右上の”新規作成”ボタンをクリック
- 新しいテンプレートパーツをブロックエディターで作成・保存
- テンプレートパーツを挿入したいテンプレートのFSE編集画面でブロック（テンプレートパーツブロック）として挿入
ナビゲーションメニューの作成・編集
クラシックテーマの場合のナビゲーションメニューは、外観＞メニューを開けて作成可能ですが、ブロックテーマにはそのような画面はありません。
ナビゲーションブロックを必要なところ挿入するだけでOKです。
例としてテーマTT3のヘッダー用テンプレートパーツを開けてみると以下の通りとなっています。
リスト表示を見れば、横並びブロックの中にサイトタイトルとナビゲーションブロックが配置されているのがわかります。
まとめ
クラシックテーマにはないブロックテーマならではの特徴となる操作方法をざっと紹介してきましたが、最後にブロックテーマの特徴をもう一度簡単にまとめておきます。
- 投稿や固定ページはブロックエディターを使って従来通り作成できる
- テーマカスタマイザーは存在せず、サイト全体のスタイルはFSEのスタイルインターフェイスで操作する
（ただし選べるスタイルはテーマに依存する） - 各ページの表示要素やレイアウトを決めるテンプレートは、FSEでブロックエディターを使って自由に編集できる
（例えば投稿一覧をカスタマイズするにはクエリーループブロックを編集すればよい） - 各ページに採用されるテンプレートの優先順位は、従来どおりテンプレート階層に従う
- ウィジェットは存在せず、代わりにテンプレートパーツを使ってテンプレート内で共通表示することができる
- ナビゲーションメニューはナビゲーションブロックをテンプレートやテンプレートパーツに挿入して表示させる
このようにブロックテーマは、従来のクラシックテーマに比較するとテーマ依存性が格段に低くなり、カスタマイズがやりやすくなったといえます。
とはいえ、スタイル（特に選択できるフォント）にはテーマ依存性がありますし、TT3やTT2でサイドバーのあるページにしたければテンプレートを自作する必要があるなど、サイト目的に応じたテーマを選定することは重要です。
また、テーマ依存性が減ったとはいえ、ブロックテーマではブロック依存性は高まったといえます。例えば2023年1月の現段階で、デフォルトではパンくずリスト用や目次用のブロックは存在しません。プラグインでブロック機能を追加したりブロックが豊富に準備されたテーマを選ぶ、ということが、今まで以上に重要になったと考えます。
