・・・などなどワードプレスを使ったサイト制作やコーディングのみも承ります。お気軽にお問い合わせください。itLinkedInPocketCopyワードプレスversion5.9からリリースされたフルサイト編集機能を伴うブロックテーマですが、version6.1になった今そろそろ真面目に勉強しようかな、と思い立ちました。今回から数回に分けてブロックテーマについて紹介記事を書いてみたいと思います。今回はまず手始めとしてブロックテーマと従来のクラシックテーマとでダッシュボードで操作できる範囲の違いについて簡単にまとめたうえで、ブロックテーマの基本操作について紹介します(テーマの構造的な項目については触れていません)。まとめブロックテーマとはワードプレスversion5.9(2022年2月18日リリース)から導入された、フルサイト編集を使える新しい形式のテーマです。ブロックテーマのリリースにより、それ以前の従来からあるテーマをクラシックテーマと呼ぶようになりました。フルサイト編集(以降FSE)とは、従来のエディターが投稿や固定ページといったコンテンツ(記事内容)のみを作成・編集できたのに対し、コンテンツ部だけでなくヘッダー・フッターおよびサイドバーなどを含むページ全体を作成・編集できるエディター機能のことをいいます。結果として、ブロックテーマではコンテンツ領域以外を含めて、ダッシュボード内の操作だけで作成・編集できる範囲が大きく広がりました。以下に表にまとめたのでご覧ください。以上のように、ダッシュボード内で操作できるか否かという観点からは、クラシックテーマはテーマ依存性が高く、ブロックテーマの方が圧倒的に自由度が高いといえます。ここでの「テーマに依存」の意味は、あくまでダッシュボードの中でできる範囲ならばテーマによって可不可が大きく変わるという意味です。ダッシュボード内の操作以外のカスタムCSSやフック、PHPを使ったテンプレートファイルの編集、といったことをすればクラシックテーマでも自由度はかなりアップします。それなりのスキルが必要なのは言うまでもありません。投稿や固定ページの作成・編集作業としては、ブロックテーマとクラシックテーマに大きな差異はありません。クラシックエディターはブロックテーマでは使えないと考えてよいでしょう。ブロックエディターがリリースされてすでに4年以上経過しているので、正常進化の範囲だと考えます。サイト全体のスタイル変更クラシックテーマでは、テーマカスタマイザー(外観>カスタマイズ)を開けると、テーマによっては配色やフォント、レイアウトといった項目を変更することができましたが、ブロックテーマにはテーマカスマイザーがありません。代わりに、FSEを開けてスタイルインターフェイスを操作して、スタイルを変更することができます。Twenty-three(以下TT3)の場合の事例です。スタイル操作パネルからタイポグラフィ、色、レイアウトを操作できるのがわかります。それぞれをクリックしてスタイルを変更するわけですが、選べるスタイルの選択師にはテーマ依存性があります。Twenty-two)とで比較すると以下の通りです。TT3では5種類のフォント選択師がありますが、TT2では2種類しかありません。これらはテーマが準備しているtheme.jsonファイルの記述が反映されているのです。したがってtheme.jsonを編集すれば選べるスタイルを変更・追加することができるのですが、本記事ではそこまで踏み込みません。同じことは色を開けて表示されるカラーパレットでも同じことがいえます。テーマTT3とTT2の背景色カラーパレットを比較すると以下の通りです。このようにテーマが準備しているカラーパレットが異なります。配色ツールを開けばカラーパレット以外の色を自由に設定することは可能です。テーマTT3とTT2のレイアウト設定比較レイアウトについてはコンテンツ領域の幅と幅広の幅を設定できるようになっています。幅広の設定がTT3とTT2とで少し異なりますが、数値を変更すれば同じ設定にできます。ちなみにコンテンツ領域の幅とはブロックの基本表示幅、幅広の幅とはブロックの配置を幅広に変更した場合の幅となります。スタイル一覧からスタイルを変更タイポグラフィ、色、レイアウトを個別に設定変更する方法とは別に、テーマが準備したスタイルのセットからスタイルを変更することもできます。変更手順は”スタイル一覧へ”をクリックしてスタイルを選択するだけです。テーマTT3とTT2のスタイルセットを比較すると以下の通りです。TT2は4種類、TT3は11種類のスタイルセットが準備されています。変更したスタイルをデフォルトスタイルに戻す方法スタイルを変更した後にデフォルト状態に戻すには、以下の操作で可能です。1画面右上のスタイルボタンをクリック2開いたスタイル操作パネルの中の3点メニューをクリック3デフォルトにリセットテンプレートについて(各ページの表示要素およびレイアウト)各ページの中に何を表示するのかは、テーマが準備したテンプレートで決まります。ブログ記事一覧ページに表示する要素として、アイキャッチ画像・記事タイトル・抜粋・日付・カテゴリー・タグ・投稿者など・・・が考えられますが、このうちどれをどのような順番に表示するのか、はテーマが設定したブログ記事一覧ページ用のテンプレートで決まります。これはクラシックテーマでもブロックテーマでも同じです。クラシックテーマの場合、ダッシュボード内でテンプレートの内容変更が可能かどうかはテーマの機能に依存します。テーマカスタマイザーなどに一覧の表示要素を選択・削除する機能があれば可能ですが、そのような機能のないテーマであれば変更は不可能です。ブロックテーマの場合はどのテーマであっても、ダッシュボード内でテンプレートをFSEで編集が可能となっており、テーマ依存性はありません。いえテーマが最初から使いやすいテンプレートを準備しておいてくれれば編集する必要性もないわけなので、サイトの目的に合った使いやすいテーマを選ぶことは大切です。テンプレートの編集手順ブロックテーマでテンプレートを編集する手順は以下の通りです。クリック2.テンプレート一覧を表示させる1中央上部のドロップダウンボタン(”テンプレートの詳細”)をクリック2”すべてのテンプレートを探す”をクリック以上で、テンプレート一覧が表示されます。テーマTT3の場合、以下のようなテンプレート一覧となります。テンプレート一覧の中から編集したいテンプレートをクリックすれば、ブロックエディターが開いて編集できるようになります。テーマTT3の主なテンプレートテーマTT3の主なテンプレートと用途は以下の通りです。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のテンプレートパーツ一覧です。紹介したようにフッター・ヘッダー・投稿メタ・コメントの4つのテンプレートパーツが準備されているのがわかります。一覧表をクリックすれば、それぞれブロックエディターが開いて編集が可能となります。手順概要は以下の通りです。テンプレートパーツ画面右上の”新規作成”ボタンをクリック新しいテンプレートパーツをブロックエディターで作成・保存テンプレートパーツを挿入したいテンプレートのFSE編集画面でブロック(テンプレートパーツブロック)として挿入ナビゲーションメニューの作成・編集クラシックテーマの場合のナビゲーションメニューは、外観>メニューを開けて作成可能ですが、ブロックテーマにはそのような画面はありません。ナビゲーションブロックを必要なところ挿入するだけでOKです。例としてテーマTT3のヘッダー用テンプレートパーツを開けてみると以下の通りとなっています。リスト表示を見れば、横並びブロックの中にサイトタイトルとナビゲーションブロックが配置されているのがわかります。まとめクラシックテーマにはないブロックテーマならではの特徴となる操作方法をざっと紹介してきましたが、最後にブロックテーマの特徴をもう一度簡単にまとめておきます。投稿や固定ページはブロックエディターを使って従来通り作成できるテーマカスタマイザーは存在せず、サイト全体のスタイルはFSEのスタイルインターフェイスで操作する(ただし選べるスタイルはテーマに依存する)各ページの表示要素やレイアウトを決めるテンプレートは、FSEでブロックエディターを使って自由に編集できる(例えば投稿一覧をカスタマイズするにはクエリーループブロックを編集すればよい)各ページに採用されるテンプレートの優先順位は、従来どおりテンプレート階層に従うウィジェットは存在せず、代わりにテンプレートパーツを使ってテンプレート内で共通表示することができるナビゲーションメニューはナビゲーションブロックをテンプレートやテンプレートパーツに挿入して表示させるこのようにブロックテーマは、従来のクラシックテーマに比較するとテーマ依存性が格段に低くなり、カスタマイズがやりやすくなったといえます。いえ、スタイル(特に選択できるフォント)にはテーマ依存性がありますし、TT3やTT2でサイドバーのあるページにしたければテンプレートを自作する必要があるなど、サイト目的に応じたテーマを選定することは重要です。テーマ依存性が減ったとはいえ、ブロックテーマではブロック依存性は高まったといえます。2023年1月の現段階で、デフォルトではパンくずリスト用や目次用のブロックは存在しません。プラグインでブロック機能を追加したりブロックが豊富に準備されたテーマを選ぶ、ということが、今まで以上に重要になったと考えます。管理者のプロフィールウェブチルこと内田智士です。50歳を超えてワードプレスに初めて出会い、ブログ歴は4年です。このウェブチルサイトは私にとって4つ目のサイトですが、ワードプレスをもっと深く勉強してわかりやすくお伝えできたらと思います。初心者向けにセミナーも開催してますので興味があれば声をかけてください。