목차
지금까지 팔레트 플러그인을 사용하여 워드프레스 메뉴 색상 변경해서 사용했었다. 플러그인이 몇 년째 업데이트도 없고 관리도 안 되는 것 같아 플러그인을 삭제하고, 그동안 적용했던 색상 코드는 DB에 접속해서 모두 일괄 삭제했다. 플러그인 없이 functions.php 파일을 이용해서 기본 색상에 몇 가지 색상을 추가해서 사용하기로 했다.
01
of 07
워드프레스 메뉴 색상 변경 추가
아래 이미지처럼 워드프레스 메뉴 색상을 변경 추가하려고 한다. 기본색상 12개와 개인적으로 자주 사용하는 추가 색상 12개 (주로 페르시안 컬러)로 코드를 작성했다.

02
of 07
워드프레스 메뉴 색상 적용 예시
워드프레스 메뉴 색상 변경 추가 후 아래 이미지와 같이 다양한 형태로 글자 색상이나 배경을 꾸밀 수 있게 되었다. 형광펜 효과 (반만 채우는 경우)는 조금 한정적으로 사용이 가능하다.

03
of 07
워드프레스 메뉴 색상 추가
워드프레스 메뉴 색상 12개 + 추가 색상 12개 총 24개의 색상을 사용한다. Child Theme의 functions.php 파일에 아래 코드를 추가한다.
function my_theme_add_new_features() {
$oldColorPalette = current( (array) get_theme_support( 'editor-color-palette' ) );
if (false === $oldColorPalette && class_exists('WP_Theme_JSON_Resolver')) {
$settings = WP_Theme_JSON_Resolver::get_core_data()->get_settings();
if (isset($settings['color']['palette']['default'])) {
$oldColorPalette = $settings['color']['palette']['default'];
}
}
$newColorPalette = [
[
'name' => esc_attr__('PersianRed', 'myThemeLangDomain'),
'slug' => 'persianred',
'color' => '#C81D11',
],
[
'name' => esc_attr__('PersianBlue', 'myThemeLangDomain'),
'slug' => 'persianblue',
'color' => '#1C39BB',
],
[
'name' => esc_attr__('PersianIndigo', 'myThemeLangDomain'),
'slug' => 'persianindigo',
'color' => '#32127A',
],
[
'name' => esc_attr__('PersianGreen', 'myThemeLangDomain'),
'slug' => 'persiangreen',
'color' => '#00A693',
],
[
'name' => esc_attr__('PersianPlum', 'myThemeLangDomain'),
'slug' => 'persianplum',
'color' => '#701C1C',
],
[
'name' => esc_attr__('PersianOrange', 'myThemeLangDomain'),
'slug' => 'persianorange',
'color' => '#D99058',
],
[
'name' => esc_attr__('PersianRose', 'myThemeLangDomain'),
'slug' => 'persianrose',
'color' => '#FE28A2',
],
[
'name' => esc_attr__('PersianPink', 'myThemeLangDomain'),
'slug' => 'persianpink',
'color' => '#F77FBE',
],
[
'name' => esc_attr__('CottonCandy', 'myThemeLangDomain'),
'slug' => 'cottoncandy',
'color' => '#FFB4C9',
],
[
'name' => esc_attr__('ParisDaisy', 'myThemeLangDomain'),
'slug' => 'parisdaisy',
'color' => '#FFF37B',
],
[
'name' => esc_attr__('Yellow', 'myThemeLangDomain'),
'slug' => 'yellow',
'color' => '#FFFF00',
],
[
'name' => esc_attr__('Green', 'myThemeLangDomain'),
'slug' => 'green',
'color' => '#00FF00',
],
];
if (!empty($oldColorPalette)) {
$newColorPalette = array_merge($oldColorPalette, $newColorPalette);
}
add_theme_support( 'editor-color-palette', $newColorPalette);
}
add_action( 'after_setup_theme', 'my_theme_add_new_features' );
Code language: PHP (php)
04
of 07
워드프레스 메뉴 색상 변경
워드프레스 메뉴 색상 12개를 다른 색상 12개로 변경해서 사용한다. Child Theme의 functions.php 파일에 아래 코드를 추가한다.
/* Palette*/
function my_theme_add_new_features() {
$newColorPalette = [
[
'name' => esc_attr__('PersianRed', 'default'),
'slug' => 'persianred',
'color' => '#C81D11',
],
[
'name' => esc_attr__('PersianBlue', 'default'),
'slug' => 'persianblue',
'color' => '#1C39BB',
],
[
'name' => esc_attr__('PersianIndigo', 'default'),
'slug' => 'persianindigo',
'color' => '#32127A',
],
[
'name' => esc_attr__('PersianGreen', 'default'),
'slug' => 'persiangreen',
'color' => '#00A693',
],
[
'name' => esc_attr__('PersianPlum', 'default'),
'slug' => 'persianplum',
'color' => '#701C1C',
],
[
'name' => esc_attr__('PersianOrange', 'default'),
'slug' => 'persianorange',
'color' => '#D99058',
],
[
'name' => esc_attr__('PersianRose', 'default'),
'slug' => 'persianrose',
'color' => '#FE28A2',
],
[
'name' => esc_attr__('PersianPink', 'default'),
'slug' => 'persianpink',
'color' => '#F77FBE',
],
[
'name' => esc_attr__('CottonCandy', 'default'),
'slug' => 'cottoncandy',
'color' => '#FFB4C9',
],
[
'name' => esc_attr__('ParisDaisy', 'default'),
'slug' => 'parisdaisy',
'color' => '#FFF37B',
],
[
'name' => esc_attr__('Yellow', 'default'),
'slug' => 'yellow',
'color' => '#FFFF00',
],
[
'name' => esc_attr__('Green', 'default'),
'slug' => 'green',
'color' => '#00FF00',
],
];
add_theme_support( 'editor-color-palette', $newColorPalette);
}
add_action( 'after_setup_theme', 'my_theme_add_new_features' );
Code language: PHP (php)
05
of 07
Additional CSS, style-editor.css 코드 추가
기본적으로 Additional CSS에 아래 코드를 추가한다. 편집화면에서도 동일한 색상을 보길 원한다면 Child Theme의 style-editor.css 파일에도 똑같이 추가한다. mark 부분은 본인 테마에 맞게 색상 테스트 하면서 적절히 수정해야 한다.
mark {
padding: 0;
color: inherit;
}
/* mark 부분은 본인 테마에 맞게 색상 확인 하면서 수정 필요 */
/* 아래 코드는 본인이 추가한 색상에 맞게 변경해서 추가 */
.has-persianred-color {
color: #C81D11;
}
.has-persianblue-color {
color: #1C39BB;
}
.has-persianindigo-color {
color: #32127A;
}
.has-persiangreen-color {
color: #00A693;
}
.has-persianplum-color {
color: #701C1C;
}
.has-persianorange-color {
color: #D99058;
}
.has-persianrose-color {
color: #FE28A2;
}
.has-persianpink-color {
color: #F77FBE;
}
.has-cottoncandy-color {
color: #FFB4C9;
}
.has-parisdaisy-color {
color: #FFF37B;
}
.has-yellow-color {
color: #FFFF00;
}
.has-green-color {
color: #00FF00;
}
.has-persianred-background-color {
background-color: #C81D11;
}
.has-persianblue-background-color {
background-color: #1C39BB;
}
.has-persianindigo-background-color {
background-color: #32127A;
}
.has-persiangreen-background-color {
background-color: #00A693;
}
.has-persianplum-background-color {
background-color: #701C1C;
}
.has-persianorange-background-color {
background-color: #D99058;
}
.has-persianrose-background-color {
background-color: #FE28A2;
}
.has-persianpink-background-color {
background-color: #F77FBE;
}
.has-cottoncandy-background-color {
background-color: #FFB4C9;
}
.has-parisdaisy-background-color {
background-color: #FFF37B;
}
.has-yellow-background-color {
background-color: #FFFF00;
}
.has-green-background-color {
background-color: #00FF00;
}
/* 우측 메뉴 색상 배경을 텍스트 박스 형태로 만들고 싶다면 아래 코드 추가 */
.has-background {
border-radius: 5px;
font-size: 1.125rem !important;
border: 1px solid #e0e0e0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 2px 6px rgba(0, 0, 0, .1);
margin: 0 0 2em !important;
padding: 1em;
}
Code language: CSS (css)
06
of 07
플러그인 삭제, 코드 지우기
만약 기존에 사용했던 플러그인을 삭제하게 되면 그동안 적용했던 색상들이 전부 깨지거나 흰색으로 변경되어 글자가 보이지 않게 된다. 그래서 기존 플러그인을 그냥 놔두거나, 플러그인으로 적용했던 코드를 모두 찾아 DB에 접속해서 삭제해야 한다. DB접속해서 삭제하는 방법은 예전에 작성했던 글을 참고하면 된다.
결국 난 팔레트 플러그인과 형광펜 플러그인 2개를 삭제했고, 플러그인으로 적용했던 모든 코드 찾아내어 삭제했다. 물론 100%는 아니지만 그래도 90% 이상은 삭제했을 것으로 판단된다. 아래는 내가 DB에 접속해서 삭제한 플러그인 코드 목록이다. 아래와 같은 방법으로 삭제하면 된다.
UPDATE wp_posts SET post_content = replace(post_content, ' class="has-central-palette-1-color has-text-color has-link-color"', '');
UPDATE wp_posts SET post_content = replace(post_content, ' class="has-central-palette-2-color has-text-color has-link-color"', '');
UPDATE wp_posts SET post_content = replace(post_content, ' class="has-central-palette-3-color has-text-color has-link-color"', '');
UPDATE wp_posts SET post_content = replace(post_content, ' class="has-central-palette-4-color has-text-color has-link-color"', '');
UPDATE wp_posts SET post_content = replace(post_content, ' class="has-central-palette-5-color has-text-color has-link-color"', '');
UPDATE wp_posts SET post_content = replace(post_content, ' class="has-central-palette-6-color has-text-color has-link-color"', '');
UPDATE wp_posts SET post_content = replace(post_content, ' class="has-central-palette-7-color has-text-color has-link-color"', '');
UPDATE wp_posts SET post_content = replace(post_content, '{"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-1"}}}},"textColor":"central-palette-1"} ', '');
UPDATE wp_posts SET post_content = replace(post_content, '{"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-2"}}}},"textColor":"central-palette-2"} ', '');
UPDATE wp_posts SET post_content = replace(post_content, '{"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-3"}}}},"textColor":"central-palette-3"} ', '');
UPDATE wp_posts SET post_content = replace(post_content, '{"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-4"}}}},"textColor":"central-palette-4"} ', '');
UPDATE wp_posts SET post_content = replace(post_content, '{"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-5"}}}},"textColor":"central-palette-5"} ', '');
UPDATE wp_posts SET post_content = replace(post_content, '{"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-6"}}}},"textColor":"central-palette-6"} ', '');
UPDATE wp_posts SET post_content = replace(post_content, '{"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-7"}}}},"textColor":"central-palette-7"} ', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-central-palette-1-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-central-palette-2-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-central-palette-3-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-central-palette-4-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-central-palette-5-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-central-palette-6-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-central-palette-7-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<div id="hwpEditorBoardContent" class="hwp_editor_board_content" data-hjsonver="1.0" data-jsonlen="10549"></div>', '');
UPDATE wp_posts SET post_content = replace(post_content, ' has-central-palette-1-color has-text-color has-link-color', '');
UPDATE wp_posts SET post_content = replace(post_content, ' has-central-palette-2-color has-text-color has-link-color', '');
UPDATE wp_posts SET post_content = replace(post_content, ' has-central-palette-3-color has-text-color has-link-color', '');
UPDATE wp_posts SET post_content = replace(post_content, ' has-central-palette-4-color has-text-color has-link-color', '');
UPDATE wp_posts SET post_content = replace(post_content, ' has-central-palette-5-color has-text-color has-link-color', '');
UPDATE wp_posts SET post_content = replace(post_content, ' has-central-palette-6-color has-text-color has-link-color', '');
UPDATE wp_posts SET post_content = replace(post_content, ' has-central-palette-7-color has-text-color has-link-color', '');
UPDATE wp_posts SET post_content = replace(post_content, ',"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-1"}}}},"textColor":"central-palette-1"', '');
UPDATE wp_posts SET post_content = replace(post_content, ',"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-2"}}}},"textColor":"central-palette-2"', '');
UPDATE wp_posts SET post_content = replace(post_content, ',"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-3"}}}},"textColor":"central-palette-3"', '');
UPDATE wp_posts SET post_content = replace(post_content, ',"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-4"}}}},"textColor":"central-palette-4"', '');
UPDATE wp_posts SET post_content = replace(post_content, ',"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-5"}}}},"textColor":"central-palette-5"', '');
UPDATE wp_posts SET post_content = replace(post_content, ',"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-6"}}}},"textColor":"central-palette-6"', '');
UPDATE wp_posts SET post_content = replace(post_content, ',"style":{"elements":{"link":{"color":{"text":"var:preset|color|central-palette-7"}}}},"textColor":"central-palette-7"', '');
UPDATE wp_posts SET post_content = replace(post_content, ' {"textColor":"central-palette-1"}', '');
UPDATE wp_posts SET post_content = replace(post_content, ' {"textColor":"central-palette-2"}', '');
UPDATE wp_posts SET post_content = replace(post_content, ' {"textColor":"central-palette-3"}', '');
UPDATE wp_posts SET post_content = replace(post_content, ' {"textColor":"central-palette-4"}', '');
UPDATE wp_posts SET post_content = replace(post_content, ' {"textColor":"central-palette-5"}', '');
UPDATE wp_posts SET post_content = replace(post_content, ' {"textColor":"central-palette-6"}', '');
UPDATE wp_posts SET post_content = replace(post_content, ' {"textColor":"central-palette-7"}', '');
UPDATE wp_posts SET post_content = replace(post_content, 'has-central-palette-1-color has-text-color', '');
UPDATE wp_posts SET post_content = replace(post_content, 'has-central-palette-2-color has-text-color', '');
UPDATE wp_posts SET post_content = replace(post_content, 'has-central-palette-3-color has-text-color', '');
UPDATE wp_posts SET post_content = replace(post_content, 'has-central-palette-4-color has-text-color', '');
UPDATE wp_posts SET post_content = replace(post_content, 'has-central-palette-5-color has-text-color', '');
UPDATE wp_posts SET post_content = replace(post_content, 'has-central-palette-6-color has-text-color', '');
UPDATE wp_posts SET post_content = replace(post_content, 'has-central-palette-7-color has-text-color', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFFF00" class="has-inline-color has-central-palette-1-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFFF00" class="has-inline-color has-central-palette-2-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFFF00" class="has-inline-color has-central-palette-3-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFFF00" class="has-inline-color has-central-palette-4-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFFF00" class="has-inline-color has-central-palette-5-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFFF00" class="has-inline-color has-central-palette-6-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFFF00" class="has-inline-color has-central-palette-7-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFE1FC" class="has-inline-color has-central-palette-1-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFE1FC" class="has-inline-color has-central-palette-2-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFE1FC" class="has-inline-color has-central-palette-3-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFE1FC" class="has-inline-color has-central-palette-4-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFE1FC" class="has-inline-color has-central-palette-5-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFE1FC" class="has-inline-color has-central-palette-6-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#FFE1FC" class="has-inline-color has-central-palette-7-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#00FF00" class="has-inline-color has-central-palette-1-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#00FF00" class="has-inline-color has-central-palette-2-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#00FF00" class="has-inline-color has-central-palette-3-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#00FF00" class="has-inline-color has-central-palette-4-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#00FF00" class="has-inline-color has-central-palette-5-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#00FF00" class="has-inline-color has-central-palette-6-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:#00FF00" class="has-inline-color has-central-palette-7-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span class="tadv-color" style="color:#cf2e2e">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span class="tadv-color" style="color:#3f48cc">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="color:#0693e3" class="tadv-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="color:#cf2e2e" class="tadv-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="color: #ff0000;">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="color:#3f48cc" class="tadv-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="color:#cf2e2e" class="tadv-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '</span>', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="color: #0000ff;">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span class="rtex-highlighter-0">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span class="rtex-highlighter-1">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span class="rtex-highlighter-2">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span class="rtex-highlighter-3">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-red-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-black-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-indigo-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="font-size: revert; color: initial;">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="color: #000000;">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="color: #0000ff; background-color: #ffff00;">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="font-size: 20px;">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="color: initial; font-size: revert;">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="text-decoration: underline" class="underline">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="color: #ff0000; font-size: 24px;">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="font-size: 16px; color: #0000ff;">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="background-color:#ffff00" class="tadv-background-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="color:#0000ff" class="tadv-color">', '');
UPDATE wp_posts SET post_content = replace(post_content, '<span style="color: #cf2e2e;">', '');
UPDATE wp_posts SET post_content = replace(post_content, '</mark>', '');
Code language: JavaScript (javascript)
07
of 07
마무리
워드프레스 메뉴 색상 변경 추가는 필수는 아니기 때문에 그냥 기본색을 그대로 사용해도 되고, 플러그인을 사용해도 되고, functions.php 파일을 사용해도 된다. 본인이 편한 걸 선택해서 사용하면 된다.