WordPress 5.0では、従来のコンテンツエディターがGutenbergと呼ばれる新しいブロックエディターに置き換えられました。
WordPressブロックエディターは、WordPressでコンテンツを作成するための新しい方法です。このチュートリアルでは、新しいWordPressブロックエディターを使用してマスターし、視覚的に魅力的な記事やページを作成する方法を紹介します。
ブロックエディター（グーテンベルク）とクラシックエディターの違いは何ですか？
新しいエディターについて詳しく説明する前に、まずグーテンベルクブロックエディターとクラシックエディターの違いを比較して理解しましょう。
これは、WordPressのクラシックエディターの外観です。
WordPress 5.0にアップグレードすると、新しいブロックエディターは次のようになります。
ご覧のとおり、これらはWordPressでコンテンツを作成するための2つのまったく異なるエディターです。
古いクラシックエディタはテキストエディタであり、そのフォーマットボタンはMicrosoftWordと非常によく似ています。
新しいエディターは、「ブロック」と呼ばれるまったく異なるアプローチを使用します（したがって、ブロックエディター）。
ブロックは、コンテンツレイアウトを作成するために編集画面に追加するコンテンツ要素です。投稿またはページに追加する各アイテムはブロックです。
段落、画像、ビデオ、ギャラリー、オーディオ、リストなどごとにブロックを追加できます。すべての一般的なコンテンツ要素のブロックがあり、WordPressプラグインを介してさらにブロックを追加できます。
新しいWordPressブロックエディターは従来のエディターよりも優れていますか？
新しいWordPressブロックエディターは、投稿やページにさまざまな種類のコンテンツを追加する簡単な方法を提供します。
たとえば、コンテンツにテーブルを追加する場合は、別のテーブルプラグインが必要でした。
新しいエディターを使用すると、テーブルブロックを追加し、列と行を選択して、コンテンツの追加を開始できます。
コンテンツ要素を上下に移動したり、個別のブロックとして編集したり、マルチメディアコンテンツを簡単に作成したりできます。
最も重要なことは、新しいWordPressブロックエディターは使いやすく、習得しやすいことです。
これは、最初のブログを始めたばかりの、またはDIYビジネスWebサイトを構築しているすべてのWordPress初心者に大きな利点をもたらします。
それでも、プロのように新しいWordPressブロックエディターを使用して優れたコンテンツを作成する方法を見てみましょう。
グーテンベルクを使用–新しいWordPressブロックエディター
ブロックエディタのデザインは直感的で柔軟性があります。古いWordPressエディターとは異なって見えますが、クラシックエディターで実行できるすべての操作を実行できます。
クラシックエディターで実行する基本的な操作と、ブロックエディターでそれらがどのように実行されるかを紹介します。
ブロックエディタを使用して、新しいブログ投稿またはページを作成します
通常どおり、新しいブログ投稿またはページの作成を開始します。WordPress管理者の[記事] » [記事を書く]メニューをクリックするだけです。ページを作成する場合は、 [ページ]» [新しいメニューの追加]に移動します。
これにより、新しいブロックエディタが起動します。
グーテンベルクでブロックを追加する方法
すべての投稿またはページの最初のブロックはタイトルです。
その後、マウスを使用してタイトルの下に移動するか、キーボードのTabキーを押して下に移動して書き込みを開始できます。
デフォルトでは、次のブロックは段落ブロックです。これにより、ユーザーはすぐに書き込みを開始できます。
ただし、他のコンテンツを追加する場合は、エディターの左上隅、既存のブロックの下、またはブロックの左側にある[新しいブロックの追加]ボタンをクリックできます。
ボタンをクリックして、ブロックの追加メニューを表示します。上部に検索バーがあり、下部に一般的なブロックがあります。
タブをクリックしてブロックカテゴリを参照したり、キーワードを入力してブロックをすばやく検索したりできます。
マウスを使用してボタンをクリックしたくない場合は、入力/検索してブロックを追加することにより、キーボードショートカットを使用できます。
新しいエディターでブロックを使用する
各ブロックには独自のツールバーがあり、ブロックの上部に表示されます。ツールバーのボタンは、編集しているブロックに応じて変わります。
たとえば、このスクリーンショットでは、テキストの配置、太字、斜体、リンクの挿入、取り消し線ボタンなどの基本的な書式設定ボタンを表示する段落ブロックで作業しています。
ツールバーに加えて、各ブロックは独自のブロック設定を持つこともでき、編集画面の右側の列に表示されます。
各ブロックの横にある上下のボタンをクリックするだけで、ブロックを上下に移動できます。
グーテンベルクでブロックを保存して再利用する
ブロックの最も優れている点の1つは、ブロックを個別に保存して再利用できることです。これは、記事に特定のコンテンツの概要を追加する必要があるブロガーにとって特に便利です。
各モジュールのツールバーの右上隅にあるメニューボタンをクリックするだけです。メニューから、[再利用可能なブロックに追加]オプションを選択します。
この再利用可能なブロックの名前を入力するように求められます。ブロックの名前を入力し、「保存」ボタンをクリックします。
これで、ブロックエディタはブロックを再利用可能なブロックとして保存します。
ブロックを保存したので、サイト上の他のWordPressの投稿やページに再利用可能なブロックを追加する方法を見てみましょう。
再利用可能なブロックを追加する投稿またはページを編集するだけです。投稿編集画面で、[ブロックの追加]ボタンをクリックします。
保存されたブロックは[再利用可能]タブにあります。検索バーに名前を入力して見つけることもできます。
その上にマウスを置くと、ブロックのクイックプレビューが表示されます。ブロックをクリックするだけで、投稿またはページに挿入できます。
すべての再利用可能なブロックはWordPressデータベースに保存されており、[すべての再利用可能なブロックを管理する]リンクをクリックして管理できます。
これにより、ブロックマネージャページに移動します。ここで、再利用可能なブロックを編集または削除できます。再利用可能なブロックをエクスポートして、他のWordPressWebサイトで使用することもできます。
グーテンベルクブロックエディターでオプションを公開および管理する
すべてのWordPress投稿には、多くのメタデータが含まれています。これには、リリース日、分類とタグ、注目の写真などの情報が含まれます。
これらのオプションはすべて、エディター画面の右側の列にきちんと配置されています。
グーテンベルクのプラグインオプション
WordPressプラグインは、ブロックエディターのAPIを使用して、独自の設定をブロック編集画面に統合できます。
いくつかの人気のあるプラグインはすでにモジュールとして利用可能です。たとえば、WPFormsは最高のWordPressフォームビルダープラグインであり、ウィジェットブロックを使用してコンテンツにフォームを追加できます。
ここでYoast SEOはどのように編集することができますSEOの設定を新しいエディタで：
WooCommerceにはウィジェットブロックも付属しており、WordPressの投稿やページに簡単に追加できます。
新しいエディターでいくつかの一般的なブロックを追加します
基本的に、新しいエディターは従来のエディターのすべての作業を完了することができます。ただし、トランザクションは以前よりも高速かつ適切に処理されます。
1.新しいWordPressエディターで画像を追加します
新しいWordPressエディターには、すぐに使用できる画像ブロックがあります。ブロックを追加して画像ファイルをアップロードするか、メディアライブラリから選択するだけです。
コンピューターから画像をドラッグアンドドロップすることもでき、エディターはそれらの画像ブロックを自動的に作成します。
画像を追加すると、画像のメタデータ（Altテキスト、サイズ、画像へのリンクの追加など）を追加できるブロック設定が表示されます。
2.新しいブロックエディタにリンクを追加します
ブロックエディタには、テキストを追加できるいくつかのブロックが付属しています。最も一般的に使用されるのは段落ブロックで、ツールバーにリンクの挿入ボタンがあります。
他のすべての一般的に使用されるテキストブロックには、ツールバーにリンクボタンも含まれています。
キーボードショートカット、Macの場合はCommand + K、Windowsの場合はCTRL + Kを使用してリンクを挿入することもできます。
3.グーテンベルクに画像ライブラリを追加します
ギャラリーブロックの動作原理は、画像ブロックと似ています。追加してから、画像ファイルをアップロードまたは選択します。
4. Gutenbergを使用して、WordPressの投稿にショートコードを追加します
すべてのショートコードは、従来のエディターと同じように機能します。それらを段落ブロックに追加するか、ショートコードブロックを使用することができます。
グーテンベルクの新しいコンテンツブロックのいくつかを探索する
グーテンベルクエディターは、いくつかの新しいモジュールを導入することで、WordPressの長年のユーザビリティの問題を解決することを約束します。
以下は、ユーザーが非常に役立つと思われるお気に入りです。
1.WordPressのテキストの横に写真を追加します
古いエディタでは、多くのユーザーがテキストの横に画像を配置できません。これで、「メディアとテキスト」ブロックを使用してこれを行うことができます。
このシンプルなブロックには2つのブロックが並んで配置されているため、画像を簡単に追加したり、その横にテキストを追加したりできます。
2.WordPressの投稿とページにボタンを追加します
ブログの投稿やページにボタンを追加することは、従来のエディターのもう1つの煩わしさです。ボタン用にショートコードが作成されたプラグインを使用するか、HTMLモードに切り替えてコードを記述する必要があります。
グーテンベルクには、投稿やページにボタンをすばやく追加できるボタンブロックが付属しています。
ボタンへのリンクを追加したり、色を変更したり、3つのボタンスタイルから選択したりできます。
3.ブログの投稿とランディングページに美しいカバー画像を追加します
試してみたいもう1つの優れた機能は、投稿やページにカバー画像を追加できる「カバー」ブロックです。
表紙画像は幅の広い画像で、通常、新しいセクションの表紙またはページのストーリーの始まりとして使用されます。それらは美しく見え、魅力的なコンテンツレイアウトを作成することができます。
カバーを追加して、使用したい画像をアップロードするだけです。表紙のオーバーレイ色を選択するか、固定の背景画像として設定して、ユーザーがページを下にスクロールしたときに視差効果を作成できます。
4.記事グリッドの内部にテーブルを作成します
従来のエディターには、WordPressの投稿にテーブルを追加するためのボタンがありません。プラグインを使用するか、カスタムCSSとHTMLを使用してテーブルを作成する必要があります。
新しいグーテンベルクエディターにはデフォルトのテーブルブロックが付属しており、投稿やページにテーブルを簡単に追加できます。ブロックを追加し、挿入する列と行の数を選択するだけです。
これで、テーブルの行にデータを追加し続けることができます。必要に応じて、行と列を追加できます。利用可能な2つの基本的なスタイルオプションもあります。
5.コンテンツの複数の列を作成します
複数列のコンテンツを作成することは、従来のエディターでは処理できないもう1つの問題です。ブロックエディタを使用すると、基本的に2列の段落ブロックを追加するColumnsブロックを追加できます。
このブロックは非常に柔軟性があります。1行に最大6列を追加でき、各列で他のブロックを使用することもできます。
専門家のようにグーテンベルクを使用するための追加のヒント
新しいブロックエディタを見ると、実際のコンテンツを作成するよりもブロックの追加と調整に多くの時間を費やすのではないかと疑問に思われるかもしれません。
新しいエディターは非常に高速に実行されます。非常に基本的な数分間の使用でも、時間をかけずにブロックをすぐに追加できます。
この新しい方法を使用すると、ワークフローが高速になることがすぐにわかります。
上級ユーザー向けに、新しいWordPressエディターをすばやく使用するためのヒントをいくつか紹介します。
1.ブロックツールバーを一番上に移動します。
スクリーンショットで、各ブロックの上部にツールバーがあることに気付いたかもしれません。ツールバーをエディターの上部に移動できます。
画面の右上隅にある3つのドットのボタンをクリックして、[トップツールバー]オプションを選択するだけです。
2.キーボードショートカットを使用する
グーテンベルクには、ワークフローをより完全にする便利なショートカットがいくつか付属しています。すぐに使い始めるべき最初のものは/です。
/と入力して入力を開始すると、すぐに追加できる一致するブロックが表示されます。
さらにショートカットを取得するには、画面の右上隅にある3つのドットのメニューをクリックし、[キーボードショートカット]を選択します。
これにより、使用できるすべてのキーボードショートカットのリストを含むポップアップウィンドウが表示されます。WindowsとMacのユーザーの場合、リストには異なるショートカットがあります。
3.メディアをドラッグアンドドロップして、メディアブロックを自動的に作成します
グーテンベルクでは、ファイルを画面上の任意の場所にドラッグアンドドロップでき、自動的にブロックが作成されます。
単一の画像またはビデオファイルをドラッグアンドドロップすると、ブロックが作成されます。複数の画像ファイルをドラッグアンドドロップして、ギャラリーブロックを作成することもできます。
4. YouTube、Twitter、Facebook、Vimeo、その他の埋め込みを追加します
グーテンベルクは、ブロックエディタに新しい埋め込みブロックを導入しました。サポートされているすべての埋め込みタイプ（YouTube、Twitter、Facebookなどを含む）にはブロックがあります。
ただし、埋め込まれたURLはいつでもコピーして貼り付けることができ、自動的にブロックが作成されます。
たとえば、YouTube動画のURLを追加すると、YouTube埋め込みブロックが自動的に作成され、動画が表示されます。
WordPressのグーテンベルクブロックエディターにブロックを追加する
WordPressの新しいブロックエディターを使用すると、開発者は独自のブロックを作成できます。新しいエディターにブロックバンドルを提供する優れたWordPressプラグインがいくつかあります。
ここにいくつかあります：
Advanced Gutenbergには、WooCommerce製品スライダー、紹介文、マップ、タグ、アコーディオンなど、人気のあるコンテンツ要素用のブロックがいくつか付属しています。
また、ユーザーの役割に基づいて、どのユーザーがブロックにアクセスできるかを高度に制御することもできます。ユーザープロファイルを作成し、追加できるブロックを選択できます。
2.スタッカブルグーテンベルクブロック
スタッカブルグーテンベルクブロックは、ウェブサイトで使用できる美しくデザインされたグーテンベルクブロックのコレクションです。これには、コンテナブロック、投稿、要素グリッド、アコーディオン、画像ボックス、アイコンリスト、行動を促すフレーズなどが含まれます。
Editor Blocksは、使用できるGutenbergブロックのもう1つの独創的なコレクションです。著者情報、ヒーロー画像、価格表、ブランド、機能などの便利なブロックが付属しています。
グーテンベルクに関するよくある質問–WordPressの新しいブロックエディター
グーテンベルクが新しいWordPressエディターになって以来、私たちは多くの質問をしてきました。これは、グーテンベルクに関して最もよくある質問のいくつかに対する回答です。
1.以前の投稿やページはどうなりますか？それでも編集できますか？
古い投稿やページは完全に安全で、グーテンベルクの影響を受けません。それらは引き続き編集でき、Gutenbergはクラシックエディターを含むコードブロックでそれらを自動的に開きます。
古いエディターで編集することも、古い記事をブロックに変換して新しいブロックエディターを使用することもできます。
2.古いエディターを引き続き使用できますか？
はい、引き続き古いエディターを使用できます。ただインストールして起動するクラシックエディタのプラグインを。
有効にすると、ブロックエディタが無効になり、クラシックエディタを引き続き使用できるようになります。
クラシックエディタは2022年までサポートされることに注意してください。
3.使用しているプラグインまたはテーマで新しいエディターを使用できない場合はどうすればよいですか？
プロジェクトグーテンベルクは長い間開発されてきました。これにより、プラグインとテーマの作成者は、コードの互換性をテストするのに十分な時間を得ることができます。
ただし、新しいエディターでは正しく機能しない可能性のあるプラグインやテーマがまだいくつかあります。この場合、クラシックエディタープラグインをインストールするか、開発者にGutenbergサポートを追加するように要求するか、代替プラグインまたはテーマを直接見つけることができます。
4.グーテンベルクのヒントとコツをもっと学ぶ方法は？
WPウェブマスターは、WordPressの新しいブロックエディターを学ぶのに最適な場所です。私たちは中国のインターネット上で影響力のあるWordPressリソースのウェブサイトです。
新しいブロックエディターをマスターできるように、新しい記事を公開し、古いリソースを更新します。
同時に、ご不明な点がございましたら、お気軽にコメントを残すか、当社ホームページのお問い合わせフォームからお問い合わせください。
このグーテンベルクのチュートリアルが、新しいWordPressブロックエディターの使用方法を学ぶのに役立つことを願っています。また、ElementorおよびWordPress Webサイトの速度を低下させる理由と解決策を確認して、Webサイトの速度低下または速度低下の問題を解決することもできます。