今後のWordPressGutenbergエディターを使用するための究極のガイド

公開: 2018-10-30

今後数か月のうちに、WordPressでコンテンツを作成する方法が根本的に変わるでしょう。 長年使用していた現在のテキストエディタはなくなり、新しいWordPress GutenbergEditorに置き換えられます。

このような大きな変化は、おそらく頭の中でいくつかの警報ベルを鳴らしていることです…

ワークフローは中断されますか? 現在のプラグインとテーマは機能し続けますか? この新しいエディターで優れたコンテンツを作成し続けるにはどうすればよいでしょうか。

この投稿では、これらの質問への回答に加えて、さらに多くのことを学びます。

これは、WordPressでコンテンツを作成するすべての人のための究極のWordPressGutenbergエディターガイドです。

あなたは学びます:

  1. WordPress Gutenberg Editorとは何か、なぜ/いつ来るのか、そしていくつかの基本的なFAQへの回答。
  2. 現在のエディター機能を模倣し、グーテンベルクで基本的なブログ投稿を作成する方法。
  3. グーテンベルクをより生産的に使用するためのレーダーの下でのヒント(ライブサイトでの実際の使用経験に基づく)。
  4. グーテンベルクの新機能を利用して、これまでアクセスできなかったコンテンツやレイアウト機能を活用する方法。

この新しいエディターは何があっても登場するので、WordPress Gutenbergエディターに慣れて、リリースされたらすぐに実行できるようにしてください。

グーテンベルク編集者とは何か、さらになぜ気にする必要があるのか

Gutenberg Editorは、WordPressで投稿やページを作成するために使用する現在のWordPressテキストエディターを完全に再考したものです。

編集体験をゼロから真に再構築しているので、再設計ではなく想像と言います。

開発が完了すると、Gutenbergが現在のWordPressテキストエディターに置き換わり、Gutenbergエディターを使用して今後コンテンツを作成します(ただし、現在のエクスペリエンスに固執したい場合はオプションがあります詳細については後で説明します)。

では、グーテンベルク編集者を「完全な再想像」にする理由は何でしょうか。

まず、「WordPressエディター」の意味を一新します。 私が何について話しているのかよくわからない場合は、現在のWordPressTinyMCEエディターは次のようになります。

グーテンベルクエディターガイド1現在のエディター

Wordable使用してGoogleDocsから直接WordPressの投稿を公開している場合は、そこで多くの時間を費やしていない可能性があります。 しかし、エディターの動作に精通している可能性はまだ十分にあると思います。

グーテンベルクエディターが「ブロック」と呼ばれるものを導入

現在のWordPressテキストエディタは、1つの長いMicrosoftWordドキュメントのようなものです。 グーテンベルクは、ブロックと呼ばれるものでそのダイナミックを変えます

単一の編集フィールドではなく、グーテンベルクの各「もの」は独自の「ブロック」です。 Mediumで投稿を書いたことがあるなら、それは同じ考えです。

例えば:

  • テキストの各段落は、独自の個別のブロックです。
  • 画像はそれ自身のブロックです。
  • YouTubeビデオはそれ自身のブロックです。
  • …あなたはその考えを理解します。

次に、一連のブロックを使用してコンテンツを組み立てます。 たとえば、上記と同じコンテンツがグーテンベルクでどのように表示されるかを次に示します。 4つの異なるブロックがあります。

  • 3つの別々の段落ブロック
  • 1つの画像ブロック

グーテンベルクエディターガイド2グーテンベルクエディター1

このブロックベースのアプローチの重要性は、コンテンツとレイアウトのより高度な機能のロックを解除することです。

たとえば、列を導入したり、ボタンを挿入してスタイルを設定したり、現在のエディターでは実行できない、または現在のエディターでHTML / CSSを必要とするその他の多くのアクションを実行したりできます。

後で、ブロックについてさらに詳しく説明します。 しかし、今すぐ足を濡らしたい場合は、ここに進んでグーテンベルクエディターのライブデモを試してみることができます。何もインストールする必要はありません。

WordPressコアチームがこの変更を行っている理由は次のとおりです

WordPressは、その生涯のほとんどで、同じ基本エディター(TinyMCE)を使用してきました。 デザインはあちこちで変更されているかもしれませんが、コア機能は決して揺らいでいません。

では、なぜ今変更するのですか? 過去15年間機能した場合、なぜ次の15年間機能し続けることができないのでしょうか。

いくつかの理由があります。

まず第一に、現在のエディターは、この時代のカジュアルユーザーには制限が多すぎます。 WordPressはあなたが想像できるものなら何でも作成することを可能にしますが、それはあなたがいくつかのHTML / CSSを知っている場合にのみそれを行います

両方とも〜一年間その使用を倍増している)Squarespaceとウィックスなどの視覚的なウェブサイトビルダーとの競争でそれを組み合わせて、WordPressのコアチームはWordPressがそのエッジを維持するために、より柔軟な編集経験が必要だと感じたなぜあなたは理解することができます。

第二に、グーテンベルクは忙しいWordPressユーザーが持っている多くの異なるインターフェースを統合する機能を提供します。 ここではあまり技術的になりたくありません。 ただし、サードパーティのプラグインを使用している場合は、WordPressワークフローの一部であるさまざまなショートコード、メタボックス、および設定領域がある可能性があります。

グーテンベルクは、これらすべての異なるインターフェースをブロックシステムに統合することができます。

第三に、グーテンベルクはワードプレスに最新のテクノロジーを導入しています。 具体的には、React。 これは、エディター自体に役立つだけでなく、サードパーティの開発者がこれらの最新テクノロジーを使用できるようにします。

最後に、コンテンツ編集はこのプロセスの始まりにすぎません。 現在、グーテンベルクは投稿やページの作成方法を変更する予定ですが、最終的な目標は、グーテンベルクを完全なビジュアルWebサイトデザインに移行させることです。

新しいGutenbergエディターへの移行の長所と短所

それで…グーテンベルクはあなたにとって良いことになるのでしょうか?

ええと、それは実際にはWordPressコミュニティではかなり分裂的な問題であり、双方に情熱的な議論があります。

一方では、グーテンベルクの利点を宣伝する人々がいます。

  • コンテンツの可能性の拡大– Gutenbergは、ボタンや引用符のプルなどの事前に作成されたブロックを追加します。これにより、カスタムCSSを必要とせずにコンテンツをより細かく制御できます。 さらに、サードパーティのプラグインは独自のコンテンツブロックを追加できるため、柔軟性がさらに高まります。
  • レイアウトの可能性が増える–新しいコンテンツの可能性を超えて、カスタムコードを必要とせずに列や区切り文字を含める機能など、新しいレイアウトオプションも利用できます。
  • 統一されたエクスペリエンス–サードパーティのプラグインからコンテンツを挿入するためにショートコードを使用する必要はなく、それらのプラグインは独自のブロックを作成できるため、よりシンプルで統一された編集エクスペリエンスが作成されます。
  • モバイルフレンドリー– Gutenbergはデフォルトでモバイルでうまく機能し、どのデバイスからでもコンテンツを作成または編集できます。

しかし一方で、この野心的なプロジェクトに関するいくつかの大きな問題を指摘する人々がいます。

  • 下位互換性インターネット全体の約32%が現在のWordPressエディターを使用しているため、まったく新しい編集エクスペリエンスに移行することは非常に困難です。 基本的に、古いコンテンツを含むエッジケースが非常に多いため、シームレスな移行を保証することは困難です。
  • 開発者にとって厳しい–テーマとプラグインの開発者は、プラグインとテーマにGutenbergの互換性を組み込む必要があり、古い拡張機能が常に完全に機能するとは限りません。 互換性の問題が発生する可能性のある古いプラグインは数万あります。
  • ユーザー教育新しいユーザーはグーテンベルクを好むかもしれませんが、古いユーザーは新しいワークフローを学ぶ必要があります。これは、技術者以外のクライアント向けのサイトを構築した開発者にとっては特に困難です。

では、WordPress Gutenberg Editorは良いことですか、悪いことですか?

さて、ここ個人的な意見を差し挟んでいますが、グーテンベルクは長期的には前向きな変化なると思います。 外部ソリューションやカスタムコードソリューションを必要とせずに、コンテンツの外観と機能をより細かく制御できます。

そうは言っても、使用する可能性のある既存のプラグインとの互換性に関しては、短期的に痛みが増す可能性は間違いありません。 そして、WordPressの巨大なユーザーベースに新しいインターフェースを学ぶように強制するのは難しいでしょう。

グーテンベルクエディタはいつリリースされますか?

簡単な答えは–正確な日付はわかりません。 GutenbergはWordPress5.0の一部としてリリースされますが、正確なWordPress5.0のリリース日についてはまだ正式な発表はありません。

しかし、今では大まかな考えがあります。 最近のWordPress5.0キックオフミーティングによると、予定日は早ければ2018年11月19日、遅くとも2019年1月22日です

長い答えは次のとおりです。

現在、 Gutenberg Editorは、ベータ版のステータスではプラグインとして存在します。 必要に応じて、実際にプラグインをインストールして、今日からサイトで使用を開始できます(ただし、ベータ版であるため、お勧めしません)。

ベータ版とテストが終了すると、WordPressチームはGutenbergエディターをWordPress5.0のコアWordPressソフトウェアにマージします。 次に、WordPressサイトをWordPress 5.0に更新すると、Gutenbergエディターが現在のTinyMCEエディターを自動的に置き換えます。

Gutenbergエディターがリリースされると、既存のコンテンツはどうなりますか?

グーテンベルクが現在のエディターに取って代わっているため、既存のすべてのコンテンツで何が起こるのか疑問に思われるかもしれません。

心配しないでください–グーテンベルクは下位互換性があるように構築されています

現在のところ、グーテンベルクは古いコンテンツをすべて1つのクラシックブロックにまとめています。 たとえば、Gutenbergをインストールしたときの上記のTinyMCEの例は次のようになります。

グーテンベルクエディターガイド3後方1

経験は少し厄介ですが、必要に応じて、その単一のクラシックブロック内で作業を続けることができます。 または、 3つのドットのアイコンをクリックして、古いコンテンツをグーテンベルクブロックに変換することもできます。

グーテンベルクエディタガイド4逆変換

古いコンテンツをブロックに変換すると、他のGutenbergEditorの投稿と同じように機能します。

グーテンベルクエディターは古いコンテンツにこの単一のクラシックブロックアプローチを使用しているため、トランジションの問題発生しません。 ただし、サードパーティのプラグインで問題が発生する可能性があるため、引き続き警戒を怠らず、古いコンテンツを確認する必要があります。

グーテンベルクエディターはすべてのWordPressテーマで動作しますか?

はい! 繰り返しになりますが、グーテンベルクがデフォルトのエディターになるため、当然、WordPressテーマで動作する必要があります。

そうは言っても、開発者がグーテンベルクに特別な機能を追加するためにできることがいくつかあるので、すぐに多くのテーマのマーケティング資料に「グーテンベルク互換」が表示されるようになります。

テーマをグーテンベルクと互換性のあるものにする理由は次のとおりです。

  • 特別なブロックスタイリング–テーマはコアグーテンベルクブロックに特別なスタイリングを追加できます。 これにより、グーテンベルクのすべてのブロックがテーマのデザインと完全に一致するようになります。
  • 全幅配置– Gutenbergを使用すると、画面全体に広がる全幅画像を作成できますが、テーマ開発者が特に有効にしている場合に限ります。
  • 編集者のスタイリング–テーマ開発者は、バックエンドのグーテンベルク編集インターフェースに独自のスタイリング追加することもできます。 これにより、より視覚的なデザインアプローチが作成されます。 ここで例見ることができます

WordPress 5.0がリリースされたら、Gutenbergエディターを使用する必要がありますか?

番号! GutenbergはWordPress5.0のデフォルトのエディターになりますが、実際に使用する必要はありません。

現在のWordPressエディターを引き続き使用したい場合は、グーテンベルクの痕跡をすべて非表示にして現在の編集エクスペリエンスを復元する公式のクラシックエディタープラグインがあります。

または、このプラグインを使用すると、両方のエディターを使用して、投稿ごとに切り替えることができます。

WordPress Gutenbergチュートリアル–新しいエディターの使用方法

さて、グーテンベルク101のクラッシュコースを終えたので、グーテンベルクエディタを実際に使ってみましょう。

このセクションの目的は、Gutenberg Editorを理解して、リリースされたらすぐに実行できるようにすることです。

はじめに、GutenbergEditorインターフェイスのコア要素を理解するのに役立つグラフィックを次に示します。

グーテンベルクエディタチュートリアル基本02

  1. これは編集者の本文です。 ここでコンテンツを操作します
  2. これらのボタンを使用すると、新しいブロック追加できます。 画像、ビデオ、またはその他のブロックコンテンツを追加する場合は、それらを使用します。
  3. ここに投稿のタイトルを追加します。
  4. これらのオプションを使用すると、下書きを保存したり、プレビューを表示したり、最終的に投稿を公開したりできます。
  5. ブロックを選択していない場合、このサイドバーを使用すると、カテゴリや注目の画像など、投稿の全体的なオプションを管理できます。 あなたが選択したブロックを持っているとき、それはあなたのその特定のブロックのためのオプションを提供します。

次に、新しいブロックを追加すると、使用可能なすべてのブロックのリストが表示されたこのポップアップウィンドウが表示されます。 次のいずれかを実行できます。

  1. アコーディオンタブを使用して、使用可能なすべてのブロックを参照します
  2. 必要なブロックを直接検索します

グーテンベルクエディタチュートリアル基本01 1

グーテンベルクエディターで簡単なブログ投稿を作成する方法

このセクションでは、現在のWordPressエディターですでに実行できるのと同じタイプのアクション実行する方法を学習します。

基本的に、既存のワークフローをグーテンベルクエディターに適合させる方法を学びます。 次に、次のセクションでは、グーテンベルクエディターの新機能を活用する方法を紹介します。

基本的なテキストコンテンツの追加またはフォーマット

基本的な段落テキストの内容は単純です。クリックして入力するだけです。 唯一の直接的な違いは、 Enterキーを押して新しい行を作成するたびに、Gutenbergが次の段落の新しいブロックを自動的に作成することです。

グーテンベルクエディタチュートリアル基本11

ブロックをクリックすると、次のことができる書式設定ツールバーが表示されます。

  • 配置を変更する
  • 太字と斜体を追加
  • リンクを挿入
  • 等。

基本的に、これは現在のエディターのツールバーとよく似ています。

グーテンベルクエディタチュートリアル基本21

後で、このデフォルトのアプローチに代わる適切な方法を紹介します。

ツールバーのフォーマットオプションに加えて、右側のサイドバーにもいくつかのオプションがあり、次のことができます。

  • テキストのサイズと色を制御する
  • ドロップキャップを追加する

グーテンベルクエディタチュートリアル基本31

これまでのところ十分に単純ですよね?

見出しの作成(H1、H2など)

見出しを作成するには、いくつかの異なるオプションがあります。

まず、 +アイコンを使用して、新しい見出しブロックを挿入できます。

グーテンベルクエディタチュートリアル基本41

見出しブロックを挿入したら、入力してテキストを追加し、サイドバーまたはツールバーを使用して、使用する見出しを制御できます(H2とH3など)。

グーテンベルクエディタチュートリアル基本51

または、次のこともできます。

  • [ブロックタイプ変更]ボタンを使用して、通常の段落ブロックを見出しブロックに変換します。
  • マークダウンを使用して見出しを作成します(たとえば、「##これは見出し2です」)

これらの2つの方法を説明するGIFを次に示します。

グーテンベルクエディタチュートリアル基本61

画像、ビデオ、またはその他のメディアコンテンツの挿入

これで、基本的なテキストと見出しの両方を作成してフォーマットできるようになりました。 それはあなたをそこへの道のほとんどに連れて行くでしょう!

しかし、メディアコンテンツを挿入するのはどうですか?

メディアコンテンツを挿入するには、同じ+アイコンを使用してブロックを挿入できます。

既存のコンテンツの下にメディアコンテンツを挿入するには、左上隅の+アイコンを使用します。

または、コンテンツを挿入する場所にカーソルを合わせて、既存のコンテンツの間に新しいブロックを挿入することもできます。 次に、新しいブロックの左側にある[ブロック追加]ボタンを使用します。

グーテンベルクエディタチュートリアル基本7

[ブロック挿入]ポップアップを開くと、次から選択できます。

  • 画像–WordPressメディアライブラリまたは外部URLから画像を挿入します。
  • ビデオ–WordPressメディアライブラリまたは外部URLからビデオを埋め込みます。
  • 埋め込み– YouTube、Vimeo、Spotify、SoundCloud、Instagram、およびその他の多数のソースからのコンテンツを埋め込むのに役立つ個別のブロック。

たとえば、WordPressメディアライブラリから画像を挿入すると次のようになります。

グーテンベルクエディタチュートリアル基本81

そして、YouTubeビデオを埋め込む方法は次のとおりです。

グーテンベルクエディタチュートリアル基本91

他のプラグインからのショートコードの挿入

ほとんどのWordPressユーザーと同じように、ショートコードを使用して投稿またはページのコンテンツにプラグインを含めることができます。

最終的には、これらのタイプのプラグインが、直接使用できる独自のGutenbergブロックを作成することが目標になります(これについては後で詳しく説明します)。 ただし、それまではShortcodeブロックを使用して、Gutenbergコンテンツにショートコードを含めることができます。

グーテンベルクエディタチュートリアル基本101

コンテンツの再配置(2つのオプションがあります)

さて、これまでのところ簡単です…しかし、ブロックの順序を変更したい場合はどうでしょうか。

そのためには、2つのオプションがあります。

まず、マウスをブロックの左側に置くと*、ドラッグアンドドロップを使用してブロックを移動できます。

グーテンベルクエディタチュートリアル基本111

次に、上矢印または下矢印を使用して、ブロックを1つ上または下にシフトすることもできます。

グーテンベルクエディタチュートリアル基本12

*ドラッグアンドドロップを有効にするには、上矢印と下矢印の間の6つのドットの上にマウスを置きます。

舞台裏の情報(カテゴリ、URLスラッグなど)の操作

さて、上記は基本的なブログコンテンツを追加する方法をカバーしているはずです。 しかし、公開用の投稿を準備する他のすべての舞台裏の部分はどうですか?

ほとんどのアクションでは、サイドバーの[ドキュメント]タブを使用できます。 これはあなたがするところです:

  • 公開日/投稿のスケジュールを事前に選択してください
  • 著者を選択してください
  • カテゴリとタグを追加する
  • 注目の画像を選択してください
  • 抜粋を入力してください

さらに、そのサイドバーの上にあるボタンを使用して、次のことができます。

  • 投稿をプレビューする
  • 下書きを保存する( Gutenbergは下書きを自動的に保存するため、通常は手動でこれを行う必要はありません
  • 投稿を公開する

グーテンベルクエディタチュートリアル基本13

唯一注意が必要なのは、投稿またはページのURLスラッグを設定することです。 それを編集するには、タイトルをクリックします。 次に、スラッグを編集できるようになります。

グーテンベルクエディタチュートリアル基本141

Yoast SEOのようなプラグインはどうですか? それらはどのように機能しますか?

コンテンツごとに構成する必要のある他のバックエンドプラグインがある可能性があります。

これらのプラグインを操作する方法は2つあります。

まず、多くの開発者がすでにグーテンベルクの直接互換性に取り組んでいます。 たとえば、Yoast SEOはすでにGutenbergをサポートしており、同じドキュメントサイドバーから直接YoastSEO設定を構成します。

グーテンベルクエディタチュートリアル基本141 1

Gutenbergをまだサポートしていないレガシープラグインの場合でも、TinyMCEエディターの場合と同じようにメタボックスを使用できます。

グーテンベルクエディタチュートリアル基本142 1

グーテンベルクでより生産的に作業するための6つのヒント

Gutenberg Editorを初めて使用するときは、少し遅く感じるかもしれません。 これらのヒントは、プロセスをスピードアップし、必要なブロックをすばやく挿入してカスタマイズするのを容易にするのに役立ちます。

1。「/」を入力してブロックをすばやく挿入し、時間を大幅に節約します

上で示したブロックを挿入する方法は、利用可能なすべてのブロックを確認できるため、グーテンベルクを使い始めたばかりの場合に役立ちます。

ただし、必要なブロックに慣れたら、クイック挿入機能を使用して、ブロックをはるかに高速に挿入できます。

+アイコンをクリックするのではなく、次のようにします。

  • Enterキーを押して、新しいブロックを作成します
  • 「/」を入力します
  • ブロックの名前の入力を開始します

入力すると、グーテンベルクは一致するブロックを自動提案します。 次に、 Enterキーを押して、必要なブロックを挿入します。

ここでそれが実行されています:

グーテンベルクエディタチュートリアル基本151

それはずっと速いですよね?

2.すばやく編集するためのキーボードショートカットを学ぶ

グーテンベルクには、作業をスピードアップできるキーボードショートカットが満載です。

Ctrl + Alt + H (Windows)またはCMD + Alt + H (Mac)をクリックすると、これらのショートカットの完全なリストを表示できます。

グーテンベルクエディタチュートリアル基本151

完全なリストを読む必要がありますが、ここに最も役立つものがいくつかあります。

  • Ctrl + S –下書きを保存します。
  • Ctrl + Z –元に戻すまたはCtrl + Y –やり直し。
  • Ctrl + Alt + Backspace –選択したブロックを削除します(本当に便利です)。
  • Ctrl + Shift + D –選択したブロックを複製します。
  • Ctrl + Alt + T –選択したブロックの前に新しいブロックを挿入します。
  • Ctrl + Alt + Y –選択したブロックの後に新しいブロックを挿入します。

Ctrl + Bで太字にしたり、 Ctrl + Vで貼り付けたりするなど、ほとんどのグローバルショートカットを使用することもできます。

3.デスクトップからGutenbergコンテンツに画像をドラッグします

たくさんの画像を含める必要がある場合、これはもう1つの巧妙なトリックです。

画像ごとに新しい画像ブロックを手動で作成する必要はなく、デスクトップ上のフォルダから投稿に含めることができる場所に画像を直接ドラッグするだけです。

WordPressはそれを自動的にメディアライブラリにアップロードし、そこに挿入します。 注意すべき点は1つだけです。画像をドラッグするときに青い線が表示されていることを確認してください。そうしないと、機能しません。

グーテンベルクエディタチュートリアル基本16

4.固定編集ツールバーを追加します

グーテンベルクで難しいと感じる人がいることの1つは、異なる段落ブロック間をクリックすると、編集ツールバーが常に点滅して存在しなくなることです。

それが気に入らない場合は、[統合ツールバー]オプションをオンにして、Gutenbergインターフェイスの上部に常に表示されるツールバーを表示できます。

グーテンベルクエディタチュートリアル基本171

5.見出し、リストなどにマークダウン構文を使用します。

マークダウンを使用したい場合は、グーテンベルクにいくつかのマークダウン構文を組み込むことができます。

例えば:

  • ## – H2を作成しますこれはすでに見ました–見出しブロックに変換されます)。
  • * –順序付けされていないリストを開始します。
  • 1. –順序付きリストを開始します。
  • > –ブロック見積もりを作成します(見積もりブロックに変換されます)。

すべてのマークダウン構文を使用することはできません。 しかし、上記の例は、より迅速なフォーマットにすでにかなり役立ちます。

グーテンベルクエディタチュートリアル基本181

6.必要に応じてHTMLを直接編集する

HTMLを直接編集したい場合は、右上隅にある3つのドットをクリックするか、 Ctrl + Shift + Alt + Mショートカットを使用してコードエディタにアクセスできます。

グーテンベルクエディタチュートリアル基本181 1

グーテンベルクの新機能–列、ボタンなどを活用!

了解しました。次の内容について説明しました。

  • グーテンベルクを使用して基本的なブログ投稿を作成する方法。
  • グーテンベルクでの作業をスピードアップするためのヒント。

それでは、グーテンベルクでできるクールな新しいことをいくつか見てみましょう。 これらは、WordPressチームがグーテンベルクで前進することを決定した理由を説明するのに役立つはずのエキサイティングな機能です。

挿入ボタン–HTMLは必要ありません

古いエディターでは、ボタンを作成する唯一の方法は、CSSクラスを手動で追加するか、サードパーティのプラグインを使用することでした。

グーテンベルクでは、ボタンブロックを追加するだけです。 ボタンのテキストを編集するには、クリックして入力するだけです。 また、色を変更するには、サイドバーを使用できます。

グーテンベルクエディタチュートリアル基本19

複数列のレイアウトを作成する

古いエディターでは、独自のカスタムHTMLまたはサードパーティのプラグインなしで複数列のレイアウトを作成する方法はありませんでした。

グーテンベルクでは、 Columnsブロックを追加するだけです。 次に、異なる列に他のブロックを追加できます。

グーテンベルクエディタチュートリアルベーシック20

全幅のストレッチ画像を作成する

テーマがそれをサポートしている場合は、画面全体に画像を拡大できる新しい全幅配置オプションが表示されます。これにより、いくつかの興味深いコンテンツレイアウトが開きます。

グーテンベルクエディタチュートリアル基本211

再利用可能なブロックテンプレートを作成する

同じブロックの組み合わせを定期的に使用している場合は、再利用可能なブロックグループを作成することで時間を節約できます。

まず、クリックしてドラッグし、含めるすべてのブロックを選択できます。 次に、 3つのドットを使用して再利用可能なブロック追加できます。

グーテンベルクエディタチュートリアル基本22

名前を付けます。 次に、他のブロックと同じように、そのテンプレート全体を挿入できます。

グーテンベルクエディタチュートリアル基本231

サードパーティのプラグインを使用して、ブロックと機能をさらに追加できます

ここから、グーテンベルクはさらに涼しくなり始めます。

サードパーティのプラグインは、グーテンベルクのデザインで使用できる独自のブロックを追加できます。

これがあなたに利益をもたらすことができる2つの方法があります:

  • すでに使用しているプラグインは、独自のグーテンベルクブロックを作成します。 たとえば、イベントカレンダープラグインを使用する場合、プラグインのイベントブロックを使用するだけでイベントを挿入できます。
  • 開発者は、デザインをより細かく制御できる一般的な新しいコンテンツブロックを大量に追加する専用のGutenbergプラグインを作成しています。

たとえば、無料のStackableプラグインをチェックしてください。 インストールしてアクティブ化すると、グーテンベルクにまったく新しいスタッカブルブロックのセットが表示されます。

グーテンベルクエディタチュートリアル基本241

そして、これらのブロックを使用して、価格表や紹介文を挿入するなど、かなりクールなことを行うことができます。

グーテンベルクエディタチュートリアル基本251

これはWordPressGutenbergエディターの始まりにすぎません

以上です! ここまで進んだら、WordPress 5.0がリリースされるとすぐに、すぐに実行に移す準備ができているグーテンベルクの第一人者になるはずです。

新しいワークフローを学ぶことは、ほとんどの人の「週末を過ごす楽しい方法」のリストにはありませんが、WordPressを使用する人にとっては、グーテンベルクの内外をマスターすることが不可欠です。

グーテンベルク現在コンテンツを作成する方法に影響を与えるだけでなく、今後のWordPressでも大きな役割を果たします。

上で見たものはすべて、グーテンベルクのフェーズ1にすぎません。 フェーズ2では、グーテンベルクはページテンプレートに移行し、フェーズ3では、グーテンベルクを完全なWebサイトカスタマイズ用のツールに変換します。

それで…グーテンベルクと仲良くなりましょう。これから数年でたくさんのグーテンベルクを目にすることになるからです!