[워드프레스] 글 작성 화면에 스타일 적용하는 방법
저는 워드프레스로 블로그를 만드는 것을 선호하다 보니 이제는 워드프레스 관리자 페이지도 커스터마이징 하고 싶어지는 욕구가 있었습니다.
그 중에서 포스트 작성 화면의 폰트를 바꾸어 봐야겠다고 생각했는데, 이게 생각보다 쉽지 않더라구요? 테마 단에서 바꾸려다 보니 구글링해도 잘 안나와 있어서 제가 찾은 방법을 정리해 봅니다.
참고로 구텐베르그가 아닌 아래와 같은 구형 글 편집기에 대한 내용입니다. 구텐베르그는.. 나중에 따로 알아보는 것으로..
구형 편집기
시작하기에 앞서 워드프레스 구형 글 편집기에는 두 가지 모드가 있습니다. 글 본문 작성 박스 우측 상단을 보면 비주얼과 텍스트가 있는데요. 두 케이스의 편집기에 스타일링을 하는 방법이 다르기 때문에 각각을 정리해보았습니다.
비주얼 편집기
비주얼 편집기에 스타일링을 적용하는 방법은 간단합니다.
add_editor_style( 'style-editor.css' );
테마의 루트 폴더에 style-editor.css 파일을 만들고 functions.php 파일에 위 코드만 한 줄 추가하면 됩니다. 후크를 한다거나 add_action 을 할 필요도 없습니다. 참고로 스타일 파일의 이름도 원하는대로 바꿔도 상관 없습니다.
css 파일에 body { background-color: red; } 라고 작성하면 글 편집 화면이 아닌 본문 작성하는 부분의 배경이 빨간색으로 표시됨을 알 수 있습니다(비주얼 편집기 자체가 iframe 으로 구성되어서 그렇습니다.). 이런 방식으로 편집기에 스타일을 적용하면 됩니다.
텍스트 편집기
저는 마크다운으로 글을 작성하기 때문에 구형 편집기에서도 텍스트 편집기에 스타일링을 적용할 필요가 있었습니다.
텍스트 편집기는 위와 같이 add_editor_style 로 할 수 있는게 아니라 admin_enqueue_scripts 에 스타일을 지정해줘야 합니다.
function _admin_enqueue_scripts() {
wp_enqueue_style(
'admin_css',
get_stylesheet_directory_uri() . '/style-editor.css'
);
}
add_action('admin_enqueue_scripts', '_admin_enqueue_script');
비주얼 편집기 보다는 조금 복잡하지만 이해를 하면 아주 간단합니다. admin_enqueue_scripts 에 관리자화면에 적용할 수 있는 css 파일 연결을 추가하는 것이죠.
이때 본문 입력 요소의 폰트를 바꾸려면 css 파일에 아래와 같이 작성하면 됩니다.
.wp-editor-area { font-family: monospace !important; }
생각보다 간단하죠? 여담이지만 비주얼 편집기와는 다르게 텍스트 편집기는 iframe 요소를 사용하지 않습니다.
비주얼 편집기와 텍스트 편집기가 다르게 구성되어 있다는 사실만 인지하고 있으면 스타일링할 요소는 금방 찾으실 수 있을 것 입니다.
끝.