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

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

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

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

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

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

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

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

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

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

カスタムブロックを使用すると、既製のブロックでは利用できない独自の機能や機能性をウェブサイトに追加できます。これにより、プロセスを自動化したり、WordPressブログのコンテンツ作成をより効率的にしたりすることができます。

例えば、お客様の声を表示するカスタムブロックを作成し、コーディングの知識がなくてもそのブロックを簡単に挿入および管理できます。

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

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

• 方法1：WPCodeを使用してWordPress用のカスタムブロックを作成する（推奨）
• 方法2：Genesis Custom Codeプラグイン（無料）を使用してWordPressのカスタムブロックを作成する
• ボーナス：投稿のカスタムテンプレートを作成する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ステップ1：WordPress用のカスタムブロックを作成する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

前のステップでカスタム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フォルダーにアップロードする必要があります。

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

ステップ3：カスタムブロックのプレビュー

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

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

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

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

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

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

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

ステップ 4: WordPress でカスタムブロックを使用する

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

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

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

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

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

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

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

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

ボーナス：投稿のカスタムテンプレートを作成する

カスタムブロックの作成に加えて、ウェブサイトの ブログ投稿 またはページのカスタムテンプレートを追加できます。

テンプレートは、投稿にレイアウトを追加して、他のページやコンテンツとは異なる外観にするためのものです。これにより、投稿がより魅力的で視覚的に訴えるものになり、より多くのリードを生み出すのに役立ちます。

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

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

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

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

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

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

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

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