ブロックエディタ(Gutenberg)とСlassic Editorどれが推し?レビューと使用のコツをまとめ

wordpress-editor

クラシックエディタは従来、そのシンプルさでみんなに愛されていますが、欠点も多くあります。ページのレイアウトを自由に変更するために、HTMLコードの編集は常に避けられなくて非常に不便です。HTMLでの作業ならフロントエンドの知識が必要ですし、時間もかかります。

ご覧のように、Class EditorでHTMLを編集するために、「text」タブに切り替えてコードを変更します。

でもやはり直感ではありません。こうしたことから、WPの開発者たちは時間をかけて新しいブロックエディタをWordpressに組み込んで標準搭載にしたのです。ブロックエディタはまたGutenbergと呼び、メリットはElementorやWPBakeryのように、ドラッグとドロップでもきれいなWeb仕様を構築できます。

WordPress 5.0から、標準のテキストエディタが変更されました。Gutenbergつまりブロックエディタがデフォルトでインストールされるようになったのです。ますます多くのWordpressテーマもGutenburgをより使いやすくて強力にするために色んなカスタム機能を提供しています。例えば、本サイトが利用しているAffingerというテーマでは、ブロックエディターを色々とカスタムすることができます。

そこで、ブロックエディターを使うか、クラシックエディターに戻すかを決められるために、それぞれのメリットおよび使用テクニックについてお話します。

クラシックエディターはつまりTinyMCEエディター

長い間、WordPressは投稿とページの作成にTinyMCEエディタを使用していました。このTinyMCEエディタは、WordPressのクラシックエディタそのもの或いは中核として理解しましょう。基本的な書式設定の機能が備わったパネル付きのシンプルなテキストボックスでした。「シンプル」とはいうものの汎用性が非常に高くて各種のCMSで幅広く利用されています。

現在でもTinyMCEのプラグイン(TinyMCE Advanced、またはAdvanced Editor Toolsと呼ぶ)をインストールすることでエディターの機能をさらに強化させ、使いやすくすることができます。

新しいブロックエディタ は、各コンテンツ要素をブロックで囲むことで、コンテンツの編集を直感的にしてくれています。ブロックをエディタ内でドラッグさせたり、クリックだけで設定を変更したり、コードを書かずに魅力的なレイアウトを作成することができます。

TinyMCEエディターは今流行っているローコード、グラフィック化などの開発理念からして、やや立ち遅れているかもしれません。ページのレイアウトの高度な編集にHTMLコードの編集が避けられないほか、ブロックエディターのように、ウィジウィグ的(WYSIWYG=What You See Is What You Get)な使用体験にも欠けています。

例えば、上記GIFみたいに、ブロックエディターではアニメなど各コンテンツ要素の最終効果は「プレビュー」機能を利用せずに編集中でも反映します。TinyMCEにとってはなかなか無理です。

次に旧エディターとGutenbergそれぞれの特性、長所短所についてより詳しくご説明します。

クラシックエディター(Classic Editor)

クラシックエディターはMicrosoft Wordなどのワープロソフトのようにわかりやすいです。簡単な書式設定を可能にする軽量な素材が提供されているほか、SEOの考慮で必要な各種HTMLタグを含ませることもできます。

機能が限られたように見えるかもしれませんが、テキストのフォーマットを簡単に編集できるように設計されており、複雑なデザインや書式設定を必要としないユーザーに最適です。

マルチメディアのレイアウトを迅速かつ簡単な配置を目的とするクラシックエディターは確かに素晴らしく機能していました。

長年にわたってWordPressで人気を博してきましたが、デフォルトのエディタが今やGutenbergになっているので、旧エディターを使用するにはClassic Editorプラグインをインストールする必要があります。

classic editor プラグイン

このプラグインは使いやすくて昔のクラシックエディタを完全に復元してくれます。

クラシックエディターの長所と短所

長所

  • コンテンツの追加や書式設定が簡単。
  • Wordのようなシンプルなテキストエディタに似ています。
  • 様々なHTMLタグを含めることができます。
  • 多くのユーザーがそれに慣れていました。

短所:

  • クラシックエディタは、もはや複雑なページレイアウトのために設計されたものではありません。
  • ページの仕様を編集するにはHTMLのスキルが必要です。
  • 追加機能の利用するために多くのプラグインが必要です。

また、自分がクラシックエディターを使用するとき一番の短所と感じたのは画像メディアを操作するのが不便なことです。画像を記事に取り込むとき、まずははメディアライブラリーからアップロードし、そしてメディアライブラリーを介して記事に含めるしかありません。

スニッピングツールの複製機能を利用して画像を直接的にGutenbergにペイストできる

画像ファイルを直接的に記事にドロップしたり、スニッピング画像を直接的に記事にペイストしたりすることができないです。一方、Gutenbergでは前の二つの方法で画像メディアを手軽に記事に含めることができます。

旧エディターで画像をメディアファイルにする方法

また、静的な画像をメディアファイルにしてギャラリーとかを作成する場合、メディアファイルの変換はGutenbergほど簡単ではないです。再びメディアライブラリーに戻って該当の画像ファイルのメディアタイプを設定しなければなりません。

新しいブロックエディター(Gutenberg)

Gutenbergを使うと、記事を書いたり編集したりするのが面白くなります。とくにメディアコンテンツを作成するのはもっと楽になります。

しかし、Gutenbergはまだクラシックエディターほど評価されていないみたいです。ワープレの公式サイトWordPress.orgでは星2(最高星5)の結構マイナスな評価を受けています。同じような文句がよく見受けられます。すべてのユーザーがブロックを必要としているわけではなくて却ってコンテンツ作成を複雑にしちゃうということです。

WordPressの旧エディタは十分に柔軟に使えるので、WordPressの初心にもっとぴったり合っているという声はたくさんあります。

Gutenberg エディタの利点

  • コンテンツをブロックとして提示して見やすい
  • ブロックごとに様式をカスタム可能
  • 経験やHTMLの知識がなくても、複雑なレイアウトを作成することができる
  • 画像メディアはドロップやペイストの形で手軽に含める
  • 異なるリソースからのコンテンツを素早く埋め込める
  • ウィジウィグ的なライティング体験
  • ブロックは再利用可能

また、サードパーティの開発者が提供するコンテンツをブロックとして体裁よくページに組み込むこともできます。例えば、Twitter、Instagram、ピンタレストなどです。

下はTwitterウィジェットを利用することでツイッター内容をページに組み込む事例です。

使い方も状に簡単で、表示したいTwitterのURLを入力してボタンをクリックすればいいです。

ちょっよ不便なのは表示の高さと幅を指定する場合、

width="300"
height="300"

のようなHTMLコードで自分で編集する必要があります。

data-tweet-limit="3"

のコードを入れることでツイートの表示件数をカスタムすることもできるのです。そんなに複雑ではありません。

ページのデータへの完全な統計

エディターの左上にあるインフォのアイコンを1回クリックするだけで、作成した素材の総合的な統計情報を得ることができます。単語数、画像、テキストの総量など、さまざまな情報を得ることができます。

Gutenberg Editorのデメリット

以下は主な短所です。

  • 一部のテーマやプラグインとの非互換性がまだある
  • 常にあるエラー
  • メタボックスのサポートは終了しています。
  • 一部のショートコードが動作しなくなった
  • リンクの作成が100%うまくいくことができない
  • ブロックの間で切り替えるときは反応が遅い

最も多い問題は、インターフェースと、テーマや古いプラグインとの衝突です。この問題は、かなり深刻であるにもかかわらず、あまり注目されていません。Gutenbergの開発者は、可能な限り互換性を持たせるためにあらゆる努力をしていますが、不測の事態が起こる可能性もあります。ですから、Gutenbergエディタを使うなら、Gutenberg対応のテーマも使ったほうがよいでしょう。

自分がとても実感しているGutenbergのデメリットは上記の第2、5、6点ですね。これらの問題は原因が同じです。エディターはページの仕様を詳しく反映するために、またたくさんのプリセットをロードするために、PCのリソースもクラシックエディターよりに多く占用します。なので、設定や仕様変更などの操作をするとき、挙動に遅延が出たり、おかしくなったりする状況はよくあります。

特にお使いのPCのスペックが低くて、メモリーが足りないとき、これらの問題はとくに頻繫に起きます。いっそうのことページが崩れてしまう状況も多くあります。

時間の経つにつれて、上記の問題はwordpressのバージョンアップにつれてだんだん解消されていくでしょう。

GutenbergやClassic Editorのどっちにする方法と共に使用する方法

ブロックエディターとクラシックエディターのどちらにするほか、両方をともに使用することも可能です。それぞれの方法を見ていきましょう。

クラシックエディターを使用する場合:Classic Editorプラグイン

WordPressでGutenbergを無効にしてClassic editorに戻す方法として、まず、公式のClassic Editorプラグインを使用する方法があります。WordPressのメニュー項目「プラグイン」→「インストール」で名前を探して、このプラグインをインストールすればいいです。この拡張機能を有効化すると同時に、Gutenberg エディターを無効化します。

この方法の一つのメリットは、ユーザーが誤ってGutenbergを有効化することを防ぎます。

共に使用する方法一:GutenbergでClassic Editorをブロックとして使用

ClassicとGutenberg Editorを連携させる方法はもう一つあります。Classic Editorプラグインをインストールしなくても、Classic EditorをGutenbergのブロックとして読み込むことができます。新しいブロックを追加(左上または段落のとなりにある小さなプラスのボタンをクリック)します。

エディターの左上にあるボックス
段落のとなりにあるプラス

そして、「書式設定」 → 「クラシック」でクラシックブロックを選択ればいいです。

すると、新しく追加されたブロックのヘッダーにはクラシックエディターにそっくりの各設定項目が出ます。

クラシックブロック

共に使用する方法:Disable Gutenbergプラグイン

Disable Gutenbergプラグインでは、特別なユーザーや投稿、ページ、カスタム投稿タイプなどのコンテンツタイプの別で、新しいエディタをオフにすることが可能です。Classic Editorプラグインの代わりとしても優れた方法です。一部のページをGutenbergで残りのページは旧エディターでという両エディターの同時使用が可能です。

Disable Gutenbergをインストールしている場合は、「設定」→「Disable Gutenberg」に移動して、ユーザーまたはページタイプでGutenbergを使うかを決めましょう。

エディターを変更するときの様子と注意事項

しばらく一つのエディターを使ってページを作成していましたが、もう一方のエディターに移行しようと思うのなら、何か問題が発生するかうまく行けるか気になるでしょう。確かに前から作ったコンテンツの内容やレイアウトを壊したらやばいです。そこで、エディターを切り替えるときの様子と注意事項をみましょう。

古いエディターからGutenbergへ変更するとき

内容はもちろん、古いエディターで作ったコンテンツのレイアウトと仕様も基本的には維持できます。デフォルトで旧エディターで作成した内容はGutenbergで一つの「クラシックブロック」として表示します。重要な手順は「ブロックへ変換」のボタンをクリックして全体を一つずつのブロックに変更することです。

よくない状況ですが、一部の内容はうまくブロックへと変換できないことがあります。変換後はレイアウトとブロックを検査する必要があります。

Gutenbergからクラシックエディターに変換するとき

Gutenbergからクラシックエディターへ変換するときも前から作成したページの内容とレイアウト、装飾などは基本的には維持できます。余計な操作も要らないです。上の状況とは同じように、Gutenbergで作成したすべての様式が完璧に維持できるとも言えません。例えば、ウィジェットは無効になります。

ウィジェットのように、Gutenbergがサポーしますが、クラシックエディターにはない機能で作られたコンテンツはエディターの変換後、怪しくなったかをこまめに検査しましょう。

まとめ

結論から言うと、簡単なページ仕様で十分なら、やはりクラシックエディターがおすすめです。Gutenbergは慣れるのに時間がかかりますが、装飾機能が強くてこれからの趨勢でしょう。でも今や使用の支障となる問題はまだ完全に排除されていません。自分はより強力でクラシックエディターの使用習慣と互換性を持っている新エディターがおすすめと思います。

ブロックエディターをどうしても割愛したくないなら、「Disable Gutenberg」というプラグインで両方を同時に活用するのもぜんぜん悪くはありません。