WordPress

WordPressのエディタにはどんな違いがある? ~Gutenbergエディタとクラシックエディタの違い~

WordPressのエディタには、「グーテンバーグエディタ」と「クラシックエディタ」という2種類があります。今回はその違いについてまとめてみました。

グーテンバーグエディタとは

グーテンバーグエディタは、WordPressのコンテンツエディタのことです。WordPressは世界で最も使用されているコンテンツ管理システム(CMS)の一つで、グーテンバーグエディタはその中心的な機能です。
グーテンバーグエディタの特徴は以下の通りです。

ブロックベースのエディタ

グーテンバーグは「ブロック」と呼ばれる要素を使用してコンテンツを構築します。

標準で多くのブロックが用意されており、さまざまなタイプのコンテンツを扱うために設計されていて、WordPressを利用する際に非常に便利です。以下は、グーテンバーグエディタに標準で含まれている主要なブロックの一部です。

  • テキストブロック

    段落:
    基本的なテキストコンテンツ用。
    見出し:
    タイトルやサブヘッダー用。
    リスト:
    番号付きリストや箇条書きリスト用。
    引用:
    引用文を表示するためのブロック。
  • メディアブロック

    画像:
    静止画像を挿入するためのブロック。
    ギャラリー:
    複数の画像を表示するためのギャラリー。
    動画:
    ビデオファイルの挿入と表示。
    オーディオ:
    音声ファイルの挿入と再生。
  • デザインブロック

    ボタン:
    リンク付きのボタンを作成。
    カラム:
    ページを複数のカラムに分割。
    グループ:
    複数のブロックをグループ化。
    区切り線:
    セクション間を区切るための線。
  • ウィジェットブロック

    最新の投稿:
    最新記事のリスト表示。
    カテゴリー:
    カテゴリー一覧の表示。
    HTMLカスタム:
    カスタムHTMLコードの挿入。
  • フォーマットブロック

    コード:
    プレーンテキストのコードを表示。
    詩:
    詩や詩形式のテキスト用。
  • レイアウト要素

    スペーサー:
    空白スペースの追加。
    ページ内リンク:
    ページ内の特定のセクションへのリンク。

これらはグーテンバーグエディタに含まれる基本的なブロックの例です。WordPressのバージョンアップやプラグインの追加により、利用可能なブロックはさらに増えることがあります。

直感的な操作

ドラッグ&ドロップでブロックを配置し、簡単にサイズ変更やカスタマイズができます。これにより、ユーザーはコーディングスキルなしで複雑なレイアウトを作成できます。

柔軟性と拡張性

多種多様なブロックを使用して、記事やページのレイアウトを自由にデザインできます。また、プラグインを通じて新しいブロックや機能を追加することも可能です。

リッチなメディアサポート

画像、動画、音声ファイルなど、メディアコンテンツを簡単に挿入して管理できます。

互換性と将来性

古いWordPressエディタとの互換性を保ちながら、より現代的で拡張可能なエディタを提供します。WordPressの将来のバージョンで中心的な役割を担うことが期待されています。

グーテンバーグエディタは、WordPressを使うユーザーにとって、より簡単かつ柔軟にコンテンツを作成・管理するための重要なツールです。

クラシックエディタとは

クラシックエディタは、WordPressにおける以前のデフォルトのコンテンツエディタです。WordPress 5.0がリリースされる前まで、このエディタが標準的に使用されていました。グーテンバーグエディタの導入により、クラシックエディタは徐々にその地位を譲ることになりましたが、依然として多くのユーザーに利用されています。
クラシックエディタの主な特徴は以下の通りです。

WYSIWYGエディタ

「What You See Is What You Get」の略で、エディタで行った編集がそのままウェブサイト上でどのように表示されるかを反映します。テキストの書式設定や画像の挿入が直感的に行えます。

シンプルな操作性

ユーザーインターフェイスは比較的シンプルで、初心者にも扱いやすい設計になっています。基本的なテキストエディタとしての機能に重点を置いています。

プラグインとの互換性

長年にわたって使われてきたため、多くのプラグインやテーマがクラシックエディタと互換性を持っています。

HTMLエディタ機能

テキストエディタとしてだけでなく、HTMLコードを直接編集することも可能です。これにより、より高度なカスタマイズが行えます。

グーテンバーグエディタへの対応

WordPress 5.0以降でも、クラシックエディタを使用するためのプラグインが提供されています。これにより、グーテンバーグエディタに慣れるまでの移行期間や、シンプルなエディタを好むユーザーのための選択肢として存在しています。

クラシックエディタは、特に長年WordPressを使用しているユーザーや、複雑なブロックエディタよりもシンプルなインターフェイスを好むユーザーにとって、重要な選択肢となっています。

クラシックエディタの提供が終わるかもしれない?!

WordPressユーザーの間では、長きにわたって信頼されてきたクラシックエディタの未来が、しばしば議論の的になっています。グーテンバーグエディタの登場以来、WordPressはこの新しいブロックベースのエディタを積極的に推進してきました。その一方で、クラシックエディタへの愛着と依存は依然として強く、多くのユーザーがそのシンプルさと使い慣れたインターフェイスを重宝しています。

現在、WordPressの開発チームは、ユーザーがスムーズにグーテンバーグエディタに移行できるように、一定期間クラシックエディタプラグインのサポートを続けることを宣言しています。ただし、具体的なサポート終了日は公式には明言されていません。

WordPressコミュニティは、その広範で活動的な性質から、クラシックエディタに対する強いサポートを提供し続けることが予想されます。利用者の数が多い限り、コミュニティや第三者からのサポートや更新が続くでしょう。それにもかかわらず、WordPressのコア機能としてのクラシックエディタの位置づけは、時間とともに変わりつつあるのもまた事実です。

結論として、クラシックエディタの提供が終わるかもしれないという懸念はあるものの、少なくとも短期間内に突然終了するということはなさそうです。ただし、WordPressは定期的に更新され、新機能が追加されているので、それに伴い、クラシックエディタのサポートが終了する日が来るかもしれません。ユーザーとしては新しい流れに適応しつつ、大切なコンテンツを守り続けるための準備を怠らないことが求められます。

WordPressエディタの選択肢

現状のWordPressのエディタには、「グーテンバーグエディタ」「クラシックエディタのビジュアルモード」「クラシックエディタのテキストモード」の3種類が存在しています。これらは、WordPressでのコンテンツ作成における3つの主要なエディタのタイプで、それぞれにユニークな特徴があります。

グーテンバーグエディタは、ブロックベースのアプローチを採用しており、各ブロックが異なる種類のコンテンツ(テキスト、画像、ボタンなど)に対応しています。このエディタは高いカスタマイズ性を提供し、直感的なユーザーインターフェイスにより、リアルタイムでの編集プレビューが可能です。

一方、クラシックエディタのビジュアルモードはシンプルで使いやすく、基本的な書式設定ツールを提供しますが、グーテンバーグに比べるとレイアウトやデザインのカスタマイズオプションは限られています。

クラシックエディタのテキストモードは、HTMLコードを直接編集するためのもので、高度なカスタマイズや制御を必要とするユーザーに適しています。このモードではビジュアル要素は表示されず、HTMLとテキストのみが扱われますが、それにより詳細なカスタマイズが可能になります。

これらのエディタは、それぞれ異なるユーザーのニーズに対応しています。グーテンバーグエディタは最も進化した形式で、柔軟性と直感的な操作性を提供します。クラシックエディタのビジュアルモードはシンプルさと使いやすさに焦点を当てており、テキストモードはより技術的なユーザーに適した高度な制御とカスタマイズを可能にします。ユーザーはこれらの特徴に基づいて、自分のニーズやスキルレベルに最適なエディタを選択することができます。

グーテンバーグエディタに対応するコーディングとは

グーテンバーグエディタでは、初めから使えるさまざまなブロックが用意されており、プラグインを使用してこれらのブロックをさらに追加・拡張することができます。

これらのブロックは、ユーザーが入力したテキストや画像などのコンテンツをウェブページ上に表示するための決まったHTML構造を持っています。したがって、それぞれのブロックに対して適切なデザインを用意し、CSSを使って見た目のスタイルを整えることが必要です。

クラシックエディタに対応するコーディングとは

クラシックエディタでは、テキストモードでHTMLを直接書くこともできますが、ビジュアルモードではTinyMCEという特別なエディタを使います。このエディタは、Microsoft Wordのように、文章にさまざまな装飾を加えることができます。ビジュアルモードで作成された内容は特定のHTML構造を持っており、それに合わせてCSSを使ってデザインを調整する必要があります。

ただし、ビジュアルモードとテキストモードを行き来すると、TinyMCEの仕様によりHTMLやCSSが変更されたり削除されたりすることがあります。これにより、ページのレイアウトが意図しない形で崩れることがあります。この問題を避けるためには、変更される可能性がある部分に注意しながら、ページが正しく表示されるよう適切なCSSを追加する必要があります。

弊社でコーディング代行制作する場合の、WordPressのエディタ設定について

弊社ではクラシックエディタもしくはグーテンバーグエディタのどちらでも実装が可能です。

ご指定が無い場合はデザインに合わせて弊社で適宜選択の上実装をしておりますが、利用するエディタをご要望いただくことも可能です。

詳細はご依頼時に担当ディレクタまでお問い合わせください。