【WordPress】自分でブロックスタイルを追加する方法【角つきラベル】

2020年10月21日2023年9月4日

WordPress のブロックエディタではテーマで用意されたブロックのスタイルを適用できるので便利です。

自分で作ったブロックスタイルをワンボタンで使用できたら便利ですよね。ブロックスタイルを追加するのが意外と簡単だったのでやってみました。

ちょっとした見出しとして、マイクロコピーなどに使えそうなラベル(段落ブロック)のスタイルです。

実際のラベル

文字色とボーダーの色はブロックエディタから変更可能です。

通常のブロックと同じ用に段落ブロックを追加して、サイドバーからスタイルを適用できます。

「高度な設定」から追加CSSを手動で記述する必要がなくなるので、よく使うクラスなどをブロックスタイル化しておくと時短になるかもしれませんね。

検証したテーマ

THE SONIC

他テーマでも利用できますがズレたりするので修正が必要です。

新たにブログを始める・新しい移転先は ConoHa WINGがおすすめです。長期契約(12ヶ月〜36ヶ月)のWINGパックならTHE SONICを割引料金で使えますよ。

編集するファイル

FTPソフトなどを使って子テーマ内のファイルを編集します。

3つのファイルを編集

functions.php
style.css
editor-style.css

functions.php

functions.php ファイルにエラーがあるとWordPressの表示ができなくなりますので必ずバックアップを取って編集しましょう。

/**
 * ブロックスタイル 見出し
 */
add_action( 'init', function() {
	register_block_style(
		'core/paragraph',
		[
			'name' => 'under-angle',
            'label' => '下部角ラベル'
		]
	);
    register_block_style(
		'core/paragraph',
		[
			'name' => 'top-angle',
            'label' => '上部角ラベル'
		]
    );
});

エディタ用のスタイルシート(editor-style.css)を読み込んでいない場合は以下も追加してください。

/*
 * エディター用スタイルシート
 */
add_action( 'enqueue_block_editor_assets', function() {
    // ブラウザキャッシュを防ぐためのタイムスタンプ
    $time_stamp = date('mdgis');
    // エディター用のスタイル
    wp_enqueue_style( 'editor-style', get_stylesheet_directory_uri() . '/editor-style.css', [], $time_stamp );
}, 20 );

style.css

/*--------------------------------------
下線角ラベル
--------------------------------------*/
.is-style-under-angle {
    position: relative;
    border-radius: 0 0 32px 32px;
    border: 3px solid currentColor;
    border-top: transparent;
    min-width: fit-content;
    width: 25%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px 4px;
    font-weight: 900;
}
.is-style-under-angle::before {
    position: absolute;
    bottom: -16px;
    left: 50%;
    border: 3px solid currentColor;
    border-top: transparent;
    border-left: transparent;
    background: linear-gradient(-45deg, currentColor 50%,  transparent 50%, transparent );
    transform: rotate(45deg) translateX(-50%);
    width: 12px;
    height: 12px;
    content: "";
}
.is-style-under-angle.has-background {
    padding: 4px 16px;
    border-radius: 0 0 32px 32px;
}
/*上向き角ラベル*/
.is-style-top-angle {
    position: relative;
    border-radius: 32px 32px 0 0;
    border: 3px solid currentColor;
    border-bottom: transparent;
    min-width: fit-content;
    width: 25%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 16px 0;
    font-weight: 900;
}
.is-style-top-angle::before {
    position: absolute;
    top: -5px;
    left: 50%;
    border: 3px solid currentColor;
    border-bottom: transparent;
    border-right: transparent;
    background: linear-gradient(135deg, currentColor 50%,  transparent 50%, transparent );
    transform: rotate(45deg) translateX(-50%);
    width: 12px;
    height: 12px;
    content: "";
}
.is-style-top-angle.has-background {
    padding: 4px 16px;
    border-radius: 32px 32px 0 0;
}

下向きだけの場合は /*上向き角ラベル*/ の前までコピーしてください

editor-style.css

WordPressの投稿画面(ブロックエディタ)用のスタイルシートです。ファイルが存在しない場合は、子テーマ内に新しく editor-style.css を追加しましょう。(ファイル名はfunctions.phpで設定したものになります)

/*--------------------------------------
下線角ラベル エディタ
--------------------------------------*/
.is-style-under-angle {
    position: relative;
    border: 3px solid currentColor;
    border-top: transparent;
    border-radius: 0 0 32px 32px;
    min-width: fit-content;
    width: 30%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}
.is-style-under-angle::before {
    position: absolute;
    bottom: -13px;
    left: 50%;
    border: 3px solid currentColor;
    border-top: transparent;
    border-left: transparent;
    background: linear-gradient(-45deg, currentColor 50%,  transparent 50%, transparent );
    transform: rotate(45deg) translateX(-50%);
    width: 12px;
    height: 12px;
    content: "";
}
.is-style-under-angle.has-background {
    padding: 0 16px;
}
/*上向き角ラベル*/
.is-style-top-angle {
    position: relative;
    border-radius: 32px 32px 0 0;
    border: 3px solid currentColor;
    border-bottom: transparent;
    min-width: fit-content;
    width: 25%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
}
.is-style-top-angle::before {
    position: absolute;
    top: -5px;
    left: 50%;
    border: 3px solid currentColor;
    border-bottom: transparent;
    border-right: transparent;
    background: linear-gradient(135deg, currentColor 50%, transparent 50%, transparent );
    transform: rotate(45deg) translateX(-50%);
    width: 12px;
    height: 12px;
    content: "";
}
.is-style-top-angle.has-background {
    padding: 4px 16px;
    border-radius: 40px 40px 0 0;
}

下向きだけの場合は /*上向き角ラベル*/ の前までコピーしてください