WordPressブロックエディターの使い方（Gutenbergチュートリアル）

ブロックエディタに飛び込む前に、まずはGutenbergブロックエディタと旧来のクラシックエディタの違いを比較し、理解しましょう。

WordPressのクラシックエディターは、こんな感じでした：

そして、最新のWordPressのブロックエディタはこのような感じです：

ご覧のように、この2つはWordPressでコンテンツを作成するための全く異なるエディタです。

古いクラシックエディタは、Microsoft Wordに非常によく似た書式設定ボタンを持つテキストエディタでした。

新しいエディタは、「ブロック」と呼ばれる全く異なるアプローチを採用しています（そのため、ブロックエディタと呼ばれています）。

ブロックは、コンテンツのレイアウトを作成するために編集画面に追加するコンテンツ要素です。投稿やページに追加する各項目がブロックになります。

各段落、画像、ビデオ、ギャラリー、オーディオ、リストなどのブロックを追加できます。一般的なコンテンツ要素にはすべてブロックが用意されており、WordPressのプラグインによってさらに追加することが可能です。

WordPressのブロックエディタは、従来のエディタよりどのように優れているのですか？

WordPressのブロックエディタは、投稿やページにさまざまなタイプのコンテンツを追加する簡単な方法を提供します。

例えば、以前は、コンテンツにテーブルを追加したい場合、別のテーブルプラグインが必要でした。

ブロックエディタでは、テーブルブロックを追加し、列と行を選択するだけで、コンテンツを追加し始めることができます。

コンテンツ要素を上下に移動したり、個々のブロックとして編集したり、メディアリッチなコンテンツを簡単に作成することができます。

最も重要なことは、WordPressブロックエディタは使いやすく、学びやすいということです。

これは、最初のブログを始めたばかり、またはDIYのビジネスウェブサイトを構築しているすべてのWordPress初心者に絶大な利点を与えます。

ということで、WordPressブロックエディタをプロのように使って素晴らしいコンテンツを作成する方法を見ていきましょう。

ブロックエディタは、直感的で柔軟な設計になっています。WordPressの旧エディタとは見た目が異なりますが、旧エディタでできていたことはすべて可能です。

まずは、クラシックエディターで行っていた基本的なことを、ブロックエディターでどのように行うかを説明します。

通常通り、新しいブログ記事またはページの作成を開始します。WordPress 管理画面の 投稿 ＞ 新規追加 メニューをクリックするだけです。ページを作成する場合は、「固定ページ ＞ 新規追加」メニューに進みます。

ブロックエディターが起動します。

すべての投稿やページの最初のブロックはタイトルです。

マウスを使ってタイトルの下に移動するか、キーボードのタブキーを押してカーソルを下に移動し、書き込みを開始することができます。

デフォルトでは、次のブロックは段落ブロックになっています。これによって、ユーザーはすぐに書き始めることができます。

しかし、何か別のものを追加したい場合は、エディターの左上、既存のブロックの下、またはブロックの右側にある新しいブロックの追加ボタン（+）をクリックします。

ボタンをクリックすると、上部に検索バー、下部によく使われるブロックを含むブロック追加メニューが表示されます。

タブをクリックしてブロックのカテゴリを参照したり、キーワードを入力してブロックをすばやく検索することができます。

マウスでクリックするのが面倒な場合は、「/」を入力してキーボードショートカットを使えば、検索してブロックを追加することができます。

各ブロックには、ブロックの上に表示される独自のツールバーが付属しています。ツールバーのボタンは、編集中のブロックによって変化します。

たとえば、このスクリーンショットでは、テキストの整列、太字、斜体、リンクの挿入などの基本的な書式設定ボタンが表示されている段落ブロックで作業しています。

ツールバーとは別に、ブロックごとにブロック設定を行うことができ、編集画面の右列に表示されます。

ブロックはドラッグするか、各ブロックの横にある上下のボタンをクリックするだけで上下に移動することができます。

ブロックエディターには、コンテンツのレイアウトを管理・整理するための便利なツールが搭載されています。

キーボードのSHIFTキーを押しながらブロックをクリックすると、複数のブロックを選択することができます。

その後、ツールバーのブロックタイプボタンをクリックすると、選択したブロックがグループやカラムに変換されます。

その後、グループブロック全体に、配置や間隔を変更するなどのスタイルを適用することができます。

ブロックエディタでは、空のグループや列のブロックを追加することもできます。その後、他のブロックでそれらを埋めることができます。

そして、各列を任意の種類のブロックで埋めることで、美しいレイアウトを実現することができます。

ブロックの最も優れた点の1つは、保存して再利用できることです。これは、特定のコンテンツのスニペットを記事やページに頻繁に追加する必要があるウェブサイトの所有者やブロガーに特に便利です。

各ブロックのツールバーの右隅にあるメニューボタンをクリックするだけです。メニューから、「再利用可能なブロックに追加」オプションを選択します。

再利用可能なブロックには、後で識別して再利用できるように、名前を付ける必要があります。

これでブロックエディタは、ブロックを再利用可能なブロックとして保存します。

ブロックが保存されたので、再利用可能なブロックをサイト上の他のWordPress投稿やページに追加する方法を説明します。

再利用可能なブロックを追加したい投稿やページを編集するだけです。投稿の編集画面で、ブロックの追加ボタンをクリックします。

「再利用可能」タブの下に保存したブロックが表示されます。また、検索バーに名前を入力しても見つけることができます。

マウスを乗せると、ブロックのプレビューが簡単に表示されます。ブロックをクリックするだけで、投稿やページに挿入することができます。

再利用可能なブロックはすべてWordPressのデータベースに保存され、「すべての再利用可能なブロックを管理する」リンクをクリックすることで管理することができます。

すると、ブロック管理ページが表示されます。ここから、再利用可能なブロックを編集したり、削除したりすることができます。また、再利用可能なブロックをエクスポートして、他のWordPressウェブサイトで使用することもできます。

注：グループや列全体を再利用可能なブロックとして使用することもできます。これにより、セクション全体を保存して、必要なときにいつでも使用することができます。

WordPressの各投稿には、多くのメタデータが含まれています。これには、公開日、カテゴリやタグ、アイキャッチ画像などの情報が含まれます。

これらのオプションはすべて、エディタ画面の右カラムにきちんと配置されています。

WordPressのプラグインは、ブロックエディターのAPIを利用して、独自の設定を編集画面内に組み込むことができます。

人気のあるプラグインには、独自のブロックが付属しているものがあります。例えば、WordPressのフォームビルダーのプラグインであるWPFormsは、ブロックを使ってコンテンツにフォームを追加することができます。

ここでは、All in One SEO for WordPressで、ブロックエディタでSEOの設定を編集する方法を紹介します。

また、WooCommerceには、WordPressの投稿やページに簡単に追加できるブロックが用意されています。

基本的に、ブロックエディタはクラシックエディタが行っていたことをすべて行うことができます。しかし、以前よりも素早く、エレガントに物事を行うことができるようになります。

1. WordPressブロックエディターで画像を追加する

WordPressのブロックエディタには、すぐに使える画像ブロックがあります。ブロックを追加してから、画像ファイルをアップロードするか、メディアライブラリから選択するだけです。

また、コンピュータから画像をドラッグ＆ドロップすると、エディタが自動的にその画像のブロックを作成します。

画像を追加すると、ブロックの設定が表示され、altテキストやサイズなどの画像のメタデータを追加したり、画像へのリンクを追加したりすることができます。

2. ブロックエディターでリンクを追加する

ブロックエディタには、テキストを追加できるブロックがいくつか用意されています。最もよく使われるのは段落ブロックで、ツールバーにリンクの挿入ボタンが用意されています。

他のよく使われるテキストブロックにも、ツールバーにリンクボタンがあります。

キーボードショートカット（Macの場合はCommand + K、Windowsの場合はCTRL + K）でもリンクを挿入することができます。

3. Gutenbergで画像ギャラリーを追加する

ギャラリーブロックは、画像ブロックと同じように機能します。追加してから、画像ファイルをアップロードしたり選択したりします。

4. Gutenbergを使用してWordPressの投稿にショートコードを追加する

すべてのショートコードは、クラシックエディタと同じように動作します。単に段落ブロックに追加することもできますし、ショートコードブロックを使うこともできます。

Gutenbergエディタは、いくつかの新しいブロックを導入することで、WordPressの長年のユーザビリティの問題を解決することを約束しています。

以下は、ユーザーが非常に便利に感じると思われるお気に入りのものです。

1. WordPressでテキストの横に画像を追加する

旧エディターでは、テキストの横に画像を配置することができませんでした。しかし、メディアとテキストブロックを使えば、それが可能になります。

このシンプルなブロックは、2つのブロックが並んで配置されており、画像とその横にテキストを簡単に追加することができます。

2. WordPressの記事とページにボタンを追加する

ブログの投稿やページにボタンを追加することは、古いエディタではもう一つの悩みの種でした。ボタン用のショートコードを作成するプラグインを使うか、HTMLモードに切り替えてコードを書かなければなりませんでした。

Gutenbergにはボタンブロックが用意されており、どの投稿やページにも素早くボタンを追加することができます。

ボタンのリンクを追加したり、色を変更したりすることができます。詳しくは、「WordPressで簡単にボタンを追加する方法」の記事をご覧ください。

3. ブログ記事とランディングページに美しいカバー画像を追加する

投稿やページにカバー画像やカラー背景のカバーを追加できる「カバー」ブロックも、試してみたいクールな機能です。

カバー画像は、ページ内の新しいセクションやストーリーの冒頭のカバーとしてよく使われる幅の広い画像です。見た目も美しく、魅力的なコンテンツレイアウトを作成することができます。

カバーブロックを追加し、使用したい画像をアップロードするだけです。カバーのオーバーレイカラーを選択したり、固定背景画像にして、ユーザーがページをスクロールしたときにパララックス効果を生み出すことも可能です。

詳しくは、WordPressのカバー画像とアイキャッチ画像の違いについての記事をご覧ください。

4. 記事内にテーブルを作成する

従来のエディタには、WordPressの記事にテーブルを追加するボタンがありませんでした。プラグインを使うか、カスタムCSSやHTMLを書いてテーブルを作成する必要がありました。

GutenbergエディタにはデフォルトでTableブロックがあり、投稿やページにテーブルを追加するのが超簡単になりました。ブロックを追加し、挿入したい列と行の数を選択するだけです。

これで、テーブルの行にデータを追加し始めることができます。必要であれば、いつでも行や列を追加することができます。また、2つの基本的なスタイルオプションが用意されています。

5. マルチカラムコンテンツの作成

マルチカラムコンテンツの作成も、クラシックエディタではまったく扱えなかった問題でした。ブロックエディタでは、Columnsブロックを追加することができ、これは基本的に2列の段落ブロックを追加するものです。

このカラムブロックは非常に柔軟です。最大6列まで追加でき、各列の内部で他のブロックを使用することも可能です。

ブロックエディタを見て、実際のコンテンツを作るよりも、ブロックを追加したり調整したりすることに時間を取られるのではないかと思うかもしれません。

しかし、ブロックエディタは驚くほど高速で、ごく基本的な使い方を数分するだけで、何も考えずに瞬時にブロックを追加することができるようになります。

この方法でワークフローがどれだけ速くなるかは、すぐに実感できるはずです。

パワーユーザーのために、WordPressのブロックエディタでさらに速く作業するためのボーナスヒントをいくつか紹介します。

1. ブロックツールバーを一番上に移動させる。

上のスクリーンショットで、すべてのブロックの上部にツールバーが表示されていることにお気づきでしょうか。このツールバーをエディタの一番上に移動させることができます。

画面右上の3点ボタンをクリックし、「トップツールバー」オプションを選択するだけです。

2. キーボードショートカットを使う

Gutenbergには、あなたのワークフローをより良くしてくれる便利なショートカットがいくつか用意されています。まず、すぐにでも使い始めたいのが「/」です。

「/」を入力してから文字を入力すると、マッチするブロックが表示されるので、即座に追加することができます。

その他のショートカットについては、画面右上の三点メニューをクリックし、「キーボードショートカット」を選択してください。

これにより、使用可能なすべてのキーボードショートカットのリストがポップアップ表示されます。このリストには、WindowsユーザーとMacユーザーで異なるショートカットが表示されます。

3. メディアをドラッグ＆ドロップして、メディアブロックを自動作成する

Gutenbergでは、画面上の任意の場所にファイルをドラッグ＆ドロップするだけで、自動的にブロックが作成されます。

画像や動画ファイルを1つだけドロップすれば、ブロックを作成してくれます。また、複数の画像ファイルをドロップしてギャラリーブロックを作成することもできます。

4. YouTube、Twitter、Vimeoなどのエンベッドを追加する

ブロックエディタを使えば、WordPressのコンテンツにサードパーティのコンテンツを簡単に埋め込むことができます。人気のあるサードパーティーのサービスには、すべてブロックが用意されています。

任意の場所に埋め込みURLをコピー＆ペーストするだけで、自動的にブロックが作成されます。

例えば、YouTubeの動画URLを追加すれば、自動的にYouTubeの埋め込みブロックが作成され、動画が表示されます。

FacebookやInstagramの埋め込みについては、WordPressでFacebookやInstagramの投稿を埋め込む方法の記事をご覧ください。

WordPressのブロックエディタでは、開発者が独自のブロックを作成することができます。新しいエディタ用のブロックバンドルを提供する素晴らしいWordPressプラグインがいくつかあります。

ここではそのいくつかを紹介します。

1. Ultimate Addons for Gutenberg

Ultimate Addons for Gutenbergは、コンテンツにデザイン要素を追加するのに役立つ高度なブロックが多数付属しているブロックライブラリです。

人気のWordPressテーマ「Astra」の開発者によって作られたUltimate Addonsは、コードを書かずに美しいデザインを作成するのに役立ちます。

2. PublishPress Blocks

PublishPress Blocksは、Gutenbergブロックエディタを拡張するための追加ブロックを搭載した、もう一つの強力なブロックライブラリです。

美しいレイアウトオプション、スライダー、ボタン、アイコン、イメージギャラリー、マップ、タブ、テスティモニアル、アコーディオンなどが含まれています。

3. Stackable – Gutenberg Blocks

Stackable – Gutenberg Blocksは、あなたのウェブサイトで使用できる美しいデザインのGutenbergブロックのコレクションです。コンテナ、投稿、機能グリッド、アコーディオン、画像ボックス、アイコンリスト、コールトゥアクションなどのブロックが含まれています。

GutenbergがWordPressのデフォルトエディタになってから、多くの質問をいただくようになりました。ここでは、Gutenbergに関するよくある質問についてお答えします。

1. 古い投稿やページはどうなりますか？まだ編集できますか？

古い投稿やページは完全に安全で、ブロックエディターの影響を受けません。編集は可能で、自動的にクラシックエディタを含むブロックエディタで開かれます。

旧エディタ内で編集することもできますし、旧記事をブロックに変換してブロックエディタを使うこともできます。

2. 旧エディタを使い続けられますか？

はい、古いエディターを使い続けることができます。Classic Editorプラグインをインストールし、有効化するだけです。

有効化すると、ブロックエディターが無効になり、クラシックエディターを使い続けることができます。

クラシックエディタは2022年までサポートされることに注意してください。ブロックエディタに慣れるために、ブロックエディタを使い始めるのがよいでしょう。

3. 使用しているプラグインやテーマでブロックエディタが動作しない場合はどうすればいいですか？

Project Gutenbergは長い間、開発中でした。そのため、プラグインやテーマの作者には、コードの互換性をテストする時間が十分にありました。

しかし、一部のプラグインやテーマがブロックエディターとうまく動作しない可能性が残っています。その場合は、クラシックエディタプラグインをインストールするか、開発者にGutenbergサポートを追加するよう依頼するか、単に代替のプラグインやテーマを探せばよいでしょう。

4. Gutenbergのヒントやトリックをもっと学ぶには？

私どもは、WordPressのブロックエディタについて学ぶのに最適な場所です。私たちは、インターネット上で最大のWordPressリソースサイトです。

ブロックエディタをマスターするために、新しい記事を公開し、古いリソースを更新する予定です。

また、ご質問がある場合は、コメントを残すか、ウェブサイトのお問い合わせフォームを使用して、お気軽にお問い合わせください。

このGutenbergチュートリアルが、WordPressブロックエディターの使い方を学ぶのにお役に立てれば幸いです。また、ウェブサイトの速度を向上させるための完全なWordPressパフォーマンスガイドを参照したり、スモールビジネスに最適なメールマーケティングサービスの比較をチェックしたりするのもよいでしょう。