(oneechanblog) – WordPress Webサイト用のカスタムGutenbergブロックを作成しますか？
WordPressにはコンテンツを作成するための基本的なブロックがたくさん付属していますが、Webサイトにもっとカスタムなものが必要になる場合があります。
この記事では、WordPressサイト用のカスタムGutenbergブロックを作成する簡単な方法を紹介します。
カスタムWordPressブロックを作成する理由
WordPressには直感的なブロックエディターが付属しており、コンテンツとレイアウト要素をブロックとして追加することで、投稿やページを簡単に作成できます。
デフォルトでは、WordPressには一般的に使用されるいくつかのブロックが付属しています。 WordPressプラグインは、使用できる独自のブロックを追加する場合もあります。
ただし、特定のことを行うために独自のカスタムブロックを作成したい場合があり、適切なブロックプラグインが見つからないことがあります。
このチュートリアルでは、完全にカスタムのブロックを作成する方法を示します。
ノート：この記事は中級者向けです。 カスタムGutenbergブロックを作成するには、HTMLとCSSに精通している必要があります。
ステップ1：最初のカスタムブロックを開始する
まず、GenesisCustomBlocksプラグインをインストールしてアクティブ化する必要があります。 詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
人気のあるGenesisThemeFrameworkとStudioPressの背後にいる人々によって作成されたこのプラグインは、プロジェクトのカスタムブロックをすばやく作成するための簡単なツールを開発者に提供します。
このチュートリアルのために、「testimonials」ブロックを作成します。
まず、カスタムブロック»新規追加管理パネルの左側のサイドバーからのページ。
これにより、ブロックエディタページが表示されます。
ここから、ブロックに名前を付ける必要があります。
ページの右側に、ブロックのプロパティがあります。
ここでは、ブロックのアイコンを選択したり、カテゴリを追加したり、キーワードを追加したりできます。
スラッグはブロックの名前に基づいて自動入力されるため、変更する必要はありません。 ただし、ブロックを簡単に見つけられるように、[キーワード]テキストフィールドに最大3つのキーワードを入力できます。
次に、ブロックにいくつかのフィールドを追加しましょう。
テキスト、数字、メールアドレス、URL、色、画像、チェックボックス、ラジオボタンなど、さまざまな種類のフィールドを追加できます。
カスタムの紹介文ブロックに3つのフィールドを追加します。レビュー担当者の画像用の画像フィールド、レビュー担当者名用のテキストボックス、および紹介文テキスト用のテキスト領域フィールドです。
クリックしてください[+] フィールドを追加ボタンをクリックして最初のフィールドを挿入します。
これにより、フィールドのいくつかのオプションが開きます。 それぞれを見てみましょう。
フィールドラベル：フィールドラベルには任意の名前を使用できます。 最初のフィールドに「レビューアー画像」という名前を付けましょう。
フィールド名：フィールド名は、フィールドラベルに基づいて自動的に生成されます。 次のステップでこのフィールド名を使用するので、すべてのフィールドで一意であることを確認してください。
フィールドタイプ：ここで、フィールドのタイプを選択できます。 最初のフィールドを画像にしたいので、選択します画像ドロップダウンメニューから。
フィールドの場所：フィールドをエディターまたはインスペクターのどちらに追加するかを決定できます。
ヘルプテキスト：フィールドを説明するテキストを追加できます。 個人的な使用のためにこのブロックを作成する場合、これは必須ではありませんが、複数の作成者のブログには役立つ場合があります。
選択したフィールドタイプに基づいて、いくつかの追加オプションを取得することもできます。 たとえば、テキストフィールドを選択すると、プレースホルダーテキストや文字数制限などの追加オプションが表示されます。
上記のプロセスに続いて、[証言]ブロックをクリックして他の2つのフィールドを追加しましょう。[+] フィールドを追加ボタン。
フィールドを並べ替える場合は、各フィールドラベルの左側にあるハンドルを使用してフィールドをドラッグすることで並べ替えることができます。
特定のフィールドを編集または削除するには、フィールドラベルをクリックして、右側の列のオプションを編集する必要があります。
完了したら、をクリックします公開ページの右側にあるボタンをクリックして、カスタムGutenbergブロックを保存します。
ステップ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を使用してカスタムブロックフィールドを操作する必要がある場合は、この方法をお勧めします。
基本的に、エディターテンプレートをテーマに直接アップロードする必要があります。
まず、コンピューター上にフォルダーを作成し、カスタムブロック名スラッグを使用して名前を付ける必要があります。 たとえば、デモブロックはTestimonialsと呼ばれるため、testimonialsフォルダを作成します。
次に、というファイルを作成する必要があります 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つのテンプレートファイルが含まれるようになります。
その後、FTPクライアントまたはWordPressホスティングアカウントのコントロールパネル内のファイルマネージャーアプリを使用して、ブロックフォルダーをWebサイトにアップロードする必要があります。
接続したら、に移動します /wp-content/themes/your-current-theme/ フォルダ。
テーマフォルダにフォルダ名ブロックがない場合は、先に進んで新しいディレクトリを作成し、名前を付けます blocks。
次に、blocksフォルダーに入り、コンピューターで作成したフォルダーをblocksフォルダーにアップロードします。
それで全部です！ これで、カスタムブロックの手動テンプレートファイルが正常に作成されました。
ステップ3.カスタムブロックをプレビューする
ここで、HTML / CSSをプレビューする前に、サンプル出力を表示するために使用できるいくつかのテストデータを提供する必要があります。
WordPress管理エリア内でブロックを編集し、[エディタープレビュー]タブに切り替えます。 ここでは、ダミーデータを入力する必要があります。
プレビューする前に、[更新]ボタンをクリックして変更を保存することを忘れないでください。
これで、[フロントエンドプレビュー]タブに切り替えて、ブロックがフロントエンド（WordPress Webサイトのパブリックエリア）でどのように表示されるかを確認できます。
すべてが良さそうな場合は、ブロックを更新して、保存されていない変更を保存できます。
ステップ4.WordPressでカスタムブロックを使用する
これで、他のブロックを使用するのと同じように、WordPressでカスタムブロックを使用できます。
このブロックを使用する投稿またはページを編集するだけです。
[新しいブロックを追加]ボタンをクリックし、名前またはキーワードを入力してブロックを検索します。
ブロックをコンテンツ領域に挿入すると、このカスタムブロック用に作成したブロックフィールドが表示されます。
必要に応じてブロックフィールドに入力できます。
ブロックから別のブロックに移動すると、エディターはブロックのライブプレビューを自動的に表示します。
これで、投稿とページを保存してプレビューし、Webサイトでカスタムブロックが動作していることを確認できます。
テストサイトでの証言ブロックの外観は次のとおりです。
この記事が、WordPressWebサイト用のカスタムグーテンベルクブロックを簡単に作成する方法を学ぶのに役立つことを願っています。
また、カスタムWordPressテーマを最初から作成する方法についてのガイドを参照するか、Webサイトに必須のWordPressプラグインを専門家が選んだものを参照することもできます。
この記事が気に入った場合は、WordPressビデオチュートリアルのYouTubeチャンネルに登録してください。 あなたはまた私たちを見つけることができます ツイッター とFacebook。
投稿「カスタムWordPressブロックの作成方法（簡単な方法）」は、WPBeginnerに最初に掲載されました。