ウェブサイト検索

シンプルな Gutenberg ブロック プラグインを作成する方法

私たちは皆 WordPress が大好きではないでしょうか?このプラットフォームは、開発者が継続的に新機能を追加し、開始以来大成功を収めてきました。最近の最も注目すべき機能の 1 つは、 コードネームグーテンベルクと呼ばれる WordPress ブロック エディターです。

Gutenberg は、WordPress ユーザーにコンテンツを公開し、サイトをカスタマイズするエキサイティングな新しい方法を提供します。非常に使いやすいので、初心者にとっても開発者にとっても素晴らしいニュースです。最新バージョンの WordPress を使用している場合は、ブロックエディターとブロックの概念にすでに慣れています。

デフォルトでは、WordPress ブロックエディターには、テキスト、画像、引用、音声、ビデオ、埋め込みなどを含めることができるいくつかのブロックが付属しています。それに加えて、汗をかかずにエディタを拡張できる Gutenberg アドオンが大量にあります。

それでも、独自のカスタム ブロックを作成する必要があるという特定のニーズがある場合もあります。ここからが今日の投稿です。いくつかの段落で、特定のニーズに合わせてカスタム Gutenberg ブロックを作成する方法を正確に学びます。

学ぶべきことがたくさんあるので、さっそく始めましょう。

そもそもブロックとは何ですか?

あなたが完全な初心者であれば、このグーテンベルクのビジネスが一体何なのか疑問に思っているでしょう。確かに、Gutenberg が紹介されたとき、私はかなり混乱しました。しかし、誰も責めることはできません。私たちは皆、クラシック エディターに慣れていて、最初は移行するのが不快だったのです。

それでも、WordPress ブロックエディターは、好むと好まざるにかかわらず、今後も存続します。まさに、Gutenberg を最大限に活用するために、Gutenberg (およびそれに付属するすべてのもの) についてできる限り多くのことを学ぶ必要がある理由です。

ブロックは、段落、見出し、メディア、埋め込みをすべてコンポーネントとして扱い、これらを組み合わせて WordPress データベースに保存されるコンテンツを構成し、自由形式のテキストという従来の概念を埋め込みメディアとショートコードに置き換えます。 – ブロックエディターハンドブック

これまで、WordPress ユーザーは自由形式のテキストとショートコードを利用してコンテンツを追加していました。 Gutenberg はブロックを使用します。新しいエディターを使用すると、ブロック単位を使用して、管理が容易な豊富で柔軟なレイアウトを作成できます。現在、投稿とページにブロック エディターを使用できますが、将来的にはサイト全体の編集をサポートする予定です。

いくつかのブロックを表示する Gutenberg エディター

ブロックを操作すると、WordPress でのコンテンツ作成が非常に新鮮になります。さらに、多くの既存のプラグインは新しいエディターをサポートしており、プラグインからのコンテンツの追加を簡単にするすぐに使用できるブロックが付属しています。エディターを使用すると、ブロックをページにドラッグ アンド ドロップできるため、公開ボタンをより速く押すことができます。

WordPress に直接組み込まれたページビルダーと同じです。

Elementor などのビジュアル ページ ビルダーに慣れている場合は、ドラッグ アンド ドロップによるページ構築の概念に精通しているでしょう。 Gutenberg は、ドラッグ アンド ドロップによるサイト構築を WordPress コアに完全に組み込む試みです。詳細については、「WordPress 用 Gutenberg Builder のステップバイステップ ガイド」をご覧ください。

それはさておき、今日の投稿の最も重要な部分に移りましょう。簡単なブロックを作成する方法を学びましょう。これは手動で行うことも、Genesis Custom Blocks (旧名 BlockLab)、Lazy Blocks、ACF などのプラグインを使用して行うこともできます。カスタム ブロックの作成は少し技術的なので、今日の投稿ではプラグインを使用します。

カスタム ブロックを作成する方法 (Genesis カスタム ブロックの使用)

カスタム Gutenberg ブロックを最初から作成するには、HTML、CSS、PHP、そしてさらに重要なことに JavaScript を十分に理解する必要があるため、プラグイン ルートに進む方が簡単です。また、初心者に変化球を投げかける React についても理解する必要があります。

次のセクションでは、StudioPress や WPEngine などの開発者によって提供される Genesis Custom Blocks を使用します。 Genesis Custom Blocks の無料版は、WordPress の公式リポジトリで入手できます。つまり、WordPress 管理ダッシュボード内にインストールできます。

Genesis カスタム ブロックをインストールする

WordPress 管理ダッシュボードにログインし、以下に示すように[プラグイン] > [新規追加]に移動します。

次に、キーワード検索ボックスに「Genesis Custom Blocks」と入力し、今すぐインストールボタンを押します。

その後、 プラグインを有効にしてパーティーを開始します。

あなたは順調です 🙂

次に、新しいカスタム ブロックを作成しましょう。説明のために、公開する各投稿の最後に追加するカスタム CTA (Call-To-Action) を作成してみましょう。最も良い点は、ブロックを再利用できるため、同じブロックを何度も作成する手間が省けることです。

以下で強調表示するように、WordPress 管理者メニューからカスタム ブロック > 新規追加に移動します。

これにより、カスタム ブロック (この場合は CTA) を作成するためのすべてのオプションが表示される次のページが表示されます。

上のスクリーンショットに表示される内容を説明するために、いくつかの単語を示します。上から始めてください。

メイン編集エリア:

  • ビルダー – おそらくここでカスタム ブロックの設計に多くの時間を費やすことになります。 ビルダーを使用すると、タイトル、フィールド、スラッグ、キーワード、カテゴリを追加し、カスタム ブロックをプレビューできます。フィールドを追加する方法を学習します。
  • テンプレート エディター – カスタム ブロックを設計した後 (さまざまなフィールドを追加した後)、テンプレート エディター でブロック テンプレートを作成する (読み取り、コードを少し追加する) 必要があります。強い＞。 CTA を設計するときにさらに詳しく学びます。
  • エディタ プレビュー – WordPress ブロック エディタ内でカスタム ブロックをプレビューできます。
  • フロントエンド プレビュー – ここでは、サイト上でカスタム ブロックがどのように表示されるかをプレビューできます。
  • エディター フィールド – 投稿またはページのメイン編集領域にフィールドが表示されます (WordPress エディター内で通常の投稿を表示する方法と同じです)。
  • インスペクター フィールド – 右側のサイドバーのブロック インスペクターの下にフィールドが表示されます。

サイドバーのオプション

  • スラッグ – スラッグは、カスタム ブロックに付けたタイトルに基づいて自動入力されます。ブロックテンプレートを作成するときに重要です。
  • アイコン – このオプションを使用すると、カスタム ブロックにアイコンを追加できます。
  • カテゴリ – これにより、カスタム ブロックにカテゴリを割り当てることができます。組み込みカテゴリの 1 つを使用してカスタム ブロックを分類することも、まったく新しいカテゴリを作成することもできます。
  • キーワード – カスタム ブロックに関連するキーワードを最大 3 つ追加して、ブロック セレクターで簡単に見つけられるようにします。
  • その場でレンダリングするのではなく、モーダルでブロック フィールドを開きます – モーダルでフィールドを開きたい場合はオンに切り替えます。多くのフィールドを含むカスタム ブロックがある場合に便利です。
  • 投稿タイプ – ボックスにチェックを入れて、各投稿タイプにカスタム ブロックを表示できるようにします。たとえば、[投稿] のチェックを外すと、ブロックはどの投稿にも表示されなくなります。

カスタムブロックの作成

ユーザー インターフェイスと各部分の機能について理解が深まったので、実際に作業に取り掛かりましょう。

ビルダーで、カスタム ブロックに適切なタイトルを付けます。以下に示すように、これには CTA を使用します。

新しいフィールドを追加する前に、以下に示すように、アイコンとキーワードを追加し、カスタム ブロックのカテゴリを選択しましょう。

このセットで、カスタム ブロックにいくつかのフィールドを追加しましょう。 CTA ブロックの例では、次の順序で 3 つのフィールドだけを追加します: 画像、テキスト、および架空の電子ブックをダウンロードできるファイル フィールドです 🙂

ブロックフィールドの追加

[エディター フィールド] セクションで、プラス (+) アイコンをクリックして、以下に示すように最初のフィールドを追加します。

次に、画像フィールドを追加しましょう。サイドバーで、フィールド タイプを画像に設定し、他のオプションを定義します。また、ブロック テンプレートを作成するときに使用するため、スラッグ (私はimage-field に設定しました) に注意してください。下の画像を参照してください。

その後、同様の方法でテキストフィールドとファイルフィールドを追加します。

まだ祝わないでください。あと一歩です。 [テンプレート エディター] > [マークアップ] に切り替えます。

私のコードにはすでにいくつかのコードがありますが、あなたのコードは空白になります 🙂

ここでは、カスタム ブロックがサイト上でどのように見えるかをデザインします。 テンプレート エディタは、HTML、CSS、およびフィールド スラグ (2 つの括弧で囲む必要があります) を受け入れます。 PHP を使用する必要がある場合は、代わりに PHP テンプレート メソッドを使用してテンプレートを作成できます。

心配しないでください。簡単です。

テンプレート エディター内のマークアップタブ (上の画像を参照) で、次の HTML マークアップ (コード) を追加します。

<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Download</button></a>
</div>
</div>

HTML マークアップを作成すると、テンプレート エディタがフィールド スラグ (例: {{image-field}} ) を自動補完してくれることに気づくでしょう 🙂

次に、CSS セクションに移動して、簡単なスタイルを追加します。

必要なスタイルを追加できますが、私が取り組んでいるのは次のとおりです。

.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}

.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;

}

これで準備は完了です。 [公開] をクリックします。

新しいカスタム ブロックの動作を確認するには、WordPress 管理者ダッシュボードに戻り、[投稿] > [新規追加] に移動します (ページでも機能します)。

通常どおり投稿を作成し、プラス (+) をクリックして新しいブロックを追加し、以下で強調表示されている新しい光沢のあるカスタム ブロックを選択します。

次に、必要に応じてカスタム ブロックを入力し、投稿を公開します。

ここで、フロントエンドで新しいカスタム CTA ブロックをチェックアウトすると、次のようになります。

私のカスタム CTA がすぐそこにあります。私のデザイン能力は気にしないでください。もちろん、現実のシナリオでは、ブロックのスタイル設定に余分な時間を費やすことになるでしょう。しかし、今日ここで何かを学んでいただければ幸いです。

Genesis Custom Blocks や Lazy Blocks などのツールを使用すれば、カスタム ブロックの構築は難しい作業である必要はありません。さらに、ニーズに応じてカスタム ブロックを複雑にしたり単純にしたりすることができます。カスタム ブロックを手動で作成する必要がある場合は、JavaScript のレッスンを受講してください。役に立ちますよ 🙂

何かご意見やご質問はありますか？以下のコメント欄でお知らせください。