워드프레스 TinyMCE 편집기에 사용자 지정 글꼴 및 크기 추가하기

개요

WP v5 부터는 새로 선보인 블록편집기가 기본 설정이지만 플러그인1https://wordpress.org/plugins/classic-editor/을 통해 여전히 기존 클래식편집기를 사용할 수 있다. 두 편집기 모두 TinyMCE2https://www.tiny.cloud/features를 사용하고, 사용자 지정 폰트 및 글꼴을 추가하기 위해서는 활성테마의 functions.php 파일에 적절한 추가코드 및 필터 설정이 필요하다. 

 

스스로 자작한 테마를 사용하거나 업데이트되지 않는 테마가 아닌이상, 소스를 직접 변경하는 건 좋은 결정이 아니다.  다행히 Code Snippets 플러그인3https://wordpress.org/plugins/code-snippets/를 사용하면 활성테마의 직접 functions.php를 수정하지 않아도 원하는 기능을 추가할 수 있다.  이 플러그인을 사용해서 사용자가 여러 기능을 추가할 수 있는데
태그 자동 삽입이나 Custom Post Type 게시물에 기능을 확장하거나 특정 권한을 가진 사용자에게만 표시하거나 디버깅 기능을 켜고 끄며 CORS 조절 등,  이미 잘 짜여진 수많은 기능이 오픈되어 있어 꼭 사용해야할 플러그인중의 하나다. 

 

추가 코드

웹폰트와 해당 CSS 파일을 준비한뒤 아래 코드를 Code Snippets 항목에 추가하고  Run Snippet Everywhere 로 설정한다:

// 1) 폰트 추가 설정: D2Coding, NanumBarunPen
function add_custom_fonts($init) {

    $stylesheet_url = '/wp-content/uploads/fonts/custom-fonts.css'; // font-face 설정

    if(empty($init['content_css'])) {
        $init['content_css'] = $stylesheet_url;
    } else {
        $init['content_css'] = $init['content_css'].','.$stylesheet_url;
    }

    $font_formats = isset($init['font_formats']) ? $init['font_formats'] : 'Helvetica=helvetica;Symbol=symbol;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;'; // 기본 폰트리스트에서 사용하지 않는 것 제거한 목록
    $custom_fonts = 'D2Coding=d2coding;NanumBarunPen=nanumbarunpen;'; // 추가 폰트를 앞쪽으로 배치
    $init['font_formats'] = $custom_fonts . $font_formats;

  return $init;
}
add_filter('tiny_mce_before_init', 'add_custom_fonts');
// 2) 프론트엔드에서 스타일시트를 로딩
function load_custom_fonts_frontend() {
    // wp_enqueue_style() 함수를 사용하는 것도 나쁘지 않다
    echo '';
}
add_action('wp_head', 'load_custom_fonts_frontend');
add_action('admin_head', 'load_custom_fonts_frontend');
// 3) 폰트 크기 설정
function add_custom_font_sizes( $initArray ){
    $initArray['fontsize_formats'] = "8px 9px 10px 11px 12px 13px 14px 15px 16px 17px 18px 19px 20px 21px 22px 23px 24px 26px 28px 30px 32px 36px 48px 60px 72px 96px";
    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'add_custom_font_sizes' );
 

 

더 자세한 내용은 이 게시글4http://learn.wpeditpro.com/adding-new-wordpress-tinymce-fonts/D2Coding 폰트 설정파일5https://github.com/Joungkyun/font-d2coding 에서 찾을 수 있다. 

 

References   [ + ]

1. https://wordpress.org/plugins/classic-editor/
2. https://www.tiny.cloud/features
3. https://wordpress.org/plugins/code-snippets/
4. http://learn.wpeditpro.com/adding-new-wordpress-tinymce-fonts/
5. https://github.com/Joungkyun/font-d2coding

ps 대신에 glances

 

ps 보다 보여주는게 일단 많네ㅎ 

 

// on Ubuntu, Debian
apt-get install glances

// on macOS
brew install glances

Undefined offset: 0 warning in wp-includes\capabilities.php on line ###

 원인

주로 빈 배열의 항목 값을 함수의 인자로 전달할 때 발생.  

get_post() 함수의 경우 null 값도 인자로 받는다. 덕분에  get_post( $arg[0] ) 호출에서 넘겨진 배열이 비었을 경우 계속해서 NOTICE 가 발생한다. 

 

 해결책

WP 동작에는 문제없지만 Black-Bar 등으로 디버깅 하는 상태에선 꽤 성가시고 눈에 거슬린다. 

해당 하는 부분에서 값 존재 유무를 검사해서 따로 호출하는 방식이 일단 가장 간단하다.

 

diff --git a/wp-includes/capabilities.php b/wp-includes/capabilities.php
index e065d60..c3e1012 100644
--- a/wp-includes/capabilities.php
+++ b/wp-includes/capabilities.php
@@ -135,7 +135,7 @@ function map_meta_cap( $cap, $user_id ) {
                // edit_others_posts
                case 'edit_post':
                case 'edit_page':
-                       $post = get_post( $args[0] );
+                       $post = isset($args[0]) ? get_post( $args[0] ) : get_post();
                        if ( ! $post ) {
                                $caps[] = 'do_not_allow';
                                break;