워드프레스의 글 편집기는 말 그대로 글과 콘텐츠를 작성·편집하기 위한 도구입니다. 하지만 기본 상태에서는 사용자 정의 CSS 클래스를 직접 추가할 수 없다는 아쉬운 점이 있습니다. 커스텀 스타일이나 클래스를 적용하려면 '텍스트' 모드로 전환한 뒤 HTML 코드에 일일이 손으로 입력하는 것이 유일한 방법이었죠.
다행히 워드프레스는 높은 확장성을 자랑하기 때문에, 글 편집기에 사용자 정의 스타일 옵션을 추가해 작업 효율을 크게 높일 수 있습니다. 이 옵션들을 활용하면 몇 번의 클릭만으로 원하는 CSS 스타일을 손쉽게 적용할 수 있습니다. 더 이상 텍스트 모드로 전환하거나 복잡한 CSS 클래스 이름을 외울 필요가 없어지는 것입니다.
글 편집기에 커스텀 스타일 옵션을 추가하는 방법은 크게 두 가지입니다. 하나는 무료 플러그인을 활용하는 방법이고, 다른 하나는 코드 스니펫을 직접 추가하는 방법입니다. 두 방식 모두 결과는 비슷하니, 자신에게 맞는 방법을 골라 진행하시면 됩니다.
참고: 이 글을 따라 하려면 기본적인 HTML과 CSS 지식이 필요합니다. CSS 클래스, 블록 레벨 요소, HTML 요소, 속성 등의 개념을 이해하고 있어야 합니다.
1. 플러그인 활용 방법
글 편집기에 커스텀 스타일 옵션을 추가하는 가장 쉬운 방법은 'TinyMCE Custom Styles'라는 무료 플러그인을 사용하는 것입니다.
이 플러그인의 장점은 에디터 스타일시트(editor stylesheet)를 자동으로 생성해준다는 점입니다. 덕분에 링크, 이미지, 폼, 버튼 등의 프런트엔드 스타일을 글 편집기 안에서 바로 확인할 수 있어 매우 유용합니다.
플러그인 설치 및 설정
1. 다른 워드프레스 플러그인과 마찬가지로 TinyMCE Custom Styles를 다운로드하여 설치하고 활성화합니다. 활성화 후에는 '설정 → TinyMCE Custom Styles' 메뉴로 이동해 설정 페이지를 엽니다.
2. 처음 화면에서 에디터 스타일시트 파일의 저장 위치를 선택하라는 오류 메시지가 표시됩니다. 테마에 따라 세 가지 옵션 중 하나를 고를 수 있는데, 각 옵션의 설명을 꼼꼼히 읽어본 후 자신에게 맞는 것을 선택하세요. 필자는 제네시스(Genesis) 차일드 테마를 사용 중이므로 두 번째 옵션을 선택했습니다. 선택 후 '모든 설정 저장(Save all Settings)' 버튼을 클릭합니다.
3. 아래로 스크롤한 뒤 '새 스타일 추가(Add new style)' 버튼을 클릭합니다. 그다음 스타일 이름을 입력하고, 유형(inline, block, selector 중 하나)을 선택한 후 유형 값과 CSS 클래스를 차례로 입력합니다.
4. 화면 가장 오른쪽에서 해당 요소가 '래퍼(Wrapper)'인지 여부도 반드시 지정해야 합니다. 이 옵션을 체크하면 글 편집기에서 선택한 블록 레벨 요소 주위에 새로운 블록 레벨 요소가 생성되는 스타일이 만들어집니다.
5. 원한다면 'CSS Styles' 카테고리 아래의 '새 스타일 추가' 버튼을 통해 커스텀 CSS 스타일을 직접 추가할 수도 있습니다. 다만 필자는 테마 디렉터리에 있는 'editor-style.css' 파일에 스타일을 작성할 것을 권장합니다(두 번째 단계에서 두 번째 옵션을 선택했다면). 이렇게 하면 관리가 한결 수월해집니다.
6. 모든 설정이 끝나면 페이지 하단의 '모든 설정 저장(Save all settings)' 버튼을 클릭합니다.
커스텀 스타일 적용하기
7. 이제 글 편집기에 'Formats'라는 새 드롭다운 메뉴가 나타납니다. 이 메뉴 안에서 방금 추가한 커스텀 스타일 옵션과 기본으로 제공되는 옵션들을 함께 확인할 수 있습니다. 스타일을 적용하려면 해당 옵션을 클릭하기만 하면 되고, 필요한 CSS 코드가 자동으로 삽입됩니다. 텍스트 모드에서 그 코드를 직접 확인할 수 있습니다.
8. 'editor-style.css' 파일에 필요한 스타일을 추가해 두었다면, 드롭다운 메뉴에서 스타일 옵션을 사용할 때 그 결과가 글 편집기 안에 그대로 반영됩니다.
나중에 플러그인을 비활성화하거나 삭제하더라도 에디터 스타일시트 자체는 삭제되지 않습니다. 다만 글 편집기에서 커스텀 옵션은 더 이상 사용할 수 없게 됩니다.
2. 수동 코드 추가 방법
플러그인 사용을 선호하지 않는다면, 'functions.php' 파일에 간단한 코드 스니펫을 추가하는 방식으로 동일한 기능을 구현할 수 있습니다. 이 방법은 크게 두 부분으로 나뉩니다. 하나는 툴바에 스타일 버튼을 추가하는 것이고, 다른 하나는 글 편집기 내부에서 CSS 스타일이 실제로 적용되도록 만드는 것입니다.
툴바에 커스텀 CSS 스타일 버튼 추가하기
'functions.php' 파일의 마지막 부분에 아래 코드를 추가합니다. 이 코드는 실제로 워드프레스 공식 문서에서 제공하는 코드입니다.
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {
// Define the style_formats array
$style_formats=array(
// Each array child is a format with it's own settings
array(
'title' => '.translation',
'block' => 'blockquote',
'classes' => 'translation',
'wrapper' => true,
),
array(
'title' => '⇠.rtl',
'block' => 'blockquote',
'classes' => 'rtl',
'wrapper' => true,
),
array(
'title' => '.ltr⇢',
'block' => 'blockquote',
'classes' => 'ltr',
'wrapper' => true,
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );코드를 자신의 스타일 옵션에 맞게 수정해야 합니다. 위 코드에서 각 배열(array)이 개별 스타일 옵션 하나를 의미합니다. 'title'에는 스타일 이름, 'block'에는 블록 유형, 'classes'에는 CSS 클래스를 입력하고, 해당 요소가 래퍼라면 'wrapper' 옆에 'true', 아니라면 'false'를 입력하면 됩니다.
새 스타일 옵션을 추가하고 싶을 때마다 배열을 복사한 뒤 필드 값만 수정하면 됩니다. 예를 들어 필자는 첫 번째 배열을 수정해 '파란 버튼(Blue Button)' 옵션을 만들었습니다.
커스터마이징이 끝나면 수정된 'functions.php' 파일을 저장한 후 서버에 업로드합니다.
에디터 스타일시트 생성하기
'editor-style.css'라는 이름의 파일을 새로 만들고, 글 편집기에서 확인하고 싶은 CSS 스타일을 추가합니다. 주의할 점은 'editor-style.css' 파일에서 만드는 CSS 클래스가 앞서 스타일 옵션 코드에 작성한 클래스와 정확히 일치해야 한다는 것입니다.
이제 테마의 'functions.php' 파일을 열고 아래 코드를 추가합니다.
//Add custom editor stylesheet
function mte_add_editor_styles() {
add_editor_style( 'editor-style.css' );
}
add_action( 'init', 'mte_add_editor_styles' );'editor-style.css'와 'functions.php' 파일을 모두 서버에 업로드하면 준비가 완료됩니다. 이제부터는 워드프레스 글 편집기에서 커스텀 스타일 옵션을 자유롭게 사용할 수 있습니다.
적용된 스타일은 편집기 화면에서 실시간으로 확인할 수 있습니다.
위 방법들을 활용해 워드프레스 글 편집기에 커스텀 스타일 옵션을 추가해 보셨다면, 여러분의 경험과 생각을 댓글로 공유해 주세요.