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

印刷機の発明者である Johannes Gutenberg にちなんで名付けられた新しい WordPress Gutenberg ブロック エディターは、WordPress 5.0 リリースで WordPress のデフォルト エディターとしてデビューしました。

使命はシンプルで、WordPress で新しい執筆と編集の経験を生み出すことです。

ブロックを備えた Gutenberg エディターは、WordPress でメディアリッチなコンテンツを作成する際にユニークな体験を提供します。

従来のエディターではタスクを実行するためにプラグインが必要だった多くの機能をエディターにネイティブにもたらします。

Gutenberg ブロック エディターの使用方法について説明します。

WordPress を使用している多くのクライアントと仕事をしていますが、編集作業へのハードな移行に興奮していたクライアントは多くありませんでした。

これはおそらく、何百万人もの WordPress ユーザーが、Gutenberg のリリースで選択肢がなくなった後、従来のエディターをインストールした理由を説明しています.

理由の 1 つは、古いテーマとの互換性である可能性があり、別の部分は単にユーザーの憤りまたは Gutenberg ブロック エディターの使用方法に関する知識の欠如である可能性があります。

この記事を読み終えた後は、ブロック エディターに慣れていただければ幸いです。

ステップバイステップ: Gutenberg ブロックエディターの使い方

ページまたは投稿を作成することから始まります。 あなたがすでによく知っているもの。

新しいページや投稿を追加するとき、最初に気付くのはこのツールバーです。

左側には + ブロックの追加ツールバーがあります。 これは、コンテンツにブロックを追加できる場所の 1 つです。

最後のブロックの下をクリックしてブロックを追加し、表示される + アイコンをクリックすることもできます。

または、ブロック間にカーソルを合わせると、[ブロックの追加] アイコンが表示され、それをクリックしてブロックを追加します。

次は、元に戻すボタンとやり直しボタンです。

上部のツールバーの次のアイコンは、コンテンツ構造を示しています。

次はブロックナビゲーション

コンテンツが多くのブロックで大きくなった場合は、ここからブロックに移動できます。 かっこいいですね。

右側に、

下書きを保存し、投稿をプレビューして (新しいタブで開きます)、公開します。

次のアイコンは、設定の表示を切り替えます。 右側のペインを表示または非表示にします。

設定が表示されている場合は、それをクリックして非表示にし、気が散らないエディターを広げます。 もう一度クリックすると、設定が表示されます。

ツールバーの最後に 3 つの縦のドットがあります。 これにより、より多くのツールとオプションを表示または非表示にすることができます。

では、より多くのツールとオプションを使用して具体的に何ができるのでしょうか?

• ツールバーがあり、すべてのブロック ツールとドキュメント ツールに 1 か所でアクセスできます。
• スポットライト モード。 一度に 1 つのブロックに集中できます
• フルスクリーンモード。 気を散らすことのない完全な編集体験のために、エディターを爆破しましょう。
• コードと HTML ブロックが処理できないコードを記述する必要がある場合は、ビジュアル エディター (現在表示されているもの) とコード エディターを切り替えます。
• 再利用可能なブロックを管理する
• キーボード ショートカットと
• エディター上のすべてのコンテンツをコピーします。

グーテンベルクブロック

これまでブロックを見てきたけど、ブロックって何？

それらがどのように機能するかを確認するために長い道のりをたどります。うまくいけば、それが理にかなっていて、あなたの理解に基づいて定義を与えることができます.

Gutenberg には、最も使用されるブロック、一般的なブロック、書式設定、レイアウト要素、ウィジェット、および埋め込みを含む、それぞれ 6 つのブロックのカテゴリがあります。

従来のエディターでは、コンテンツを作成するときに、テキスト領域にコンテンツを入力するだけで済みました。

新しいエディターでは、コンテンツの種類について整理されたブロックを利用します。 テキスト コンテンツを追加するには、テキスト/段落ブロック、画像 - 画像ブロック、Html、HTML ブロックが必要です。

これは、すべてのコンテンツを 1 か所に挿入する従来のエディターとは異なります。

ブロック ツールの使用

各ブロックには、コンテンツの作成および編集時に使用できるツールがあります。

すべてのツールが表示されていた従来のエディターとは異なります。

これらのツールにアクセスするには、ブロック内のコンテンツをクリックします。 これはあなたが頻繁に使用するものであるため、段落/コンテンツを使用します。

ブロック内のテキストまたはコンテンツをクリックすると、コンテンツの上にツールボックスが開きます。

表示されるツールは、使用しているブロック専用のものであるため、メディア ブロックをクリックしたときに同じツールが表示されるとは思わないでください。

たとえば、段落ブロックには、左揃え、中央揃え、右揃え、太字、斜体、ハイパーリンクの挿入、テキストの取り消し線などのテキスト書式設定ツールがあります。

さらに、デフォルトのブロック機能を拡張するためにインストールする他のプラグインによって追加されるフォーマット ツール。

ブロックを横断するブロック ツール キットの 2 つの機能は、最初の「変換ブロック」であり、最後に「その他のオプション」アイコン (3 つの縦の点) が表示され、ブロックのその他の設定が含まれます。あなたは一緒に働いています。

Gutenberg ブロックを変換する

ブロックを変換するには、上の段落ブロックで見たようにブロックをクリックします。

最初の段落を引用に変換したいと仮定すると、それをクリックし、[アイコンに変換] をクリックして、変換したい新しいブロックを選択します。

段落ブロックを引用に変換すると、次のようになります。

その他のオプション ボタン

ブロック ツール キットにあるもう 1 つのボタンは、「その他のオプション」アイコン (縦に 3 つ並んだ点) です。 任意のブロックをクリックして表示します。

その他のオプションを使用すると、次のようにブロックでさらに多くのことができます。 ブロック設定を非表示にする、ブロックを複製する、前後のブロックの前後にブロックを挿入する、ブロックを HTML として編集する、ブロックを再利用可能なブロックに追加する、最後にブロックを削除または削除する。

Gutenberg ブロック エディターで投稿またはページのパーマリンクを変更する

投稿またはページのタイトルをクリックします。 その上に、リンクが表示されます。

[編集] ボタンをクリックし、リンクを変更して [保存] をクリックします。

Gutenberg Block Editor のドキュメントとブロックの設定

すべての Gutenberg の投稿またはページの右側には、2 つのタブがあるペインがあります。

ドキュメント ペインには、ステータスと表示、投稿作成者、タグ、フィーチャー イメージ、ディスカッションなど、ページまたは投稿のドキュメント全体の設定があり、投稿やページのコメント、カテゴリ、およびプラグイン関連の設定を許可します。

ブロック ペインには、ブロック固有の設定が含まれています。

コンテンツ領域でブロックをクリックし、右側のペインで [ブロック] ペインをクリックします。

結論

Gutenberg Blocks エディターに関するいくつかの情報を取り上げました。

その知識があれば、コンテンツの作成と公開にそれを使用するのがそれほど威圧的ではないことを願っています.

新しいブロック エディターを使用していますか? それについてあなたの経験は何ですか？

既存の WordPress 投稿を Gutenberg ブロックに変換することもできますか?