Knowledge Base

WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

ブロックエディタで作成した定型コンテンツを簡単に作成・編集・挿入できる便利機能「ブロックパターン」の使い方

公開日：2021(令和3)年3月16日／最終更新日：

,
WordPress初心者向けのカスタマイズ情報



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressで定型文を作って挿入、以前からWordPressでサイトの管理をしている方ならピンとくるのが「AddQuicktag」というプラグイン。WordPress5.0より前（ブロックエディタになる前）からサイト作りをしている方や、それ以降もClassic Editorプラグインで旧エディタへ戻して使っている方ならほとんどの方がご存じではないかと思います。

定型タグや定型文をボタン１つで挿入できるプラグイン「AddQuicktag」

このプラグインは、旧ビジュアルエディタとテキストエディタでの使い勝手は抜群だったのですが、ブロックエディタだと、クラシックブロックでのみボタンが表示でき、クリックで挿入できるようになっているため、

  • クラシックブロックで定型文を挿入
  • 「ブロックへ変換」をクリックして、ブロック化

して使うことになります。ただ、ブロックの変換はWordPress側の判断任せになるので、この方法でもきちんとブロックなったりならなかったりしますから、そこから自身で調整が必要な場面が出てくるなどしてちょっと使いにくいです。

そんな方におすすめしたいのが、今回紹介するブロックパターンという機能。実は少し前からWordPressに標準で搭載されている機能（どのバージョンだったかは忘れました・・）で、ブロックの追加から「すべて表示」をクリックすると、タブにパターンという項目が表示され、そこから選択できるようになっています。

ブロックエディタで作成した定型コンテンツを簡単に作成・編集・挿入できる便利機能「ブロックパターン」の使い方|Knowledge Base
ブロックエディタで作成した定型コンテンツを簡単に作成・編集・挿入できる便利機能「ブロックパターン」の使い方|Knowledge Base

また、ドロップダウンから、いろいろな定型コンテンツが選択でき、簡単に挿入できるようになっています。

「あれ？これって再利用ブロックと同じなんじゃないの？？」

「ブロックパターンってどこにも追加ボタンとかないから、増やしたりできないんじゃないの？」

と思われる方も多いでしょう。そこで今回は再利用ブロックとの違いを含め、ブロックパターンをWordPressサイトで便利に使う方法を紹介します。

「ブロックパターン」と「再利用ブロック」の違い

「ブロックパターン」と「再利用ブロック」は、似て異なる機能で、大きくは

  • 「再利用ブロックは再利用ブロックとして挿入されているコンテンツの一括編集ができる機能
  • 「ブロックパターン」は定型文を登録し、挿入するだけ

とという違いがあります。冒頭で書きましたが、まさにブロックパターンは「AddQuicktag」プラグインがブロックエディタ仕様になったものになり、挿入したブロックパターンのコンテンツはその投稿や固定ページ固有のものなので、挿入後自由に編集して使えるものになります。

一方再利用ブロックは、共通のコンテンツになりますので、Aという再利用ブロックを編集すると、A再利用ブロックが挿入されている投稿や固定ページの内容が一括して変更されるという機能になります。混乱させてしまいそうですが、再利用ブロックをブロックパターンのようにして使うう方法もあります。再利用ブロックについては

再利用ブロックの作り方や使い方、再編集の方法、特定の再利用ブロックが使われている投稿や固定ページを調べる方法など

で詳しく紹介していますので、参考にしてください。

再利用ブロックとブロックパターンを使い分けるポイント

ここまで説明しておいて恐縮ですが、冒頭で紹介した通り、何もブロックパターンを使わなくても再利用ブロックを挿入後に通常ブロックへ戻せば、機能としては同じことになりますから、そうした使い方をされている方も多いと思います（恐らくブロックパターンというのをご存じない方に多いように思います）。

再利用ブロックの利点は、編集画面上から簡単に追加ができること。ただ、これは裏を返せば誤って「再利用ブロックに追加」をクリックしてしまった場合や、何も考えずにとりあえず・・と追加したものも無尽蔵に追加されていくんです。

最初のうちはそれでも大丈夫なのですが、さすがに数が増えてくると探すだけで一苦労ということになります。

これを解消できるのが、ブロックパターンの「カテゴリー」機能。あらかじめブロックパターン用のカテゴリーを作成しておき、パターン登録時に分類しておけば、ブロックパターンの呼び出し画面で簡単に選択できるようになります。

ここまで説明した内容から総合的に

  1. 後から一括で編集する必要がないと思われる定型コンテンツを作る
  2. 分類分けして呼び出しを楽にしたい

という場合にはブロックパターンを、そうでない場合には再利用ブロックを使うという風に使い分けをすると、投稿や固定ページの作成がよりスムーズになるのではないかと思います。

独自のブロックパターンを作成・管理する機能を追加する方法

前述したように、再利用ブロックと似ている機能だからなのかは不明ですが、WordPressで基本状態ではブロックパターンはあらかじめ入っているもの以外を追加・編集などができません（機能があるのに表向きには何も表示されたりしていません）。使ってみると本当に便利なのに何で？と私も首をかしげた次第です。

そこでここでは、ブロックパターンを管理メニューから簡単に作成・編集・削除できるようにする方法を紹介します。

この機能をサイトへ実装するには、現在有効化しているテーマのfunctions.phpへコードを挿入できる（したことがある）スキルが必要になります。

行う作業はたった１つ、現在有効化しているテーマのfunctions.phpへ以下を追記するだけです。

/********** ブロックパターン **********/
/*** ブロックパターン用カスタム投稿タイプ作成 ***/
/* https://developer.wordpress.org/reference/functions/register_post_type/ */
if ( !function_exists( 'ha_register_my_cpts_ha_block_pattern' ) ){
function ha_register_my_cpts_ha_block_pattern() {

	$labels = [
		"name" => __( "Block Pattern", "" ),
		"singular_name" => __( "Block Pattern", "" ),
	];

	$args = [
	"label" => __( "Block Pattern", "" ),
	"labels" => $labels,
	"description" => "",
	"public" => true,
		//"publicly_queryable" => true,
	"show_ui" => true,
	"show_in_rest" => true,
		//"rest_base" => "",
		//"rest_controller_class" => "WP_REST_Posts_Controller",
		//"rest_namespace" => "wp/v2",
	"has_archive" => false,
	"show_in_menu" => true,
		//"show_in_nav_menus" => true,
		//"delete_with_user" => false,
		//"exclude_from_search" => false,
	"capability_type" => "post",
	"map_meta_cap" => true,
		//"hierarchical" => false,
		//"can_export" => false,
		//"rewrite" => [ "slug" => "habone_block_pattern", "with_front" => true ],
		//"query_var" => true,
	"supports" => [ "title", "editor", "thumbnail" ],
		//"show_in_graphql" => false,
	"menu_icon" => "dashicons-screenoptions",
	"menu_position" => 5,
	];

	register_post_type( "ha_block_pattern", $args );
}
}

add_action( 'init', 'ha_register_my_cpts_ha_block_pattern' );

/*** ブロックパターン用カテゴリー作成 ***/
/* https://developer.wordpress.org/reference/functions/register_taxonomy/ */
if ( !function_exists( 'ha_register_my_taxes_ha_pattern_category' ) ){
function ha_register_my_taxes_ha_pattern_category() {

	$labels = [
		"name" => __( "Category", "" ),
		"singular_name" => __( "Category", "" ),
	];

	
	$args = [
	"label" => __( "Category", "" ),
	"labels" => $labels,
	"public" => false,
		//"publicly_queryable" => true,
	"hierarchical" => true,
	"show_ui" => true,
		//"show_in_menu" => true,
		//"show_in_nav_menus" => true,
	"query_var" => true,
		//"rewrite" => [ 'slug' => 'ha_pattern_category', 'with_front' => true, ],
	"show_admin_column" => true,
	"show_in_rest" => true,
		//"show_tagcloud" => false,
		//"rest_base" => "ha_pattern_category",
		//"rest_controller_class" => "WP_REST_Terms_Controller",
		//"rest_namespace" => "wp/v2",
		//"show_in_quick_edit" => false,
		//"sort" => false,
		//"show_in_graphql" => false,
	];
	register_taxonomy( "ha_pattern_category", [ "ha_block_pattern" ], $args );
}
}
add_action( 'init', 'ha_register_my_taxes_ha_pattern_category' );


/*** 編集画面でパターンを呼び出す ***/
if ( !function_exists( 'ha_register_block_patterns' ) ){
function ha_register_block_patterns() {

	// パターンカテゴリーのセット
	register_block_pattern_category('ha_block_pattern', [
		'label' => __('BP ',''),
	] );
	$all_terms = get_terms( 'ha_pattern_category' );
	foreach ( $all_terms as $term ) {
		register_block_pattern_category(
			'ha_block_pattern' . $term->term_id,
			[ 'label' => __('BP ','') . $term->name ]
		);
	}

	// カスタムパターン全取得
	$the_query = new \WP_Query( [
		'post_type'              => 'ha_block_pattern',
		'posts_per_page'         => -1,
		'no_found_rows'          => true,
	] );
	wp_reset_postdata();

	// デフォルトのビューポートサイズ
	$viewport = apply_filters( 'ha_bp_default_viewport_width', 1200 );

	// パターン登録
	foreach ( $the_query->posts as $parts ) {
		$pid = $parts->ID;

		// カテゴリーで振り分け
		$categories = [];
		$the_terms  = get_the_terms( $pid, 'ha_pattern_category' );

		if ( empty( $the_terms ) ) {
			$categories = [ 'ha_block_pattern' ];
		} else {
			foreach ( $the_terms as $term ) {
				$categories[] = 'ha_block_pattern' . $term->term_id;
			}
		}

		// パターン登録データ
		$options = [
			'title'         => $parts->post_title,
			'content'       => $parts->post_content,
			'categories'    => $categories,
			'viewportWidth' => $viewport,
		];

		register_block_pattern( "ha-cbp/pattern-$pid", $options );
	}
}
}
add_action( 'init', 'ha_register_block_patterns', 20 );

よりも前に本ページへ掲載していたコードを利用している方へ

より前に本ページで掲載していたコードでは、以下の不具合が発生します。

メディアを年月フォルダに分けるよう設定している場合、アップロードしたファイル・画像の年月が、ブロックパターンの中の最終作成月を画像の年月とみなして意図しないフォルダへ追加されてしまう

この不具合を解消するため、上記のコードでは、不具合部分の修正ではなく、一から作成しなおしたコードを掲載しています。

より以前にコードを参考に機能追加されていた方は、

  1. functions.phpへ上記コードの追加
  2. 「Post Type Switcher」プラグインを使って今まで作成していたパターンの移行
  3. 旧コードの削除

という流れで不具合の解消を行ってください。

何をしているコードかの簡単な解説

上記のコードでは、以下のことを行っています

  • 通常の投稿のように扱えるようにブロックパターン用の「カスタム投稿タイプ」を追加
  • ブロックパターンの分類のみに使えるカテゴリー（カスタムタクソノミー）を追加
  • ブロックパターンとしてWordPressへ登録し、編集画面から呼び出せるようにする

簡単すぎ？かも知れませんが、今回はコードの仕組みを覚えるよりも、ブロックパターンを使おう！がテーマですので、この程度にしておきます。興味のある方は「カスタム投稿タイプ」「カスタムタクソノミー」「ブロックパターン」などで検索してお調べください。

参考：WordPress 5.5 から利用できる「ブロックパターン」 が めちゃ いいかもしれない

このコードが正しく設置されると、管理画面左のメニューに「ブロックパターン」という項目が「投稿」の下あたりに追加されます。

コードの実装が不安な方は

慣れている方ならfunctions.phpへ何かを追記するのは簡単なことですし、更に慣れていればそれによって何かトラブルが起きてもご自身で解消できますが、そうでない方は以下のプラグインを使うとよいでしょう（基本的に同じことをしているだけです）。

ブロックパターンの作成・管理ができるプラグイン「Block Pattern Builder」

早速ブロックパターンを作ってみよう

解説する必要はないかもしれないと思いつつ・・。管理画面の「ブロックパターン」メニューをクリックすると、通常の投稿や固定ページと同じ画面が出てきます。つまり、ここから「新規作成」して公開すれば、ハイ、ブロックパターンの出来上がり！！ということになります。

複数のブロックを組み合わせたテンプレートのようなものもできますし、後述するような装飾コンテンツを作ることもできます。

上記のコードを挿入して作成したブロックパターンでは、カテゴリー分けができるようになっていて、任意のカテゴリーを作って紐づけておけば、投稿編集画面で呼び出した時にきちんと分類されるようになっています。

※カテゴリー分けをしている場合、下の画像の「ボタン」となっているところのプルダウンでカテゴリー名が表示され、クリックすると紐づいたブロックパターンが呼び出せます。カテゴリー分けをしていない場合には、これも通常の投稿と同じように「未分類」というカテゴリーで登録されます。

ブロックエディタで作成した定型コンテンツを簡単に作成・編集・挿入できる便利機能「ブロックパターン」の使い方|Knowledge Base
QA AnalyticsQA Analytics

サイト作りにちょっと役立つブロックパターンを作ってみよう

あんまり定型文なんて使わないから、ひつまず必要ないかも・・と思った方に向けて、テーマの機能やプラグインに頼らずにこんなコンテンツが数クリックで挿入できたら・・という例をいくつか紹介しておきます。ここで作るのは、文章を見やすくする枠付きのコンテンツです。

枠付きコンテンツの作成例

これから紹介する方法でどんなコンテンツを作れるのかを、実際にご覧いただきましょう。

枠付きの文章コンテンツ

ヒントとして紹介するような文章を入れるのに便利

チェック項目として紹介するような文章を入れるのに便利

警告項目として紹介するような文章を入れるのに便利

注意項目として紹介するような文章を入れるのに便利

枠付きのリスト

  • ヒントを表示するリスト
  • ヒントを表示するリスト
  • チェック項目を表示するリスト
  • チェック項目を表示するリスト
  • 警告を表示するリスト
  • 警告を表示するリスト
  • 注意事項を表示するリスト
  • 注意事項を表示するリスト

枠付き、自動で数字が付与されるリスト

  1. 自動で行番号が計算されて表示されるリスト
  2. 自動で行番号が計算されて表示されるリスト
  3. 自動で行番号が計算されて表示されるリスト
  1. 自動で行番号が計算されて表示されるリスト
  2. 自動で行番号が計算されて表示されるリスト
  3. 自動で行番号が計算されて表示されるリスト
  1. 自動で行番号が計算されて表示されるリスト
  2. 自動で行番号が計算されて表示されるリスト
  3. 自動で行番号が計算されて表示されるリスト

こういうの、よく使うと思いますし、それらがあるからということでテーマ選びをしている方もいると思います。これらは通常、テーマに備わっている装飾機能や、専用のプラグインを使いますが、前項でブロックパターンを使えるようにし、これから紹介する方法でパターンを追加すれば、テーマやプラグインの機能に頼らずに作ることができます。

なお、これらの表示ができるようにするには

  1. 有効化しているテーマの追加CSSなどへ、デザイン要素の追記ができる方
  2. 追加したデザイン要素を見て、調整できる方
  3. サーバー内のテーマフォルダなどへ必要なファイルの転送ができる方（必要な場合のみ）
  4. 有効化しているテーマのfunctions.phpへコードを挿入できる（したことがある）方（必要な場合のみ）

というスキルが必要です。

デザインに必要なCSSを設定する

基本的に以下のコードを「テーマのCSSへ追加」するか、「テーマカスタマイザーの追加CSSへ追加」するかのいずれか、もしくはスキルのある方なら「◎◎.cssとして保存後、テーマフォルダへアップロードしてヘッダーへ読み込ませる」方法のいずれかで適用ください。

紹介するコードの中にあるマーク類はすべてIcoMoonというツールで作成したアイコンフォントになります（IcoMoonのアイコンフォントの適用方法は後述します）。Fontawesomeなど別のアイコンフォントを使用している方は内容を合わせる必要がありますので注意してください。

上の例すべてに対するデザインコード（CSS）は以下になります。

/********** ブロックパターン **********/
/*** ヒントコンテンツ ***/
/* ボックス */
p.is-ha-para-hint:before {
    font-family: 'icomoon';
    content: "\e905";
    color: #ffc533;
    padding-right: 16px;
    font-weight: bold;
    font-size: 1.2em;
}

p.is-ha-para-hint {
    background: #ffffff;
    padding: 16px;
    border: 2px solid #ffc533;
    border-radius: 8px;
}

/* リスト */
.is-ha-list-hint li{
    list-style-type: none;
}

ul.is-ha-list-hint {
    list-style-type: none;
    background: #ffffff;
    border: 2px solid #ffc533;
    border-radius: 8px;
	text-indent: -1.5em;
	/*padding-inline-start: 16px;*/
	padding:20px 20px 20px 36px;
}

.is-ha-list-hint li:before{
    font-family: 'icomoon';
    content: "\e905";
    color: #ffc533;
    padding-right: 16px;
    font-weight: bold;
    font-size: 1em;	
}

/*** 注意コンテンツ ***/
/* ボックス */
p.is-ha-para-notice:before {
    font-family: 'icomoon';
    content: "\ea07";
    color: #ffc533;
    padding-right: 16px;
    font-weight: bold;
    font-size: 1.2em;
}

p.is-ha-para-notice {
    background: #fff9e6;
    padding: 16px;
    border: 2px solid #ffc533;
    border-radius: 8px;
}

/* リスト */
.is-ha-list-notice li{
    list-style-type: none;
}

ul.is-ha-list-notice {
    list-style-type: none;
    background: #fff9e6;
    border: 2px solid #ffc533;
    border-radius: 8px;
	text-indent: -1.5em;
	/*padding-inline-start: 16px;*/
	padding:20px 20px 20px 36px;
}

.is-ha-list-notice li:before{
    font-family: 'icomoon';
    content: "\ea07";
    color: #ffc533;
    padding-right: 16px;
    font-weight: bold;
    font-size: 1em;	
}

/* 数字付リスト */
ol.is-ha-list-decimal-yellow {
    counter-reset: number;
    list-style-type: none!important;
    padding: 0.5em;
    border: 2px solid #ffc533;
    border-radius: 8px;
    background: #fff9e6;
}

ol.is-ha-list-decimal-yellow li {
    position: relative;
    padding: 0.4em 0.4em 0.4em 30px;
}

ol.is-ha-list-decimal-yellow li:before {
    position: absolute;
    counter-increment: number;
    content: counter(number);
    display: inline-block;
    background: #ffc533;
	border-radius:8px;
    color: white;
    font-size: 1em;
    left: 0;
    width: 1.4em;
    height: 1.5em;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*** チェックコンテンツ ***/
/* ボックス */
p.is-ha-para-check:before {
    font-family: 'icomoon';
    content: "\ea52";
    color: #67b00b;
    padding-right: 16px;
    font-weight: bold;
    font-size: 1.2em;
}

p.is-ha-para-check {
    background: #f4ffe6;
    padding: 16px;
    border: 2px solid #67b00b;
    border-radius: 8px;
}

/* リスト */
.is-ha-list-check li {
    list-style-type: none;
}

ul.is-ha-list-check {
    list-style-type: none;
    background: #f4ffe6;
    border: 2px solid #67b00b;
    border-radius: 8px;
	text-indent: -1.5em;
	/*padding-inline-start: 16px;*/
	padding:20px 20px 20px 36px;
}

.is-ha-list-check li:before{
    font-family: 'icomoon';
    content: "\ea52";
    color: #67b00b;
    padding-right: 16px;
    font-weight: bold;
    font-size: 1em;	
}

/* 数字付リスト */
ol.is-ha-list-decimal-green {
    counter-reset: number;
    list-style-type: none!important;
    padding: 0.5em;
    border: 2px solid #67b00b;
    border-radius: 8px;
    background: #f4ffe6;
}

ol.is-ha-list-decimal-green li {
    position: relative;
    padding: 0.4em 0.4em 0.4em 30px;
}

ol.is-ha-list-decimal-green li:before {
    position: absolute;
    counter-increment: number;
    content: counter(number);
    display: inline-block;
    background: #67b00b;
	border-radius:8px;
    color: white;
    font-size: 1em;
    left: 0;
    width: 1.4em;
    height: 1.5em;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*** 警告コンテンツ ***/
/* ボックス */
p.is-ha-para-warning:before {
    font-family: 'icomoon';
    content: "\ea08";
    color: #f85c1f;
    padding-right: 16px;
    font-weight: bold;
    font-size: 1.2em;
}

p.is-ha-para-warning {
    background: #ffede6;
    padding: 16px;
    border: 2px solid #f85c1f;
    border-radius: 8px;
}

/* リスト */
.is-ha-list-warning li {
    list-style-type: none;
}

ul.is-ha-list-warning{
    list-style-type: none;
    background: #ffede6;
    border: 2px solid #f85c1f;
    border-radius: 8px;
	text-indent: -1.5em;
	/*padding-inline-start: 16px;*/
	padding:20px 20px 20px 36px;
}

.is-ha-list-warning li:before{
    font-family: 'icomoon';
    content: "\ea08";
    color: #f85c1f;
    padding-right: 16px;
    font-weight: bold;
    font-size: 1em;	
}

/* 数字付リスト */
ol.is-ha-list-decimal-red {
    counter-reset: number;
    list-style-type: none!important;
    padding: 0.5em;
    border: 2px solid #f85c1f;
    border-radius: 8px;
    background: #ffede6;
}

ol.is-ha-list-decimal-red li {
    position: relative;
    padding: 0.4em 0.4em 0.4em 30px;
}

ol.is-ha-list-decimal-red li:before {
    position: absolute;
    counter-increment: number;
    content: counter(number);
    display: inline-block;
    background: #f85c1f;
	border-radius:8px;
    color: white;
    font-size: 1em;
    left: 0;
    width: 1.4em;
    height: 1.5em;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

アイコンフォントを追加

前述した通り、上記のCSSではアイコンフォントにIcoMoonを使っていますので、サイトへ導入します。

IcoMoonはFontAwesomeのように外部からフォントを読み込んだり、必要のないアイコンフォントをサイト内へ保存する必要がなく、必要なアイコンフォントだけをサイトへ入れるので、外部接続したり、たくさんのフォントの中から探して表示しない分表示するのに負担がかかりません。

ここでIcoMoonの使い方を紹介するのは大変なので割愛して、このサイトで使っているSNSのシェアボタンや矢印マークなどを含めたファイルを以下から入手いただけるようにしておきます。

＞＞　アイコンフォントのダウンロード　＜＜

サーバー負荷軽減、他サイトからの直リンクを防止するため、ダウンロードは「Booth」というピクシブ株式会社が運営するサービスから行えるようにしています。「Booth」の登録、アイコンフォントのダウンロードはすべて無料で行えますのでご安心ください。

ダウンロードが終わったら、パソコン上で解凍し、「icomoon」というフォルダを有効化しているテーマフォルダ内へアップロードしてください。

次に、以下のコードを有効化しているテーマのfunctions.phpへ追記してください（親テーマと子テーマとでコードが異なりますのでご注意ください）

親テーマ用コード

function ha_theme_icomoon_enqueue_styles() {
      wp_enqueue_style( 'icomoon-style', get_template_directory_uri() . '/icomoon/style.css' );
}
add_action( 'wp_enqueue_scripts', 'ha_theme_icomoon_enqueue_styles');

子テーマ用コード

function ha_theme_icomoon_enqueue_styles() {
      wp_enqueue_style( 'icomoon-style', get_stylesheet_directory_uri() . '/icomoon/style.css' );
}
add_action( 'wp_enqueue_scripts', 'ha_theme_icomoon_enqueue_styles');

ブロックパターンを作る

基本的には管理画面の「ブロックパターン」メニューから「新規作成」して作っていきます。

枠付きの文章コンテンツの作り方

表示例－このような表示をするコンテンツを作ります

「ブロックパターン」メニューから「新規作成」をクリックして投稿編集画面が開いたら、適当なタイトルを付けます（下図①）

段落ブロックを挿入して、適当に文字を入れます（下図②）

右側サイドバーにある「高度な設定」をクリックします（下図③）

追加CSSクラスの欄に「is-ha-para-notice」という文字を入れます（下図④）

公開します（下図⓹）

ブロックエディタで作成した定型コンテンツを簡単に作成・編集・挿入できる便利機能「ブロックパターン」の使い方|Knowledge Base

これで、注意マーク付きの枠付き文章コンテンツが出来上がりました。

続いてその他のマーク付き枠付き文章コンテンツを作ります。

基本は「ブロックパターン」→「新規作成」です。

先ほどと同じように段落ブロックまで作ったら、追加CSSクラスの欄に、今度は「is-ha-para-check」と入れて公開します。

これでチェックマーク付き枠付き文章コンテンツができます。

この要領で「is-ha-para-warning」「is-ha-para-hint」というのを作れば４つのマーク付き枠付きコンテンツが完成します。

枠付きのリスト

容量は枠付き文章コンテンツと同じですが、段落ブロックではなく、リストブロックを挿入し、追加CSSへ以下を追加したものを作成していきます

  1. 「is-ha-list-notice」・・・黄色背景の注意リスト
  2. 「is-ha-list-warning」・・・赤色背景の警告リスト
  3. 「is-ha-list-check」・・・緑色背景のチェックリスト
  4. 「is-ha-list-hint」・・・黄色枠のヒントリスト

枠付き、自動で数字が付与されるリスト

こちらも容量は同じです。今度はリストブロックを挿入後、数字付のリストを選択して、追加CSSへ以下を追加したものを作成していきます

  1. 「is-ha-list-decimal-yellow」・・・黄色枠の数字付リストコンテンツ
  2. 「is-ha-list-decimal-green」・・・緑色枠の数字付リストコンテンツ
  3. 「is-ha-list-decimal-red」・・・赤色枠の数字付リストコンテンツ

これで枠付きコンテンツの作成例で表示した例がすべて実装できました。実際に投稿を新規作成して、ブロックパターンを呼び出し、コンテンツを追加してみてください。

※テーマによっては、投稿編集画面側でもデザインを適用したものが表示される場合と、プレビュー及び公開した画面上のみでデザインが適用される場合があります。詳しくはテーマのマニュアル等をご確認ください

いかがでしたか？以上がWordPressの標準機能、ブロックパターンについての紹介になります。

後半の装飾付きコンテンツ作成の部分が少し複雑になってしまい、作成例としてどう？というところはありますが、テンプレートとして簡単にコンテンツの作成や挿入ができるブロックパターンをぜひ使ってみてください。

更新日更新内容
2021年 3月16日ブロックエディタで作成した定型コンテンツを簡単に作成・編集・挿入できる便利機能「ブロックパターン」の使い方を公開しました
2021年 4月 5日一部文章の編集、ブロックパターンと再利用ブロックの使い分けについて加筆しました
2022年 8月 9日紹介しているコードに不具合があったため、コードの変更をしました
アバター画像

Knowledge Base管理人

☆WordPressの使い方やテーマカスタマイズなどに役立つ情報、有用なプラグインの紹介などを行っています



Knowledge Base
WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです