時間も場所もお金も自由な生活を手に入れる人生を目指し中

【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;
}

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

ちなみにsrcの中にはstyle.scsseditor.scssの2つのscssファイルがあるのが確認できます。この2つのファイルの違いは以下のとおり。

  • style.scss 投稿画面とサイト側の両方にスタイルを当てる
  • editor.scss 投稿画面のみにスタイルを当てる

必要に応じて使い分けていきます。
今回はstyle.scssに記載をしたので、サイト上からみても先ほどのスタイルが反映されております。

以上が固定内容を表示させるブロックの追加方法です。
今回のようなCTAのように決まった内容を表示させたい場合には、使えるのではないでしょうか。

ただ実際に使用する場面では、自由に入力をしたい場合がほとんどですので、次回以降は自由に入力したりできるブロック作っていきます。


目次
閉じる