新しいWordPressブロックエディターの使用方法(Gutenbergチュートリアル)

WordPress 5.0では、クラシックコンテンツエディターは、Gutenbergと呼ばれる新しいブロックエディターに置き換えられました。それ以来、何人かの読者から、WordPressのGutenbergブロックエディターの使用方法に関する包括的なチュートリアルを作成するよう依頼されました。.


WordPressブロックエディターは、WordPressでコンテンツを作成するまったく新しい方法です。このチュートリアルでは、新しいWordPressブロックエディターを使用してマスターし、視覚的に素晴らしいブログ投稿とページを作成する方法を紹介します.

新しいWordPressブロックエディター(別名Gutenberg)の使用

ブロックエディター(グーテンベルク)とクラシックエディターの違い?

新しいエディターについて説明する前に、グーテンベルクブロックエディターとクラシックエディターの違いを比較して理解しましょう。.

WordPressのクラシックエディターは次のようになります。

古いWordPressエディター

WordPress 5.0にアップグレードすると、新しいブロックエディタは次のようになります。

Gutenbergとしても知られる新しいWordPressブロックエディター

ご覧のとおり、これらはWordPressでコンテンツを作成するための2つの完全に異なるエディターです.

古いクラシックエディターは、Microsoft Wordによく似た書式設定ボタンを備えたテキストエディターでした.

新しいエディターは、「ブロック」と呼ばれるまったく異なるアプローチを使用しています(そのため、ブロックエディターという名前です)。.

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

各段落、画像、動画、ギャラリー、音声、リストなどにブロックを追加できます。すべての一般的なコンテンツ要素のブロックがあり、WordPressプラグインによってさらに追加できます.

新しいWordPressブロックエディターは従来のエディターよりも優れています?

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

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

新しいエディターを使用すると、テーブルブロックを追加し、列と行を選択して、コンテンツの追加を開始できます.

テーブルブロック

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

最も重要なのは、新しいWordPressブロックエディターが使いやすく、学習しやすいことです。.

これは、最初のブログを始めたり、DIYビジネスWebサイトを構築したりしているすべてのWordPress初心者に大きな利点をもたらします。.

とはいえ、プロのような新しいWordPressブロックエディターを使用して優れたコンテンツを作成する方法を見てみましょう.

このグーテンベルクチュートリアルで扱う内容は次のとおりです。

  1. Gutenbergの使用–新しいWordPressブロックエディター
  2. 新しいブログ投稿またはページを作成する
  3. グーテンベルクにブロックを追加する方法
  4. 新しいエディターでのブロックの操作
  5. グーテンベルクでのブロックの保存と再利用
  6. グーテンベルクでの公開と投稿の設定
  7. 新しいエディターのプラグイン設定
  8. グーテンベルクにいくつかの一般的なブロックを追加する
  9. グーテンベルクのいくつかの新しいコンテンツブロックを探索する
  10. プロのようにグーテンベルクを使用する上でのボーナスのヒント
  11. Gutenbergブロックエディターにブロックを追加する
  12. グーテンベルクに関するよくある質問

準備はいい?始めましょう.

Gutenbergの使用–新しいWordPressブロックエディター

ブロックエディタは、直感的で柔軟になるように設計されています。見た目は古いWordPressエディターとは異なりますが、従来のエディターで実行できたすべての機能を実行します.

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

ブロックエディターを使用した新しいブログ投稿またはページの作成

通常どおり、新しいブログ投稿またはページの作成を開始します。単にクリックしてください 投稿»新規追加 WordPress管理者のメニュー。ページを作成している場合は、次に進みます ページ»新規追加 メニュー.

新しい投稿を追加する

新しいブロックエディターが起動します.

グーテンベルクにブロックを追加する方法

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

その後、マウスを使用してタイトルの下に移動するか、キーボードのタブキーを押して下に移動して書き込みを開始できます.

グーテンベルクに投稿タイトルを追加する

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

ただし、別のものを追加する場合は、エディターの左上隅、既存のブロックの下、またはブロックの左側にある[新しいブロックを追加]ボタンをクリックできます。.

新しいブロックボタンを追加

ボタンをクリックすると、上部に検索バーがあるブロック追加メニューが表示され、下に一般的に使用されるブロックが表示されます.

タブをクリックしてブロックのカテゴリを閲覧したり、キーワードを入力してブロックをすばやく検索したりできます.

グーテンベルクでのブロックの検索と追加

マウスを使用してボタンをクリックしたくない場合は、/を入力してキーボードショートカットを使用し、ブロックを検索して追加できます。.

新しいエディターでのブロックの操作

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

たとえば、次のスクリーンショットでは、テキストブロック、太字、斜体、挿入リンク、取り消し線などの基本的な書式設定ボタンを示す段落ブロックで作業しています。.

各ブロックには独自のツールバーが付属しています

ツールバーとは別に、各ブロックには、編集画面の右側の列に表示される独自のブロック設定を含めることもできます.

ブロック設定

単純なドラッグアンドドロップで、または各ブロックの横にある上下ボタンをクリックして、ブロックを上下に移動できます.

ブロックを上下に移動する

グーテンベルクでのブロックの保存と再利用

ブロックの最も優れている点の1つは、ブロックを保存して個別に再利用できることです。これは、特定のコンテンツスニペットを記事に頻繁に追加する必要があるブロガーに特に役立ちます。.

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

ブロックを保存して後で再利用する

この再利用可能なブロックの名前を指定するように求められます。ブロックの名前を入力して、保存ボタンをクリックします.

再利用可能なブロックに名前を付ける

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

ブロックを保存したので、再利用可能なブロックをサイトの他のWordPress投稿およびページに追加する方法を見てみましょう.

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

保存したブロックは[再利用可能]タブにあります。検索バーに名前を入力して見つけることもできます.

再利用可能なブロックを挿入する

その上にマウスを置くと、ブロックの簡単なプレビューを表示できます。ブロックをクリックして、投稿またはページに挿入します.

すべての再利用可能なブロックはWordPressデータベースに保存されており、[すべての再利用可能なブロックを管理]リンクをクリックして管理できます.

再利用可能なブロックを管理する

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

WordPressにエクスポート可能な再利用可能なブロックをインポートする

Gutenbergブロックエディターでのオプションの公開と管理

各WordPress投稿には多くのメタデータが含まれています。これには、公開日、カテゴリとタグ、注目の画像などの情報が含まれます.

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

新しいWordPressエディター、Gutenbergのドキュメント設定

Gutenbergのプラグインオプション

WordPressプラグインは、ブロックエディターのAPIを利用して、編集画面内に独自の設定を統合できます.

いくつかの人気のあるプラグインはすでにブロックとして利用可能です。たとえば、最高のWordPressフォームビルダープラグインであるWPFormsを使用すると、ウィジェットブロックを使用してコンテンツにフォームを追加できます。.

新しいGutenbergエディターのWPFormsブロック

Yoast SEOを使用して、新しいエディターでSEO設定を編集する方法を次に示します。

新しいGutenbergエディターでのYoast SEO設定

WooCommerceには、WordPressの投稿やページに簡単に追加できるウィジェットブロックも付属しています.

WooCommerce製品ブロック

新しいエディターでいくつかの共通ブロックを追加する

基本的に、新しいエディターはクラシックエディターが行ったすべてのことを実行できます。しかし、あなたは以前よりずっと速くエレガントに物事を行うでしょう.

1.新しいWordPressエディターで画像を追加する

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

新しいWordPressエディターの画像ブロック

コンピューターから画像をドラッグアンドドロップすることもでき、エディターは自動的に画像ブロックを作成します.

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

画像ブロック設定

2.新しいブロックエディターにリンクを追加する

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

他のすべての一般的に使用されるテキストブロックには、ツールバーにリンクボタンも含まれています.

リストブロックのリンクボタン

キーボードショートカットを使用してリンクを挿入することもできます。MacではCommand + K、WindowsコンピューターではCtrl + K.

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

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

新しいWordPressエディターに画像ギャラリーを追加する

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

すべてのショートコードは、クラシックエディターと同じように機能します。それらを段落ブロックに追加するか、ショートコードブロックを使用できます。.

ショートコードブロックの追加

グーテンベルクのいくつかの新しいコンテンツブロックの探索

Gutenbergエディターは、いくつかの新しいブロックを導入することにより、WordPressの長期にわたるユーザビリティの問題を解決することを約束します.

以下は、ユーザーが非常に役立つと私たちが信じているお気に入りの一部です.

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

古いエディターを使用していたユーザーの多くは、テキストの横に画像を配置できませんでした。あなたは今これを行うことができます メディア & テキスト ブロック.

メディアとテキストブロック

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

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

ブログの投稿またはページにボタンを追加することは、クラシックエディターのもう1つの問題でした。ボタンのショートコードを作成するプラグインを使用するか、HTMLモードに切り替えてコードを記述する必要がありました.

Gutenbergにはボタンブロックが付属しており、任意の投稿やページにボタンをすばやく追加できます.

グーテンベルクにボタンブロックを追加する

ボタンのリンクを追加したり、色を変更したり、3つのボタンスタイルから選択したりできます.

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

試してみるとよいもう1つの優れた機能は、「カバー」ブロックです。このブロックを使用すると、投稿やページにカバー画像を追加できます.

カバー画像は、ページの新しいセクションやストーリーの始まりのカバーとしてよく使用される幅の広い画像です。彼らは美しく見え、魅力的なコンテンツのレイアウトを作成することができます.

カバーブロックを追加して、使用する画像をアップロードするだけです。カバーのオーバーレイ色を選択するか、それを固定背景画像にして、ユーザーがページを下にスクロールしたときに視差効果を作成できます.

Gutenbergエディターのカバー画像ブロック

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

従来のエディターには、WordPress投稿に表を追加するためのボタンがありませんでした。プラグインを使用するか、カスタムCSSおよびHTMLを記述するテーブルを作成する必要がありました.

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

テーブルブロック

これで、テーブル行へのデータの追加を開始できます。必要に応じて、いつでも行と列を追加できます。利用可能な2つの基本的なスタイルオプションもあります。.

5.複数列コンテンツの作成

複数列のコンテンツを作成することは、従来のエディターがまったく処理しなかったもう1つの問題でした。ブロックエディターを使用すると、Columnsブロックを追加できます。これにより、基本的に段落ブロックの2つの列が追加されます.

複数列のコンテンツ

この列ブロックは非常に柔軟です。行に最大6つの列を追加でき、各列内で他のブロックを使用することもできます.

プロのようにグーテンベルクを使用するためのボーナスのヒント

新しいブロックエディタを見ると、実際のコンテンツを作成するよりも、ブロックの追加と調整に多くの時間を費やすのではないかと思うかもしれません。?

新しいエディタは信じられないほど高速で、数分間の非常に基本的な使用法でさえ、何も考えずに即座にブロックを追加できます.

すぐに、この新しいアプローチでワークフローがどれほど速くなるかがわかるでしょう。.

パワーユーザー向けに、新しいWordPressエディターでさらに高速に作業できるようにするためのボーナスのヒントをいくつか紹介します.

1.ブロックツールバーを一番上に移動します.

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

画面の右上隅にある3つのドットのボタンをクリックし、[上部のツールバー]オプションを選択するだけです.

ブロックツールバーをエディターの上部に移動します

2.キーボードショートカットを使用する

Gutenbergには、ワークフローをさらに改善する便利なショートカットがいくつか用意されています。あなたがすぐに使い始めるべき最初のものは/です.

単に/と入力してから入力を開始すると、すぐに追加できる一致するブロックが表示されます.

その他のショートカットについては、画面の右上隅にあるその他メニューをクリックして、[キーボードショートカット]を選択してください.

キーボードショートカットを起動する

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

3.メディアをドラッグアンドドロップして、自動的にメディアブロックを作成します

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

単一の画像または動画ファイルをドロップすると、ブロックが作成されます。複数の画像ファイルをドロップしてギャラリーブロックを作成することもできます.

新しいWordPressエディターでギャラリーブロックをドラッグアンドドロップ

4. YouTube、Twitter、Facebook、Vimeo、その他の埋め込みを追加する

Gutenbergは、ブロックエディターに新しい埋め込みブロックを導入します。 YouTube、Twitter、Facebookなど、サポートされているすべての埋め込みタイプ用のブロックがあります.

埋め込みブロック

ただし、いつでも埋め込みURLをコピーして貼り付けるだけで、自動的にブロックが作成されます.

たとえば、YouTube動画のURLを追加した場合、YouTubeの埋め込みブロックが自動的に作成され、動画が表示されます.

YouTube埋め込み

WordPressのGutenbergブロックエディターにさらにブロックを追加する

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

それらのいくつかを以下に示します。

1.高度なグーテンベルク

高度なグーテンベルク

Advanced Gutenbergには、WooCommerce製品スライダー、お客様の声、地図、カウンター、タブ、アコーディオンなどの人気のコンテンツ要素用のいくつかのブロックが付属しています.

また、ユーザーの役割に基づいて、ブロックにアクセスできるユーザーを詳細に制御できます。ユーザープロファイルを作成し、ユーザーが追加できるブロックを選択できます.

2.積み重ね可能–グーテンベルクブロック

積み重ね可能-グーテンベルクブロック

積み重ね可能–グーテンベルクブロックは、ウェブサイトで使用できる美しくデザインされたグーテンベルクブロックのコレクションです。コンテナ、投稿、機能グリッド、アコーディオン、画像ボックス、アイコンリスト、行動を促すフレーズなどのブロックが含まれています.

3.エディターブロック

Gutenbergのエディターブロック

Editor Blocksは、使用できるGutenbergブロックの別のきちんとしたコレクションです。著者のプロフィール、ヒーロー画像、価格表、ブランド、機能などの便利なブロックが付属しています.

Gutenbergに関するFAQ – WordPressの新しいブロックエディター

Gutenbergが新しいWordPressエディターになって以来、多くの質問が寄せられています。ここにグーテンベルクに関する最もよくある質問のいくつかへの回答があります.

1.古い投稿とページはどうなりますか?それでも編集できますか?

あなたの古い投稿とページは完全に安全で、グーテンベルクの影響を受けません。あなたはまだそれらを編集することができ、グーテンベルクはクラシックエディターを含むブロックでそれらを自動的に開きます.

新しいWordPressエディターで古い記事を編集する

古いエディター内で編集したり、古い記事をブロックに変換して新しいブロックエディターを使用したりできます.

2.古いエディタを引き続き使用できますか?

はい、引き続き古いエディターを使用できます。 Classic Editorプラグインをインストールしてアクティブ化するだけです.

有効化すると、ブロックエディターが無効になり、クラシックエディターを引き続き使用できるようになります.

クラシックエディターは2022年までサポートされます。.

3.新しいエディターが使用しているプラ​​グインまたはテーマで動作しない場合の対処方法?

プロジェクトグーテンベルクは長い間開発中でした。これにより、プラグインとテーマの作成者はコードの互換性をテストするための十分な時間を確保できました.

ただし、一部のプラグインとテーマは新しいエディターでうまく機能しない可能性があります。その場合は、クラシックエディタープラグインをインストールするか、開発者にGutenbergサポートの追加を要求するか、別のプラグインまたはテーマを見つけるだけです。.

4.グーテンベルクのヒントとコツをもっと学ぶ方法?

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

新しいブロックエディターを習得できるように、新しい記事を公開し、古いリソースを更新します.

また、ご不明な点がございましたら、コメントを残すか、ウェブサイトのお問い合わせフォームを使用して、お気軽にご連絡ください.

このGutenbergチュートリアルが、新しいWordPressブロックエディターの使用方法の学習に役立ったことを願っています。また、ウェブサイトの速度を向上させるための完全なWordPressパフォーマンスガイドもご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map