WordPress老人から脱却!vol:01 グーテンベルクエディタとは?基本から学ぶ新しいエディタ

WordPressはそのシンプルさと使いやすさで、多くのユーザーに支持され続けてきましたが、時代の変化に伴い、さらに進化を遂げました。

その大きな転機の一つが、「グーテンベルクエディタ」の導入です。WordPress 5.0から標準搭載されたグーテンベルクエディタは、2018年12月にリリースされ、それまでの「クラシックエディタ」に代わる新しい編集体験を提供しました。

従来の「クラシックエディタ」では、HTMLやショートコードを使わなければ表現できなかったレイアウトやデザインが、グーテンベルクエディタでは「ブロック」という新しい概念を使って簡単に実現できるようになりました。

この記事では、グーテンベルクエディタがどのような仕組みで動作し、従来のエディタと何が違うのかを基本から学んでいきます。

これまでクラシックエディタでのWordPress操作に慣れていた方でも、グーテンベルクエディタをスムーズに使いこなせるようになるための第一歩として、ぜひこの記事を参考にしてみてください。

R
R

WordPress老人のRです。グーテンベルクエディタがリリースされて早5年以上・・・
改めて技術をキャッチアップして知識をアップデートしましょう。

グーテンベルクエディタとは?

グーテンベルクエディタは、従来のクラシックエディタを大幅に刷新した、新しいタイプのエディタです。

従来のエディタでは、WordPressの投稿やページを作成する際に、テキストエリアにコードやショートコードを埋め込んでカスタマイズすることが必要でした。

しかし、グーテンベルクでは「ブロック」という単位でコンテンツを管理できるようになり、視覚的にページを構築できる点が大きな特徴です。

ブロックエディタのコンセプト

グーテンベルクエディタの最大の特徴は、「ブロック」という考え方です。

文章、画像、動画、見出し、リストなど、ページ内のあらゆる要素がブロックとして定義され、それぞれを直感的に操作することができます。

これにより、テキストやメディアを自由に配置し、複雑なレイアウトを簡単に作成できるようになりました。

例えば、従来のエディタでは複数のカラムを実現するために、ショートコードやカスタムCSSが必要でしたが、グーテンベルクでは「列」ブロックを使うだけで簡単にカラムを追加できます。

このように、コーディングの知識がなくても、視覚的にコンテンツを管理しやすくなるのがグーテンベルクエディタの強みです。

古いクラシックエディタとの比較

クラシックエディタは、WordPress 5.0以前に標準搭載されていたエディタで、主にHTMLタグやショートコードを使用してカスタマイズを行っていました。

これは非常に柔軟性がありましたが、技術的な知識がないユーザーにとっては、手間がかかることが多かったのです。

一方、グーテンベルクエディタは視覚的に操作できるため、コードを書く必要がなくなり、操作のハードルが大幅に下がりました。

また、クラシックエディタではプラグインを利用して拡張する必要があった機能が、グーテンベルクでは標準機能として提供されている点も大きな進化です。

これにより、WordPressユーザーはシンプルかつ柔軟なページ作成が可能になりました。

グーテンベルクエディタのカスタマイズ性

グーテンベルクエディタは、単なるビジュアルエディタではありません。

カスタムブロックを作成することで、開発者やデザイナーは自分のニーズに合わせてさらに高度なカスタマイズができます。

これにより、Webサイトのデザインや機能を拡張し、オリジナルのブロックを使って個性的なコンテンツを作ることができます。

グーテンベルクのこの柔軟性は、クラシックエディタにはない大きな利点です。

グーテンベルクエディタの基本操作

グーテンベルクエディタを使いこなすためには、まず基本的な操作方法を理解することが重要です。

グーテンベルクエディタは、すべてのコンテンツ要素を「ブロック」として扱います。この記事では、ブロックの挿入や編集、削除、レイアウトの調整といった基本操作を解説していきます。

初心者でも直感的に使えるよう設計されているため、一度操作方法を覚えれば、複雑なページも簡単に作成できます。

ブロックの挿入、編集、削除

結論として、グーテンベルクエディタでは、ブロック単位でコンテンツを追加・編集するため、非常に直感的な操作が可能です。

まず、新しいブロックを挿入するには、エディタの左上にある「+」アイコンをクリックし、挿入したいブロックを選択します。

テキストブロック、画像ブロック、見出しブロックなど、様々なタイプのブロックが用意されており、これらを組み合わせてページを作成します。

編集も非常に簡単で、ブロックをクリックするだけで、その内容を直接編集できます。

例えば、テキストブロックにカーソルを置いて文章を入力したり、画像ブロックを選択して画像をアップロードしたりできます。

不要なブロックは選択して「削除」を選ぶか、キーボードの「Delete」キーで簡単に削除することができます。

ブロックの再利用機能

グーテンベルクエディタのもう一つの便利な機能は、ブロックを再利用できることです。

結論として、よく使うデザインやコンテンツをブロックとして保存し、別のページや投稿で再利用できるため、作業の効率化が図れます。

理由は、一度作成したカスタマイズされたブロックを何度も手動で作り直す必要がなくなるからです。

具体的には、カスタムしたブロックを選択し、メニューから「再利用ブロックとして保存」を選択すると、そのブロックがライブラリに追加されます。

以降は、ライブラリから再利用ブロックを選択するだけで、他のページでも同じブロックを使うことが可能です。

例えば、よく使うCTA(コールトゥアクション)ボタンや、特定のフォーマットのセクションなどを保存しておくと便利です。

レイアウトとデザインのカスタマイズ

グーテンベルクエディタでは、ブロックを使ってページ全体のレイアウトやデザインを簡単に調整できます。

結論として、レイアウトの柔軟性が高く、複雑なページでも短時間で作成できます。

理由は、複数のブロックを組み合わせて行や列、グリッドレイアウトを作成できるからです。

例えば、「列」ブロックを使って複数のコンテンツを横並びに配置したり、「カバー」ブロックを使って背景画像の上にテキストを重ねたりできます。

各ブロックには、個別に背景色やテキスト色、余白などのスタイル設定を追加することが可能で、デザインの自由度が大幅に向上しています。

これにより、特別なコーディング知識がなくても、プロフェッショナルな見た目のページを作成できるようになっています。

グーテンベルクのメリットと活用事例

グーテンベルクエディタは、クラシックエディタから大幅に進化しただけでなく、WordPressを使う全てのユーザーにとって、作業効率やデザインの柔軟性を大幅に向上させるメリットがあります。

ここでは、グーテンベルクの具体的なメリットと、それを活かした活用事例について解説します。

高度なレイアウトを簡単に作成できる柔軟性

結論として、グーテンベルクエディタの最大のメリットは、コーディング知識がなくても、高度なレイアウトやデザインを簡単に作成できる点です。

理由は、すべてのコンテンツがブロック単位で管理されるため、ブロックを組み合わせるだけで多様なレイアウトが可能になるからです。

例えば、複数のカラムを並べたり、画像とテキストを重ねるような複雑なデザインも、「列」や「カバー」ブロックを使えば簡単に実現できます。

また、ウィジェットやプラグインを使わずに、グーテンベルクの標準機能でページ全体のレイアウトをコントロールできるので、制作作業がスムーズに進みます。

コーディングなしで複雑なページを構築できる

グーテンベルクは、ウェブページを直感的にデザインできるため、初心者でもプロフェッショナルなページを構築することができます。

結論として、コーディングなしで、従来ならば開発者が必要だった作業を、自力で完成させられるのは大きなメリットです。

理由は、ブロックエディタが提供する視覚的な操作性により、レイアウトの変更やスタイルの調整がリアルタイムで反映されるためです。

たとえば、画像スライダーやギャラリー、埋め込みコンテンツを追加する際、以前はプラグインを導入したり、HTMLやJavaScriptの知識が求められることがありました。

しかし、グーテンベルクではこれらの要素もブロックで提供されているため、簡単に挿入・調整ができます。ビジュアル面のカスタマイズもボタン一つで操作可能です。

実際のビジネスやプロジェクトでの活用事例

グーテンベルクの利点は、様々なビジネスシーンやプロジェクトで発揮されます。

結論として、グーテンベルクは単なるブログ記事の作成だけでなく、ランディングページや製品紹介ページ、ポートフォリオサイトなど、幅広いコンテンツに対応できるツールです。

例えば、企業サイトの「サービスページ」を作成する場合、グーテンベルクの「グリッド」や「列」ブロックを使って、テキストと画像をシンプルかつ効果的に配置することで、視覚的に魅力的なデザインを簡単に実現できます。

また、ランディングページでは、CTA(コールトゥアクション)ボタンやフォームブロックを組み合わせて、コンバージョン率の高いページを構築することも可能です。

クラシックエディタからグーテンベルクへの移行のメリット

クラシックエディタに慣れているユーザーにとって、グーテンベルクエディタへの移行は戸惑うこともあるかもしれません。

しかし、結論として、グーテンベルクへの移行には多くのメリットがあり、特に長期的に見て効率化が図れます。

理由は、直感的に操作できるインターフェースと、カスタムブロックやテンプレート機能の豊富さが、作業のスピードアップと柔軟なデザインの提供を実現するからです。

例えば、今までHTMLやCSSを使って微調整していた部分も、グーテンベルクでは視覚的にデザインを変更できるため、時間と手間が大幅に削減されます。

また、再利用可能なブロック機能を使えば、定型のセクションを何度も手動で作り直す必要がなくなり、効率的な運営が可能になります。

まとめ

グーテンベルクエディタは、従来のクラシックエディタと比べて大きな進化を遂げ、WordPressを使ったコンテンツ作成をより直感的で柔軟にしてくれます。

「ブロック」という新しい概念を導入したことで、コーディングなしでも多彩なレイアウトやデザインを作成できるようになり、初心者からプロまで幅広いユーザーに対応しています。

今回の記事では、グーテンベルクエディタの基本的な使い方や、クラシックエディタとの違い、さらには具体的な活用事例について紹介しました。

グーテンベルクを使いこなすことで、あなたのサイト運営がより効率的になり、創造的なコンテンツ作りが可能になります。

これからWordPressの世界でより多くの自由を手に入れたい方は、ぜひこの新しいエディタを実際に使ってみてください。

次回の記事では、グーテンベルクエディタをさらに活用して、カスタムブロックの作成方法について詳しく解説します。

グーテンベルクエディタの力をフルに活用するための次のステップもお見逃しなく!

参考文献

ブロックエディタ以前しか知らないWordPress老人がフルサイト編集対応のテーマ作成に挑戦する

ブロックエディタ以前しか知らないWordPress老人がtheme.jsonについて学ぶ