【WordPress】 커스텀 스타일 추가 방법

WordPress의 구텐베르그에서 디자인 차이의 파트를 만들고 싶은 경우에는 커스텀 스타일을 추가하는 방법으로 간단하게 작성할 수 있습니다.

functions.php

functions.php에 register_block_style（）를 추가합니다.

functions.php

// カスタムスタイル追加
register_block_style(
    'core/paragraph', // ブロック名
    [
        'name'         => 'attention', // スタイルで付けるクラスに使う名前
        'label'        => '注意文',
    ]
);

register_block_style() 을 기술하는 것으로 관리 화면의 투고 화면에서 「주의문」의 스타일을 선택할 수 있게 됩니다.


label의 값이 화면에 표시됩니다. 주의문의 스타일을 선택하는 것으로 is-style-attention의 클래스가 HTML에 부여되므로, CSS를 조정하는 것으로 디자인 차이의 파트를 작성할 수 있습니다.
클래스명은 is-style-hoge이므로 hoge의 개소를 name로 지정합시다.
블록 이름을 지정하여 기본적으로 제공되는 블록을 지정할 수 있습니다.

사용자 정의 블록을 신규로 작성하는 것보다 커스텀 스타일은 번거롭게 추가할 수 있으므로
이 방법으로 대응할 수 있는 경우는 커스텀 스타일을 사용합시다.