Gutenbergエディタの使い方（完全ガイド）

その グーテンベルクエディター 古典的なものに取って代わった WordPress エディタで、デフォルトでアクティブになっています WordPress エディタ。

以下のようなサイトで記事を書いたことがあるなら Medium.comおそらく、Gutenberg と似たような体験をしたことがあるでしょう。しかし、Gutenberg エディターははるかに包括的で、さまざまなブロックが付属しています。

現在、Gutenbergはブログ投稿を作成するためのエディタとしてのみ利用可能です。しかし、将来的にはサイト全体を作成するための完全なソリューションへと拡張され、初心者にとってより使いやすくなるでしょう。 WordPress ユーザー。

新しいエディターは主にブロックに依存しているため、独立した WordPress テーマおよびプラグイン開発者は、独自のブロックを簡単に作成して、全体的なエクスペリエンスを拡張できます。 

この記事では、新しい Gutenberg エディターを詳しく見ていき、それを最も使いこなす方法を学びます。

Gutenbergエディターについて知っておくべきことすべて

---

Gutenbergエディターとは

グーテンベルクは新しい WordPress すぐにブログ投稿を作成するために使用するエディターです。

Gutenbergエディタの名前の由来 ヨハネス・グーテンベルク 500年前に印刷機を発明した人。 

クラシック WordPress 現在使用しているエディターはシンプルで、タイトルと説明ボックス、そして投稿にさまざまな要素を追加するために使用するツールが付属しています。 

Gutenberg エディタの導入により、このシステムは完全に変わります。 

次に、ブログ記事を作成するために、様々なブロックを挿入する必要があります。Gutenbergエディタで作成した様々なブロックについては、この記事の後半で紹介します。

新しい編集者は、  WordPress 2018年末までにコアを完成させる予定です。

すでに述べたように、現時点ではプラグインをインストールすることで使用できます。 

すでに 600 万人以上のユーザーがテスト用またはアクティブなサイトで Gutenberg エディターを使用しています。 

Gutenbergを使い始める 

グーテンベルクは WordPress ソフトウェアです。必須になる前にエディタに慣れるために、早めに始めることをお勧めします。

私たちはGutenbergエディタを使用しています BeginDot ここ数日、確かにいくつかのメリットがあるのですが、まだ開発中なので、多くの改善が必要なのは当然です。

エディターを使い始めるには、 WordPress ダッシュボード >> プラグイン >> 新規追加 

Gutenbergプラグインのオプションがすぐそこに表示されます。プラグインをインストールして有効化するだけです。

サイトで Gutenberg エディターを使用して新しいコンテンツを書き始める前に、ダッシュボードでエディターを試してみるオプションがあります。

プラグインを有効にすると、Gutenbergオプションが表示されます。 WordPress ダッシュボード。

エディターの外観と操作感

ブログ投稿の作成を開始すると、Gutenberg エディターは次のようになります。

インターフェースはすっきりとしていて、無駄がありません。投稿に必要なブロックを追加していきましょう。

さて、上の画像にあるように、投稿のタイトルを追加し、追加したいブロックを追加するための空白のキャンバスを追加するオプションがあります。

投稿のタイトルを追加したら、コンテンツエリアに移動してブロックを追加します。 +プラス ページにブロックを追加するために使用できる記号です。

ページの左上隅にブロックを追加するオプションもあります。 

右バー

詳細は thエディターの右側のバーは、現在編集中のブロックに応じて変化します。画像を編集している場合は、右側のバーに画像の代替テキストや画像サイズなどのオプションが表示されます。

テキスト ブロックの編集を開始すると、それに応じてテキスト ブロックが変更されます。 

ビジュアルエディターとコードエディター

クラシックエディターでは、ビジュアルエディターとコードエディターを移動するオプションがありましたが、Gutenbergエディターでは、必要に応じてコードエディターを使用するオプションも用意されています。 

The Postの注目画像

以前のエディターと同様に、ブログ投稿のカテゴリを選択するオプション、タグを追加するオプション、ドキュメント タブの下の右側のバーでおすすめの画像を表示するオプションがあります。 

やり直しと元に戻すオプション

記事内を前後に移動するのに便利なオプションをご紹介します。Gutenbergエディターでは、編集インターフェースの左上にシンプルな「やり直し」と「元に戻す」オプションが用意されています。 

これら 2 つのアイコンを使用して、最後の操作を元に戻したりやり直したりできます。 

クイック統計

これはGutenbergエディターが提供する非常に便利な機能です。コンテンツの作成中にクリックするだけで、ページの単語数、使用したブロックの数、見出しや段落の数などを確認できます。 

グーテンベルクブロック

Gutenbergエディタはブロックが中心です。つまり、これらは家を建てるのに使う梁です。

ブログ投稿を作成するときに、投稿のタイトルを追加した後、キャンバス全体にさまざまなブロックを追加できるようになります。

最も頻繁に使用されるブロック、一般的なブロック、インライン要素、書式設定、レイアウト要素、ウィジェットなど、ブロックに対して作成されたいくつかの異なるグループが表示されます。

それぞれのグループを一つずつ見ていきましょう。

最もよく使用されるブロックは、見出し、画像、段落など、ブログ投稿の作成中に最も頻繁に使用されるブロックであることは明らかです。 

共通ブロックにも、多少類似したブロックが含まれます。

デフォルトの Gutenberg ブロックがサイトにとって十分でない場合は、サイトで使用できる新しい Gutenberg ブロック プラグインがいくつかあります。

ブロックのフォーマット

下に便利なブロックがいくつかあります 書式設定 グループ。例えば 　 フォロー中

• クラシックエディター: 何かを編集するために古いクラシックエディターツールバーが必要な場合は、ここにあります。
• カスタム HTML: カスタムHTMLを追加するオプション
• コードを追加: チュートリアル投稿にコードを追加する
• テーブルを追加する: これは非常に便利な追加機能です WordPress エディター。投稿にテーブルを追加するためにプラグインは必要なくなります。

埋め込み

マルチメディア コンテンツやバイラル コンテンツ タイプの増加に伴い、埋め込み機能の重要性が高まっています。

コンテンツプロデューサーは最近、Twitter、Instagram、YouTube のコンテンツを頻繁に使用しています。

Gutenberg エディターを使用すると、ユーザーはさまざまな人気プラットフォームのコンテンツを簡単に埋め込むことができます。

レイアウト関連ブロック

レイアウトブロックはユーザーにとって非常に便利です。ボタンを追加するオプションが組み込まれているため、投稿にボタンを追加するためにショートコードプラグインを使用する必要がなくなりました。

選択できる便利なレイアウト デザイン オプションが多数あります。 

Gutenbergエディタを使った投稿の作成

Gutenberg インターフェースについて理解できたので、エディターを使用してブログ投稿を作成しましょう。

最も頻繁に使用されるブロックを確認し、それらを使用してコンテンツを作成していきます。

ブログ投稿を作成するには、古いエディターと同様に、新しいオプションに移動します。

ステップ1. タイトルと段落

投稿のタイトルを追加して、記事を書き始めましょう。投稿の内容を追加するには、何もする必要はありません。キャンバスをクリックして書き始めるだけです。

ステップ2. 画像の追加

ブログ投稿のテキスト以外で、ブログ投稿で 2 番目に重要なのは、コンテンツの画像です。

あなたはをクリックすることができます +プラス 署名して画像ブロックを追加し、選択した画像を追加します。 

現在、Gutenberg エディターには、ニーズに応じて使用できる画像用のさまざまなオプションがいくつかあります。

• シンプルな画像ブロック
• 画像とテキスト ブロック (レイアウト ブロックの下にあります)
• 表紙イメージ

通常のブログ投稿画像について話しているので、投稿用に 1 つ使用してみましょう。 

ステップ3. ビデオを追加する

ブロックのセクションですでに説明したように、Gutenberg エディターには埋め込みオプションの包括的なリストが付属しています。

そのため、YouTube 動画だけでなく、他のさまざまなサービスのコンテンツを埋め込んで、ブログ投稿を魅力的に見せることもできます。

ブログ投稿にビデオを追加するには

+プラスアイコンをクリックして埋め込みセクションに移動します。リストからYouTubeオプションを選択し、動画のURLを追加すれば完了です。

ステップ4. 行動喚起ボタンの追加

Gutenberg エディターを使い始めると、ボタンのショートコード プラグインは必要なくなります。

エディターには その 独自のボタンブロック。ボタンを追加し、必要に応じてスタイルを設定できます。

ステップ5. テキストに背景色を追加する

Gutenbergでは、 背景 投稿内のテキストを強調表示したい場合は、テキストに色を付けます。 

プロセスは非常に簡単で、強調表示したいテキストを選択すると、右側のバーに色のオプションが表示されるので、背景色とテキスト色を選択するだけで完了です。 

ブログ記事内のテキストを強調表示することで、よりインタラクティブで魅力的な記事にすることができます。また、読者の注意を記事の重要な部分に引き付けるのにも役立ちます。

互換性の問題

Gutenberg エディタの導入は大きな変化であり、それに伴う他のすべての調整にはしばらく時間がかかるでしょう。 

その他にもたくさんのグーグルの WordPress テーマとプラグインはまだエディターと互換性がありません。 

例えば、私たちはプラグインを使って nofollowの 発信リンクですが、新しいエディターでは機能していないようです。

同様に、多くのショートコード プラグインGutenberg には独自のショートコード オプションが付属しているため、は機能しません。

ただし、互換性の問題は一時的なもので、テーマとプラグインは Gutenberg エディターの要件に従って更新されるため、問題はなくなるはずです。

についての記事を作成しました 最高のグーテンベルク対応 WordPress テーマリストから任意のテーマを選択できます。 

Gutenberg は多くの面で優れていますが、多くの部門で改善が必要です。

私たちのサイトではすでに Gutenberg を使用しており、エディターを直接使用した経験があります。

ここでは、エディターに関して私たちが気に入っている点と、問題を引き起こしている点のリストを示します。

グーテンベルクのメリット

• エディターは非常にシンプルで使いやすいです。
• 利用可能なオプションの点で包括的である
• ボタンを追加したり、コンテンツを強調表示したりするのに技術的なスキルは必要ありません
• 新規ユーザーでも、見栄えの良い記事を素敵なプレゼンテーションで作成できるようになります。
• 単純な 1 列のコンテンツだけではなく、最新のレイアウト オプションも用意されています。
• インターフェースはすっきりしていて、気を散らすものがありません
• モバイルデバイスでも完璧に動作します 

グーテンベルクの欠点

• リンクを NEW ウィンドウが表示されますが、追加するオプションはありません nofollowの タグ
• 多くの場所で議論は行われているが、まだ専用のサポートはない
• プラグインとテーマの互換性は大きな懸念事項となる可能性がある
• 多くの重要なプラグインが現時点では正常に機能していません

最後のワード

この記事がGutenbergエディターの理解を深める一助となれば幸いです。私たちも皆さんと同じようにエディターについて学んでいますので、このガイドをさらに分かりやすくするために、エディターについて議論しましょう。

したがって、下のコメント ボックスにコメントや懸念事項を忘れずに記入してください。