Gutenbergと旧エディターを併用する
Gutenbergと旧エディターの併用も、かなり安定してきました。
とはいえ、すぐにGutenberg完全対応にすることは、現段階ではまだお勧めしません。
特に、WordPress 4.9.Xで緻密に作ったサイトや、旧エディターで作り込んだページがある場合は、段階を追ってGutenberg対応型に馴染ませていくほうが無難です。
ここでは、旧エディターで書いたページをGutenberg対応型にする方法をご紹介します。
- Gutenbergプラグインのインストール＆有効化
- 旧エディターページをGutenbergで開いてみる
- クラシックブロック上で入力・更新してみる
- ブロックへ変換する
Gutenbergプラグインのインストール＆有効化
WordPress 5にしたら、Gutenbergがデフォルトエディターになるはずですが、タイミングによってはGutenbergプラグインがインストールされなかったり、自動アップデートの際にGutenbergの有効化まで共にOFFになってしまう場合があります。
まずは、［インストール済みプラグイン］を確認しましょう。
- 「Gutenberg」がリストにある
- ［有効化］されている（メニュー記述が「停止」のみならばOK）
旧エディターページをGutenbergで開いてみる
旧エディターページをGutenbergで開くには、［投稿一覧］画面で投稿名をクリックするか、「編集」をクリックします。
投稿名をクリックすると、（通常は）Gutenberg環境で開きます。旧エディターでの画面とは異なっていることを確認しましょう。
Gutenbergエディターで開くと、右側に［文書］［ブロック］のパネルが表示されます。右上には「下書きへ切り替え」［プレビュー］［更新］といったボタンが並んでいます。
旧エディターで作ったページ全体が、「クラシック」という箱（ブロック）でくるまれていることを確認しましょう。これが、Gutenbergエディターの特徴です。
※Classic Editorプラグインもインストール＆有効化している場合、投稿名をクリックしたときに自動的に旧エディターで開いてしまう場合があります。その場合は、［投稿設定］の「デフォルトエディター」で「ブロックエディター」を選択し直してください。
クラシックブロック上で入力・更新してみる
Gutenbergでは、すべてのコンテンツをそれぞれ専用の「ブロック」で整理しています。［クラシック］ブロックは、このGutenbergブロックの1つですが、少し特殊な位置づけになっています。
Gutenbergのブロックには、それぞれ専用のブロックコード（コメントタグ）が付与されています。［クラシック］ブロックだけは、このブロックコードがありません。
「旧エディターページの救済ブロック」と考えるとよいかもしれません。
Gutenbergで旧エディターページを開くと、この［クラシック］ブロックでコンテンツ全体がまるごと包まれます。
［クラシック］ブロック内でテキストの編集をして、［更新］してみましょう。
何のエラーもなく更新された場合は、そのページは、Gutenberg完全対応に移行しても問題ありません。
エラーメッセージが出てしまった場合は……
エラーメッセージが出てしまった場合は、このページのどこかにGutenberg対応にするには問題があるので、旧エディターを使ってページを編集してください。
なお、エラーメッセージが出た場合、すべてのページがNGなのではなく、旧エディターで作ったページのみ（あるいはこのページのみ）がNGです。
また、Gutenbergエディターでの保存は時間がかかる傾向が強いので、何度か試していくうちに、保存OKになることもあります。
なお、新たに１から作るページは、Gutenbergで作っても問題は発生しません。
※エラーが出てしまった場合の対処方法は、
「WordPress5「真っ白画面」の直し方」を参照してください。
ブロックへ変換する
旧エディターで記事を追加して更新したときに、「更新しました」と表示されて何のエラーも出なかった場合は、Gutenbergへ移行できます。ブロックへ変換して、Gutenbergの機能をフルに利用しましょう。
［クラシック］と記載されたタイトルバー左端のボタンをクリックし、表示されるメニューで［ブロックへ変換］を選択します。
ブロックへ変換すると、あまりにスムーズに変換されるので、何が起きたかわかりにくいかもしれません。右側の［パネル］を確認しましょう。
スムーズに変換できると、［クラシック］の表示が変化します。下例の場合では、「WordPressが……」から「……整えていきたいです。」までが、［段落］ブロックに変換されたことがわかります。
ここまでの範囲に枠線が表示され、1つの段落であることが把握できます。
さらに、次の部分、「新エディター……」をクリックしてみると、［見出し］ブロックに変換されたことがわかります。H2（見出し2）に変換されています。旧エディター上でH2の設定をしていたので、正しく変換されたわけです。
同様にして、それぞれをクリックしていくと、右側のパネル表示が変化します。画像をクリックすると、［画像］ブロックになったことがわかります。
［画像］ブロックでは、Altテキスト（代替テキスト）や画像サイズなどを設定できます。
旧エディターで設定していた場合は、自動的に受け継がれます。
複数のブロックをまとめて選択する
ブロックは複数を選択できます。［段落］ブロックや［見出し］ブロックのように、同じテキスト系ブロックはドラッグして複数をまとめて選択できます。
［段落］ブロックと［画像］ブロックのようにタイプが異なる場合は、1つ目でクリック、2つ目で［Shift］+クリックして複数選択できます。
複数のブロックを選択すると、「2個のブロック」のように、パネル表示が変わります。
複数のブロックを選択すると、何がよいことがあるの？？？？
それは、また次回に。
Gutenbergのブロック機能は、かなり楽しいです。
ぜひ、使い倒してみてください。
- 『WordPress はじめてのデザイン＆カスタマイズ入門』の目次
- 『WordPress はじめてのデザイン＆カスタマイズ入門』の追加情報
- 『WordPress はじめてのデザイン＆カスタマイズ入門』に関する問い合わせ
- 『WordPress はじめてのデザイン＆カスタマイズ入門』を購入
『WordPress はじめてのデザイン＆カスタマイズ入門』
ブログ・サイトの改善方法がわかる
著 者：茂木葉子、岩本修
監修者：星野邦敏、吉田裕介
出版社：技術評論社
ISBN978-4-294-10362-0
292ページ
2,580 円
2019年1月25日発売