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

デフォルトのWordPressブロックはシンプルなコンテンツには最適ですが、カスタムレイアウト、インタラクティブな要素、または特別なデザインが必要な場合は、すぐに限界に達してしまうことがあります。

そこでカスタムブロックが登場します。これらは、肥大化したプラグインや回避策に頼ることなく、コンテンツの外観と機能を完全に制御できます。

一番良いところは？カスタムブロックの作成は、ほとんどの人が考えているよりも取り組みやすいです。適切なツールと明確なプロセスがあれば、サイト固有のニーズに合ったブロックを作成するために開発者である必要はありません。

長年にわたり、カスタムブロックを使用してワークフローを合理化し、クライアント向けに完全にカスタマイズされたWordPressサイトを提供してきました。そして今、同じことをする方法を説明します。

このガイドでは、専門的なコーダーでなくても、カスタムWordPressブロックを作成するためのステップバイステップのプロセスを学びます。

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

デフォルトのブロックライブラリや既存のブロックプラグインで利用できない特定の機能やレイアウトが必要な場合は、カスタムWordPressブロックを作成する必要があります。

カスタムブロックを作成することで、特定のデザイン要素（お客様の声カードや商品紹介など）を保存し、複数の投稿にわたって即座に再利用できます。

これにより、ワークフローが大幅にスピードアップします。投稿を書くたびに同じコンテンツを手動でコーディングまたはスタイリングする代わりに、事前に作成したカスタムブロックをドロップインして、空欄を埋めるだけです。

さて、WordPressで完全にカスタムなブロックを簡単に作成する方法を見てみましょう。

このチュートリアルでは、カスタムブロックを作成するための2つの方法を紹介します。以下のクイックリンクを使用して、選択した方法にジャンプできます。

• Method 1: Create Custom Blocks for WordPress Using WPCode (Recommended)
• Method 2: Create Custom Blocks for WordPress Using Genesis Custom Code Plugin (Free)
• ボーナス：再利用可能なブロックパターンを作成する
• カスタムWordPressブロックに関するよくある質問

方法1：WPCodeを使用してWordPress用のカスタムブロックを作成する（推奨）

WordPress初心者でコーディングが難しそうだと感じる場合、WPCodeはあなたにとって素晴らしい選択肢です。

私たちのツールキットの一部として、カスタムコードスニペットを追加する最も初心者向けで安全な方法としてWPCodeを見つけました。

また、その潜在能力を完全に理解するのに役立つ詳細なWPCodeレビューもあります。

その際立った機能の1つは、ブロック スニペットであり、カスタムブロックを簡単に作成できます。

ステップ1：WPCodeのインストールと有効化

まず、WPCode プラグインをインストールして有効化する必要があります。詳細な手順については、WordPress プラグインのインストール方法に関する初心者向けガイドをご覧ください。

ステップ2：新しいブロックのスニペットを作成する

有効化したら、WordPress管理画面のサイドバーから Code Snippets » + Add Snippet ページに移動してください。

そこに着いたら、「カスタムコードを追加（新規スニペット）」オプションの下にある「スニペットを使用」ボタンをクリックします。

ここで、「カスタムスニペットの作成」ページに移動し、作成しようとしている新しいブロックの名前を入力することから始めます。

それが完了したら、画面の右隅にある「コードタイプ」ドロップダウンメニューから「ブロックスニペット」オプションを選択するだけです。

これにより、「コードプレビュー」ボックスに「ブロックエディターで編集」ボタンが表示されます。

ステップ3：カスタムブロックをデザインする

ブロックエディターを起動するには、このボタンをクリックするだけです。

次に、コードスニペットを保存してブロックエディターで読み込むかどうかを尋ねるプロンプトが画面に表示されます。「はい」ボタンをクリックして進んでください。

ブロックエディターに入ったので、ブロックメニューで利用可能な既製のブロックを使用してカスタムブロックを簡単に作成できます。

このチュートリアルでは、サイトにレビューを追加するためのカスタムブロックを作成します。

まず、画面左上の「ブロックを追加」（+）ボタンをクリックして、ブロックメニューを開きます。

ここから、見出しブロックをブロックエディターインターフェイスにドラッグアンドドロップし、「Testimonials」という名前を付けます。

次に、段落、引用、または引用ブロックを使用して、ウェブサイトにさまざまなクライアントからの推薦文を追加できます。

画像、サイトロゴ、ソーシャルアイコン、またはサイトのタグラインブロックを使用して、証言ブロックをさらにカスタマイズすることもできます。

ブロックパネル（画面の右側）で、お客様の声のサイズ、テキストカラー、背景色を設定することもできます。

完了したら、カスタムブロックの設定を保存するために、上部にある「更新」ボタンをクリックすることを忘れないでください。

ステップ4：挿入設定を構成する

次に、上部にある「WPCodeスニペットに戻る」ボタンをクリックするだけで、コードエディタページにリダイレクトされます。

そこに着いたら、「挿入」セクションまでスクロールし、「自動挿入」モードを選択します。

コードスニペットを有効にすると、カスタムブロックは、ウェブサイトに挿入する場所として選択した場所に自動的に追加されます。

次に、作成したカスタムブロックの場所を設定する必要があります。

これを行うには、「挿入」セクションの「場所」ドロップダウンメニューをクリックして、「ページ固有」タブに切り替えるだけです。ここから、「投稿の後に挿入」オプションを選択して、投稿の最後に証言ブロックを表示できます。

それを行うと、テストモーニアルブロックが表示される投稿の数を構成することもできます。たとえば、番号3を入力すると、テストモーニアルブロックは3番目の投稿ごとに表示されます。

また、投稿の抜粋の後や、さまざまな段落の間にブロックを表示することもできます。

ステップ5：条件付きロジックを適用する（オプション）

ただし、探しているブロックの場所が見つからない場合は、独自の条件付きロジックルールを作成して、カスタムブロックを希望の場所に埋め込むこともできます。

これを行うには、下にスクロールして「スマート条件付きロジック」セクションを見つけ、「ロジックを有効にする」スイッチをオンにします。

次に、「新しいグループを追加」ボタンをクリックして、条件付きロジックルールを作成する必要があります。

たとえば、作成したカスタムブロックを特定のページまたは投稿にのみ表示したい場合は、右側のドロップダウンメニューから「ページのURL」オプションを選択する必要があります。

その後、中央のドロップダウンメニューはそのままにして、左側のフィールドに選択したWordPressのページ/投稿のURLを追加できます。

条件付きロジックルールを設定して、カスタムブロックを特定のページ、ログインユーザーのみ、WooCommerceストアページ、Easy Digital Downloadsページ、特定の日付などにのみ表示させることもできます。

ステップ6：ブロックをアクティブ化して保存する

完了したら、ページの上部までスクロールし、「非アクティブ」スイッチを「アクティブ」に切り替えます。次に、「更新」ボタンをクリックして設定を保存します。

作成したカスタムブロックは、ブロックのスニペットを選択したすべての場所に自動的に追加されます。

作成したカスタムブロックは、WordPress Gutenbergエディターのブロックメニューのオプションとして表示されないことに注意してください。

WordPressダッシュボードのコードスニペットページにアクセスし、ブロックのスニペットの下にある「編集」リンクをクリックして、ブロック設定を構成する必要があります。

これにより、「スニペットの編集」ページが開きます。ここで、ブロックをカスタマイズしたり、場所や条件付きロジックルールを簡単に変更したりできます。

さて、あなたのウェブサイトにアクセスして、作成したカスタムブロックが実際に機能しているのを確認してください。

こちらがデモウェブサイトのカスタムお客様の声ブロックです。

方法2：Genesis Custom Codeプラグイン（無料）を使用してWordPressのカスタムブロックを作成する

中級ユーザーで無料のソリューションを探している場合は、この方法が最適です。この方法の指示に従うには、HTMLとCSSに慣れている必要があることに注意してください。

ステップ1：Genesis Custom Blocksをインストールする

まず、Genesis Custom Blocks プラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法のステップバイステップガイドをご覧ください。

このチュートリアルのために、証言ブロックを作成します。

ステップ2：新しいブロックを作成して構成する

まず、WordPress管理サイドバーからカスタムブロック » 新規追加ページに移動します。

これにより、WordPressサイト用のカスタムブロックを作成するブロックエディターページに移動します。

ここから、ブロックに名前を付けて開始できます。

次に、ページを右側で、設定できるブロックプロパティを見つけます。

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

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

ステップ3：ブロックにフィールドを追加する

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

カスタム証言ブロックに3つのフィールドを追加します。レビュー担当者の写真用の画像フィールド、レビュー担当者の名前用のテキストボックス、証言テキスト用のテキストエリアフィールドです。

最初のフィールドを挿入するには、「+」ボタンをクリックするだけです。

これにより、右側の列にフィールドのオプションが表示されます。それぞれ見ていきましょう。

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

選択したフィールドタイプに応じて、追加のオプションが表示される場合もあります。たとえば、テキストフィールドを選択した場合、プレースホルダーテキストや文字数制限などの追加オプションが表示されます。

上記のプロセスに従って、 「+」ボタンをクリックして、テストモーニアルブロックに他の2つのフィールドを追加しましょう。

フィールドの順序を変更したい場合は、各フィールドラベルの左側にあるハンドルを使用してドラッグすることで実行できます。特定のフィールドを編集または削除するには、フィールドラベルをクリックし、右側の列でオプションを編集する必要があります。

完了したら、ページ右側にある「公開」ボタンをクリックするだけで、カスタムGutenbergブロックを保存できます。

ステップ4：ブロックテンプレートを作成する

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

ブロックテンプレートは、ブロックに入力された情報がウェブサイトにどのように表示されるかを正確に決定します。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ホスティングアカウントのコントロールパネル内にあるファイルマネージャーアプリを使用してください。

接続したら、/wp-content/themes/your-current-theme/ フォルダーに移動します。

テーマフォルダに「blocks」という名前のフォルダがない場合は、新しいディレクトリを作成し、blocksと名付けてください。

次に、コンピューターで作成したフォルダーをblocksフォルダーにアップロードする必要があります。

これで完了です！カスタムブロックの手動テンプレートファイルを正常に作成しました。

ステップ5：カスタムブロックをプレビューする

HTML/CSSをプレビューできるようになる前に、サンプル出力を表示するために使用できるテストデータを提供する必要があります。

WordPress管理画面でブロックを編集し、「エディタープレビュー」タブに切り替えます。ここで、ダミーデータを入力する必要があります。

このデータはカスタムブロックの一部とはならず、HTMLおよびCSSを使用して行った変更のプレビューにのみ使用されます。

データを追加したら、変更を保存するために「更新」ボタンをクリックすることを忘れないでください。

「更新」ボタンをクリックしないと、カスタムブロックのプレビューを表示できません。

次に、「フロントエンドプレビュー」タブに切り替えて、ブロックがWordPressウェブサイトのフロントエンドでどのように表示されるかを確認できます。

すべて問題なければ、ブロックを再度更新して、保存されていない変更をすべて保存できます。

ステップ6：投稿にブロックを挿入する

これで、他のブロックと同じようにWordPressでカスタムブロックを使用できます。

このブロックを使用したい投稿またはページを編集します。次に、左上隅にある「ブロックを追加」（+）ボタンをクリックして、ブロックメニューを開きます。

ここでは、検索機能を使用して、ブロックの名前またはキーワードを入力してブロックを見つけます。次に、それをページまたは投稿に追加します。

カスタムブロックをコンテンツエリアに挿入すると、以前に作成したブロックフィールドが表示されます。

必要に応じてブロックフィールドに入力できます。

カスタムWordPressブロックから別のブロックに移動すると、エディターはブロックのライブプレビューを自動的に表示します。

これで、投稿とページを保存し、プレビューして、カスタムブロックがウェブサイトでどのように機能するかを確認できます。

テスティモニアルブロックがテストサイトでどのように表示されるかは次のとおりです。

ボーナス：再利用可能なブロックパターンを作成する

カスタムブロックの作成に加えて、ウェブサイトのブログ投稿やページにカスタムブロックパターン（以前は再利用可能なブロックとして知られていました）を追加することもできます。

パターンとは、投稿に追加して他のページやコンテンツとは異なる見た目にすることができるレイアウトです。これにより、投稿をより魅力的で視覚的に訴えるものにし、より多くのリードを獲得するのに役立ちます。

再利用可能なグループブロックを作成することで、すべての投稿のパターンを簡単に作成できます。

まず、「ブロックを追加」（+）ボタンをクリックして、グループブロックを投稿に追加する必要があります。次に、見出し、メディアとテキスト、カバー画像など、グループ内に任意のブロックを追加できます。

ポストテンプレートを作成したら、ブロックの上部にあるブロックツールバーの3点メニューをクリックします。次に、「パターンを作成」ボタンをクリックします。

その後、投稿パターンは同期パターンとして保存されます。ブロックメニュー（+）を開き、「パターン」タブに切り替えることで、任意の投稿にアクセスして追加できます。

ただし、このカスタム投稿テンプレート作成方法では機能が限定されることに注意してください。コーディングなしでより美しいカスタムテンプレートを作成するには、市場で最高のページビルダーであるSeedProdを使用できます。

詳細については、WordPressでカスタムシングル投稿テンプレートを作成する方法に関するチュートリアルをご覧ください。

カスタムWordPressブロックに関するよくある質問

WordPressカスタムブロックの作成に関して、読者からよく寄せられる質問を以下に示します。

WooCommerceでカスタムブロックを作成するにはどうすればよいですか？

WooCommerce 用のカスタムブロックは、標準のページを作成するのと同じように、WPCode や Genesis Custom Blocks のようなプラグインを使用して作成できます。WooCommerce は商品情報やストアレイアウトに標準の WordPress エディターを使用しているため、作成したカスタムブロックはオンラインストアでシームレスに機能します。

ChatGPT は WordPress ウェブサイトを構築できますか？

ChatGPT は WordPress サイトを自動的に構築することはできませんが、サイトを構築するために必要な特定のコードやコンテンツを生成することはできます。カスタムブロックやテーマに必要な HTML、CSS、PHP を ChatGPT に記述させ、WPCode のようなツールを使用してサイトにコピー＆ペーストすることができます。

カスタム WordPress プラグインを作成するにはどうすればよいですか？

カスタムプラグイン機能を作成する最も簡単な方法は、WPCode のようなコードスニペットマネージャーを使用することです。これにより、セットアップが処理されます。

または、コンピューター上に PHP ファイルと標準のプラグインヘッダーコメントを含むフォルダーを作成し、そのフォルダーを zip 圧縮して、プラグイン » 新規追加 画面からアップロードすることもできます。

WordPress にカスタム HTML ブロックを追加するにはどうすればよいですか？

WordPress のブロックライブラリにあるネイティブの「カスタム HTML」ブロックを使用して、カスタム HTML を追加できます。(+) ブロックを追加 ボタンをクリックし、「カスタム HTML」を検索して、コードをブロックに直接貼り付けるだけで、ウェブサイトに表示されます。

この記事が、WordPressウェブサイト用のカスタムGutenbergブロックを簡単に作成する方法を学ぶのに役立ったことを願っています。また、WordPressエディターにブログ投稿チェックリストを追加する方法に関するガイドや、ウェブサイトでのショートコードを使用するための必須のヒントもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。