クラシックとブロック。いまこそ知りたい、2つの違い

2.本日の趣旨説明

  • クラシックエディターとブロックエディターの違い
  • クラシックテーマとブロックテーマの違い、それぞれのメリットとデメリット
  • クラシックテーマを利用した制作手法
  • ブロックテーマを利用した制作手法
  • クラシックテーマからブロックテーマの使い分け
  • ブロックテーマ利用のタイミング
  • 質疑応答

3.質問コーナー(Sli.do でのリアルタイムアンケートを予定）

  • https://app.sli.do/event/nyA8Qx9h3EndZR8XzFF9Z2
  • 質問 : どこからきましたか？
  • 質問 : フルサイト編集を利用したことがありますか？
  • 質問 : 今日聞きたいことがあれば教えてください（フリーテキスト）

クラシックエディターとブロックエディターの違いはなんでしょう。では、クラシックテーマとブロックテーマの違いはなんでしょう。本ワークショップでは、まずこの違いを明確にし、その上でクラシックとブロックで異なる制作手法は、どのように使い分けるべきを考えます。

4.クラシックエディターとブロックエディターの違い

  • WordPress5.0よりエディターが変わりました。
  • それ以前に利用されていたエディターをクラシックエディターと呼びます。
  • 5.0以降のエディターをブロックエディターと呼びます。
  • ブロックエディターを使いましょう！

クラシックエディタ

ブロックエディタ

ブロックエディタを含むグーテンベルクプロジェクトの4つのフェーズ

  1. より簡単な編集 — WordPress ではすでに利用可能であり、継続的な改善が行われています
  2. カスタマイズ — サイト編集、ブロック パターン、ブロック ディレクトリ、ブロック テーマ ← フルサイト編集
  3. コラボレーション— コンテンツを共同編集するためのより直感的な方法 ← 次回より実装
  4. 多言語 — 多言語サイトのコア実装

5.ブロックエディターの便利な使い方

過去のワークショップでご紹介しています。今夜は少しだけご紹介

6.クラシックエディターからブロックエディターへの乗り換え

  • おすすめプラグイン
  • クラシックエディターから、ブロックエディターにする際に、過去のコンテンツはクラシックブロックに入ります。Covert to Blocksのボタンをクリックすると、適切なブロックに変更されるのですが。それを自動的にやってくれるプラグインです。
  • ただ、利用にはwp cliコマンドを叩く必要があり、黒い画面が必須です。

7.クラシックテーマとブロックテーマの違い、それぞれのメリットとデメリット

  • WordPress5.9よりブロックテーマが加わりました
  • 今後はブロックテーマが主流に変わっていくと考えられる
  • ただ、まだ過渡期で変化のスピードが早い
  • 今後実装となる想定の機能も存在
  • ただ、便利なところもたくさん

クラシックテーマについて

メリット

  • 既存の知識が活かせるため、慣れている人には学習コストが低い

デメリット

  • PHPの記述は必須

ブロックテーマについて

メリット

  • PHPの記述さえも不要
  • 手早く、管理画面からサクサク作れる

デメリット

  • ブロックに依存する部分が大きい
  • 既存のブロックの知識
  • カスタムブロック
  • 変化への追従

8.クラシックテーマを利用した制作手法

  • どこから始めるか？
    • オリジナルテーマ
      • スターターテーマを元に作成
      • もしくは1から作成
    • 既存テーマ
      • 子テーマ
      • プラグインからのカスタマイズ
  • 各種テンプレートを、ローカル上のPCでテキストエディターを利用して編集していく
  • コンテンツ部分のみ、WordPressのエディターから入力する
  • できる限りpage-hoge.phpのような、本文部分を直接テーマに書くような内容は避けましょう

9.ブロックテーマを利用した制作手法

  • どこから始めるか？
    • オリジナルテーマ
      • Create Block Themeプラグインから作成
      • もしくは1から作成
    • 既存テーマからのカスタマイズ
      • そのままカスタマイズする
      • Create Block Themeプラグインの利用して保存する場合
        • 複製して作る ← これが良さそう
        • 子テーマで作る
  • 各種テンプレートについて、WordPressの管理画面よりエディターを利用して編集していく
  • もちろんコンテンツ部分もWordPressのエディターから入力する

完全に自作する場合の必須ファイル

  • style.css
  • templates/index.html または index.php

10.クラシックテーマからブロックテーマになって変わったこと

  • エディターからかなりの内容が変更できるようになった
    • 共通パーツの編集
    • クエリーを利用したループの編集
  • theme.jsonを利用した共通デザインの設定
    • 文字
    • 色
    • 幅
    • 等

11.TT4を利用したフルサイト編集のデモ

  • スタイルの設定
  • TOPの編集
  • Archiveの編集
  • クエリーループブロック
  • パターンブロック

12.theme.jsonとは？

13.クラシックテーマからブロックテーマへの移行方法の検討

  • page-hoge.phpなどで作られている場合には、作り直しとなる
  • カスタムフィールドでコンテンツ部分が作られている場合にも、作り直しが必要
  • 各ページのコンテンツについては、ブロックエディターで作られていれば移行は比較的かんたんな場合がある。
  • すでにtheme.jsonが利用されている場合。この部分は移行の助けになる

14.ブロックテーマへの採用のタイミング

  • 新規に比較的シンプルなサイトを作るところから
  • リニューアルのタイミングなど
  • ブロックテーマやブロックの特性を一緒に学びながら、作れるチームがおすすめ。

15.今後に期待なポイント

16.制作した人の感想などでとてもとても参考になると感じた記事

クラシックテーマ制作者の私がブロックテーマ制作で悩んだこと

リンク