検索対象:

Gutenbergと旧エディターを併用する


WordPressはじめてのデザイン&カスタマイズ
WordPressはじめてのデザイン&カスタマイズ

Gutenbergと旧エディターの併用も、かなり安定してきました。

とはいえ、すぐにGutenberg完全対応にすることは、現段階ではまだお勧めしません。
特に、WordPress 4.9.Xで緻密に作ったサイトや、旧エディターで作り込んだページがある場合は、段階を追ってGutenberg対応型に馴染ませていくほうが無難です。

ここでは、旧エディターで書いたページをGutenberg対応型にする方法をご紹介します。

  1. Gutenbergプラグインのインストール&有効化
  2. 旧エディターページをGutenbergで開いてみる
  3. クラシックブロック上で入力・更新してみる
  4. ブロックへ変換する

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になることもあります。

なお、新たに1から作るページは、Gutenbergで作っても問題は発生しません。

※エラーが出てしまった場合の対処方法は、
WordPress5「真っ白画面」の直し方」を参照してください。

ブロックへ変換する

旧エディターで記事を追加して更新したときに、「更新しました」と表示されて何のエラーも出なかった場合は、Gutenbergへ移行できます。ブロックへ変換して、Gutenbergの機能をフルに利用しましょう。

[クラシック]と記載されたタイトルバー左端のボタンをクリックし、表示されるメニューで[ブロックへ変換]を選択します。

ブロックへ変換すると、あまりにスムーズに変換されるので、何が起きたかわかりにくいかもしれません。右側の[パネル]を確認しましょう。

スムーズに変換できると、[クラシック]の表示が変化します。下例の場合では、「WordPressが……」から「……整えていきたいです。」までが、[段落]ブロックに変換されたことがわかります。
ここまでの範囲に枠線が表示され、1つの段落であることが把握できます。

さらに、次の部分、「新エディター……」をクリックしてみると、[見出し]ブロックに変換されたことがわかります。H2(見出し2)に変換されています。旧エディター上でH2の設定をしていたので、正しく変換されたわけです。

同様にして、それぞれをクリックしていくと、右側のパネル表示が変化します。画像をクリックすると、[画像]ブロックになったことがわかります。
[画像]ブロックでは、Altテキスト(代替テキスト)や画像サイズなどを設定できます。
旧エディターで設定していた場合は、自動的に受け継がれます。

複数のブロックをまとめて選択する

ブロックは複数を選択できます。[段落]ブロックや[見出し]ブロックのように、同じテキスト系ブロックはドラッグして複数をまとめて選択できます。
[段落]ブロックと[画像]ブロックのようにタイプが異なる場合は、1つ目でクリック、2つ目で[Shift]+クリックして複数選択できます。

複数のブロックを選択すると、「2個のブロック」のように、パネル表示が変わります。

複数のブロックを選択すると、何がよいことがあるの????

それは、また次回に。

Gutenbergのブロック機能は、かなり楽しいです。
ぜひ、使い倒してみてください。



『WordPress はじめてのデザイン&カスタマイズ入門』
ブログ・サイトの改善方法がわかる

WordPressはじめてのデザイン&カスタマイズ

著 者:茂木葉子、岩本修
監修者:星野邦敏、吉田裕介
出版社:技術評論社
ISBN978-4-294-10362-0
292ページ
2,580 円
2019年1月25日発売

WordPress5「真っ白画面」の直し方


WordPressはじめてのデザイン&カスタマイズ
WordPressはじめてのデザイン&カスタマイズ

ずいぶん安定してきたWordPress5ですが、過去に制作したページをWordPress5上で開こうとすると、エラーが発生することがあります。
特に、WordPress4.9.X環境で作りこんできたサイトほどエラー頻度が高いようです。

WordPress5で「投稿」や「固定ページ」を開こうとしたときに、真っ白画面が表示される場合があります。
その際に、WordPress4.9.Xにダウングレードせずに、回避する方法をご紹介します。

  • Classic Editorプラグインをインストール&有効化
  • 設定画面で[クラシックエディター]を選択する

Classic Editorプラグインのインストール&有効化

[プラグイン]メニューの[新規追加]を選択し、[プラグインを追加]画面の「注目」をクリックします。

Classic Editorの[今すぐインストール]ボタンをクリックしてインストール、さらに[有効化]ボタンをクリックして有効化します。
[有効]が薄く表示される状態になったら準備完了です。

設定画面で[クラシックエディター]を選択

インストールが完了すると、[インストール済プラグイン]画面に追加されるので、「設定」をクリックします。

[投稿設定]画面が表示され、「すべてのユーザーのデフォルトエディター」と「ユーザーにエディターの切り替えを許可します」が着色して表示されます。
「すべてのユーザーのデフォルトエディター」を「クラシックエディター」に切り替えます。

「ユーザーにエディターの切り替えを許可します」は、「いいえ」を念のため選択し、この設定値を保存してください。
これで、クラシック環境で今までの作業を続行できます。

できれば、Gutenbergも使ってみましょう

WordPress 5になって、Gutenbergがデフォルト環境になりました。
旧エディター環境は、プラグインをインストールしなくても一覧画面上で切り替えて使えるようになっています。

通常は、この設定で正しく機能します。
ですが、うまくいかないときもたまにあります。まだまだ移行期のため、仕方がないかなと。
そんなときは、ダウングレードではなく、上記の方法を試してみてください。

ただ、個人的には、ぜひGutenbergを使ってみていただきたいです。

最初は、あまりの変貌ぶりに脳が拒絶しました。

しかし、Gutenbergを使い始めて半年ほど経過した今は、プラグインやCSSを駆使しなければできなかったことが、Gutenbergエディターのみで再現できてしまうことを楽しんでいます。

脳は、慣れるのも早いです。
そして、楽しいほうをワクワクと選んで実践したがります。
ぜひ、そのあたりを楽しんでいただきたいなーと思います。



『WordPress はじめてのデザイン&カスタマイズ入門』
ブログ・サイトの改善方法がわかる

WordPressはじめてのデザイン&カスタマイズ

著 者:茂木葉子、岩本修
監修者:星野邦敏、吉田裕介
出版社:技術評論社
ISBN978-4-294-10362-0
292ページ
2,580 円
2019年1月25日発売