グーテンベルクブロック：2022年の重要な考慮事項を含む究極のユーザーガイド

2018年12月6日の新しいリリースで、WordPress 5.0Kirkはデフォルトのブロックエディター（別名Gutenberg）を導入しました。 この新しいコンテンツエディタは、まったく異なるアプローチでコンテンツを作成するのに役立ちます。 これはWordPressTinyMCEエディターに取って代わり、ブロックの形でコンテンツを作成するためのより視覚的な方法をもたらします。

Gutenberg Editorは、事前に作成された要素またはブロックの豊富なライブラリを提供します。 また、WordPressサイトでの作業中にそれらを使用できます。 コンテンツの各部分はドラッグ可能なブロックです。 そして、これらのブロックは、コンテンツレイアウトを作成するために使用されるエディターブロックです。

サイトをWordPress5.0に更新したかどうかに関係なく、将来の進歩のためにGutenbergBlockを使用する方法を学ぶ必要があります。 ここでは、人気のある30パーティのブロックとともに、すべてのGutenbergブロックWordPressの包括的なアイデアとリストを取得します。

WordPress Gutenberg Blocks：未来のためのあなたの最高の仲間

グーテンベルクブロックは間違いなくコンテンツ作成プロセスをより最適化してスマートにします。 このエディターに慣れると、サイトの開発時間が大幅に短縮されます。

一言で言えば、グーテンベルクはWordPressプラットフォーム用の新しいブロックスタイルのエディターです。 それはあなたがあなたのサイトで投稿、ページ、製品、そしてほとんどすべてを作成する方法を徐々に変えました。

実際、グーテンベルクを使用すると、すべてのタイプのコンポーネントをより整理された方法で処理できます。 テキスト、画像、ビデオ、表など。 Gutenberg Editorを初めて使用する場合は、この初心者向けガイドのツアーに参加して、役立つヒントやコツを確認してください。

注：ブロックのフロントエンドビューは、サイトで使用しているテーマによって大きく異なります。

WordPressのデフォルトのグーテンベルクブロック

将来に備えるために、デフォルトのグーテンベルクブロックの名前とその使用法について知っておく必要があります。 WordPressユーザーとして、遅かれ早かれこれらのブロックを紹介する必要があるでしょう。

したがって、基本的にグーテンベルクブロックは次のカテゴリで構成されています。

• 最も使用
• 共通ブロック
• フォーマット
• レイアウト
• ウィジェット
• 埋め込み
• 再利用可能

「+」プラスアイコンをクリックすると、サイトに新しいブロックを追加できます。 リストの一番上に、最も使用されているブロックがあります。 サイトで頻繁に使用するブロックがここに表示されます。

その下で、ブロックはカテゴリごとにグループ化されています。 タイトルをクリックして、ブロックを公開します。

さらに、右側の編集パネルから、特定のブロックのフォントサイズ、ドロップキャップ、テキストおよび背景色の変更を設定できます。

それらが実際にどのように機能するか見てみましょう！

一般的なブロック-あらゆる投稿で定期的に使用されます

テキストや画像など、投稿に必要な最も一般的なブロックは次のとおりです。 ページをカスタマイズしたり、サイトに投稿したりするには、これらの基本的な要素が必要です。

1. 段落：コンテンツの単一の段落を追加するための単純なテキストのみのブロック。
2. 画像：投稿の任意の場所に1つの画像を挿入します
3. 見出し：見出しタグを追加
4. ギャラリー：画像のグループをギャラリースタイルで表示します
5. リスト：箇条書きまたは番号付きリストを追加します
6. 引用：2つの異なるスタイルで引用を含める
7. オーディオ：サイトにオーディオファイルをアップロードする
8. 表紙：テキストオーバーレイ付きのビデオまたはオーディオファイルを挿入します
9. ファイル：ダウンロード可能なファイルへのリンクを追加します
10. ビデオ：ビデオファイルをアップロードして、サイトで直接再生します

フォーマット-追加のカスタマイズオプション

これらのブロックは、コード、詩、および特別なフォーマットを必要とする他のタイプのテキストなど、コンテンツにいくつかの追加のフォーマットオプションを追加するために使用されます。

1. コード：あらゆるタイプの技術コードを簡単に記述できます
2. クラシック：クラシックなWordPressエディターの編集ツールを提供します
3. カスタムHTML：カスタムHTMLコードを挿入し、WordPressエディターでプレビューします
4. 書式設定済み：間隔とタブを尊重するテキストを追加します
5. 引用：テキストからの引用に特別な視覚的強調を追加します
6. 表：表形式のデータを表示するには表を使用します
7. 詩：すべてのスペースと改行を含む詩や他の文学表現を書く

レイアウト要素-デザインスタイルを強化する

これらのブロックは、サイトのコンテンツを魅力的な方法で表現するのに役立ちます。 それはあなたのサイトをあなたの訪問者により魅力的にします。

1. ボタン：ボタンを作成し、背景とテキストの色が異なるリンクを挿入します
2. 列：複数列のレイアウトを作成し、各列に他のブロックタイプを含めることができます
3. メディアとテキスト：テキストとメディアファイルを1つのブロックに並べて挿入します。 異なる列
4. 詳細：コンテンツを「続きを読む」ブロックを含む2つの部分に分割します
5. ページ分割：サイトのコンテンツを複数のページに分割します
6. セパレータ：投稿に短い水平線を追加します
7. スペーサー：投稿の2つのブロックの間に大きな長方形の空白スペースを含めます
8. テキスト列：新聞のように、テキストを追加して2〜4列で表示します。

ウィジェット-任意のページまたは投稿にいくつかのウィジェットを追加します

これらのブロックを使用すると、コンテンツ内にWordPressウィジェットを追加できます。 それらはサイドバーとフッターで使用される可能性が高くなります。

1. ショートコード： WordPressショートコードを介してフォームのようなカスタムコンテンツを挿入します
2. アーカイブ：投稿の月次アーカイブを表示します
3. カレンダー：投稿の月間カレンダーを表示します
4. カテゴリ：すべての投稿カテゴリのリスト
5. 最新のコメント：最後の5つのコメントの概要（完全なコメントではありません）
6. 最新の投稿：最近の投稿のリスト
7. RSS：任意のページまたは投稿にRSSフィードを追加します
8. 検索：任意のページまたは投稿にWordPress検索を追加します
9. タグクラウド：投稿タグのクラウドリスト

埋め込み-他のソースからのコンテンツを挿入

埋め込みブロックを使用すると、外部ソースからの画像、ビデオ、ツイート、オーディオ、Facebook投稿、およびその他のコンテンツを埋め込むことができます。

• YouTube
• ツイッター
• フェイスブック
• インスタグラム
• Vimeo
• Soundcloud
• Spotify
• Flickr
• Animoto
• Cloudup
• CollegeHumor
• Dailymotion
• ファニーオアダイ
• Hulu
• Imgur
• Issuu
• キックスターター
• Meetup.com
• Mixcloud
• Photobucket
• ポールパパ
• Reddit
• リバーブネーション
• スクリーンキャスト
• Scribd
• Slideshare
• SmugMug
• スピーカー
• TED
• タンブラー
• VideoPress
• WordPress
• WordPress.tv

再利用可能なブロック：

ブロックである「再利用可能なブロックに追加」を押すと、それはさらに使用するために再利用可能になります。 おそらく、共有メニューセクションの下にあります。

ブロックリストと機能の両方を拡張するサードパーティのプラグイン

他の重要なプラグインをインストールして、高度で強力な属性でブロックリストを拡張できます。 機能豊富なプラグインを選択すると、エディターに新しいブロックを簡単に追加できる場合があります。 また、デフォルトのブロック要素では不可能な多くの高機能アクティビティを実行できます。

たとえば、一部のギャラリープラグインでは、ブロックを使用して多くの高度な効果を備えたギャラリーを追加できます。

それ以外にも、新しいブロックの追加のみに焦点を当てたプラグインがたくさんあります。 ここでは、デフォルトのブロックと一緒に新しいブロックを追加するために使用できる上位のWordPressプラグインのいくつかをリストしました。

1. グーテンベルクの究極のアドオン–15以上のグーテンベルクブロックを備えた無料プラグイン
2. CoBlocks –ページビルダーグーテンベルクブロック
3. 積み重ね可能–グーテンベルクブロック
4. 究極のブロック–カスタムグーテンベルクブロック
5. 高度なグーテンベルク–グーテンベルクの20以上の新しいブロック
6. カデンスブロック–グーテンベルクページビルダーツールキット
7. Envira Gallery –フォトギャラリー用のWordPressブロック
8. アトミックブロック–グーテンベルクブロックコレクション

グーテンベルクの究極のアドオン–15以上のグーテンベルクブロックを備えた無料プラグイン

これは、多くのグーテンベルクユーザーの間で人気のあるアドオンの1つです。 グーテンベルクの究極のアドオンは、ユニークでクリエイティブなブロックの完全なパッケージです。 したがって、このプラグインを使用して、エディターをスーパーチャージして美しいページや投稿を作成できます。

これには、以下を含む15を超えるグーテンベルクブロックが含まれます。

• マルチボタン：単一のレスポンシブブロック内に複数のカスタマイズ可能なボタンを追加します。
• 高度な見出し：トレンディで魅力的な見出しと小見出しを区切り文字で含める
• 情報ボックス：見出しと説明を含む画像またはアイコンを挿入します
• 価格表：レストランメニューのような価格表を簡単に作成
• お客様の声：このブロックを使用してクライアントのレビューを追加する

最も驚くべきことに、このプラグインにはAstraテーマのサポートが組み込まれています。 そして、アストラはグーテンベルクと完全に互換性があります。

CoBlocks –ページビルダーグーテンベルクブロック

CoBlocksには、新しいGutenbergエディター用のWordPressブロックを構築するクリエイティブなページがたくさんあります。 これにより、グーテンベルクでのページ作成エクスペリエンスが向上します。 この軽量のWordPressプラグインは、美しいWebページを作成するのに役立ちます。

現在、20以上のインタラクティブブロックをサポートしています。

• アコーディオンブロック
• アラートブロック
• 著者プロファイルブロック
• ボタンブロック
• カルーセルギャラリーブロック
• クリックしてツイートブロック
• コラージュギャラリーブロック
• ダイナミックセパレータブロック
• イベントブロック（新規！）
• 機能ブロック
• フード＆ドリンクブロック
• フォームブロック
• GIFブロック
• GitHub要点ブロック

その他。

CoBlocks機能を使用してWebサイト全体を構築できます。 その上、それはあなたが魅力的な活版印刷要素でウェブページをデザインすることを可能にします。

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

Stackableは、新しいWordPressブロックエディター用に特別に設計されています。 グーテンベルク用の23の高品質ページビルディングブロックと50以上のブロックレイアウトおよびプリセットセクション/ブロックデザインをサポートします。 それはあなたのウェブ開発の旅をスムーズにするための高度で柔軟なウェブデザインオプションを提供します。

いくつかの人気のあるスタッカブルブロックは次のとおりです。

• コンテナブロック
• フィーチャーグリッドブロック
• カードブロック
• ヘッダーブロック
• カウントアップブロック
• チームメンバーブロック
• 通知ブロック

これらのカスタマイズ可能で多様なデザインレイアウトを使用して、デザイン機能を強化します。

アルティメットブロック-カスタムグーテンベルクブロック

このグーテンベルクブロックプラグインは、ブロガーやマーケター向けに特別に設計されています。 したがって、グーテンベルクを使用して、より優れた魅力的なコンテンツを簡単に作成できます。

現時点では、Ultimate Blocksは約20ブロックをサポートしており、開発の旅をよりエキサイティングなものにします。 いくつかの注目すべき機能を以下に示します。

• コンテンツフィルター
• 秒読み
• 画像スライダー
• タブ付きコンテンツ
• スタイル付きボックス
• コンテンツの切り替え

さらに支援が必要な場合は、インタラクティブなFacebookグループに参加できます。

高度なグーテンベルク–グーテンベルクの20以上の新しいブロック

Advanced Gutenbergを使用すると、デフォルトのGutenbergエディターがより強力になり、プロのWebサイトを非常に簡単に構築できます。 WordPressサイトをスムーズにカスタマイズするための20以上の新しいブロックとオプションを提供します。

ここでは、次のような固有のブロックを取得します。

• カラムマネージャー
• 最新の投稿スライダー
• タブブロック
• アイコンブロック
• 高度な画像ブロック
• メールオプトインブロック
• などなど

それにもかかわらず、彼らはユーザーにサポートを提供するための精巧なドキュメントとパーソナライズされたフォーラムを持っています。

カデンスブロック-グーテンベルクページビルダーツールキット

このプラグインを使用すると、Gutenbergエディターにカスタムブロックとオプションを追加できます。 おそらく、それはグーテンベルクの編集機能を拡張して、カスタムレイアウトやより魅力的なコンテンツを作成できるようにするかもしれません。

Kadenceは実際に次のブロックをサポートしています。

• 行レイアウト
• アドバンストギャラリー
• 形
• 高度な見出し
• 高度なボタン
• タブ
• アコーディオン
• お客様の声
• アイコン
• スペーサー/ディバイダー
• インフォボックス
• アイコンリスト

これらとは別に、あらゆるタイプのレイアウトを簡単に作成するのに便利です。 これは、人気のあるWordPressPageBuilderプラグインでのみ可能です。

Envira Gallery –フォトギャラリーに最適なWordPressブロック

Enviraは、サイトの速度を犠牲にすることなく、WordPressサイトにギャラリーを挿入するための完全に最適化された強力なプラグインです。 このギャラリープラグインを使用すると、アルバム、タグ、ソーシャルメディアの統合、ギャラリーテンプレート/ギャラリーレイアウト、ディープリンク、ページ付け、eコマース、画像校正などを含めることができます。

このプラグインをアクティブにすると、共通ブロックの下に新しいオプションが表示されます。 そこから、必要に応じてさまざまなタイプのギャラリースタイルを検索できます。 このプラグインはWooCommecreプラグインと完全に互換性があるため、写真を販売するためのあらゆる写真サイトで簡単に使用できます。

アトミックブロック–グーテンベルクブロックコレクション

アトミックブロックは、新しくて上品なグーテンベルクブロックのセットをもたらします。 アレイテーマの同じ才能のあるチームも、このトレンディなブロックコレクションの背後で働いています。

現在、Atomic Blocksには15個のGutenbergブロックがあり、さらに多くのブロックがあります。

• セクション＆レイアウトブロック
• 高度な列ブロック
• ニュースレターブロック
• 価格ブロック
• ポストグリッドブロック
• コンテナブロック
• お客様の声ブロック
• インライン通知ブロック
• アコーディオンブロック
• 共有アイコンブロック
• 召喚状のブロック
• カスタマイズ可能なボタンブロック
• スペーサー＆ディバイダーブロック
• 著者プロファイルブロック
• ドロップキャップブロック

プラグインをインストールすると、Gutenbergインターフェースに新しいAtomicBlocksセクションが表示されます。 Webサイトで使用する前に、すべてのブロックのライブデモを確認できます。 ブロックエディタとAtomicBlocksを使用してページを作成すると、あらゆる種類のサイトをすばやく設計して起動するための完全な制御が可能になります。

ただし、最適化された方法で美しいコンテンツを作成するための優れたブロックを備えた、より便利なプラグインが見つかる場合があります。 私たちとあなたの考えを共有することを忘れないでください！

グーテンベルクブロックは、サイト設計の新時代を開始します

グーテンベルクエディタは、主にブロックの概念に基づいて構築されています。 これらのブロックは、WordPressエディターで投稿とページコンテンツを編集するためのまったく新しい方法を導入しました。 これらのブロックを使用して、投稿やページに複数の種類のコンテンツを簡単に追加できます。

このブログでは、グーテンベルクブロックに関するすべての情報を共有しようとしました。 そのため、新しいWordPressエディターの革新的なデザインレイアウトで簡単に更新できます。

以下のコメントセクションで、あなたのストーリーを教えて、WordPressに関連する質問をすることもできます。