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

こんばんは＠40代サラリーマンのあきらです。

 

今回は、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」エディター

を使用するしかないのかもしれません。