워드프레스 구텐베르크 색상 팔레트 사용자 지정하기

워드프레스의 메인 에디터인 구텐베르크는 블럭 단위로 편집을 하며 텍스트 색상이나 블럭 배경색, 버튼색을 지정할 수 있습니다.

구텐베르크 에디터를 살펴보면 블럭을 선택했을 때 오른쪽의 ‘블럭’ 항목에서 Color setting 옵션을 사용할 수 있는데요.

텍스트 색상과 배경 색상 옵션으로 구분되어 있으며 블랙, 청록색, 분홍색, 주황색등 12가지의 색상을 기본 팔레트로 제공하며 사용자가 원하는 색상을 선택하려면 Custom color를 클릭해 hex 색상값이나 RGB 색상값를 입력해 변경할 수 있습니다.

하지만 매번 특정 색상을 사용하는 경우 블럭마다 일일히 색상값을 수동으로 입력해야 하는데 자주 사용하는 색을 Color settings의 팔레트에 등록해 사용하면 효율적인 글쓰기를 할 수 있습니다.

구텐베르크 컬러 팔레트 사용자 지정하기

현재 사용하고 있는 워드프레스 테마의 function.php 파일을 에디터로 연 다음 가장 하단에 아래의 코드를 추가합니다.

참고로 워드프레스 관리자 페이지에서 테마 편집기를 통해 아래 함수를 입력할 경우 ‘치명적인 오류를 확인하기 위한 사이트와 통신이 불가능하여…’ 메시지가 뜨며 적용이 안될 수 있습니다.

서버에 접속해 vi 에디터로 추가하거나 function.php 파일을 다운로드 받은 다음 편집 후 다시 업로드 하는 것으로 적용할 수 있습니다.

function mytheme_setup_theme_supported_features() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => ( 'strong magenta', 'CheerUp' ), 
'slug' => 'strong-magenta',
'color' => '#a156b4',),
array( 'name' => ( 'light grayish magenta', 'CheerUp' ),
'slug' => 'light-grayish-magenta',
'color' => '#d0a5db',),
array(
'name' => ( 'very light gray', 'CheerUp' ),
'slug' => 'very-light-gray',
'color' => '#eee',),
array( 'name' => ( 'very dark gray', 'CheerUp' ),
'slug' => 'very-dark-gray',
'color' => '#444',),
) );
}
add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

코드를 살펴보면 색상 팔레트에 표시되는 이름(ex. Light gray)과 사용하는 테마 이름(CheerUp), 색상 Hex 코드(#f5f5f5)를 사용자가 직접 변경해 설정할 수 있습니다.

테마 색상 팔레트를 적용한 다음 구텐베르크 에디터의 색상 설정 항목을 보면 위 코드에서 지정한 대로 색상 팔레트가 변경된 것을 확인할 수 있습니다.