WordPressブロックディレクトリ:エッセンシャルガイド

公開: 2022-04-12

WordPressブロックディレクトリは、WordPressユーザーがWordPressブロックエディター内からサードパーティのWordPressブロックを検出、インストール、テストできる新しい方法です。 WordPress5.5で導入されたWordPressBlockDirectoryを使用すると、ニーズに最適なWordPressブロックを簡単に見つけることができます。

WordPressブロックディレクトリについてまだ聞いたことがない場合は、あなただけではありません。 このガイドでは、新しいブロックディレクトリについて知っておく必要のあるすべてのことを説明します。 また、BlockDirectorを使用してコンテンツワークフローを合理化する方法についても説明します。

WordPressブロックディレクトリとは何ですか?

WordPress Block Directoryは、WordPressブロックエディター内で使用するサードパーティのWordPressブロックを提供する無料のWordPressプラグインのカテゴリです。

新しいWordPressブロックディレクトリはブロックエディタに直接組み込まれているため、エディタを離れることなく、新しいブロックタイプをサイトにインストールできます。 ブロックディレクトリは、ユーザーがブロックエディタから直接WordPressブロックを検索してインストールできるように設計されているため、必要な種類のブロックをコンテンツにすばやく追加できます。

ワードプレスブロックディレクトリ

WordPressブロックディレクトリを検索するには、ページの左上にある「+」アイコンを使用して新しいブロックインサーターを使用し、使用可能なブロックを検索します。

WordPressブロックディレクトリについて注意すべき重要な点がいくつかあります。

  • ブロックディレクトリ検索機能は、プラグインを追加またはインストールする権限を持つWordPressユーザーロールでのみ使用できます。
  • ブロックディレクトリからサードパーティのブロックを追加すると、対応するWordPressプラグインがサイトにインストールされます。 したがって、新しいプラグインがWebサイトにインストールされていて、それをインストールしたことを覚えていない場合は、そのプラグインがWordPressブロックプラグインであるかどうかを確認してください。
  • WordPresブロックディレクトリは、組み込みのデフォルトのWordPressブロックとサードパーティのWordPressブロックプラグインの両方を取り込むため、ページ/投稿エディターから直接インストールできます。
  • サードパーティのブロックプラグインの検索結果は、開発者が満たさなければならないいくつかの要件に依存します(この記事の後半で詳しく説明します)。

WordPressブロックディレクトリの歴史

WordPressブロックディレクトリは、WordPress.orgプラグインディレクトリで利用可能な他の無料プラグインとブロックプラグインを区別する必要がある方法についてのWordPressコアディスカッションの結果です。

WordPressブロックディレクトリの取り組みは、チーム間の開発作業であり、次の主要な更新が含まれていました。

  • WordPressプラグインの更新プロセス
  • WordPressプラグインリポジトリ
  • WordPressブロックエディターのインサーターへの統合

注目のGutenbergWordPressプラグインの8.4バージョンは、ブロックディレクトリがWordPressコアにマージされたときのものでした。 2020年8月11日にWordPress5.5で。

WordPressブロックディレクトリの目的

新しいWordPressブロックディレクトリがメインのWordPress.orgプラグインディレクトリに含まれているため、通常のWordPressプラグインまたは単一のブロック対応プラグインのいずれかを参照しています。

ブロックディレクトリは、javascriptのみで、WordPressブロックのみを登録するブロックプラグインと、より多くの機能を備えた従来のWordPressプラグインを区別できるように設計されています。

WordPressブロックとは何ですか?

WordPressブロックは、WordPressブロックエディター内から使用できるページ要素であり、ブログの投稿やページのコンテンツを整理および設計するのに役立ちます。 画像から引用、リスト、メディアの埋め込みまで、ほぼすべてのWordPressブロックがあります。

ワードプレスブロックライブラリ

組み込みのデフォルトのWordPressブロック

WordPressには、組み込みのデフォルトブロックのライブラリが付属しています。 これは、最も頻繁に使用されるブロックのいくつかの表です。 この表には、新しいブロックエディターのWordPressに含まれているデフォルトのWordPressブロックの一部が含まれています。

WordPressブロック説明
オーディオシンプルなオーディオプレーヤーを埋め込みます。
ボタン美しいボタンでコンバージョンを促進します。
カテゴリすべてのカテゴリのリストを表示します。
クラシック従来のWordPressエディターを使用する
コード間隔とタブを尊重するコードスニペットを表示します。
複数の列にコンテンツを表示するブロックを追加してから、必要なコンテンツブロックを追加します。
カバーテキストオーバーレイを使用して画像またはビデオを追加します–ヘッダーに最適です。
埋め込む外部ソースからのビデオ、画像、ツイート、オーディオ、およびその他のコンテンツを埋め込みます。
ファイルダウンロード可能なファイルへのリンクを追加します。
ギャラリー豊富なギャラリーに複数の画像を表示します。
見出し新しいセクションを導入し、コンテンツを整理して、訪問者(および検索エンジン)がコンテンツの構造を理解できるようにします。
画像画像を挿入して視覚的な表現をします。
最新の投稿最新の投稿のリストを表示します。
リスト箇条書きまたは番号付きリストを作成します。
段落すべての物語の構成要素。
見積もりを引き出すあなたのテキストからの引用に特別な視覚的関心を与えてください。
引用引用されたテキストを視覚的に強調します。
もっと「続きを読む」要素を追加します
セパレーター水平方向の区切り文字を使用して、アイデアやセクションの間に区切りを作成します。
ショートコードWordPressのショートコードで追加のカスタム要素を挿入します。
スペーサーブロック間に空白を追加し、高さをカスタマイズします。

管理ダッシュボードにログインし(WordPress 5.0以降を使用していると想定)、クリックして新しい投稿を書き込むと、ブロックに基づくコンテンツ編集用のパネルがすぐに表示されます。

以前は、投稿エディタのこの​​セクションは、標準のテキスト書式設定コントロールを含む1つの大きなコンテンツフィールドでした。

古いバージョンのエディターを新しいブロックベースのバージョンと比較すると、これはユーザーにとって大きなアップグレードでした。

新しいバージョン内の全体的な編集エクスペリエンスは、はるかに合理化され、気を散らすものがありません。 これにより、ほとんど不要な他の要素を使用せずに、メインの「キャンバス」を明確に表示できます。

WordPressブロックライブラリプラグイン

組み込みのWordPressブロックに加えて、Kadence Blocksなどの他のプラグインは、WordPressブロックライブラリにさらに多くのブロックを追加します。 Kadence Blocksプラグインは、ブロックエディターにさらに強力な機能を追加し、ページビルダー機能を追加します。

カデンスブロックによるグーテンベルクブロック–ページビルダーの機能

たとえば、KadenceBlocksのカスタムブロックには次のものがあります。

  • 行レイアウト–列またはコンテナとしてネストされたブロックを使用して行を作成します。 背景、オーバーレイ、パディングなどで行にスタイルを与えます。
  • 高度なギャラリー–見事なフォトギャラリー、カルーセル、スライダーを作成しましょう! カスタムリンク、キャプションなどを有効にします。 さらに、パフォーマンスのために画像サイズを選択できます。
  • フォーム–強力なフォームブロックを使用すると、連絡先またはマーケティングフォームを簡単に作成し、ブロックエディタ内でスタイルを設定できます。
  • 高度なテキスト–見出しまたは段落を作成し、デスクトップ、タブレット、モバイルのサイズをフォントファミリ、色などとともに定義します。
  • 詳細ボタン–詳細ボタンまたはボタンの行を作成します。 ホバーコントロールを含め、それぞれのスタイルを設定します。 さらに、アイコンを使用して並べて表示することもできます。
  • タブ–高度なスタイリングコントロールを使用してカスタムの垂直または水平タブを作成します。 各タブコンテンツは、他のブロックを含めることができる空のキャンバスです。
  • アコーディオン–美しいアコーディオンを作ろう! 各ペインには、他のブロックを含めたり、タイトルスタイル、コンテンツの背景、境界線をカスタマイズしたりできます。
  • お客様の声–美しくユニークなお客様の声を披露して、ブランドや製品に自信を持たせましょう。 追加をカルーセルまたはグリッドとして表示します。
  • アイコン– 1500以上のSVGアイコンから選択してページに追加し、サイズ、色、背景、境界線などのスタイルを設定します。複数のアイコンを並べて追加することもできます。
  • スペーサー/仕切り–仕切りを簡単に作成して周囲のスペースを決定するか、コンテンツにスペースを作成します。 画面サイズごとの高さを定義することもできます。
  • 情報ボックス–アイコンまたは画像と、オプションでタイトル、説明、および詳細テキストを含むボックスを作成します。 静的スタイルとホバーを別々に設定します。
  • アイコンリスト–リストに美しいアイコンを追加して、より魅力的にし、視聴者の注意を引き付けます。 1500以上のアイコンから選択でき、無制限のスタイル。
  • カウントダウン–提供物に切迫感を加えることで、コンバージョンを増やします。 Proには常緑のキャンペーンも含まれています。
  • 投稿–サイトのどこにでもきれいな投稿のグリッドを表示します。これは、ブログをからかうホームページに最適です。
  • 目次–読者が目次ブロックを使用してコンテンツを簡単にナビゲートできるようにします。 アンカーへのスムーズなスクロールが含まれています。
  • ロッティアニメーション–ロッティアニメーションをサイトにインポートできます。 アニメーションの再生方法を選択し、アニメーションの速度やループなどを制御できます。
  • カウントアップ–特定の値までのアニメーションによるカウントアップまたはカウントダウン。 統計を表示するのに最適です。
  • Googleマップ–サイトにGoogleマップを埋め込みます。
  • 高度な画像–より優れたコントロールと高度な機能を備えた画像ブロック。

WordPressブロックプラグインとは何ですか?

A WordPressブロックプラグイン は、単一のWordPressブロックを提供する比較的小さくシンプルなWordPressプラグインです。 プラグイン本質的にブロックです。

WordPressブロックディレクトリは、サードパーティのブロックプラグインを従来のWordPressプラグインとは別のカテゴリに整理するのに役立ち、検索とインストールが簡単になります。

たとえば、GiveWPによるStripeの寄付フォームブロックは、単一のWordPressブロックを使用して、Stripeを利用した寄付フォームを数秒でWebサイトに追加します。 インストールすると、ブロックはWordPress Webサイトに簡単に挿入され、ニーズに合わせて簡単にカスタマイズできるように設計されています。

ブロック対応プラグインとは何ですか?

一言で言えば、ブロック対応プラグインは、ブロックエディタ内で使用できるブロックを含む「従来の」WordPressプラグインです。 WordPressプラグインディレクトリは、ブロック機能を利用するプラグインを強調するために「ブロック対応プラグイン」の区別も開始しました。

これらは「ブロックとして分類されたプラグイン」というラベルが付いており、https://wordpress.org/plugins/browse/blocks/で閲覧できます。

WordPressブロックをどのように使用しますか?

新しいページであろうとブログ投稿であろうと、サイトの新しいコンテンツの作業を開始すると、含めるすべてのコンテンツ(画像やテキストの段落など)が独自のブロックに変換されることに気付くでしょう。

基本的に、投稿またはページに含める各コンテンツの周りに配置されるラッパーのようなブロックを考えることができます。 ただし、ブロックシステムは、コンテンツピースを個別に変更したり、Webサイトでの表示方法を変更したりすることはありません。 画像は引き続き画像であり、エンドユーザーには何の違いもありません。

ブロックを使用したコンテンツの作成は非常に直感的であることがわかります。 新しいページや投稿の作成を開始すると、WordPressはブロックタイプを選択するか、テキストの作成を開始するように促します。

テキストの段落を完成させたら、Enterキーを押すと、WordPressが自動的に新しいブロックに移行します。

テキスト段落以外に別のブロックを追加する場合は、左上隅のブロックエディタ内にある「+」アイコンをクリックするだけです。

選択可能な各ブロックタイプは、さまざまな方法で高度にカスタマイズできます。 少しの時間と実験で、どのブロックもあなたが想像した通りに見えるようにすることができます。

ブロックエディタの利点

ブロックベースのエディターの導入は、WordPressコンテンツクリエーターに多くの利点をもたらしました。

まず、以前のエディターで許可されていたよりも、各ページ内のブロックをはるかに簡単に再配置できます。 すべてのブロックには個別のコントロールがあり、ブロックを1か所上下に移動できます。 ドラッグアンドドロップ機能を使用して、ブロックを手動で移動することもできます。

以前のWordPressエディターでは、コンテンツを移動するのは面倒でした。 まず、コンテンツを切り取って、配置したい領域に貼り付ける必要がありました。 多くの場合、これを行うと多くのフォーマットの問題が発生しました。 一部のテキストエディタでは他のエディタよりもそうですが。 クリップボードに誤ってコピーしたために、ユーザーがコンテンツセクション全体を移動する前に失うことがありました。

WordPressブロックエディター

これらは、ブロックで発生する問題ではなく、操作性も大幅に向上しています。

WordPressブロックディレクトリを使用するにはどうすればよいですか?

WordPressブロックとは何かについて説明したので、新しいWordPressブロックディレクトリを調べてみましょう。

ブロックディレクトリの背後にある考え方はそれほど複雑ではありません。 ただし、ツールを適切に使用する方法を理解すると、開発者やサイト設計者にとって非常に役立ちます。

WordPressユーザーが、エディターでローカルに使用できるデフォルトのWordPressブロックでは使用できないブロックを使用したい場合は、インサーターの検索フィールドに移動して、「メニュー」や「チーム」などのキーワードを入力できます。

ワードプレスブロックを検索

舞台裏では、直感的なシステムが最初にユーザーのローカルサイトで検索を実行します。 検索されている特定のブロックが見つからない場合は、ブロックディレクトリの検索を開始します。単一のブロックプラグインを格納するWordPressプラグインリポジトリ全体の指定された部分です。

システムが現在の検索語に一致するブロックを見つけると、それらのブロックがインサーター内に表示され、ユーザーが確認できるプレビューセクションが表示されます。

この時点で、設計者は使用するブロックを決定し、[ブロックの追加]ボタンをクリックします。 これにより、デザイナーが投稿またはページの作成を続行している間、シングルブロックプラグインがインストールおよびアクティブ化されます。

最初のブロックの選択が最良の選択ではなかった場合、ユーザーは戻って、インストール可能な別のブロックを検索できます。 これにより、ユーザーはデザイン内のさまざまなブロック要素をすばやく簡単にテストできます。

ブロックディレクトリにアクセスできるのは、WordPressプラグインをインストールしてアクティブ化するための完全なサイト権限と権限を持つコンテンツ作成者のみであることに注意してください。

WordPressブロックの検索

検索機能は本当にうまく機能します。 唯一の問題は、リポジトリにプラグインが現在不足していることです。 ブロックディレクトリはまだ非常に新しく、全体的な機能は完成していないことを覚えておくことが重要です。

デザイナーのStevenDufresneとEnriqueSanchezは(他の人たちと一緒に)、エディター内でブロックプラグインを検索、選択、インストールするためのフローのさまざまな考慮事項とバリエーションを積極的に調査してきました。

たとえば、ユーザーが検索を実行し、ユーザーが既にエディターにインストールしたブロックプラグインがインサーターに表示された場合はどうなりますか? その特定の検索結果に対して「ブロックを無効にする」を表示する必要がありますか?

ユーザーがインストールしたが非アクティブ化したブロックプラグインが検索結果に表示された場合はどうなりますか? この結果に対して「ブロックのアクティブ化」を表示する必要がありますか?

ご覧のとおり、ブロック検索とその配信方法に関しては、多くの疑問が浮かんできます。

議論は設計者と開発者との議論です。

WordPressブロックディレクトリ検索のパフォーマンス要因

WordPressブロックディレクトリが機能するためには、完全に調整する必要があるいくつかの要因があります。

まず、ディレクトリには、検索に入力するための単一ブロックプラグイン専用に指定された一意のセクションが必要です。 ブロックディレクトリ検索フィードに表示できない2つ以上のブロックを持つプラグインが多数あります。

この後、ディレクトリ検索機能は、インサータに表示できる形式で結果を返す必要があります。

次に、ブロックエディタは、REST-APIを介してWordPressプラグインディレクトリを検索するプロセスを実行する必要があります。 次に、Inserterには、サイトプラグインをインストールしてアクティブ化できるメソッドが必要です。

これを行うには、現在のユーザーのサイト権限を考慮することができる必要があります。 プラグインをインストールしてアクティブ化できるのは、サイト管理者だけです。

WordPressブロックディレクトリの検索結果:要件

プラグインの作成者がプラグインをブロックディレクトリの一部にするためには、block.jsonファイルと検索結果に表示される画像を提供する必要があります。 プラグインの作成者は、ユーザーがプラグインをダウンロードする前に、プレビュー領域でプラグインに関する追加情報が必要になることを覚えておくことも重要です。

ほとんどの場合、ユーザーはプラグインを確認したいと思うでしょう。

  • ユーザー評価
  • 著者情報
  • プラグインの最終更新日

これは、サイトで使用するブロックを決定しようとするユーザーの意思決定プロセスを推進するのに役立ちます。 結局のところ、多くの人は自分の見た目だけに基づいて物事を決めるのではありません。 彼らは、ボンネットの下にあるものも知りたがっています。

ブロックエディタの場合は、破棄されたプラグインを自動的に監視し、保存後に未使用のブロックがサイトからアンインストールされていることを確認することをお勧めします(ただし、非常に難しい提案であり、多くの調整が必要になることは間違いありません)。役職。

サイト内の「ブロック墓地」の可能性を回避することも重要です。 更新されたブロックマネージャーを使用すると、この問題を解決する必要があります。 昨年、最初のブロックディレクトリ設計の一部としてMelChoyce-Dawnによって話されました。 しかし、それは最初のリリースの一部ではありませんでした。

WordPressシングルブロックプラグインリスト

WordPressプラグインリポジトリにアクセスすると、WordPressブロックエディター内で検索結果を提供するWordPressブロック対応プラグインを参照できます。

この記事の執筆時点では、閲覧できる結果は6ページしかありません。 実際には、プラグインリポジトリ検索に表示されるものの約半分だけが、インサーターを介してブロックエディター内に表示されます。

クイックスポットチェックでは、それらの多くが必要なblock.jsonファイルを完全に失っているようです。 そのような場合、プラグインはWordPressブロックエディターの検索結果には表示されませんが、WordPressプラグインリポジトリには表示されます。

ただし、最終的な要件がより完全に文書化され、主要なガイドラインが公開されているため、これは先月中に改善されているようです。 多くのプラグイン作成者がプラグインを更新して、ブロックエディター内で100%検索できるようにしています。

ブロックディレクトリで現在完全にテストされているシングルブロックプラグインの例としては、GiveWPによるStripeの寄付フォームブロックがあります。

新しいWordPressブロックをインストールする方法

ブロックのインストールプロセスは、ユーザーにとってシームレスで直感的である必要があります。 少なくとも理論的にはそうあるべきです。

基本的に、ユーザーが行う必要があるのは、ブロックエディターを終了せずに「ブロックの追加」ボタンをクリックすることだけです。 その後、目的の新しいブロックがすぐに使用可能になります。

場合によっては、インストールを再試行するように求めるエラーメッセージが表示されることがあります。 ただし、その前に、プラグインが実際にインストールされているかどうか、およびブロックが使用可能かどうかを確認してください。

多くの場合、エラーメッセージはそれ自体がエラーであり、ブロックの準備ができているように見えます。 時間が経つにつれて、これらのマイナーなバグの多くが解決され、WordPressブロックディレクトリと呼ばれるこの便利な新機能がスムーズに実行されます。

ブロックディレクトリプラグイン作成者ガイドライン

2019年の終わり近くに、メタチームリーダーのAlex Sheilsは、プラグインをブロックディレクトリに追加したい人のために、WordPressブロックプラグインガイドラインの最初のドラフトを公開しました。 それ以来、ほんの数ヶ月前の時点で、より詳細な要件で更新されています。

重要なポイントを要約すると、ブロックディレクトリ上のプラグインは次の特定の特性を備えている必要があります。

  • 単一のブロックのみを含む
  • 投稿エディタの外部にUIを持たない
  • サーバー側のコードを最小限に抑える
  • 特定の仕様に従って構造化され、readme.txtファイルを含める必要があります

ブロックディレクトリの最初のリリースを管理するいくつかの追加のルールは、ルールがどれほど厳格であったかにより、プラグインの作成者によっていくつかの論争に見舞われました。 ただし、ディレクトリの制限は、プラグインの作成者を窒息させることを意図したものではありません。

目標は、ブロックエディタに戻るブロックのタイプを特定のプロトコルとタイプに制限したままにすることです。

これは、最初のリリースでは特に重要でした。最初のリリースでは、より多くの結果が得られる場合ではありませんでした。 結果は、インサーター内で非常に具体的である必要がありました。

それを知っていると、これらの追加のルールは、WordPressブロックディレクトリでプラグインを取得したいすべてのプラグイン作成者に適用されます。

  • ブロックプラグインは、ブロックエディタで使用するために作成されます
  • ブロックプラグインは個別のブロックである必要があります
  • プラグインのタイトルは、ブロックのタイトルを反映している必要があります
  • プラグインには特定のblock.jsonファイルを含める必要があります
  • プラグインの作成者は、機能に対して料金を請求したり、支払いを要求したりすることはできません。 有料アカウントも許可されていません
  • プラグインは独立して機能できる必要があります
  • 他のプラグイン、テーマ、ブロックを宣伝することはできません。

ブロックディレクトリは、地面に置いたばかりの未熟な植物のようなものだと考えてください。 あなたはそれを監視し、それ自体のより大きくより良いバージョンに成長するためにそれを保護する必要があることを知っています。

ブロックディレクトリも例外ではありません。

設計および開発チームが監視、聴取、および問題解決を続けるにつれて、ディレクトリはプラグインの作成者とユーザーが多くの価値を見いだす場所へと進化し始めます。

プラグインの作成者であり、プラグインがブロックディレクトリにあるための要件をまだ満たしていない場合は、通常のWordPressプラグインディレクトリで引き続き歓迎されることに注意してください。

WordPressブロックディレクトリとブロック対応プラグインの未来

ブロックディレクトリは、WordPressプラットフォームのデザイン機能を実際に拡張する可能性があります。 これにより、コンテンツクリエーターは、数十の便利な単一ブロックに指先でアクセスして、コンテンツ作成機能を迅速かつ合理的に拡張できます。

継続的に移動するパーツがある場合でも、ブロックディレクトリの最初のリリースは、コンテンツ作成者とプラグイン作成者が同様に祝うべき主要なマイルストーンです。

公開の頃にこれを読んでいる人は、ブロックディレクトリの最先端とそれがどうなるかについてです。 今こそ、まだ発見していない、ブロックディレクトリなどのWordPressの他の領域を示す追加のWordPressトレーニングを検討する絶好の機会です。

あなたがあなたのサイトをあなたが想像する成功に変えながら学習曲線を通して成長し続けるとき、間違いが起こる可能性がある(そして起こるであろう)ことを覚えておいてください。 そのため、WordPressバックアッププラグインとWordPressセキュリティプラグインを常にサイトを保護することが非常に重要です。

すべてが整っているので、あなたのウェブサイトは、WordPressブロックディレクトリのように成長し、進化し続けることができます。

ボーナスコンテンツを入手する:WordPressブロックエディターの究極のガイド
PDFをダウンロード