本日の趣旨説明
- ブロックエディターの基本的な使い方
- クラシックエディターからのスムーズな移行方法。
- ブロックパターンを利用した効率的なページの構築方法
- 質疑応答
質問コーナー(Sli.do でのリアルタイムアンケートを予定）
- https://app.sli.do/event/sBNaveCnx2Wh6qcTYCzooL
- 質問 : どこからきましたか？
- 質問 : ブロックエディターとクラシックエディターの利用比率を教えてください。
- 質問 : 今日聞きたいことがあれば教えてください（フリーテキスト）
一緒に作業されたい場合
- 以下から24時間だけ使えるサイトが表示されます。
クラシックエディターとブロックエディターの違い
- そもそも、何がどう違うのか？ 歴史的背景
- もともとはクラシックエディター
- 2018年末にWordPress5.0のReleaseとともにブロックエディターが搭載
- 既存のクラシックエディターを利用するにはプラグイン（Classic Editor）が必要となる
- クラシックエディターの特徴
- ヴィジュアルモードとHTMLモードのタブ
- ブロックエディターの特徴
- ブロックで操作
- 用意されたパーツを組み合わせて作業する。
ブロックエディターの今とこれから
- リポジトリ
- これから
- 編集
- フルサイトエディティング
- コ・エディティング（同時共同執筆）← Now
- マルチ言語対応
State of the Word 2023からのトピック
- AIによる青写真作成機能
- フルサイトエディティングとブロックパターンと、プラグインの組み合わせ、生成AIがサイトの基礎をWordPress PlayGroundで作る
- パターンのより使いやすい拡張
- 位置だけをきめて、そこにパターンを選んで配置
- https://youtu.be/c7M4mBVgP3Y?feature=shared&t=1331
- 管理画面の再設計
とにかく言えること
- 今後の開発内容はどれもブロックエディターを前提に開発が進んでいます。ここで使わないのは、それらの機能も使わないことを意味するのでもったいないと考えられます。
うまい使い方
基本的な使い方
- 特に考えず改行だけでOK
- コピペできる
- 画像にライトボックスができました。
- 画像ブロックを呼び出し
- 画像をアップロードして指定
- 右Panelで画像の設定をおこなう。
パネルの活用
- ブロックナビゲーションを活用すると使いやすい
- ブロック単位で簡単に移動
- グループブロック（機能追加）
- 名前つけられる
- 背景入れられる
- 画像ブロック（機能追加）
- サムネイル
- ライトボックス
- 右パネル
- 色々設定できます。（デフォルトのブロックのデモ）
ツールバーの活用
- 上下の移動
- 前に追加、後に追加機能
- 複製
- 上部分に固定も可能
ショートカットの利用
- マークダウン記法としてショートカットが利用できます。
- # で見出し
- – でリスト
- /で呼び出す
- 検索するように呼び出せます
- ショートカットのチェック
パターンの活用
- パターンとは、ブロックを組み合わせて作るセット
- テーマやプラグインなどから提供されるケース
- 自分で作るケース
- 同期パターンと非同期パターン
- パターンにカテゴリーを設定可能
ブロックプラグインの活用
- ブロックプラグインの紹介
- デフォルト以外の便利なプラグインもたくさんあります。
- スライダーや吹き出し、ステップなど、よく使うブロックが予め提供されます。
- Snow Monkey Blocks
- VK Blocks
- Arkhe Blocks
- デフォルト以外の便利なプラグインもたくさんあります。
テーマより提供されるパターン集
それぞれのテーマと合わせて利用するのがおすすめです。
- VK パターンライブラリ | コピペで使えるWordPress のブロックパターンライブラリ
- Arkhe パターンライブラリ | コピペで使える、Arkheテーマ専用のブロックパターン集
クラシックエディターからの移行についてのtips
- 心理的障壁について
- これまでできてたことが一旦できなくなることへの、抵抗感が強いと思います。
- 実際に何名かにお話を伺ったところ、「えいや、で移行したらわりといけました。」というお話をいただきました。
- ので、やってみましょう！
- クラシックエディタープラグインの設定から、両方使えるようにする
- 設定→投稿設定
- 過去の記事については
- Quickタグの代替方法
- パターンの活用
- よく使うものをパターンにするのが良いと思います。
- 定型文を作る
- お世話になっております。大串です。
状態により、簡単には行かない場合
- テーマが対応してない場合。
- リニューアルして乗り換えましょう。
- ページビルダーを使っている場合
- ビルダーごとの方向性に追従するか、乗り換えるか
- カスタムフィールドを使っている場合。
- 過去記事と、これからの記事で分けられるなら、過去の記事はそのままにしておいて、未来の記事からブロックエディタという方法も
パターンを利用した効率的なページ作成
Twenty Twenty Fourを利用してページを作るデモをしてみます。
- パターンを選ぶ
- パターンを並べる
- パターンをカスタマイズする
- ブロックごとにまとめる
- 独自のパターンとして使い回す
まとめ
- 便利さに驚いてもらえたらうれしいです。
- すでにお客様の中では、ページを既存のものから複製して作ってくださっているサイトもあります。
- さらに、未来がやってくるので、今からWordPress新たに作るなら、ブロックエディターをおすすめしたいです。
- もし今のサイトを継続するなら、ちょっとずつ変更するのもいいかもしれません。