functions.php 파일에 PHP 코드를 추가해야 합니다. 반드시 자식 테마를 사용하세요. 부모 테마를 수정하면 테마 업데이트 시 설정이 초기화되기 때문입니다. 아래는 커스텀 색상 팔레트를 등록하는 예제 코드입니다:
function custom_gutenberg_color_palette() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => '브랜드 블루',
'slug' => 'brand-blue',
'color' => '#2A5C8D',
),
array(
'name' => '메인 그린',
'slug' => 'main-green',
'color' => '#4CAF50',
),
array(
'name' => '어시스턴트 레드',
'slug' => 'assist-red',
'color' => '#F44336',
),
array(
'name' => '라이트 그레이',
'slug' => 'light-gray',
'color' => '#F5F5F5',
),
) );
}
add_action( 'after_setup_theme', 'custom_gutenberg_color_palette' );
functions.php에 삽입하면, 블록 에디터 내 색상 선택 패널에 '브랜드 블루', '메인 그린' 등의 이름으로 새로운 색상이 나타납니다. 각 색상은 name(표시 이름), slug(CSS 클래스 이름), color(HEX 코드)로 구성됩니다.style.css 또는 관리자 화면용 CSS를 별도로 로드하여 색상 값을 명시적으로 재정의할 수 있습니다. 다음은 예시입니다:
.has-brand-blue-background-color {
background-color: #2A5C8D !important;
}
.has-main-green-color {
color: #4CAF50 !important;
}
!important는 과도하게 사용하지 말고, 필요할 때만 적용하는 것이 좋습니다.Designed by sketchbooks.co.kr / sketchbook5 board skin
Sketchbook5, 스케치북5
Sketchbook5, 스케치북5
Sketchbook5, 스케치북5
Sketchbook5, 스케치북5