워드프레스 비주얼 에디터에 폰트 크기 및 폰트 선택 기능 넣기

워드프레스 기본 기능만 사용하고 있어서, 크게 불편함을 느끼지 못하고 있었습니다만,

마침 회사 동료분께서 워드프레스를 이용하여 작업을 하시다가 워드프레스에 이런 기능은 없는지 물어보셔서 찾은 내용을 공유 드립니다.

요구사항
1. 폰트 크기를 조절 할 수 있는가?
2. 폰트를 변경할 수 있는가?

아래는 워드프레스 설치후 보실 수 있는 기본 비주얼 에디터의 모습 입니다.

위의 요구사항을 비주얼 에디터를 통해서 손쉽게 변경할 수 있도록, 설정하는 방법을 간단히 설명하면 아래와 같습니다.

워드프레스의 function.php를 열어 몇가지의 코드를 넣는다.

function.php는 워드프레스가 업데이트 되는 경우에 해당 파일이 초기화 되면, 다시 수정해야할 수 있어서 이런것을 방지하기 위해서 Plug-in을 설치하는 방법으로 우회 하였습니다.

워드프레스 관리자 화면에서 Code Snippets이라는 플러그인을 설치하고, 활성화를 합니다.

활성화 하면, 왼쪽 메뉴바에 아래와 같이 Snippets이라는 메뉴가 추가된 것을 볼 수 있습니다.

Add New를 클릭하여 새로운 스니펫을 추가 합니다.

제 경우에는 제목은 Font

Code에는

function scanwp_buttons( $buttons ) {
array_unshift( $buttons, 'fontselect' );
array_unshift( $buttons, 'fontsizeselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'scanwp_buttons' );

을 넣어 주고, Save를 합니다.

새 글 추가하는 메뉴에서 아래와 같이 폰트 크기설정이 추가되고,

아래와 같이 폰트를 설정할 수 있는 메뉴가 추가된 것을 보실 수 있습니다.

여기까지가 기본적인 폰트 크기 및 폰트 변경하는 기능을 추가하는 설명 이였습니다.

여기서 폰트 설정하는 메뉴에 나눔 고딕 같은 다양한 폰트를 추가하고 싶은 경우가 있을텐데요.

이런 경우에 어떻게 하면 되는지, 추가 포스팅을 진행하도록 하겠습니다.