ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ブロックバリエーションを使ってグループブロックでタイトル付ボックスを作成する方法

ブロックバリエーションという機能を使って、グループブロックでタイトル付ボックスを作成する方法について紹介します。

ブロックをゼロから自作すると面倒ですが、既存ブロックのバリエーションとしてブロックバリエーションを使えば、意外に簡単にタイトル付ボックスを作成可能です。

本記事ではグループブロックのバリエーションとして、次のような2種類のタイトル付ボックスを作成します。

上部タイトル付ボックス

上部タイトル付ボックス

シンプルタイトル付ボックス

シンプルタイトル付ボックス

ブロックバリエーションとは

既存のブロックのバリエーションとして別のブロックを作成する機能です。

ブロックスタイルの場合(こちらの記事参照)は、同じブロックの中でスタイルを複数登録して切り替えることができますが、複数の既存ブロックを組み合わせて別のブロックを作り出すことはできません。

しかし、ブロックバリエーションを使えば、インナーブロックという機能を使って、既存ブロックの中に別の既存ブロックをあらかじめ配置することができるのです。

本記事ではグループブロックにバリエーションを作成します。内部に段落ブロックとグループブロックを配置して、段落ブロックをタイトル部、内部のグループブロックを本文入力欄をして使えるようにスタイルを整えていきます。

作成するブロックバリエーションの構成イメージ

作成の概要手順

  1. 子テーマのフォルダー内にblock-script.jsを作成
    (block-script.js内でブロックバリエーションを記述する)
  2. 子テーマのフォルダー内にblock-style.cssを作成
    (block-script.jsで記述したブロックバリエーションのクラス名に対してスタイルを記述する)
  3. 子テーマのfunctions.phpでblock-script.jsとblock-style.cssを読み込む

詳細手順

①子テーマにblock-script.jsを作成

block-script.jsには次の記述をします。

// グループブロックのブロックバリエーションとしてタイトル付ボックスを作成する
wp.blocks.registerBlockVariation('core/group', [
    {
        name: 'uppertitle-box',
        title: '上部タイトル付きボックス',
        description: '上部タイトル付きのボックス(Groupのバリエーション)',
        icon: 'edit-page',
        attributes: {
            className: 'uppertitle-box',
        },
        innerBlocks: [
            [ 'core/paragraph',
                {
                    className: 'uppertitle-box__title',
                    placeholder: 'タイトルをここに入力...',
                }
            ],
            [ 'core/group',
                {
                    className: 'uppertitle-box__body',
                },
                [
                    [ 'core/paragraph', { placeholder: 'コンテンツをここに入力...' } ]
                ],
            ],
        ],
        scope: ['inserter'],
        keywords: ['uppertitle-box'],
    },
    {
        name: 's-title-box',
        title: 'シンプルなタイトル付きボックス',
        description: 'コアブロックで構成されるタイトル付きのボックスコンテンツ',
        icon: 'edit-page',
        attributes: {
            className: 's-title-box',
        },
        innerBlocks: [
            [ 'core/paragraph',
                {
                    className: 's-title-box__title',
                    placeholder: 'タイトルをここに入力...',
                }
            ],
            [ 'core/group',
                {
                    className: 's-title-box__body',
                },
                [
                    [ 'core/paragraph', { placeholder: 'コンテンツをここに入力...' } ]
                ],
            ],
        ],
        scope: ['inserter'],
        keywords: ['s-title-box'],
    },
]);

ブロックにバリエーションを追加するには、wp.blocks.registerBlockVariation( )を使います。

書式は次の通りです。

wp.blocks.registerBlockVariation( 'ブロックのスラッグ’ , [ (登録するバリエーションの記述) ])

今回はグループブロックのバリエーションなので、第1引数は 'core/group’ となります。

作成するボックスが2種類なので、第2引数の[ ]内にも2種類の{ }を記述しています。

1つ目のバリエーション’uppertitle-box’

{
    name: 'uppertitle-box',
    title: '上部タイトル付きボックス',
    description: '上部タイトル付きのボックス(Groupのバリエーション)',
    icon: 'edit-page',
    attributes: {
        className: 'uppertitle-box',
    },
    innerBlocks: [
        [ 'core/paragraph',
            {
                className: 'uppertitle-box__title',
                placeholder: 'タイトルをここに入力...',
            }
        ],
        [ 'core/group',
            {
                className: 'uppertitle-box__body',
            },
            [
                [ 'core/paragraph', { placeholder: 'コンテンツをここに入力...' } ]
            ],
        ],
    ],
    scope: ['inserter'],
    keywords: ['uppertitle-box'],
}
keyvalue
nameバリエーションのスラッグ名
titleエディター内で表示されるブロック名
descriptionバリエーションの説明文
iconエディター内で表示されるブロックのアイコン
attributes属性(今回はクラス名を指定)
innerBlocksブロック内に配置する既存ブロックを指定
scopeバリエーションの挿入方法(今回はinseterを指定したのでブロック一覧表に表示)
keywordsブロックの検索に使う

この中で、ブロックの構成のキーとなるのがattributesで記述したクラス名と、innerBlocksで記述した各既存ブロックとそのクラス名です。

バリエーション’uppertitle-box’の場合は次の構成となっています。

作成するブロックバリエーションの構成とクラス名

同様に2つ目のバリエーションである’s-title-box’の場合は次の構成となっています。

作成するシンプルタイトル付きボックスの構成とクラス名

これらのクラス名をセレクターとして、次のblock-style.cssにスタイルを記述していきます。

②子テーマにblock-style.cssを作成

block-style.cssには次の記述をします。

/* 上部タイトル付 */
.uppertitle-box {
    border: solid 1px #72bac1;
    padding: 0 !important;
}
.uppertitle-box .uppertitle-box__title {
    padding: .5em 1em !important;
    color: #fff;
    line-height: 1.5;
    text-align: center;
    background-color: #72bac1;
}
.uppertitle-box .uppertitle-box__body {
    margin: 0 !important;
    padding: 1.5em 1em !important;
}
/* シンプルタイトル付 */
.s-title-box {
    border: solid 3px #72bac1;
    position: relative;
    padding: 0 !important;
    border-radius: 10px;;
}
.s-title-box .s-title-box__title {
    display: inline-block;
    position: absolute;
    background: #fff;
    line-height: 1 !important;
    color: #72bac1;
    top: -0.5em;
    left: 1.5em;
    padding: 0 1em !important;
}
.s-title-box .s-title-box__body {
    margin: 0 !important;
    padding: 1.5em 1em !important;
}

わざと詳細度を上げる形でセレクターを記述していますが、block-script.jsに記述した各ブロックの構成に合わせてクラス名を使っています。

③functions.phpでblock-script.jsとblock-style.cssを読み込む

子テーマのfunctions.phpに次を追記します。

//blockスタイルの読み込み
add_action( 'enqueue_block_editor_assets', function() {
    // CSSの読み込み
    $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/block-style.css' ) );
    wp_enqueue_style( 'my-block-style', get_stylesheet_directory_uri() . '/block-style.css', [], $timestamp );

    // JSの読み込み
    $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/block-script.js' ) );
    wp_enqueue_script( 'my-block-script', get_stylesheet_directory_uri() . '/block-script.js', [], $timestamp, true );
} );
//web表示側でもblock-style.cssを読み込む
add_action( 'wp_enqueue_scripts', function() {
    $timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/block-style.css' ) );
    wp_enqueue_style( 'my-block-style', get_stylesheet_directory_uri() . '/block-style.css', [], $timestamp );
} );

JSファイルとCSSファイルの読み込み方法は、ブロックスタイル紹介の記事と同じなので解説は割愛します。

ブロックバリエーションを使ってみる

以上でブロックバリエーションが無事登録できたら、ブロックエディターを開けてブロック一覧表を確認すると、登録したバリエーションが表示されます。

ブロック一覧表の表示されたブロックバリエーション

それぞれ記事内に挿入してみると以下の通りです。

上部タイトル付ボックス

上部タイトル付ボックスを挿入

実際に文字や画像を入力してweb表示するとこんな感じです。

上部タイトル付ボックスにコンテンツ挿入

タイトル部を太字化&フォント拡大。本文入力部の背景色も変更。

背景などを変更後

シンプルタイトル付ボックス

エディター内で挿入直後。

シンプルタイトル付ボックスの挿入

コンテンツを入力してweb表示。

シンプルタイトル付ボックスのweb表示

こちらもタイトル部の文字拡大や背景色変更も可能です。

まとめ

ブロックバリエーションを使ってタイトル付ボックスを作成してみました。

カスタムCSSを使った場合はタイトル部の文字をCSSであらかじめ決まってしまいますが、ブロックバリエーションの場合は既存ブロックの組み合わせなので、エディター内でタイトル文字を自由に変更できるのがいいですね。

次のようにシンプルなステップで作成可能なので、ちょっとしたブロックの自作にはおすすめです。

  1. 子テーマのフォルダー内にblock-script.jsを作成
    (block-script.js内でブロックバリエーションを記述する)
  2. 子テーマのフォルダー内にblock-style.cssを作成
    (block-script.jsで記述したブロックバリエーションのクラス名に対してスタイルを記述する)
  3. 子テーマのfunctions.phpでblock-script.jsとblock-style.cssを読み込む

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる