1. HOME
  2. マニュアル
  3. 投稿・編集
  4. 思い切ってGutenbergエディタに変更してみました。切り替えの様子をご紹介

思い切ってGutenbergエディタに変更してみました。切り替えの様子をご紹介

2019.1.23  投稿・編集

WordPress 5.xからデフォルトの投稿画面として搭載されたGutenbergエディタは、これまでの投稿画面とは見た目も使い勝手もかなり異なります。

以前の投稿画面を引き続き使える「Classic Editor」というプラグインも用意されているのですが、Irisで新エディタGutenbergに切り換えたときの様子をキャプチャしましたので、こちらでご紹介します。4.xからのアップグレードをためらっている方も、意外と大丈夫なのだと安心していただければ幸いです。

一度公開した記事に変更を加えても、プレビューが反映されないことがあるようです。その場合も更新をクリックすると変更はちゃんと反映されています。バグのようですので、今後のマイナーバージョンアップで改善されていくのではと思います。

2019.4.16 なかなか改善されないので一時的な対応方法をご案内しています。

Classic Editorの停止と本体アップグレード

Classic Editorを有効化していましたので、プラグインでClassic Editorを停止します。

Gutenbergエディタ

「ダッシュボード」→「更新」から本体をアップグレードします。(先にテーマやデータベースのバックアップをお忘れなく)
今回は4.9.9から5.0.3へのアップグレードです。

Gutenbergエディタ

アップグレードが完了するまで何も操作せずに待ちます。

投稿画面の変化

アップグレードが完了したら投稿画面を確認してみます。
まずは、旧投稿画面【ビジュアルモード】

Gutenbergエディタ

こちらも旧投稿画面【テキストモード】

Gutenbergエディタ

Gutenbergに切り替わったのがこちら。
既に内容があるページは、まずは「クラシック」というモードになります。 これまでの投稿画面に似た感じです。

Gutenbergエディタ

本文エリアをクリックするとClassic Editorのビジュアルモードのようなパネルが表示されます。

Gutenbergエディタ

HTMLで編集できるモードに切り換えることもできます。

Gutenbergエディタ

HTML編集画面です。ビジュアル編集モードに戻すこともできます。

Gutenbergエディタ

ブロックへ変換

「ブロックへ変換」をクリックすると、Gutenbergの特徴であるブロック機能を使えるようになります。

Gutenbergエディタ

これまで1つの枠に入っていた本文が、見出し、段落、画像などの「ブロック」に分かれます。

Gutenbergエディタ

段落ブロック。

Gutenbergエディタ

パーマリンクはページタイトルの上で変更します。

Gutenbergエディタ

ちなみにホームページ側は特に変化はありません。

Gutenbergエディタ

ブロックの追加

ブロックの境界にマウスと置くと「+ブロックの追加」というボタンが表示されます。

Gutenbergエディタ

クリックして、段落、見出し、画像など追加したいブロックを選びます。
スクロールバーを下にたどっていくといろいろなブロックがあります。

Gutenbergエディタ

ブロックの良い点は、ブロックごとに簡単に上下の移動ができること。まさにブロックですね。
移動は、ブロックの左側にマウスを持っていくと矢印が表示されますので、そちらをクリックするだけです。

Gutenbergエディタ

段落ブロックではEnter(return)キーで改行すると次の段落ブロックが作成されます(改段落)。同じブロック内で改行したい場合は、Shift + Enter(return)で改行してください。

以上、Gutenbergへの切り替えのご紹介でした。

Pocket