워드프레스 글쓰기 에디터에 글자 크기 버튼 추가하기

참고: 인기 테마인 BE 테마(33%)The 7(35%) 할인 행사를 진행하고 있습니다.
참고

워드프레스 기본 글쓰기 에디터에서는 글자 크기를 조정하거나 형광펜 같은 기능이 없어 글을 작성하는 데 불편할 수도 있을 것입니다. 워드프레스에서 글자 크기를 조정하려면 글쓰기 화면에서 “문단” 드롭다운 아래의 “제목 1”, “제목 2″… 등을 사용하는 것을 고려해볼 수 있습니다. 다른 방법으로 TinyMCE Advanced Plugin을 사용하여 글자 크기 옵션을 추가할 수 있습니다.

TinyMCE Advanced Plugin을 설치하고 활성화한 후 설정 > TinyMCE Advanced에서 다음 그림과 같이 원하는 버튼을 위쪽으로 끌어다 놓습니다.
TinyMCE Advanced Plugin - Font Size
글자 크기뿐만 아니라 배경 색상(형광펜), 위첨자, 아래첨자 등 다른 버튼도 추가할 수 있습니다. 위와 같이 글자 크기 버튼을 추가하면:
WordPress Editor Font Size button
그러면 그림과 같이 글자 크기를 조정할 수 있는 버튼이 추가됩니다. 하지만 글자 선택할 수 있는 글자 크기 옵션이 별로 없네요. 더 많은 글자 옵션을 추가하기를 원하신다면 다음과 같은 함수를 함수 파일에 추가하시면 됩니다. 여기에서 글자 크기 스타일은 수정/추가하시기 바랍니다.

add_filter('mce_css', 'tuts_mcekit_editor_style');
function tuts_mcekit_editor_style($url) {

if ( !empty($url) )
$url .= ',';

// Retrieves the plugin directory URL
// Change the path here if using different directories
$url .= trailingslashit( plugin_dir_url(__FILE__) ) . '/editor-styles.css';

return $url;
}

/**
* Add "Styles" drop-down
*/
add_filter( 'mce_buttons_2', 'tuts_mce_editor_buttons' );

function tuts_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}

/**
* Add styles/classes to the "Styles" drop-down
*/
add_filter( 'tiny_mce_before_init', 'tuts_mce_before_init' );

function tuts_mce_before_init( $settings ) {

$style_formats = array(
array(
'title' => 'Font 9',
'inline' => 'span',
'styles' => array(
'font-size' => '9px'
)
),
array(
'title' => 'Font 10',
'inline' => 'span',
'styles' => array(
'font-size' => '10px'
)
),
array(
'title' => 'Font 11',
'inline' => 'span',
'styles' => array(
'font-size' => '11px'
)
),
array(
'title' => 'Font 12',
'inline' => 'span',
'styles' => array(
'font-size' => '12px'
)
),
array(
'title' => 'Font 14',
'inline' => 'span',
'styles' => array(
'font-size' => '14px'
)
),
array(
'title' => 'Font 16',
'inline' => 'span',
'styles' => array(
'font-size' => '16px'
)
),
array(
'title' => 'Font 18',
'inline' => 'span',
'styles' => array(
'font-size' => '18px'
)
),
array(
'title' => 'Font 20',
'inline' => 'span',
'styles' => array(
'font-size' => '20px'
)
)
);

$settings['style_formats'] = json_encode( $style_formats );

return $settings;

}

/* Learn TinyMCE style format options at http://www.tinymce.com/wiki.php/Configuration:formats */

/*
* Add custom stylesheet to the website front-end with hook 'wp_enqueue_scripts'
*/
add_action('wp_enqueue_scripts', 'tuts_mcekit_editor_enqueue');

/*
* Enqueue stylesheet, if it exists.
*/
function tuts_mcekit_editor_enqueue() {
$StyleUrl = plugin_dir_url(__FILE__).'editor-styles.css'; // Customstyle.css is relative to the current file
wp_enqueue_style( 'myCustomStyles', $StyleUrl );
}

위의 코드는 이 페이지의 코드를 응용한 것입니다. 위의 코드를 적용해보면 다음과 같이 글자 크기를 추가하는 드롭다운 버튼이 추가됩니다. (워드프레스 기본 에디터에서만 가능.)
Add font size styles in WordPress

참고: Visual Composer 등의 페이지 빌더와 함께 이 플러그인을 사용할 경우 제대로 작동하지 않을 수 있습니다. 이 경우 이 글에 나와 있는 플러그인을 활용해볼 수 있습니다.



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.