WordPress（ワードプレス）を更新後に記事を投稿しようとすると「エディターで予期しないエラーが発生しました」が表示される！原因はWordPress（ワードプレス）5.0のエディターが「Gutenberg」に変更されたから？

こんばんは＠あきらです。

今回は、WordPress（ワードプレス）5.0に更新したのち、記事を投稿しようとすると

「エディターで予期しないエラーが発生しました。」

と表示されてしまったでその対処方法を紹介します。

これは、WordPress（ワードプレス）5.0から記事の投稿画面のエディターが「Gutenberg」というものに変更されたのが原因のようです。

「エディターで予期しないエラーが発生しました。」の原因はWordPress（ワードプレス） 5.0のテキストエディター「Gutenberg」？

WordPress（ワードプレス） 5.0でエディターが「ブロックエディタ」というものに変更となり、文章入力が「ブロック」と呼ばれる単位で管理されるようになりました。

ここに、テキストで書き込んでおいた記事をコピペすると、

「エディターで予期しないエラーが発生しました。」

と表示され、

「復旧を試みる」

「投稿内容をコピー」

「エラー分をコピー」

の3つを選択する画面に切り替わります。

試しに「復旧を試みる」をクリックすると、

一時的に元の画面が表示されるのですが、しばらくすると

「エディターで予期しないエラーが発生しました。」

が再度表示されます。

「投稿内容をコピー」と「エラー分をコピー」はクリックしても何も起こりません。

「投稿一覧」や「固定ページ一覧」で記事の閲覧は可能なので、おそらくWordPress（ワードプレス）のエディターが何かを読み取ってエラーが発生していると考えられます。

WordPress（ワードプレス）5.0でテキストエディター「Gutenberg」で以前の記事を編集してみる

試しに、更新前に投稿してある記事を読み込んでみました。

・・・特に問題なく開けます。

しかし、編集方法が分かりません。

さらに今まで存在していた、太字、文字色などのメニューがなくなっています。

エラーの原因はWordPress（ワードプレス）5.0の「Gutenberg」エディター？

これらはWordPress（ワードプレス）5.0のエディターが「Gutenberg」エディターに変更されたことが原因のようです。

WordPress（ワードプレス）5.0に導入された「Gutenberg」エディターは今までと全く違います。

僕もこれに戸惑ってしまいました。

ブログの投稿ページが変更になって、今までのエディターのように

太字や文字色を変更するアイコンが表示されていません。

投稿の方法もひとつのエディターにすべての項目を入力するものではなく、各ブロック（見出しや段落、画像など）を作成して、記事やページを書き上げていくイメージです。

正直、今までのエディターになれている僕はかなり使いづらいと思いました。

それでも、これからのWordPress（ワードプレス）は、「Gutenberg」が主流になると予想されますので、使い方を勉強しておいたほうが良いかもしれません。

WordPress5.0の投稿エディター「Gutenberg」の使い方

「Gutenberg」には、多種多様な使い方があり、それだけで一冊の本になってしまうほどなので、まず、初歩的な使い方を紹介したいと思います。

基本的な画面の構成は今までのエディターと同じで、左カラムにメインの入力項目、右カラムに投稿の公開やカテゴリ、タグなどの項目があります。

右上にある、歯車アイコンで、右カラムの表示／非表示を変更することができます。

WordPress（ワードプレス）5.0のエディター「Gutenberg」のブロック要素とは？

「Gutenberg」では、各項目が「ブロック」に分かれているので、まずはこれに慣れる必要があります。

通常の文章だけであれば、「ブロック」を気にすることはありませんが、見出しや写真を入れるだけでも「ブロック」が必要になります。

「ブロック」の追加方法は、「＋」のアイコンをクリックするだけです。

「ブロック」には各要素があり、それらを選択して作成していきます。

※「ブロック」の要素を選択すると、右カラムのメニューが要素によって変わります。

ブロックメニューを編集することで、表示内容が自動的に変更されるので、色々な「ブロック要素」を試して、右カラムのメニューがどのように変わるのか試してみてください。

WordPress（ワードプレス）5.0のエディター「Gutenberg」のブロック要素の使い方

ここでは、よく使う「ブロック要素」を紹介します。

見出しブロック

ブログで必要な「見出し」を書くときに使用します。

今までは、文字を記入後に「見出し」を選択すれば終了です。

「Gutenberg」では、最初に「一般ブロック」→「見出し」を選択します。

見出しの「ブロック」が表示されるので、見出しの文字を入力します。

ここで、見出しの順位（H2やH3）などの編集もできます。

画像ブロック

記事の中に「画像」を挿入する場合に使用します。

今までは「メディアの挿入」で画像を選択すれば画像が記事内に挿入できました。

「Gutenberg」では、「一般ブロック」→「画像」をクリックします。

画像の挿入方法が画面に表示されるので、任意の方法を選択して画像を挿入します。

「画像ブロック」と同様に「一般ブロック」の項目で、「カバー」や「ギャラリー」というものがありますが、「ギャラリー」はこれまでのエディターと同様、「画像ギャラリー」を作成することができ、「カバー」は画像の上にテキストを重ねて表示ができる「ブロック」になっています。

リストブロック

「リストブロック」は使用頻度は少ないと思いますが、いざというときのために紹介しておきます。

箇条書きなどで、文頭に「・」や「１」などを付けるときに使用します。

「一般ブロック」→「リスト」を選択します。

項目の入力方法は前のエディターと同じで、改行すると文頭に「・」や「２」が付くようになっています。

クラシックブロック

「Gutenberg」を使う上で重要なのが「クラシックブロック」です。

「クラシックブロック」を使用すると、【以前のエディタ画面】を使用することができます。

「フォーマット」→「クラシック」を選択します。

すると、画面上部に見慣れた以前のメニューが表示されます。

なるべくなら、「Gutenberg」エディターを使用して慣れてもらいたいのですが、「テーマ固有」や「自作」のショートコードは「Gutenberg」のエディターでは使用することができないので「Quicktags」を使ってショートコードを読み込んでいる場合は「クラシック」は必須となってしまいます。

ただし、旧エディターのメニューになるだけで、エディター自体は「ブロック型」なので、以前のようにコピペで投稿したい場合は後に記載する「Classic Editor」を使用する必要があります。

カスタムHTMLブロック

記事の投稿時にHTML形式でソースを入力したい場合に使用します。

「フォーマット」→「カスタムHTML」を選択します。

HTML形式で記述されている記事をコピペします。

以前は、更新の際にWordPressの仕様で、ソースが勝手に変更されてしまう現象があったのですが、「Gutenberg」の「カスタムHTML」では、そういうことはなくなったようです。

WordPress5.0の「Gutenberg」エディターではなく、以前のエディターが使用したい場合

「Gutenberg」の簡単な使い方を紹介しましたが、

「どうしても今までのエディターが使用したい！」

という方は、きっといるでしょう。

僕もそうです＾＾；

いつかは「Gutenberg」に変更しなくてはならないとは思っても、作業効率を考えると、しばらくは以前のエディターを使用したい。

以前のエディターを使用したい場合は、「プラグイン」→「新規追加」を選択し、

「キーワード」に「Classic Editor」と記入すると表示されるので、「今すぐインストール」をクリックします。

インストール後に、「有効化」すれば使用できるようになります。

【まとめ】WordPress（ワードプレス）5.0のエディター「Gutenberg」はこれからの主流か？

今回のWordPress（ワードプレス）5.0へのアップデートから、WordPress（ワードプレス）としては、旧エディターから「Gutenberg」エディターを主流にしていくことが予想されます。

旧エディターに慣れている人（僕）からしてみると、使いづらくなっているだけなのですが、「Gutenberg」は感覚的に投稿や固定ページを作成することができ、ページ作成の知識がなくても「カラム分け」や「リンクボタンの作成」ができるようになっています。

今までは、テーマやプラグインの機能を使うことでそのあたりはできたのですが、今後はWordPressがその役回りもするようになっていくのでしょう。

WordPress（ワードプレス）5.0のエディター「Gutenberg」は悪くもないし、今後の主流だと考えると、早めに操作を習得しておいたほうがよさそうです。

しかし、テキストで記事を記載しておいて、WordPress（ワードプレス）5.0に記事をコピペで作業をしたい人（僕）からすると、しばらくは「Classic Editor」エディターを使用するしかないのかもしれません。