グーテンベルクエディターとは？ WordPress の世界に旋風を巻き起こしたのはどうしてですか? あなたが知りたいすべて

公開: 2019-02-15

WordPress を使用している Web サイトの 4 つに 1 つは、間違いなく最も使用されているコンテンツ管理システム (CMS) の 1 つです。最初の日から、ブログ管理システムから、広く普及している正真正銘の CMS へと進化しました。しかし、そうは言っても、WordPress の世界では物事が急速に変化しており、私たちの意見によれば、物事は良い方向に変化しています!

従来のテキストベースのエディタ、絶滅寸前!

従来、WordPress のコンテンツ編集は、いくつかの画像を含むテキストのページを編集することでした。コンテンツ作成のためのドラッグアンドドロップのユーザーエクスペリエンスは提供されませんでした。また、複雑なコンテンツを埋め込むために、開発者は特殊なタイプの構文であるショートコードを使用します。これらすべての制限があるため、WordPress 開発コミュニティは、開発をより迅速かつ効率的にできる、よりシンプルなエディターを必要としていました。

2018 年 12 月 6 日にリリースされた WordPress 5.0 では、Gutenberg という新しいエディターが導入されました。印刷機を発明したヨハネス・グーテンベルグにちなんで名づけられました。

Gutenberg は TinyMCE エディタや従来のテキストエディタとどう違うのですか?

Gutenberg エディターは、ブロックベースのアプローチに従います。あらゆるコンテンツレイアウトを簡単に作成でき、ユーザーは必要に応じて外出先でコンテンツを編集できます。ブロックは、次のようなほとんどのものにすることができます。

文章
画像
埋め込む
ボタン
ウィジェット
テーブル
などなど。

ユーザーは、必要に応じてカスタムブロックを作成し、同じものを複数回使用することもできます。テーマとプラグインは、新しいブロックタイプを追加することで Gutenberg との互換性を強化できます。このアプローチには、想像を絶する可能性があります。そして、WordPress 開発者コミュニティがその能力を最大限に発揮して革新をもたらすと確信しています。

WordPress バージョン 5.0 より前のバージョンを使用していて、Gutenberg プラグインを試してみたい場合は、次の手順に従ってください。

Gutenberg プラグインのインストール方法

まず、WordPress.org プラグインリポジトリから Gutenberg プラグインをダウンロードしてインストールします。あなたがリポジトリ担当者の場合、標準的な推奨事項は、GitHub でホストされている Gutenberg の開発バージョンを複製することです。開発リポジトリを使用するもう 1 つの利点は、Gutenberg リポジトリに既にバンドルされている React.js 開発バージョンを取得できることです。

開発バージョンでは、効果的なデバッグに役立つ、より詳細なエラーレポートも提供されます。

グーテンベルグのレイアウトを理解する

利用可能なさまざまなタイプのブロックは何ですか?

Gutenberg は、さまざまなカテゴリに分類された多数のブロックを提供します。最もよく使用されるブロックが上部に表示され、下にスクロールすると、共通ブロック、書式設定、レイアウト要素、ウィジェットなどの他のセクションがあります。必要なブロックを選択し、ページレイアウトにドラッグして編集を開始できます。ブロックの種類とその使いやすさの一部を以下に説明します

インライン要素には、インライン画像のブロックが 1 つだけ含まれます。
共通ブロックには、通常のテキスト、段落、引用符、その他多くの基本的なビルディングブロックが含まれます。
書式設定は、表などのコンテンツや、プルクォートなどのより書式設定されたコンテンツに使用できます。
レイアウト要素を使用して、テキストを列に分割できます。
ウィジェットを使用して、カテゴリ、ショートコードを追加したり、サイドバーウィジェットを表示したりできます。
埋め込みは、YouTube、Twitter、Instagram、またはその他の外部コンテンツを追加するのに役立つ場合があります.

ブロックの使用例

以下は、共通ブロックカテゴリから選択され、画面に配置された引用ブロックです。引用ブロックを配置したら、必要に応じてテキストの編集を開始できます。

複数の列レイアウトを作成することもできます。レイアウト要素セクションから列ブロックを選択できます。列ブロックを選択したら、この列ブロック内のサブブロックを移動して、コンテンツを構造化できます。

これらの基本的な構成要素を再配置する方法は?

上矢印または下矢印を使用して、ブロックを一度に 1 か所ずつ移動できます。
より自由に動かしたい場合は、6つのドットアイコンを使用して、必要な場所にドラッグアンドドロップできます.

ソースコードを編集するには?

ソースコードレベルで編集が必要な場合は、右上にある 3 つの縦のドットをクリックして [コードエディター] を選択します。

編集エクスペリエンスを向上させるために、Gutenberg はフルスクリーンモード、固定ツールバー、スポットライトモードを提供します。

編集が完了したら、公開ボタンをクリックするだけで、投稿の準備が整います。

グーテンベルクの利点 (PROS)

私たちによると、グーテンベルグはパブリッシャーにとって祝福となるでしょう。 Gutenberg のロックアプローチを使用して、非常に革新的なテーマとプラグインを作成できるようになります。
開発者は、ブロックに関する情報を保存したり、要件に固有の新しいブロックを作成したりすることもできます。最良の部分は、開発者がブロックを一度作成すれば、どこでも使用できることです。
ブロックベースのアプローチによりすっきりときれいなレイアウトが得られるため、画面全体の乱雑さが軽減されます。
ブロックレイアウトは、モバイルレスポンシブ開発に最適なアプローチです。ウェブサイトをモバイル対応にすることが比較的簡単になりました。
初心者でもWordPressサイトの作成に簡単に対処できるほどユーザーフレンドリーです.

Gutenberg の短所 (CONS)

インターネット上のすべての Web サイトの 33% が WordPress を使用して構築されていることを考えると、Gutenberg との下位互換性は依然として疑わしい. アップグレードにより、エンドユーザーや初心者にとっては簡単になりますが、開発者コミュニティが既存の WordPress Web サイトを Gutenberg と互換性を持つようにするのは面倒な作業です。
Reactを使用しているため、通常のWordPress開発に比べるとやや習得が難しくなります。
Gutenberg をサポートするには、既存のプラグインとテーマをアップグレードする必要があり、この移行を消化するには時間がかかる場合があります。
すべてがボックスベースであるため、正しいボックス要素を見つけることができないという懸念を表明する開発者コミュニティの一部があり、最終的にはレイアウトの混乱につながります.

WordPress 5.0 で従来のエディター (TinyMCE など) を使用する

WordPress 5.0 はすでに利用可能であるため、セキュリティアップデートを受け取るには、すべての WordPress Web サイトをアップグレードする必要があります。そうは言っても、「Classic Editor」(https://WordPress.org/plugins/classic-editor/) と呼ばれる公式の WordPress プラグインがあり、開発者が Gutenberg に慣れるのに時間がかかります。このプラグインの説明に記載されている公式声明によると、「Classic Editor は、少なくとも 2022 年まで、または必要な限り、完全にサポートおよび維持されます」。

アップグレードして Gutenberg の使用を開始する際にサポートが必要な場合は、[email protected] までお気軽にお問い合わせください。私たちは、WordPress サービスを提供し、お客様のウェブサイトを業界のスピードで提供できることをうれしく思います。