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

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

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

一番良いところは？ 開発者でなくても、カスタムWordPressブロックを作成できることです。適切なツールと明確なプロセスがあれば、サイト固有のニーズに合ったブロックを構築できます。React、Node.js、ターミナルコマンドは不要です。

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

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

💡クイック比較：カスタムブロックを作成する最良の方法

お急ぎですか？ 理想的な方法を選択するために、次の表をご覧ください。

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

カスタムブロックは、ウェブサイト用の再利用可能なコンテンツ要素を作成できるようにすることで、時間の節約と一貫性の維持に役立ちます。主なメリットは次のとおりです。

• 繰り返し作業を削減：レイアウトや機能を一度作成すれば、サイトのどこでも再利用できます。
• 一貫したブランディングを維持：重要なコンテンツ要素が常に同じデザインとフォーマットを使用するようにします。
• より効率的に更新：同じコンテンツをゼロから再構築することなく、ブロックのデザインを変更できます。

カスタムWordPressブロックの一般的なユースケース

カスタムブロックは、さまざまな種類のコンテンツに使用できます。一般的な例をいくつか紹介します。

コーディングスキルまたは開発者ツールが必要ですか？

従来のブロック開発には、Node.js、npm、およびReactの知識が必要であり、公式WordPressチュートリアルが経験豊富な開発者を対象としている理由です。

ただし、このガイドのどちらの方法もWordPressダッシュボードで直接機能します。Node.jsをインストールしたり、ターミナルコマンドを実行したり、JSXを記述したりする必要はありません。

方法1（WPCode）はコーディング不要で、方法2（Genesis Custom Blocks）は基本的なHTML/CSSの知識があれば十分です。

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

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

方法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：ブロックをアクティブ化して保存する

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

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

WPCodeで作成したカスタムブロックは、WordPressブロックメニューにドラッグアンドドロップ可能なオプションとして表示されないことに注意してください。

代わりに、ステップ5で設定した場所と条件付きロジックのルールに基づいて、投稿またはページに自動的に挿入されます。

ブロックのコンテンツを編集したり、表示場所を変更したりするには、WordPressダッシュボードからコードスニペットにアクセスし、ブロックのスニペットの下にある「編集」リンクをクリックしてください。

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

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

方法2：Genesis Custom Blocks（無料）でカスタムGutenbergブロックを構築する

中級ユーザーで無料のソリューションを探している場合は、この方法が最適です。この方法の指示に従うには、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クライアントを使用して（またはホストが要求する場合はSFTPを使用して）ウェブサイトに接続するか、ホスティングアカウントでファイルマネージャーを開きます。

接続したら、/wp-content/themes/your-current-theme/ディレクトリに移動します。

まだblocksという名前のフォルダが表示されていない場合は、作成してください。

ほとんどのFTPクライアントでは、右クリックして「ディレクトリの作成」または「新規フォルダ」を選択できます。cPanelユーザーは「+フォルダ」ボタンをクリックできます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

標準のページと同様に、WPCodeやGenesis Custom Blocksなどのプラグインを使用してWooCommerceのカスタムブロックを作成できます。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でも私たちを見つけることができます。