検索キーワードを入力
カテゴリーを選択

初心者必見!WordPressでブロックスタイルを実装する方法を徹底解説(サンプルコード付き)

投稿日:2025年02月04日(火)
初心者必見!WordPressでブロックスタイルを実装する方法を徹底解説(サンプルコード付き)|UMENOKI|すぐに仕事で使えるIT技術情報メディア

みなさんこんにちは!エンジニアの高澤です!

今回はWordPressでブロックスタイルを実装する方法を徹底解説していきたいと思います。

ブロックスタイルとは、ブロックエディタで設定できるブロックに対して、独自のCSSスタイル機能を追加することができるWordPressの仕組みにことを言います。

難しそうに聞こえるかもしれませんが実装自体はシンプルで難しくなく、簡単に様々なスタイルを実装することができるので、そう言う意味では可能性を秘めている仕組みとも言えます。

ブロックスタイルによって、サイト運営者にとってより便利で快適なブロックエディタ環境を実現することができる一つのツールと言っても過言ではないので、よろしければぜひ当記事をお仕事などでご活用いただけましたら幸いです。

ブロックスタイルとは

ブロックスタイルとは、ブロックエディタにある各ブロックに独自のスタイル機能を追加することができる仕組みのことを言います。

例えば、段落ブロックやボタンブロック、見出しブロックなどに対して、それぞれブロックエディタ右側にある設定パネルに「スタイル」として、複数パターンの任意のCSSのデザインを反映できるボタンを設置することができます。

この設置するボタンをクリックして切り替えるだけで、対象のブロックの見た目を切り替えることが可能なので、大変便利な機能と言えます。

下図の部分が、ブロックスタイルになります。

上図の場合は、段落ブロックに対してブロックスタイルを追加しています。

追加した内容としては「ピンク」と「ブルー」のボタンを追加し、クリックしたらそれぞれの色の背景色が反映されるというブロックスタイルとなっております。

このように、WordPress標準で提供されているブロックやご自身で自作されたブロックなどに対して自由にブロックスタイルを実装することができるので、記事を執筆する中で「このブロックの、こんな見た目のものが欲しい!」などといった場面で大活躍してくれます。

以下のWordPress公式ドキュメントページでもこのブロックスタイルの実装方法について解説しておりますので、よろしければご活用ください。

ブロックスタイルを実装するメリット

ブロックスタイルを実装するメリットはいろいろありますが、筆者が考えるメリットは以下になります。

  • ブロックにスタイルのアレンジを加えられる
  • 実装がシンプルで簡単

まず、ブロックスタイルはWordPress標準で提供されているブロックに対してはもちろん、ご自身で作成したブロックに対してもスタイルをアレンジする機能をブロックスタイルとして追加することができます。

そのため、例えばクライアントなどから「ブロックにこんな見た目や機能を実装できないか?」と要望があったり、ブロックをよりご自身のWebサイトのデザインやテイストに近づけたい、馴染ませたいなどのケースがあった場合に対応することが可能です。

また、何よりブロックスタイルは実装が簡単で手軽です。そのため、サクッとブロックのスタイルのバリエーションを増やしたい、カスタマイズしたい時にとても便利な仕組みと言えます。

ブロックスタイルを実装する方法(PHPのみ)

それではブロックスタイルを実装する方法について解説いたします。

まず具体的な解説に入る前に事前にブロックスタイルを実装する方法の種類について触れておきたいと思います。

実はブロックスタイルを実装する方法は3つありまして、内容としては以下になります。

  • PHPのみで実装
  • PHP+CSSで実装
  • PHP+CSS+JavaScriptで実装

それぞれ作り方を覚えておくと便利なので、当記事では上から順番に解説していきたいと思います。

まずは「PHPのみで実装」する方法について解説いたします。おそらくこの実装方法が一番簡単で理解しやすいかと思いますので、こちらの方法から実装の感触を掴んでいただければと思います。

ここで実装するブロックスタイルは、段落ブロックに対して下図のように「ピンク」「ブルー」というボタンを追加する実装をしたいと思います。

以下のPHPコードをfunctions.phpにコピー&ペーストしてください。

<?php
function my_register_multiple_block_styles() {
    // ピンクのボックススタイル
    register_block_style(
        'core/paragraph',
        array(
            'name'  => 'box-pink',
            'label' => 'ピンク',
            'inline_style' => '.is-style-box-pink {
                background: #ffc0cb;
                border: 1px solid #ff00ff;
                padding: 1em;
            }',
        )
    );

    // ブルーのボックススタイル
    register_block_style(
        'core/paragraph',
        array(
            'name'  => 'box-blue',
            'label' => 'ブルー',
            'inline_style' => '.is-style-box-blue {
                background: #add8e6;
                border: 1px solid #0000ff;
                padding: 1em;
            }',
        )
    );
}
add_action('init', 'my_register_multiple_block_styles');

ペーストできたら、WordPress管理画面左メニュー「投稿」から適当にブロックエディタを開いてブラウザを更新してください。

更新したら、エディタ上に段落ブロックを追加していただき、画面右にある設定パネルからスタイルをご確認ください。(この時必ず画像ブロックは選択しておいてください)

すると下図のように、「ピンク」と「ブルー」のボタンが追加されており、それぞれクリックしていただくと段落ブロックに背景色がついて、少し余白が全体的に反映された見た目にスタイリングすることができるのが確認できたかと思います。

これでブロックスタイルの実装は完了です。お疲れ様でした!

作ってみていかがだったでしょうか?そんなに難しくなかったかと思います。

register_block_style()関数とは

register_block_style()関数とは、ブロックエディタに特定の任意のブロックに独自のCSSスタイルを複数パターンで反映できるボタンを追加できるPHPの関数です。

ブロックスタイルを実装するにはこのregister_block_style()関数が必要になります。

register_block_style()関数には2つの引数が設定できますので、この2つの引数について解説いたします。まず第1引数の内容は以下になります。

第1引数
string|string[] $block_name
対象となるブロック名を指定します。

今回の例では、段落ブロック(core/paragraph)が対象です。他にもボタン(core/button)や見出し(core/heading)など、さまざまなブロックを指定できます。

そして、第2引数の内容は以下になります。

第2引数
array $style_properties
追加するスタイルの詳細を配列として指定します。主なキーは以下の通りです。

◾️name
スタイルの内部名です。
コード内で使われる一意の識別子なので、重複しない名前を付ける必要があります。この例では「box-blue」や「box-pink」と名付けています。

◾️label
管理画面で表示される名前です。
今回の例では「ブルー」や「ピンク」と設定しています。これにより、ユーザーがスタイルを選びやすくなります。

◾️is_default
複数スタイルの中で「初期設定として自動適用されるスタイル」を指定するオプションです。
「true」を設定することで、そのスタイルをデフォルトとして設定できます。

◾️inline_style
CSSコードを直接記述します。
今回の例では、青い背景と青い枠線、適度な余白を持つスタイルが設定されています。このスタイルは、「.is-style-box-blue」や「.is-style-box-pink」というクラス名が自動的にブロックに適用されます。

念の為WordPress公式ドキュメントの情報を載せておきますので、よろしければご確認ください。

自動生成されるHTMLクラス名について

WordPressでregister_block_style()関数を利用すると、第2引数の「name」で指定したスタイル名に基づいて自動的にHTMLにクラス名が生成され、ブロックに適用されます。

ブロックエディタで確認していただくと、下図のように自動生成されたクラス名を確認することができます。

このクラス名は、「.is-style-スタイル名」という形式で作られます。

例えば、register_block_style()関数の第2引数の「name」を「box-blue」とすると、「.is-style-box-blue」というクラス名が生成され、選択したブロックに自動的に追加されます。

エディターでこのスタイルを適用すると、該当ブロックのHTMLには「is-style-box-blue」がクラスとして追加されます。このクラスをターゲットにしてCSSを記述することで、スタイルを反映させることができます。

ブロックスタイルを実装する方法(PHP+CSS)

次は、PHPとCSSの2つのコードでブロックスタイルを実装する方法について解説いたします。

このセクションでは下図のようにボタンブロックに対して「角丸ボタン」としてスタイルを追加実装してみたいと思います。

以下のPHPコードをfunctions.phpにコピー&ペーストしてください。

<?php
function mytheme_enqueue_styles() {
    wp_enqueue_style(
        'mytheme-block-style-styles', // ハンドル名
        get_template_directory_uri() . '/css/block-style.css', // ファイルのパス
        array(), // 依存関係(必要に応じて記入)
        filemtime(get_template_directory() . '/css/block-style.css') // キャッシュ防止のためのバージョン指定
    );
}
add_action('admin_enqueue_scripts', 'mytheme_enqueue_styles');
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');

function mytheme_register_block_styles() {
    // ボタンブロックのカスタムスタイル
    register_block_style(
        'core/button', // 対象ブロック
        array(
            'name'  => 'fancy-button', // スタイル名
            'label' => __( '角丸ボタン', 'mytheme' ), // 表示名
        )
    );
}
add_action( 'init', 'mytheme_register_block_styles' );

上記コードは、admin_enqueue_scriptsフックでブロックエディタの管理画面側でblock-style.cssを読み込み、wp_enqueue_scriptsフックでフロント側でblock-style.cssを読み込む処理を行っています。

また、initフックでregister_block_style()関数を実行しており、ボタンブロック(core/button)に対してブロックスタイルを追加実装しております。

読み込み処理の記述をしましたが、この時点ではまだblock-style.cssは作成していないので、これから作成します。

ペーストが完了したら、次はテーマファイルのトップ階層に「css」というフォルダ名でフォルダを作成し、その中に「block-style.css」というファイル名でCSSファイルを作成してください。

block-style.cssが作成できたらこのCSSファイル内にブロックスタイル用のCSSコードを追加します。

以下のCSSコードをblock-style.cssにコピー&ペーストしてください。

.is-style-fancy-button .wp-block-button__link {
    border-radius: 10px;
}

ペーストできたら、WordPress管理画面左メニュー「投稿」から適当にブロックエディタを開いてブラウザを更新してください。

更新したら、エディタ上にボタンブロックを追加していただき、画面右にある設定パネルからスタイルをご確認ください。(この時必ず画像ブロックは選択しておいてください)

すると下図のように、「角丸ボタン」のボタンが追加されており、クリックしていただくとボタンブロックの角に少し丸みが反映された見た目にスタイリングすることができるのが確認できたかと思います。

これでPHP+CSSでのブロックスタイルの実装は完了です。お疲れ様でした!

ブロックスタイルを実装する方法(PHP+CSS+JS)

次は、PHPとCSSとJavaScriptの3つのコードでブロックスタイルを実装する方法について解説いたします。

このセクションでは下図のように画像ブロックに対して「ボーダー」としてスタイルを追加実装してみたいと思います。

以下のPHPコードをfunctions.phpにコピー&ペーストしてください。

<?php
function mytheme_enqueue_styles() {
    wp_enqueue_style(
        'mytheme-block-style-styles', // ハンドル名
        get_template_directory_uri() . '/css/block-style.css', // ファイルのパス
        array(), // 依存関係(必要に応じて記入)
        filemtime(get_template_directory() . '/css/block-style.css') // キャッシュ防止のためのバージョン指定
    );
}
add_action('admin_enqueue_scripts', 'mytheme_enqueue_styles');
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');

function myguten_enqueue() {
    wp_enqueue_script(
        'block-style-script', // ハンドル名
        get_theme_file_uri( '/js/block-style.js' ), // スクリプトのパス
        array(), // 依存関係(必要に応じて設定可能)
        wp_get_theme()->get( 'Version' ), // テーマのバージョンを取得
        array( 'strategy' => 'defer' ) // 読み込み方法の指定(defer)
    );
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );

上記コードは、admin_enqueue_scriptsフックでブロックエディタの管理画面側でblock-style.cssを読み込み、wp_enqueue_scriptsフックでフロント側でblock-style.cssを読み込む処理を行っています。

また、enqueue_block_editor_assetsフックでblock-style.jsを読み込んでおり、wp.blocks.registerBlockStyle関数を実行して画像ブロック(core/image)に対してブロックスタイルを追加実装しております。

読み込み処理の記述をしましたが、この時点ではまだblock-style.cssとblock-style.jsは作成していないので、これから作成します。

ペーストが完了したら、次はテーマファイルのトップ階層に「css」というフォルダ名でフォルダを作成し、その中に「block-style.css」というファイル名でCSSファイルを作成してください。

また、合わせて「js」というフォルダ名でフォルダを作成し、その中に「block-style.js」というファイル名でCSSファイルを作成してください。

block-style.cssとblock-style.jsが作成できたら、それぞれのファイルにブロックスタイル用のCSSコードとJavaScriptコードを追加します。

まずは以下のJavaScriptコードをblock-style.jsにコピー&ペーストしてください。

wp.blocks.registerBlockStyle('core/image', {
    name: 'img-border',
    label: 'ボーダー',
});

次に以下のCSSコードをblock-style.cssにコピー&ペーストしてください。

.wp-block-image.is-style-img-border img {
    border: 10px solid orange;
}

ペーストできたら、WordPress管理画面左メニュー「投稿」から適当にブロックエディタを開いてブラウザを更新してください。

更新したら、エディタ上に画像ブロックを追加していただき、画面右にある設定パネルからスタイルをご確認ください。(この時必ず画像ブロックは選択しておいてください)

すると下図のように、「ボーダー」のボタンが追加されており、クリックしていただくと画像ブロックの角にオレンジ色の枠線が反映された見た目にスタイリングすることができるのが確認できたかと思います。

これでPHP+CSS+JSでのブロックスタイルの実装は完了です。お疲れ様でした!

wp.blocks.registerBlockStyle関数とは

wp.blocks.registerBlockStyle関数は、WordPressのブロックエディター(Gutenberg)でブロックのブロックスタイルを追加するためのJavaScript関数です。

この関数を使うことで、特定のブロックに新しいスタイル(デザインの変更)を提供することができます。(役割としてはPHPのregister_block_style()関数とほぼ同じです)

例えば以下のコードをご覧ください。

wp.blocks.registerBlockStyle('core/paragraph', {
    name: 'highlighted',
    label: '強調表示',
});

このコードでは、ブロック名が「core/paragraph」の段落ブロックに「highlighted」というカスタムスタイルを追加し、そのラベルとして「強調表示」を設定しています。

このスタイルを選択すると、段落に特定のスタイル(例えば、背景色が変わる)を適用することができます。
ただし、これまで解説したPHPでの実装と同様に、以下のように「is-style-highlighted」をセレクタとしたCSSコードが必ず必要になるのでご注意ください。

.is-style-highlighted {
    background-color: yellow;
}

wp.blocks.registerBlockStyle関数の引数について以下のように表にまとめましたので、ご確認ください。

第1引数対象となるブロック名を指定します。

今回の例では、段落ブロック(core/paragraph)が対象です。
第2引数◾️name
スタイルの内部名です。
後でスタイルを参照する際に使われます。

◾️label
管理画面で表示される名前です。

この関数を使用することで、WordPressのブロックエディターでより柔軟で多様なデザインの選択肢を提供することができます。

まとめ

今回の記事では、WordPressでブロックスタイルを実装する方法について詳しく解説しました。

ブロックスタイルは、ブロックエディタに独自のCSSスタイルを追加できるWordPressの仕組みであり、難しそうに感じるかもしれませんが、実際には非常にシンプルで、簡単に多様なスタイルを実装できます。

この仕組みを使うことで、サイト運営者はより便利で快適なブロックエディタ環境を整えることができ、作業効率が大幅に向上します。

デザインの自由度も高まり、サイト管理がよりスムーズになるため、ぜひお仕事やサイト運営で当記事の内容を活用していただければと思います。

執筆者

UMENOKI編集部 高澤 翔汰

歴5年目(2024年8月以降から5年目です)のエンジニアです!
CMSでのサイト構築とWebデザイン制作を兼任して5年目になります。
自作のiOSアプリ(iPhoneアプリ)やWordPressプラグインを開発することもあり、まだまだ現在進行形で勉強中です!

お気軽に皆さんのご要望をお聞かせください!

どんなに些細なことでも構いません!よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに!」といったようなご要望等をお気軽にお聞かせください!今後のサービス改善にお役立てさせていただきます!

例1)Reactの技術記事を書いてほしい!
例2)WordPressの使い方とかを初心者向けに解説してほしい!...など

送信と同時にプライバシーポリシーに同意したものとします。