워드프레스 구텐베르크(Gutenberg) Editor의 기본 Color 변경하기

qpress 2020년 1월 29일 31

구텐베르크(Gutenberg) 에디터의 블럭 설정에 색상 지정하는 부분이 있다. 워드프레스가 제공하는 기본 색상이 제공되고, 사용자가 Color Platte로 다양한 색상을 선택할 수 있게 되어 있다.

그런데, 사용 중인 테마의 주된 색상이 있을 경우, Page 또는 Post의 Contents에도 이 테마의 주된 색상을 사용하여 일관성을 줄 필요가 있는데, 이 경우 일일이 색상값을 복사해서 붙여 넣기 해야 하는 어려움이 있다.

테마에서 주로 사용하는 색상을 Editor의 기본 색상으로 수정해 주면 이러한 어려움이 해결 될 수 있다.

기본 색상을 변경하기 위해서는 먼저 테마의 functions.php(인클루드 되는 다른 php 파일을 사용해도 됨)에 색상의 이름과 값을 지정해 주고, 그 다음 Front-end에서 불러오는 css 파일(대표적으로 테마의 style.css)에 관련 css 코드를 작성 해야 한다.

Step 1. color 등록

functions.php 파일을 열어서 다음 예제와 같이 색상을 등록한다.

add_theme_support( 'editor-color-palette', array(
	array(
		'name'  => __( 'main', 'qpress' ),
		'slug'  => 'main',
		'color'	=> '#ff9900',
	),
        array(
		'name'  => __( 'sub', 'qpress' ),
		'slug'  => 'sub',
		'color'	=> '#99ff33',
	),
));
변경된 기본 색상

name은 표시되는 이름이며, slug는 css class 정의에서 사용되어지기 때문에 Unique한 이름으로 지정하도록 한다.

Step2. css 파일 작성

Step1에서 등록한 색상이 Editing 화면에서 잘 표시 된다고 해서, 실제 Front-end에도 반영 된는 것은 아니다. Front-end에서 이 설정값을 해석할 수 있도록 css 파일을 작성해야 한다.

테마의 style.css 파일에 다음과 같이 class를 정의 하도록 한다.

.has-main-color {
	color: #ff9900;
}
.has-main-background-color {
	background-color: #ff9900;
}
hr.has-main-color{
       border-color: #ff9900;
}
.has-sub-color {
	color: #99ff33;
}
.has-sub-background-color {
	background-color: #99ff33;
}
hr.has-sub-color{
       border-color: #99ff33;
}

예제를 보면 알겠지만, 에디터에서 색상을 지정하면, 실제 Front-end에서는 has-{slug}-color 와 같이 class가 적용되는 방식으로 작동한다.