【WordPress】固定内容を表示させるカスタムブロックを作成する

2021/03/012021/07/05

当サイトのリンクには広告が含まれています。

前回、カスタムブロック用のカテゴリーを追加しました。今回から、いよいよカスタムブロックを作成していきます。

前回の記事

【WordPress】カスタムブロック用のカテゴリーを追加する前回、ブロックエディターの開発環境構築をしたので、カスタムブロックの開発に入っていきます。カスタムブロックはWordPressデフォルトのブロックのカテゴリーとは分…

まずは一番シンプルで簡単な、決められた内容をただ表示するだけのブロックを作ってみます。

シリーズ記事

作成するブロック

今回作成するのは、このようなテキストとリンクボタンがあるシンプルなCTA（Call To Action）です。

文章やボタンのリンク先はあらかじめ決められたものを表示するだけのシンプルなブロックです。
管理画面から編集などはできません。

ブロックの作成

まずはsrcディレクトリにctaディレクトリを追加し、さらにその中にcta.jsファイルを追加します。

src
　┗ cta
　　┗cta.js

作成したcta.jsに以下のコードを書きます。

export default {
  name: 'create-block/cta',                 //名前
  title: 'CTAエリア',                       //表示名
  description:'ctaを表示するブロックです',  //説明文
  icon: 'testimonial',                      //アイコン
  category: 'custom-block-category',        //カテゴリー
  keywords: ['CTA'],                        //キーワード

  edit(){  //投稿画面に表示される
    return (
      <div className="custom-block-cta">
        <p className="custom-block-cta__text">Webサイト制作を依頼するなら〇〇へ！</p>
        <a href="https://hoge.com" className="custom-block-cta__btn">見積もり依頼をする</a>
      </div>
    )
  },

  save(){ //サイトに表示されるコンテンツ
    return (
      <div className="custom-block-cta">
        <p className="custom-block-cta__text">Webサイト制作を依頼するなら〇〇へ！</p>
        <a href="https://hoge.com" className="custom-block-cta__btn">見積もり依頼をする</a>
      </div>
    )
  }
};

以下、簡単なコードの解説です。

name
ブロックの名前。
create-block/のように頭にプラグイン専用の空間名前をつける必要がある。（今回の場合はcreate-block）

title
投稿画面に表示されるブロックの表示名

description（オプション）
ブロックの説明文。

icon（オプション）
投稿画面に表示されるブロックのアイコン。DashiconsやSVGが使える。
今回の例ではtestimonialを使いました。

コアのカテゴリーを使う場合は以下から選択する。

text (テキスト)
media (メディア)
design (デザイン)
widgets (ウィジェット)
embed (埋め込み)

category
ブロックのカテゴリー。
前回追加したカスタムブロックカテゴリー（custom-block-category）を設定しました。

keywords（オプション）
ブロックのキーワード。入れると、このキーワードでブロックの検索ができるようになる。

edit関数
投稿画面に表示される部分

save関数
保存される内容。この内容がサイト上に表示される。

今回は固定の内容を表示させるブロックなので、editとsaveの中は同じHTMLを記載しました。

詳しい説明は公式ドキュメントを参照。
ブロックの登録 – Japanese Team — WordPress.org

追加したブロックを読み込む

index.jsを開き、先ほど追加したファイルを読み込む記述を入れます。

import Cta from './cta/cta.js';     //ファイルの読み込み
registerBlockType( Cta.name, Cta ); //ブロックの登録

これでindex.jsの全コードは以下のようになります。（元々あったコメントは削除しています。）

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import './style.scss';
import Edit from './edit';
import save from './save';
import Cta from './cta/cta.js';

registerBlockType( 'create-block/custom-block', {
	apiVersion: 2,
	title: __( 'Custom Block', 'custom-block' ),
	description: __(
		'Example block written with ESNext standard and JSX support – build step required.',
		'custom-block'
	),
	category: 'custom-block-category',
	icon: 'smiley',
	supports: {
		html: false,
	},
	edit: Edit,
	save,
} );

registerBlockType( Cta.name, Cta );

投稿画面から見るとブロックが追加されており（赤枠部分）、登録したHTMLの内容が表示されているのも確認できました（黄色枠部分）。

スタイルの調整

このままだと見た目が整っていないので、CSSでスタイルを当てていきます。

srcの中にあるstyle.scssを開き、以下のscssを記載します。

.custom-block-cta {
	background-color: #dff4fa;
	padding: 25px;
	text-align: center;
}

.custom-block-cta__text {
	font-size: 20px;
	font-weight: bold;
}

.custom-block-cta__btn {
	display: inline-block;
	padding: 10px;
	margin-top: 15px;
	background-color: #0194bd;
	border-radius: 10px;
	width: 300px;
	color: #fff;
	text-decoration: none;
}

以下のようにスタイルが当たりました。