グーテンベルクとは何ですか？ WordPress ビルダーのステップバイステップガイド

私がこう言うと、あなたも同意してくれると思います。Gutenberg のビジネス全体が混乱しています。

まず、新しいブロックエディターは使いにくいですか?つまり、お気に入りのツールがどこに行ったのかわかりません。投稿を作成するのにおそらくもっと時間がかかりましたよね?

もしかしたら、リンク (アフィリエイトかどうか) を追加すると、かなりの変化が起こり、がっかりしたかもしれません。おそらく、テキストの横に画像を追加する際に問題が発生したのでしょう。

おそらく、複数の列を追加しようとしたが、期待どおりに動作しなかったのでしょう。そうでない場合は、PDF ファイルを簡単に追加できないか、恐ろしい「更新に失敗しました」というメッセージが何度も表示される可能性があります。

まあ、もう心配しないでください。私もつい最近まであなたの立場にいたのですが、今では Gutenberg を使うのがとても楽しいと感じています。確かに学習には時間がかかりますが、今日の投稿を終える頃には、グーテンベルクについての見方が変わるでしょう。

グーテンベルクエディターとは何ですか?

あなたは、WordPress のデフォルトのブロックエディターである Gutenberg を見ています。

WordPress 5.0 以降を使用している場合は、Gutenberg として有名な、新しくてピカピカの WordPress エディターに出会ったことがあるはずです。

そして、他の多くのユーザーと同じように、あなたも革新的なエディターを使いたいと思っていますが、Gutenberg は複雑であるため躊躇しています。

あるいは、初めてグーテンベルクに会ったとき、さまざまなことがうまくいかなかったのかもしれません。結局のところ、開発者はブロックエディターと互換性のあるテーマとプラグインを作成しており、現在も作成し続けています。

それで、あなたはすぐにクラシックエディターに戻しましたが、ところで、私たちはそれで問題ありません。 WordPress は 2022 年以降、クラシックエディターをサポートしなくなることに注意してください。さらに、Gutenberg が提供する追加の特典をすべて逃すことになります。

機能の点では、クラシックエディターと Gutenberg は同じことを行います。どちらのツールも、コーディングなしでコンテンツを作成するのに役立ちます。

しかし、私たちは古い WYSIWYG エディターに慣れすぎているため、新しい Gutenberg UI に適応することは、完全に混乱するわけではないにしても、少し異質であると感じます。少なくとも私はそう思います。

しかし、グーテンベルクとは一体何なのでしょうか？

Gutenberg は、新しいデフォルトの WordPress エディターです。従来のビジュアル/テキストエディターとは異なります。 Gutenberg は、現代の多くのページビルダーと同じようにコンテンツブロックを使用します。

クラシックエディターよりも直感的な機能が付属しており、その場でリッチメディアコンテンツを作成できます。 WordPress の投稿でもページでも、驚くべきレイアウトをすばやく作成できるようになりました。

また、いくつかのアドオンを使用すると、Gutenberg は Brizy、Elementor、Divi などの確立された WordPress ページビルダーと有利に競合できます。

唯一の欠点は、ページビルダーは主にページビルダーであるため、多くの場合、より多くの機能を提供することです。同時に、Gutenberg はまだ非常に若いため、ブロックエディターは飛躍的に成長することが期待できます。

今日の投稿では、Gutenberg エディターを使用して WordPress 投稿を作成するエキサイティングな時間を過ごします。 Gutenberg を使用してプロのようなコンテンツを作成できるように、あらゆる細かい詳細や機能を網羅することを目指しています。

準備はできたか？もしそうなら、その WordPress 投稿を作成してみましょう。

Gutenberg を使用して WordPress 投稿を作成する方法

WordPress Web サイトを運営している場合は、おそらくページよりも多くの投稿を作成するでしょう。次のセクションでは、Gutenberg で WordPress 投稿を最初から作成します。私が Gutenberg をテストしたときと同じくらい楽しんでいただければ幸いです。

それでは、以下のスクリーンショットで強調表示されているように、[投稿] > [新規追加] に移動します。

そうすることで、以下に示す Gutenberg エディターが直接表示されます。

かなりきれいですね。さて、袖をまくって本題に取り掛かりましょう。

タイトルを追加する

しっかりしたタイトルがないと記事は書けません。良い点は、Gutenberg ではタイトルを驚くほど簡単に追加できることです。

上の画像で詳しく説明しているように、最初に表示されるブロックはドキュメントの上部にあるタイトルです。投稿のタイトルを作成するには、ブロック内に入力します。 A、B、C のようにシンプルです。

パーマリンクを編集する必要がありますか?以下に示すように、タイトル ブロックで [編集] ボタンをクリックすると、これを簡単に行うことができます。

タイトルを追加したら、ENTER キーを押して新しい行を開始します。そうそう、Gutenberg では、従来の WordPress エディターで愛用していたネイティブナビゲーションが保存されています。

新しい段落の追加

ENTER キーを押すと、上に示すように、新しい段落ブロックが作成されます。テキストを入力する前に、ブロックにいくつかのオプションが表示されます。詳細については、下の番号付きの画像を参照してください。

ノート。あなたはできる：

新しい段落ブロックを他のブロック (画像、見出し、表紙、ギャラリー、WooCommerce、フォームなど) に変換します。
ショートカットを使用して段落ブロックを画像ブロックに変更します
段落ブロックを見出しブロック (H2、H3、H4) に変更します。
段落ブロックをカバー画像ブロックに変換します

説明のために、最初の段落はこの後の紹介用に取っておきます。テキストを追加すると、以下に示すように書式設定ツールバーが表示されます。

書式設定ツールバーを使用すると、次のことができます。

段落を詩、引用、見出し、リスト、コード、およびフォーマット済みテキストに変換します
コンテンツの太字、斜体、~~取り消し線~~、および下線
テキストを左揃え、右揃え、中央揃え、両端揃えにする
新しいタブでも開くことができるリンクを追加する
インライン画像を挿入します (はい、存在します!)
ブロック設定を非表示にする
ブロックを複製する
現在のブロックの前後にブロックを挿入します (この場合、それが最初の段落なので、前には何も追加せず、後にのみ追加します。) 見た目が良いため、必要に応じて最初の段落の前にカバー画像ブロックを追加できます。良い
ブロックを HTML として編集する
現在のブロックを再利用可能なブロックに追加して、他の投稿で使用できるようにします
ブロックを完全に削除します

以下に示すように、サイドバーメニューの [ブロック] タブで利用可能なオプションを使用して、段落ブロックをさらにカスタマイズできます。

上の画像に関するいくつかの注意事項:

ここで [ブロック] タブを選択すると、すべてのブロックのオプションと設定が表示されます。
ここでフォントサイズを選択し、ドロップキャップを有効にします
段落に背景色を追加します。説明のために青に設定しました。文字の色をカスタマイズすることもできます。どちらの場合も、カスタムカラーを無制限に追加できます
ここでカスタム CSS クラスを追加できます。つまり、ブロックに追加の CSS スタイルを追加できます。
青色の背景とドロップキャップは Gutenberg エディターですでに適用されています

サイドバーの「ドキュメント」タブ

サイドバーメニューには別のタブがあります。以下に示すように、[ドキュメント] タブをクリックします。

ここで、上の画像のメモを以下に示します。

ここをクリックして [ドキュメント] タブに切り替えます。
ここでは、投稿をスケジュールし、公開設定を非公開または公開に設定し、投稿を審査待ちステータスに設定し、投稿形式を選択して作成することができます。粘着ポスト
このセクションではパーマリンクを編集できます
ここで新しいカテゴリを選択または作成できます
投稿にタグを追加する
アイキャッチ画像を設定する
マニュアルの抜粋を作成する
コメント、ピンバック、トラックバックを許可する

ご覧のとおり、段落ブロック (および投稿全体) を希望どおりにデザインするためのオプションがたくさんあります。ちなみに、ブロックごとに異なる設定が付いていますが、これについては後ほど説明します。

最初の段落の後で、ENTER キーをもう一度押して、新しい行 (または段落ブロック) を作成します。次に、最初の段落の下に画像を追加してみましょう。

グーテンベルクで画像を追加する

写真は百聞は一見に如かずと言いますが、画像のないブログ投稿は退屈です。 Gutenberg を使用して WordPress 投稿に画像を追加するには、いくつかのオプションがあります。

先ほどENTER キーを押すと、新しい段落ブロックがトリガーされました。 Gutenberg は直観的であるため、下の画像で強調表示されているように、プラス (+)、画像、またはカバーのアイコンをクリックして画像を追加できます。

いくつかのメモ:

プラス (+) アイコンを使用して画像を追加できます
ここで画像を簡単に追加できます
このオプションを使用すると、カバー画像を追加できます (これらは通常、他の写真よりも大きくなります。ちなみに、カバー画像にテキストを追加することもできます)

プラス (+) アイコンのいずれかをクリックしてください。次に、以下に示すように、[画像] タブをクリックします。

[画像] タブをクリックすると、以下のスクリーンショットに示す画像ブロックが読み込まれます。

画像ブロックを使用すると、画像をアップロードしたり、URL やメディアライブラリから画像を追加したりできます。このプロセスでは、次の画像に示すように、メディア画面設定またはブロックサイドバーを介して、代替テキスト (SEO にとって重要)、キャプション、説明を追加できます。

通常のメディア設定…

…そして画像のブロック設定。

今日はここで何か学んでいますか？そうだといい。次へ移りましょう。

画像を追加すると、Gutenberg はそのすぐ下に新しい段落ブロックを追加します。必要なものを追加できますが、説明のために、テキストを追加し、その下にボタンを追加しました。

ダウンロード可能なファイルを追加する方法。 PDF、画像、ビデオなど

Gutenberg を使用すると、ダウンロード可能なファイルを WordPress の投稿またはページに非常に簡単に追加できます。

新しい段落ブロックで、プラス（+）アイコンをクリックし、共通ブロックに移動して、以下で強調表示されているようにファイルタブをクリックします。

これにより、次のブロックが起動されます。

[ファイル] ブロックから、新しいファイルをアップロードしたり、メディアライブラリからファイルを追加したりできます。ファイルを追加すると、下の画像にあるように、Gutenberg によってかわいいダウンロード ボタンが自動的に追加されます。

オプションを試してみることができます。たとえば、「無料 Gutenberg PDF チェックリスト」のタイトルや [ダウンロード] ボタンを編集/削除できます。 CSS クラスをブロックに追加し、希望する方法でスタイルを設定できます。

グーテンベルクでの引用の追加

次に、引用を追加しましょう。引用は魅力的でキャッチーで、要点を理解するのに役立ちます。新しい行でプラス (+) 記号をクリックし、[共通ブロック] に移動して、以下に示すように [引用] タブをクリックします。

これにより、以下のスクリーンショットで強調表示されているように、投稿に引用ブロックが追加されます。

上の右側のサイドバーにある引用ブロックの設定に気づきましたか?

引用を追加するには、ブロック内に入力します。これが私の結果です。

すごいですね。

Gutenberg にメディア埋め込みを追加する

Gutenberg には、YouTube、Vimeo、Facebook、SoundCloud、WordPress、Slideshare などの 30 以上のサイトからビデオやその他のメディアを埋め込むためのいくつかのブロックが付属しています。

コンテンツを埋め込むには、プラス (+) アイコンをクリックし、[埋め込み] に移動してサイトを選択します。たとえば、以下に示すように YouTube が必要でした。

次に、下の画像に示すように、YouTube 動画の URL をコピーして貼り付け、[埋め込み] ボタンをクリックします。

[埋め込み] ボタンを押すとすぐに、以下で強調表示するように、Gutenberg はリンクを自動的にビデオに変換します。

ずっと順風満帆。次に、行動喚起 (CTA) の作成に最適なスタンドアロンボタンを追加しましょう。

Gutenberg にボタンを追加する方法

この時点では、ブロックを追加するのに苦労する必要はありません。プラス (+) をクリックしてブロックを選択するだけです。これ以上簡単なことはありません。

では、ボタンを追加するにはどうすればよいでしょうか?

新しい行（またはブロック）でプラス（+）アイコンをクリックし、レイアウト要素に移動して、以下に示すようにボタンタブをクリックします。

これにより、以下で詳しく説明するボタン ブロックに移動します。

上の画像からわかるように、ボタンのテキストを編集してリンクを追加できます。さらに、画面右側のサイドバーメニューからボタンをカスタマイズできます。

数回クリックした後、これが得られたものです。

ちなみに、ボタンに読みにくい色の組み合わせを使用した場合はグーテンベルクが即座に通知します。素敵ですね?

Gutenberg で列を追加する方法

美しいボタンを配置したら、いくつかの列を追加しましょう。 2 つの列を追加しますので、注意深くフォローしてください。

やるべきことは次のとおりです。以下の画像に示すように、プラス（+）アイコンをクリックし、[レイアウト要素] に移動して [列] タブをクリックします。

Gutenberg はデフォルトで 2 つの列を追加します。下の画像を参照してください。すでに列にコンテンツを追加していることを思い出してください。

これが私を魅了します:

数秒間の作業には悪くありません。しかし、列を作成したくないかもしれません。テキストの隣に画像を表示したい場合があります。

それに対するブロックはありますか？はいあります！

Gutenberg でテキストの横に画像を追加する方法

テキストの横に画像を追加したいですか?もしそうなら、次のセクションを気に入っていただけるでしょう。

いつものように、プラス（+）アイコンをクリックし、レイアウト要素に移動して、以下に示すようにメディアとテキストをクリックします。

以下に示すように、メディアとテキスト ブロックが表示されます。

次に、画像/ビデオ/メディアをアップロードするか、メディアライブラリから画像/ビデオ/メディアを追加します。その後、下の画像に示すように、メディアの横にテキストを追加します。

私はメディアとテキスト ブロックをいじってみたところ、次のことを思いつきました。念のため言っておきますが、ここでもボタンを押すことができました 🙂

ああ、それがバックエンドです！フロントエンドをお見せしましょう。ここ：

とてもプロフェッショナルに見えますよね？ Gutenberg エディターを使用してどれだけのことを達成できるかは、確かに想像できるでしょう。

サードパーティのGutenbergブロック

WordPress 開発者は、テーマやプラグインを Gutenberg エディターと互換性のあるものにすることに熱心です。例としては、WooCommerce、Jetpack、Yoast SEO などがあります。

たとえば、WooCommerce ブロックを WordPress 投稿に追加できます。まず、WooCommerce をインストールしてアクティブ化する必要があります。

次に、新しい行でプラス (+) アイコンをクリックし、WooCommerce に移動して、以下に示すように必要なブロックを選択します。

これが何を意味するか知っていますか?つまり、リッチメディアや優れた投稿やページを数分で作成できるということです。

その他の注目すべきブロック

すでに 2,000 ワードを超えており、このまま進めば電子書籍全体を書くことになります。これで問題なく Gutenberg を使用できるようになることを祈ります。

それはさて置き、ここに他の利用可能なブロックのリストを示します。

ウィジェット – ウィジェットのコンテンツをブログ投稿に追加できます。
ショートコード – ネイティブの WordPress ショートコードを引き続き使用できます
クラシック – 古いコンテンツを保持する優れたブロック
続き – このブロックは、以前は 続きを読む タグとして知られていました。
改ページ、区切り記号、スペーサー
カスタム HTML、プルクオート、テーブル
ギャラリー と HTML5 オーディオ/ビデオ
使用するテーマやプラグインによってはさらに多くのことが起こります

余談: WordPress ページの作成は、数分の違いはあるものの投稿保存の作成に似ているため、今日はこれについては詳しく説明しません。

Gutenberg のクイックハックとキーボードショートカット

Gutenberg には、それをさらに簡単にするいくつかのハックとキーボードショートカットが付属しています。たとえば、段落ブロック内に「/」を入力すると、ブロックのリストが表示されます。

バックスラッシュ (/) の後にブロックのタイトルを入力することで、特定のブロックを選択することもできます。たとえば、「/image」と入力すると、他の画像関連ブロックの中で画像ブロックが表示されます。詳細については、下の画像を参照してください。

キーボードショートカット: 利用可能なすべてのショートカットを表示するには、Windows の場合は SHIFT + ALT + H を押し、Mac の場合は OPT + CTRL + H を押します。

以下に示すように、ドキュメントの上部にある (i) アイコンをクリックすると、ドキュメントの構造が表示されます。

ニース。非常にスムーズです。

ああ、ちなみに、「更新に失敗しました」エラーは通常、不安定なインターネット接続が原因で発生します 🙂

ここだけの話、Gutenberg は素晴らしいコンテンツエディターです。コツを学ぶ意欲があれば、問題ありません。未来の WordPress エディターから多くのことを得ることができます。

Gutenberg はまだ比較的若いため、使いやすさと機能の面で成長が期待できます。それは今後数日のうちに考慮すべき深刻な勢力となるだろう。ページビルダーは気を付けたほうがいいです、さもないと仕事がなくなってしまいます 🙂

Gutenberg エディターのステップバイステップガイドが、物事を大局的に理解するのに役立つことを願っています。ブロックエディターを使用してプロのようにコンテンツを作成できるようになりました。

以下のコメントセクションで懸念事項、考え、質問を共有してください。