カスタムWordPressブロックを作成する方法（簡単な方法）

公開: 2022-05-17

WordPress Webサイト用のカスタムGutenbergブロックを作成しますか？

WordPressにはコンテンツを作成するための基本的なブロックがたくさん付属していますが、Webサイトにもっとカスタムなものが必要になる場合があります。

この記事では、WordPressサイト用のカスタムGutenbergブロックを作成する簡単な方法を紹介します。

Creating custom gutenberg blocks in WordPress

カスタムWordPressブロックを作成する理由

WordPressには直感的なブロックエディターが付属しており、コンテンツとレイアウト要素をブロックとして追加することで、投稿やページを簡単に作成できます。

デフォルトでは、WordPressには一般的に使用されるいくつかのブロックが付属しています。 WordPressプラグインは、使用できる独自のブロックを追加する場合もあります。

ただし、特定のことを行うために独自のカスタムブロックを作成したい場合があり、適切なブロックプラグインが見つからないことがあります。

このチュートリアルでは、完全にカスタムのブロックを作成する方法を示します。

注：この記事は中級ユーザー向けです。カスタムGutenbergブロックを作成するには、HTMLとCSSに精通している必要があります。

ステップ1：最初のカスタムブロックを開始する

まず、GenesisCustomBlocksプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。

人気のあるGenesisThemeFrameworkとStudioPressの背後にいる人々によって作成されたこのプラグインは、プロジェクトのカスタムブロックをすばやく作成するための簡単なツールを開発者に提供します。

このチュートリアルのために、「お客様の声」ブロックを作成します。

まず、管理パネルの左側のサイドバーから[カスタムブロック]»[新しいページを追加]に移動します。

これにより、ブロックエディタページが表示されます。

ここから、ブロックに名前を付ける必要があります。

ページの右側に、ブロックのプロパティがあります。

ここでは、ブロックのアイコンを選択したり、カテゴリを追加したり、キーワードを追加したりできます。

スラッグはブロックの名前に基づいて自動入力されるため、変更する必要はありません。ただし、ブロックを簡単に見つけられるように、[キーワード]テキストフィールドに最大3つのキーワードを入力できます。

次に、ブロックにいくつかのフィールドを追加しましょう。

テキスト、数字、メールアドレス、URL、色、画像、チェックボックス、ラジオボタンなど、さまざまな種類のフィールドを追加できます。

カスタムの紹介文ブロックに3つのフィールドを追加します。レビュー担当者の画像用の画像フィールド、レビュー担当者名用のテキストボックス、および紹介文テキスト用のテキスト領域フィールドです。

[+]フィールドの追加ボタンをクリックして、最初のフィールドを挿入します。

これにより、フィールドのいくつかのオプションが開きます。それぞれを見てみましょう。

フィールドラベル：フィールドラベルには任意の名前を使用できます。最初のフィールドに「レビューアー画像」という名前を付けましょう。
フィールド名：フィールド名は、フィールドラベルに基づいて自動的に生成されます。次のステップでこのフィールド名を使用するので、すべてのフィールドで一意であることを確認してください。
フィールドタイプ：ここで、フィールドのタイプを選択できます。最初のフィールドを画像にしたいので、ドロップダウンメニューから[画像]を選択します。
フィールドの場所：フィールドをエディターまたはインスペクターのどちらに追加するかを決定できます。
ヘルプテキスト：フィールドを説明するテキストを追加できます。個人的な使用のためにこのブロックを作成する場合、これは必須ではありませんが、複数の作成者のブログには役立つ場合があります。

選択したフィールドタイプに基づいて、いくつかの追加オプションを取得することもできます。たとえば、テキストフィールドを選択すると、プレースホルダーテキストや文字数制限などの追加オプションが表示されます。

上記のプロセスに続いて、 [+] [フィールドの追加]ボタンをクリックして、お客様の声ブロックに他の2つのフィールドを追加しましょう。

フィールドを並べ替える場合は、各フィールドラベルの左側にあるハンドルを使用してフィールドをドラッグすることで並べ替えることができます。

特定のフィールドを編集または削除するには、フィールドラベルをクリックして、右側の列のオプションを編集する必要があります。

完了したら、ページの右側にある[公開]ボタンをクリックして、カスタムのグーテンベルクブロックを保存します。

ステップ2：カスタムブロックテンプレートを作成する

最後のステップでカスタムWordPressブロックを作成しましたが、ブロックテンプレートを作成するまで機能しません。

ブロックテンプレートは、ブロックに入力された情報がWebサイトにどのように表示されるかを正確に決定します。 HTMLやCSSを使用するか、関数を実行したり、データを使用してその他の高度な処理を実行する必要がある場合はPHPコードを使用して、外観を決定できます。

ブロックテンプレートを作成する方法は2つあります。ブロック出力がHTML/CSSの場合は、組み込みのテンプレートエディターを使用できます。

一方、ブロック出力でバックグラウンドで実行するためにPHPが必要な場合は、ブロックテンプレートファイルを手動で作成し、テーマフォルダーにアップロードする必要があります。

方法1.組み込みのテンプレートエディタを使用する

カスタムブロック編集画面で、[テンプレートエディタ]タブに切り替えて、[マークアップ]タブの下にHTMLを入力するだけです。

HTMLを記述し、二重中括弧を使用してブロックフィールド値を挿入できます。

たとえば、上記で作成したサンプルブロックには次のHTMLを使用しました。

<div class="testimonial-item">
<img src="reviewer-image" class="reviewer-image">
<h4 class="reviewer-name">reviewer-name</h4>
<div class="testimonial-text">testimonial-text</div>
</div>

その後、[CSS]タブに切り替えて、ブロック出力マークアップのスタイルを設定します。

これは、カスタムブロックに使用したサンプルCSSです。

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

方法2.カスタムブロックテンプレートを手動でアップロードする

PHPを使用してカスタムブロックフィールドを操作する必要がある場合は、この方法をお勧めします。

基本的に、エディターテンプレートをテーマに直接アップロードする必要があります。

まず、コンピューター上にフォルダーを作成し、カスタムブロック名スラッグを使用して名前を付ける必要があります。たとえば、デモブロックはお客様の声と呼ばれるため、お客様の声フォルダを作成します。

次に、プレーンテキストエディタを使用してblock.phpというファイルを作成する必要があります。これは、ブロックテンプレートのHTML/PHP部分を配置する場所です。

これが、この例で使用したサンプルテンプレートです。

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

block_field()関数を使用してブロックフィールドからデータをフェッチする方法に注目してください。

ブロックの表示に使用するHTMLでブロックフィールドをラップしました。また、ブロックを適切にスタイル設定できるように、CSSクラスを追加しました。

前に作成したフォルダ内にファイルを保存することを忘れないでください。

次に、コンピューターのプレーンテキストエディターを使用して別のファイルを作成し、作成したフォルダー内にblock.cssとして保存する必要があります。

このファイルを使用して、ブロック表示のスタイルを設定するために必要なCSSを追加します。これは、この例で使用したサンプルCSSです。

.reviewer-name  
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;


.reviewer-image 
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;


.testimonial-text 
    font-size:14px;


.testimonial-item  
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;

変更を保存することを忘れないでください。

これで、ブロックテンプレートフォルダ内に2つのテンプレートファイルが含まれるようになります。