워드프레스 TinyMCE 에디터의 숨겨진 버튼 꺼내기

워드프레스는 오픈소프트웨어의 하나인 TinyMCE^{Tiny Moxiecode Content Editor} 위지윅(WYSIWYG-What You See Is What You Get) 에디터를 사용합니다. 하지만, 기본적으로 사용가능한 버튼으로 컨텐츠를 표현하는 것이 다소 부족할 수 있습니다.

이런 부족한 부분을 해결하는 것으로 Ultimate TinyMCE, TinyMCE Advanced, CKEditor For WordPress 등의 에디터 플러그인이 있습니다. 단순히 기능버튼이 추가 되는 것 뿐만 아니라 다양한 유틸기능이 함께 제공 되어 상당히 유용합니다.

하지만, 때때로 기본상태의 TinyMCE 에디터를 그대로 사용하시는 분들도 있으며, 불특정 유저들이 함께 컨텐츠를 생산하는 웹사이트를 운영할 때 간단하게 몇 가지 버튼만 추가하기를 원할 수 있습니다.

간단하게 functions.php 파일에 코드를 추가하여 기본적으로 숨겨져 있는 버튼을 활성화하여 사용하는 것을 알아봅니다.

---

아래의 그림에서 첫번째는 워드프레스를 설치 후에 기본으로 제공 되는 에디터버튼의 화면이며, 두번째는 첫번째 그림의 붉은색 동그라미 부분의 버튼을 클릭하면 확장되어 나오는 버튼의 화면입니다.

사용하는 테마의 functions.php 파일에 아래의 코드를 삽입해 봅니다.

function my_mce_buttons_2($buttons) {    
    $buttons[] = 'hr';
    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

아래 그림의 붉은색 동그라미 버튼(hr 태그 버튼)이 활성화 되었나요?

이번에는 몇 가지 더 추가해 봅니다. 위의 코드를 지우고 아래의 코드를 functions.php 파일에 입력하고 저장하여, 포스트 작성 화면의 에디터를 보세요.

function my_mce_buttons_2($buttons) {
        $buttons[] = 'hr';  
        $buttons[] = 'image';
        $buttons[] = 'fontsizeselect';
    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');

아래 그림의 붉은색 사각형에 있는 버튼이 활성화 됩니다.

폰트크기 드롭다운을 디폴트(The primary toolbar)로 나타내길 원한다면, 위의 코드 맨하단의 mce_buttons_2를 mce_buttons로 변경하면 됩니다. 예를 들어 아래와 같은 코드를 삽입하여 확인해 보세요.

function my_mce_buttons($buttons) {  
        $buttons[] = 'hr';  
        $buttons[] = 'image';
    return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons');

function my_mce_buttons_2($buttons) {   
        $buttons[] = 'fontsizeselect';
    return $buttons;
}
add_filter('mce_buttons', 'my_mce_buttons_2');