新しいWordPressブロックエディターの使用方法– WordPress Gutenbergガイド

2018年12月6日のWordPress 5.0のリリース以降、WordPressには新しいデフォルトのコンテンツエディターが追加されました。開発中にWordPress Gutenbergエディターと呼ばれる, "グーテンベルク" 今だけです "WordPressエディター" または "ブロックエディター" より具体的にしたい場合.


新しいブロックエディターでは、コンテンツ作成に対するまったく異なるアプローチが ブロック (したがって、名前…)。そして、この投稿では、WordPressサイトでコンテンツを作成するために、これらのブロックと新しいエディターのその他の機能を使用する方法を正確に学習します.

サイトをWordPress 5.0に更新したかどうかに関係なく、新しいGutenbergブロックエディターを使用してコンテンツを作成する方法については、このまま読み進めてください。 とレイアウト あなたのサイトで.

WordPress Gutenbergガイド

Contents

グーテンベルクとは?

Gutenbergは、新しいWordPressブロックエディターのプロジェクト名です。これは、WordPress 5.0のデフォルトのWordPressエディターとしてWordPress TinyMCEエディターを置き換えました。.

Gutenbergは編集者の開発中の正式名称でしたが、現在は "WordPressブロックエディター" または "WordPressエディター" 正式にはコアソフトウェアの一部だからです。そのため、私はそれを "ブロックエディター" この投稿ではなく、 "グーテンベルク".

簡単に復習すると、古いWordPress TinyMCEエディタは次のようになります。このエディタは現在、 クラシックエディター

オリジナルのワードプレスtinymceエディター

新しいWordPressの外観は次のとおりです ブロックエディター, 別名グーテンベルク:

WordPress Gutenbergブロックエディター

しかし、それは美的アップデート以上のものです. グーテンベルクは編集エクスペリエンスを完全に変える コンテンツへのブロックベースのアプローチに移動することで(1秒にどのブロックがあるかについての詳細!).

現在の焦点はコンテンツの作成にありますが、最終的な目標はGutenbergブロックエディターを使用することです "投稿を超えてページテンプレートを作成し、最終的には完全なサイトのカスタマイズ."

つまり、最終的には、ランディングページやその他の重要なコンテンツを含むブロックを使用してサイト全体を構築できるようになります.

グーテンベルクはWordPressの一部ですか?

グーテンベルクは2018年12月6日にWordPress 5.0の一部として正式にリリースされました. サイトをWordPress 5.0に更新した場合は、デフォルトで新しいブロックエディターが表示されます。.

ただし、リリースの規模が大きいため、一部の管理されたWordPressホストは、人々のサイトをすぐに更新しないことを選択しています。そのため、サイトでWordPress 5.0がまだ実行されていない可能性があります。その場合は、更新するかどうかはあなた次第です(ただし、パフォーマンスとセキュリティ上の理由から、あまり長く待たないでください)。.

WordPress Gutenbergエディターの仕組み

一秒前に、グーテンベルクはブロックベースのエディターだと言った。ほとんどの人のように、それが何を意味するのかわからないかもしれないので、あなたをぶら下げておくのは一種の失礼でした.

これがブロックベースの編集101です。

基本的に、Gutenbergは現在のWordPress TinyMCEエディターの単一の編集フィールドを多数の個別編集フィールドに置き換えます "ブロック".

これらのブロックを使用すると、従来のWordPressエディターで許可されていたものよりも複雑なデザインを構築できます.

では、ブロックとは?

まあ、ブロックはほとんど何でもかまいません。たとえば、次のブロックを持つことができます。

  • 通常のテキスト
  • 画像
  • ビデオ埋め込み
  • ボタン
  • ウィジェット(はい、サイドバーで使用するのと同じウィジェット)
  • テーブル
  • 等.

そして、すばらしいのは、開発者がプラグイン経由でアクセスできる独自のサードパーティブロックを作成して、さらに柔軟性を高めることができることです。.

各ブロックは、個別に操作できる独自のエンティティです。たとえば、次の3つのブロックを含むGutenbergの簡単な投稿は次のとおりです。

  • 2テキストブロック
  • 1画像ブロック

これらのブロックをドラッグアンドドロップするだけで簡単に並べ替えることができます。

グーテンベルクのドラッグアンドドロップ

そして、各ブロックは "分ける", 特定のブロックだけにカスタム背景などを追加することもできます.

一般的に、それはあなたにより多くの柔軟性と詳細な制御を提供します.

グーテンベルクはページビルダーです?

ええ、結構です。少なくとも現在の形ではない.

Gutenbergは、ブログの投稿や標準ページなどの通常のコンテンツのスタイルを大幅に簡素化する予定ですが、現在の形式のページビルダーの1対1の代替ではありません.

表面的なレベルでは、グーテンベルクにはすでに2つの本質的なものが欠けています。

  • 基本的な列ブロックがあり、一部のサードパーティ開発者が興味深いブロックを作成していますが、柔軟な列.
  • 真のドラッグアンドドロップ–新しいバージョンのGutenbergではドラッグアンドドロップでブロックを再配置できますが、ほとんどのページビルダーのようにまだフリーフォームではありません。.

そうは言っても、Gutenbergのブロックエディターは、ほとんどの場合ページビルダーの必要性を排除する準備ができています。 "標準" コンテンツ、そしてそれはまた、より多くを作成するための単一の統一された方法を作成します 複雑なポスト WordPressのレイアウト.

しかし、それはより多くを構築することになると 複雑なページ, ランディングページのように、ページビルダーが提供する柔軟性の高さを理解するでしょう(少なくともGutenbergの最初のリリース中)。.

たとえば、ElementorとDivi BuilderとBeaver Builderを比較すると、トップページビルダーが次のような機能を提供していることがわかります。

  • 自由形式のドラッグアンドドロップ編集
  • 任意の数の列を作成して個々の要素をドラッグできる真のマルチ列サポート
  • 大量の既製テンプレート
  • カスタムマージン/パディングなどのスポットを備えた高度なスタイルオプション
  • レスポンシブデザインの設定

新しいブロックエディタはいつかそこに到着するかもしれません。しかし、少なくとも最初のリリース形式では、ページビルダーは依然として、より複雑なスタンドアロンページを設計する柔軟性を提供します.

新しいブロックエディターを使用する必要がありますか?以前のWordPressエディターを維持できますか?

番号, 新しいブロックエディターを使用する必要はありません。 はい, 以前のWordPressエディターを引き続き使用できます。 WordPress 5.0へのアップグレード後にGutenbergブロックエディターを非アクティブ化し、サイトをクラシックエディターに戻すには、公式 クラシックエディター プラグイン.

ガイドを読む Gutenbergブロックエディターを無効にする方法 詳しく知ることができ.

新しいGutenbergブロックエディターを使用するために特別なテーマが必要ですか?

現在はデフォルトのWordPressエディターであるため、ブロックエディターはWordPressテーマで動作するように構築されています。ただし、特にグーテンベルクの互換性を提供するテーマを選択すると、いくつかの非常に現実的な利点が得られます.

まず、テーマは、これらすべての新しいブロックに組み込みのスタイルを提供できます。さらに良いことに、テーマは実際にこれらのスタイルをエディター内にロードできます。つまり、より良いWYSIWYGエクスペリエンスのためにコンテンツを構築するときに、ブロックの実際のスタイルを確認できます(これの基本バージョンを実際に見てください

グーテンベルクのテーマは、さまざまなブロックで構成される既製のテンプレートを提供することもできるため、必要なのは、コンテンツを既存のブロックに接続してヒットすることだけです。 公開する.

さらに、全幅の画像の配置など、他にもいくつかの小さな利点があります。だから–あなたは好きなテーマを使うことができますが、テーマの開発者がサポートを追加することを計画していることを確認するために再確認する価値があります.

テストにテーマを使用したいだけの場合、これらのテーマはすべて新しいブロックエディターをサポートしています。

  • ネーブ – Neveは、Gutenbergブロックエディターと連携するように特別に構築された新しいテーマです.
  • ザクラ – ThemeGrillの素晴らしい軽量オプション.
  • ヘスティアライト –マテリアルデザインの原則に従う柔軟なテーマ.

その他のオプションについては、Gutenberg互換の最高のWordPressテーマのコレクションをチェックしてください.

Gutenberg WordPressブロックエディターで最初のレイアウトを構築する

WordPress 5.0と新しいブロックエディターを使用している場合は、この記事の要点を掘り下げる準備ができています。以下では、新しいWordPress Gutenbergブロックエディターを実際に使用して完全なページレイアウトを作成する方法を示します.

これにより、WordPress 5.0と新しいエディターを最大限に活用する準備が整います。.

WordPressブロックエディターインターフェースのクイックツアー

ブロックを追加する前に、メインブロックエディターインターフェースの要素を簡単に説明します。

gutenbergブロックエディターインターフェイス

  • (A) –新しいブロックを追加できます.
  • (B) –元に戻す/やり直しボタン
  • (C) –カテゴリなどをカバーするドキュメント設定へのアクセスを提供します & タグ、特集画像など。これは、WordPressエディターの現在のサイドバーに似ています。
  • (D) –個々のブロックを選択すると、そのブロックに固有の設定にアクセスできます
  • (E) –投稿のライブプレビューにアクセスしたり、投稿を公開/更新したりできます
  • (F) –ブロックを追加したら、ここで実際に投稿のコンテンツを操作します

新しいブロックを追加する

イントロで説明したように、個別に使用します "ブロック" 新しいエディターでレイアウトを構築する.

新しいブロックを追加するには、クリックするだけです +プラス アイコンをクリックして、追加するコンテンツのタイプを選択します。

新しいブロックを追加する

上記の例では、基本的な段落ブロックを追加する方法を示しました。しかし、グーテンベルクには実際には、さまざまなセクションに分けられたさまざまなブロックが含まれています。

ブロックの種類

上部に、あなたのリストが表示されます 最も使用 ブロック。ただし、下にスクロールすると、共通ブロック、フォーマット、レイアウト要素、ウィジェット、埋め込みのセクションも表示されます。

ブロックの種類

  • インライン要素 –インライン画像用の1つのブロックのみが含まれます.
  • 共通ブロック –画像、段落(通常のテキスト)、見出し、引用などの基本的な構成要素が含まれています.
  • フォーマット –プルクォート、表、または従来のWordPressテキストエディターなどのフォーマットされたコンテンツを追加できます
  • レイアウト要素–テキストを2つの列に分割し、ボタン、セパレータ、または "もっと" 鬼ごっこ
  • ウィジェット –ショートコード、最新の投稿、またはカテゴリを追加できます。 Gutenbergでサイドバーウィジェットを表示することも可能です.
  • 埋め込み – Twitter、YouTube、Facebook、Instagramなどの外部ソースからのコンテンツを埋め込むのに役立ちます.
  • 再利用可能 –コツをつかんだら、ブロックのグループを再利用可能なテンプレートとして保存し、ここに表示させることができます。この領域は、最初の再利用可能なテンプレートを保存するまで表示されません。これは、この投稿で後ほど実行する方法を示します。.

グーテンベルクで基本的なレイアウトを構築する

簡単に始めましょう。次のような基本的なブログ投稿のレイアウトを作成したいとします。

  • 通常のテキスト
  • 画像
  • 見積もり
  • 埋め込まれたYouTubeビデオ

これがグーテンベルクでのやり方です。

最初に、投稿全体をエディターで作成します。または、あなたが私のようなもので、 Googleドキュメントで書く, あなたはそれをすべて貼り付けることができ、それからグーテンベルクはそれを自動的にブロックに変換します.

非テキストブロックの追加

コンテンツがブロックに分割されたので、最初の画像を挿入する場所にカーソルを合わせて、 プラス アイコン。それは休憩を作成します。次に、 プラス アイコンをもう一度クリックして画像ブロックを挿入します。

画像ブロック

これにより、現在のWordPressエディターと同様の方法で画像をアップロードまたは選択できる画像ブロックを挿入できます。

画像を挿入

画像を選択すると、ページレイアウトに表示されます。

インライン画像

次に、プルクォートを挿入する場所にカーソルを合わせ、同じアプローチを使用して別のブロックを挿入します。次のいずれかを検索できます "見積もり" またはに行く 共通ブロック セクション:

見積もりを挿入

次に、新しいプルクォートブロックが表示されます。見積もりを作成するには、ブロックをクリックして次のように入力するだけです。

見積もりを入力

YouTube動画を挿入するには、新しい YouTube からのブロック 埋め込み タブ。ビデオを挿入するには、URLを入力してクリックするだけです 埋め込む

YouTubeブロック

オプション–異なる列の作成

さらにクリエイティブになりたいですか? Gutenbergには、複数の列をすばやく作成できる実験的な列機能が含まれています。あなたがする必要があるのは、 列(ベータ) からのブロック レイアウト要素 セクション。次に、その中に他のブロックを挿入できます。

グーテンベルクカラム

完了したら、クリックするだけです 公開する ボタン:

投稿を公開

そして、フロントエンドにフォーマットされたブログ投稿があります.

個々のブロックをカスタマイズする方法

WordPress Gutenbergエディターにはさまざまなブロックが多数含まれているため、個々のブロックの使用方法を示すことはできません.

しかし、私はあなたにすべてのブロックに適用される基本的なフレームワークを与えることができます.

基本的に、あなたは コンテンツ エディターの実際の本文で:

ブロックを編集する

基本的なテキストのスタイルと配置については、ブロックにカーソルを合わせると表示されるメニューバーを使用できます。

ブロックのスタイリング

さらに高度なスタイルを設定するには、通常、ブロックを ブロック 設定タブ.

そのタブにアクセスするには、編集するブロックを選択して、 ブロック タブ:

ブロックのカスタマイズ

個々のブロックを再配置する方法

ブロックを再配置するには、2つのオプションがあります。あなたは使うことができます アップ または ダウン ブロックにカーソルを合わせると、その方向にブロックが移動する矢印。

グーテンベルクブロックを移動する

または、ブロックをドラッグアンドドロップすることもできます。ドラッグアンドドロップ機能をアクティブにするには、マウスを上に置く必要があります。 六つのドット 上矢印と下矢印の間

グーテンベルクのドラッグアンドドロップ

すべてを一緒に入れて

新しいブロックエディタを使用して物事がどのように機能するかを理解すると、かなり簡単で直感的です.

最初は、いくつかの成長する苦痛を経験し、当然のこととして取った基本的なアクションを実行するのに苦労するかもしれません.

しかし、コツをつかんだら、建物のレイアウトを巡る必要があります。そして、Gutenbergに付属するより高度なブロックにより、TinyMCE WordPress Editorよりも柔軟性が高まります。.

いくつかのきちんとした、しかしより高度なグーテンベルクのトリック

WordPress Gutenbergブロックエディターに慣れると、これらのトリックのいくつかが時間を節約できることに気付くかもしれません.

入力して新しいブロックをすばやく作成する

上記では、挿入ボタンを使用してブロックを作成する方法を示しました。ただし、時間を節約するために、次の構文を入力するだけで実際にブロックを作成できます。

/ BLOCK-NAME

自動提案ボックスが表示され、関連するブロックを見つけるのに役立ちます.

たとえば、キーボードだけで画像ブロックを作成する方法は次のとおりです。

かなり便利で時間を大幅に節約!

ブロックのショートカット

ソースコードを直接編集する

いつでも、投稿全体のソースコードを編集できます。 三点 右上にあり、選択 コードエディター

gutenbergでコードを編集する

全画面モード、固定ツールバーなどをアクティブ化.

新しいブロックエディターには、編集エクスペリエンスを変更できるいくつかの異なるモードが含まれています。あなたはできる:

  • TinyMCEエディターのような固定ツールバーを追加する
  • 全画面表示
  • 置く "スポットライト" アクティブなブロック上

これらを使用するには "ビュー", クリックしてください 三点 右上のアイコン.

グーテンベルクビュー

グーテンベルクのキーボードショートカットを使用して時間を節約する

ブロックエディターには、標準の書式設定のショートカット以外にも、次のようなさまざまな専用のキーボードショートカットがあります。

  • 選択したブロックの上または下に新しいブロックを挿入する
  • ブロックを削除する
  • ブロックを複製する
  • 等.

キーボードショートカットの完全なリストを開くには、 Shift + Alt + H 近道.

グーテンベルクのキーボードショートカット

再利用可能なブロックテンプレートを作成する

複数の場所で再利用する必要がある特定のブロックのコレクション/配置がある場合は、ブロックのグループを再利用可能なテンプレートとして保存できます。テンプレートに名前を付けることができます。次に、通常のブロックと同じように挿入できます.

テンプレートを作成するには:

  • 含めるブロックを選択します
  • クリック 三点 アイコン
  • 選択する 再利用可能なブロックに追加

Gutenbergの再利用可能なブロックテンプレート

再利用可能なブロックコンテンツを編集する

再利用可能なブロックを使用すると、フォーマットされたコンテンツをすばやく簡単に挿入できるだけでなく、その再利用可能なブロックのすべてのインスタンスをすばやく更新することもできます。.

つまり、再利用可能なブロックのコンテンツを編集すると、その再利用可能なブロックを使用するすべての投稿も新しいコンテンツを取得します.

再利用可能なブロックを編集するには、 再利用可能 ブロック挿入ツールのセクションをクリックして、 再利用可能なすべてのブロックを管理する ボタン。または、yoursite.com / wp-admin / edit.php?post_type = wp_blockにアクセスできます(yoursite.comを実際のURLに置き換えてください).

WordPressの再利用可能なブロックを編集する

プラグインを使用してブロックエディターを拡張する

派手になりたい場合は、独自のブロックを追加するGutenberg拡張プラグインをたくさん見つけることができます.

カワウソのブロック 始めるのに適したオプションです。価格、紹介状、Googleマップ、共有アイコンなどの追加ブロックを提供します, "クリックしてツイート" ボタンなど.


OtterによるGutenbergブロックとテンプレートライブラリ OtterによるGutenbergブロックとテンプレートライブラリ

著者: テーマアイル

現在のバージョン:1.5.4

最終更新日:2020年5月26日

otter-blocks.zip


98%評価


60,000以上のインストール


WP 5.2+が必要

ブロックマネージャーで混乱を制御

新しいエディターは多くのブロックを追加します。特に、前述のブロックプラグインの一部を使用している場合はそうです。これは物事を少し雑然とし、あなたを遅くする可能性があります。使用する予定のないブロックがある場合は、 ブロックマネージャー それらを無効にする.

ブロックマネージャを使用するには:

  • クリック 三点 右上のアイコン
  • 選択する ブロックマネージャー
  • チェックボックスを使用して、必要に応じてブロックを無効にします

ワードプレスブロックマネージャー

ブロックナビゲーションを使用してコンテンツをすばやくナビゲートする

長いコンテンツ、またはネストされたブロックを多数使用するコンテンツの場合、探しているブロックをすばやく見つけるのは難しい場合があります.

支援するために、ブロックエディターには ナビゲーションをブロック ツール。ツールバーをクリックするか、 Shift + Alt + O キーボードショートカット.

ネストされたブロック(列など)内にいる場合、 ナビゲーションをブロック ツールはネストされたすべてのブロックを表示します。特定のブロックを選択するには、リストでそれをクリックします.

ブロックナビゲーション機能

編集モードと選択モードを切り替える

WordPress 5.4では、2つの異なるモードにアクセスできます。これらのモードは、上部のツールバーを使用して切り替えることができます。

  • 編集する –これは、ほとんどの場合あなたが仕事をするものです。すべてのブロックのコンテンツを編集できます。これはデフォルトのエディターモードです.
  • 選択する –これにより、特にネストされたブロック(列内のブロックなど)を操作する場合に、特定のブロックを選択しやすくなります。ブロックをクリックすると、自動的に元に戻ります 編集する モード.

WordPressブロックエディター選択モード

新しいブロックエディター機能を試す

ブロックエディターがコアに統合されて以来、実際にはブロックエディターには次の2つのバージョンがあります。

  1. コアWordPressソフトウェアのネイティブバージョン(これはおそらく使用しているものです)
  2. Gutenbergプラグイン

Gutenbergプラグインのバージョンは、基本的にはコアエディターのテスト環境です。プラグインバージョンには、開発中の新機能が含まれています。最終的に、これらの機能はコアに統合されます。しかし、それらを早期に試したい場合は、WordPress.orgからGutenbergプラグインをインストールするだけです。.


グーテンベルク グーテンベルク

著者:グーテンベルクチーム

現在のバージョン:8.2.1

最終更新日:2020年5月28日

gutenberg.8.2.1.zip


40%評価


200,000以上のインストール


5.3.0必要

すべての古いコンテンツはどうなりますか?

完了する前に、WordPress 5.0に更新した後、古いコンテンツがすべてどうなるかを簡単に説明します(まだ更新していない場合)。.

心配しないでください-消えません!しかし、エクスペリエンスは少し異なります。

サイトをWordPress 5.0に更新し、元のTinyMCEエディターで構築された既存のコンテンツがある場合、ブロックエディターは古いコンテンツをすべて1つにまとめます クラシックブロック. このクラシックブロックは、基本的にはTinyMCEエディターですが、新しいブロックエディター内に埋め込まれています.

グーテンベルククラシックブロック

古いコンテンツを操作するには、次のいずれかを実行できます。

  • Classicブロックに残し、古いWordPressエディターと同じように編集します
  • 使用 三点 アイコンと選択 ブロックに変換. それはすべてを個々のブロックに分割します。その後、Gutenbergブロックエディタで最初に作成した場合と同じようにコンテンツを操作できます。.

ブロックに変換

グーテンベルクブロックエディターの次の予定?

現在、ブロックエディターは正式にコアの一部となっていますが(WordPress 5.0のリリースのおかげです)、WordPressチームはGutenbergプロジェクトの完成には程遠いです.

現在、コアチームは、WordPressウィジェットをブロックエディターで置き換え、ナビゲーションブロックをブロックで作成できるように取り組んでいます.

これらの機能はまだ完全ではありませんが、まだ準備中です。そのため、できるだけ早くブロックエディターインターフェースの学習を開始するのにお金がかかります!

ほとんどのカジュアルなユーザーにとって、それは、少しの苦痛の後、より柔軟なコンテンツ作成体験をもたらすでしょう.

非開発者は、ボタンやコンテンツの埋め込みなどの追加要素を使用して、より複雑なレイアウトを直感的に作成できます。そして、それがうまくいけば、WordPressが成長し続けるのを助けるでしょう.

さて、ご連絡をお待ちしております。新しいGutenbergブロックエディターについては、多くの人が強く考えていると思います。コメントでお知らせください。!

WordPressサイトの高速化に関する速習コースに参加することを忘れないでください。いくつかの簡単な修正により、ロード時間を50〜80%も短縮できます。

Karol Kによるレイアウト、プレゼンテーション、編集.

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