カスタム Gutenberg ブロックのガイド
公開: 2022-11-08WordPress パーティーに遅れた場合のために、ブロックはにあります。
WordPress は、Gutenberg エクスペリエンスを進化させ、改善し続けています。そのため、多くの開発者は、カスタム Gutenberg ブロックを作成する必要があるかどうかを尋ねています。
この投稿では、カスタム ブロックがどのように機能するか、いつ使用するか、Web サイトを構築するための代替オプション、および Gutenberg ブロックを構築する方法について説明します。
カスタム Gutenberg ブロックとは?
ブロックは、WordPress でページや投稿を作成するための基本単位です。 WordPress は、2018 年に Gutenberg 編集エクスペリエンスでブロックを導入しました。WordPress には、投稿のタイトル、画像、ギャラリーなど、多くのデフォルトのコンテンツ タイプ ブロックが含まれています。 さらに、プラグインも独自のブロックを編集エクスペリエンスに追加します。 たとえば、最新の WooCommerce リリースの一部では、新しいブロックが導入され、WordPress の任意のページまたは投稿に製品や e コマース機能を簡単に追加できるようになりました。
カスタム グーテンベルク ブロックを作成すると、サイトの任意のページまたは投稿でそのブロックを利用できます。 たとえば、顧客の声を引き出して表示するブロックを作成できます。
ブロックを完全に受け入れることに気が進まなかった場合は、チャンスを逃しています。 最新の WordPress 機能はすべて、ブロック エディターのエクスペリエンスの向上に重点を置いています。 最近および今後の WordPress 機能の多くを利用するには、ブロックを使用する必要があります。
サイト全体の編集を開始するための電子ブックをダウンロードして、ブロックを使用してサイト全体を構築および編集する方法について詳しく学んでください。
カスタム Gutenberg ブロックを使用する場合
既存のブロック オプションがニーズに合わず、プラグインやテーマで実行可能な代替手段が見つからない場合は、カスタム Gutenberg ブロックを作成できます。
カスタム Gutenberg ブロックの作成は、通常、初心者向けのプロジェクトではありません。 独自のカスタム Gutenberg ブロックをコーディングする最も一般的な 2 つの理由は、プラグインを開発するとき、または独自のテーマを作成するときです。
ブロックの構築は、専任の開発者または開発チームによるエンタープライズ レベルのプロジェクトでない限り、ほとんどの人が 1 つの Web サイトのために行うプロジェクトではありません。 1 つのサイトだけにカスタム ブロックが必要な場合に適した代替方法をいくつか紹介します。
カスタム Gutenberg ブロックの使用に代わる方法
カスタム ブロックを決定するすべての作業を行う前に、これらの代替案のいずれかがうまくいくかどうかを検討してください。
ブロック パターンまたは再利用可能なブロック
動的コンテンツを取り込む必要がなく、ブロックでレイアウトを複製するだけの場合は、代わりに新しいブロック パターン機能または再利用可能なブロックを使用してください。 このオプションは初心者にやさしく、コードをほとんどまたはまったく書かずに実行できます。
パターンは、サイトのどこでも使用できるミニ テンプレートのようなものです。 ページに挿入してから編集できます。 再利用可能なブロックも同様に機能します。 大きな違いは、ページや投稿で使用した後の処理方法です。
パターンは出発点です。 ページに追加すると、変更はそのページに固有のものになります。 後でパターンを変更しても、既に使用されている場所は変更されません。
再利用可能なブロックは、互いにリンクされたままです。 ブロックを更新すると、そのブロックを使用したすべての場所に変更が適用されます。
コードブロック
コード ブロックを使用して、カスタム コードをページに挿入します。 テーマとプラグインの開発者は、複数のサイトで使用するカスタム ブロックを作成します。 単一のサイトで作業している場合は、コードのカスタム スニペットを追加することで、同じ目標をより短時間で達成できる可能性があります。 どちらのオプションでも、同じレベルの技術的専門知識が必要です。
独自のカスタム ブロックを作成することを検討する価値がある 1 つのケースは、サイトをクライアントに引き渡したい開発者である場合です。 クライアントは、Gutenberg エディターを使用してカスタム ブロックを操作できる場合がありますが、コードを編集しようとすると完全に失われます。
カスタム Gutenberg ブロックを作成する方法
カスタム Gutenberg ブロックを作成するには、2 つのオプションがあります。 自分でコーディングするか、ブロック作成プラグインを使用できます。 どちらのオプションも、コーディングが必要です。 試してみる前に、Web 開発の基本をブラッシュ アップすることをお勧めします。
自分でコーディングする
カスタム ブロックの構築には、開発経験が必要です。 WYSIWIG エディターに固執したい場合や、誤ってコードの表示オプションをクリックしてしまうたびに心臓がドキドキする場合は、これは適していません。
カスタム ブロックを作成するには、HTML、CSS、JavaScript、および React に関する中程度の知識が必要です。
まず、開発環境とツールをセットアップします。 WordPress 環境、ノード、NPM、およびコード エディターが必要です。 その後、WordPress の公式ブロック エディター ハンドブックから最初のブロックを作成するためのこのチュートリアルに従ってください。
プラグインの使用
HTML、CSS、および JavaScript に慣れていても、すべてをゼロからコーディングする準備ができていない場合は、プラグイン アプローチを検討してください。 プラグインを使用してカスタム ブロックを作成することは、単一の Web サイトで使用するカスタム ブロックが必要な場合に最適なオプションです。
Genesis Custom Blocks プラグインは、カスタム ブロックを作成するための最も一般的なプラグインです。 使い慣れた WordPress インターフェイスを使用してブロック フィールドを作成します。 フィールドを設定したら、HTML、CSS、JavaScript、および PHP のテンプレートを提供して、ブロックを機能させる必要があります。
簡単ですが、それでもコーディングが必要です。 違いは、ローカルの開発環境をセットアップせずに、WordPress 管理者からすべて実行できることです。 このプラグインにより、ブロックのテストとプレビューが容易になり、ブロックが適切に機能していることを確認できます。
あなたが構築しているものは何でも、私たちはお手伝いします
カスタムブロックを使用してサイトを構築する方法に関係なく、または従来のエディターをまだ使用している場合でも、信頼できるホストが必要です. Pressable は、WordPress が個人事業主から上級開発者チームまで、あらゆる人にとって最適な場所であることを誇りに思っています。
Pressable は、使いやすいインターフェイス、最先端のセキュリティ、および超高速を提供します。 Pressable のホスティングを使用すると、サイトの更新が簡単になり、顧客が簡単に見つけて使用できるようになります。
今すぐサインアップして、サイトの構築を開始するか、既存のサイトの移行について詳しく学んでください。 サイトの移行のお手伝いをさせていただきます。
