【WordPress】簡単にカスタムブロックを作成できる！？Genesis Custom Blocksの使い方！

2026.02.09

カスタムブロックとは

カスタムブロックとは、WordPressのブロックエディタに独自のブロックを追加するためのものです。
WordPressにはあらかじめ用意されているブロックがいくつかありますが、カスタムブロックを使えば、必要なデザイン・機能を持ったブロックを作成することができます。

neko

初めてカスタムブロックを作成したけど、とても簡単だったよ

カスタムブロックを使うメリット

①デザインに統一感が出せる
文字の色や背景色、画像のサイズ、余白感など、自作テーマを作成するならこだわりたくないですか？
サイト全体に統一感を持たせるためには、カスタムブロックは欠かせません。

②効率的に記事を書ける
何度も同じテンプレートを一から準備するのは大変ですよね。
ブログでよく見るのだと、「画像から吹き出しコメントが出ているレイアウト」とか。
オリジナルのブロックを作成しておくと、コメントを入力するだけでほら、簡単に出力できます。

neko

こんなものが作れるよ

Genesis Custom Blocksとは？

「Genesis Custom Blocks」はカスタムブロックを作成するためのプラグインです。

JavaScriptの書き方が分からなくても、簡単にカスタムブロックを作成できます。
必要なのはHTMLとCSS、ブロックエディターだけです。

テキストだけじゃなく、画像、カラーなど設定できるフィールドはたくさん。かなり自由に組み合わせられます！

無料で利用できるフィールド

○Checkbox（チェックボックス）
○Color（色）
○Email（メールアドレス）
○File（ファイル）
○Image（画像）
○Inner Blocks（ブロックの入れ子）
○Number（数値）
○Radio（ラジオボタン）
○Range（範囲）
○Select（選択）
○Multi-Select（複数選択）
○Text（テキスト）
○Textarea（テキストエリア）
○Toggle（真偽）
○URL（URL）

有料で利用できるフィールド

○Classic Text（クラシックテキスト）
○Repeater（リピート）
○Post（投稿）
○Rich Text（リッチテキスト）
○Taxonomy（タクソノミー）
○User（ユーザー）

Genesis Custom Blocksでブロックを作成してみよう

実際に作ってみた方がわかりやすいと思うので、早速作ってみましょう。
今回は、このブログで使っている吹き出しコメントのブロックを作ってみます。

neko

これを作っていくよ

Genesis Custom Blocksをインストールする

WordPressの管理画面からプラグインを検索し、インストールします。インストールができたら有効化しておいてください。

HTMLとCSSを準備する

作りたいブロックをHTMLとCSSでデザインしておきます。

<div class="single__fukidashi">
  <div class="single__fukidashiIcon">
    <div class="single__fukidashiIconPh">
      <img src="/assets/images/icon.webp">
    </div>
    <p class="single__fukidashiIconName">名前</p>
  </div>
  <p class="single__fukidashiText">ここにコメントを入れたい</p>
</div>

.single__fukidashi {
  display:flex;
  align-items:center;
  gap:50px;
  margin-top:60px
}
.single__fukidashiIcon {
  width:90px;
  min-width:90px
}
.single__fukidashiIconPh {
  border-radius:9999px;
  border:1px solid #000;
  overflow:hidden
}
.single__fukidashiIconName {
  font-size:12px;
  text-align:center;
  margin-top:8px
}
.single__fukidashiText {
  position:relative;
  font-size:16px;
  line-height:2;
  letter-spacing:.02em;
  background-color:#ebebeb;
  border-radius:10px;
  padding:20px
}
.single__fukidashiText:before {
  content:"";
  position:absolute;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-right:17px solid #ebebeb;
  z-index:1;
  left:0;
  top:23px;
  transform:translate(-100%)
}

ブロックを作成する

サイドバーのCustom Blocks > Add New Blockをクリックします。

するとブロックを作成する画面になります。今回の作成するブロックのタイトルは「comment」としました。

slug – テンプレートファイルの名前に使用するスラッグを入力します。わたしは「comment」としました。
icon – アイコンを選ぶことができます。お好きなものをどうぞ。
category – ブロックを追加するとき、カテゴリごとに分けて表示してありますよね。どのカテゴリに表示するかを決められるみたいです。新たにカテゴリを追加することもできます。わたしは自作のブロックは「オリジナル」というカテゴリにまとめていこうと思います。
KEYWORDS – 設定しておくと、ユーザーがブロックを検索しやすくなるそう。

フィールドを追加する

今回は「吹き出しコメント」を作成ということで必要なフィールドは以下です↓

🔸アイコン画像（画像フィールド）
🔸名前（テキストフィールド）
🔸コメント本文（テキストエリアフィールド）

アイコン画像と名前はデフォルトで設定しておき、変更ない場合はデフォルト値を表示することとしたいと思います。また、名前は表示しないのもあり得るかもしれません。値がない場合もエラーにならないようにPHPを書いておくことにします。

プラスマークをクリックして、新しいフィールドを追加してみましょう！

はい、こんな感じで３つ追加してみました！それぞれの詳しい設定はこんな感じにしました。

neko

Field Name(slug)の値は出力ファイルで使用するよ

出力ファイルを作成する

フィールドを作成して「保存」をクリックすると、こんな表示が出てきます↓

表示の通り、ファイルを作成してブロックの出力ファイルを作成していきます。

下記のファイルを作成↓
wp-content/themes/blog2026/blocks/block-comment.php

フィールドの値を取得するには、block_value(‘〇〇’)に先程作成したフィールドのslugを指定します。

<?php
$name = block_value('name');
$image = block_value('image');
$comment = block_value('comment');
?>

<?php if($comment): ?>
<div class="single__fukidashi">
  <div class="single__fukidashiIcon">
    <?php if(wp_get_attachment_image_url($image)) :?>
      <div class="single__fukidashiIconPh">
        <img src="<?php echo wp_get_attachment_image_url($image); ?>" alt="アイコン">
      </div>
    <?php else : ?>
      <div class="single__fukidashiIconPh">
        <img src="<?php echo get_template_directory_uri(); ?>/assets/images/icon.webp" alt="アイコン">
      </div>
    <?php endif; ?>
    <p class="single__fukidashiIconName"><?php echo $name; ?></p>
  </div>
  <p class="single__fukidashiText"><?php echo $comment; ?></p>
</div>
<?php endif; ?>

これで準備は完了！投稿の編集画面から、作成したカスタムブロックを使うことができますよ。

Genesis Custom Blocksで作成したブロックを使ってみよう

先程作成したブロックがこちらです。

クリックすると、ブロックを追加することができます。

ジャーン！出力できました！

neko

おはよう！こんにちは！こんばんは！

Genesis Custom Blocksの使い方まとめ

今回は、Genesis Custom Blocksの使い方をまとめてみました。

カスタムブロックを使うと、自分の意図するデザインを自由に表現できます。また、何度も使うパーツはブロックにしておくと効率的にサイトの更新が可能です。

初めて使ってみましたが、とても簡単にできたのでカスタムブロックを作成したい方は是非使ってみてください〜！