워드프레스 블로그 포스팅 시 실시간으로 글자 수와 단어 수 확인하기

워드프레스로 블로그 포스팅을 할 때 글자 수와 단어 수가 몇 개인지 확인하는 경우가 있습니다. 저도 가끔 필요하여 아예 글자 수 세기 기능을 만들어 사용하고 있는데요. 이 글에서는 워드프레스 블로그 포스팅 시 실시간으로 글자 수와 단어 수 확인 방법에 대해 알아보도록 하겠습니다.

워드프레스 블로그 포스팅 시 실시간으로 글자 수와 단어 수 확인하기

1. 워드프레스 블록 편집기(구텐베르크) 기능 활용하기

워드프레스 블록 편집기를 사용할 경우 실시간으로 글자 수와 단어 수를 확인하며 포스팅 글을 작성할 수 있어 편리하지만, 왼쪽 사이드 화면을 많이 차지해서 편집기를 넓게 사용할 수 없는 단점이 있습니다.

워드프레스 편집기에서 ‘문서 모두보기’ (Shift+Alt+O) → ‘아웃라인’을 클릭하면, 아래 화면의 ③번과 같이 실시간으로 글자 수와 단어 수를 확인할 수 있습니다. 여기서 글자 수는 공백 포함 글자 수입니다. 글자 수를 체크하면서 글을 쓰실 필요가 있을 경우 ‘문서 모두보기’ 모드로 사용하시면 됩니다. 하지만 보시는 것처럼 화면에서 차지하는 부분이 커서 편집기를 사용할 때 불편한 점이 있습니다.

2. 간편하게 워드프레스에서 실시간 글자 수와 단어 수 확인하기

위에서 워드프레스 블록 편집기에는 자체적으로 글자 수와 단어 수 체크 기능이 있지만, 화면을 많이 차지하고 공백 포함 글자 수를 체크하는 문제가 있습니다. 그래서 화면을 많이 차지하지 않으면서도 공백 제외 글자 수를 체크하는 기능을 추가하는 방법을 알려드리도록 하겠습니다.

아래 화면의 상단에서 약간 오른쪽을 보시면 글자 수(공백 제외)와 단어 수가 팝업창으로 표시되는 것을 보실 수 있으실 텐데요. 워드프레스의 아웃라인 기능 모드를 사용하지 않아도 상단에 조그맣게 글자 수와 단어 수를 표시해 주기 때문에 매우 편리합니다.

이 기능은 워드프레스 functions.php에 아래 코드를 추가하면 쉽게 적용할 수 있습니다. 글자 수를 표시하는 팝업창의 위치는 아래 코드에서 ‘전체화면 모드일 경우’와 ‘일반화면 모드일 경우’ 부분을 찾아 숫자 부분을 수정하여 조정할 수 있습니다.

/**
 * 워드프레스 구텐베르크 편집기에 단어 수 및 글자 수 표시 기능을 추가합니다.
 * 이 함수는 편집기 화면에서만 실행되며, 전체화면 모드에 따라 표시 위치가 조정됩니다.
 */
function add_custom_gutenberg_inline_script() {
    if ( ! function_exists( 'get_current_screen' ) ) {
        require_once( ABSPATH . 'wp-admin/includes/screen.php' );
    }
    
    $current_screen = get_current_screen();
    if ( $current_screen && method_exists( $current_screen, 'is_block_editor' ) && $current_screen->is_block_editor() ) {
        ?>
        <script type="text/javascript">
            (function() {
                window.addEventListener('DOMContentLoaded', () => {
                    const { select, subscribe } = wp.data;
                    
                    function getMainContent() {
                        return wp.data.select('core/editor').getEditedPostContent();
                    }
                    
                    function isFullscreenMode() {
                        return wp.data.select('core/edit-post').isFeatureActive('fullscreenMode');
                    }
                    
                    function updateWordCount() {
                        const content = getMainContent();
                        
                        const wordCount = wp.wordcount.count(content, 'words');
                        const charCountNoSpaces = wp.wordcount.count(content, 'characters_excluding_spaces');
                        				
                        let wordCountPopup = document.getElementById('word-count-popup');
                        if (!wordCountPopup) {
                            wordCountPopup = document.createElement('div');
                            wordCountPopup.id = 'word-count-popup';
                            wordCountPopup.style.position = 'fixed';
                            wordCountPopup.style.padding = '8px';
                            wordCountPopup.style.backgroundColor = '#f1f1f1';
                            wordCountPopup.style.border = '1px solid #ccc';
                            wordCountPopup.style.zIndex = '1000';
                            wordCountPopup.style.borderRadius = '5px';
                            wordCountPopup.style.boxShadow = '0 2px 5px rgba(0,0,0,0.1)';
                            document.body.appendChild(wordCountPopup);
                        }
                        
                        if (isFullscreenMode()) { //전체화면 모드일 경우 
                            wordCountPopup.style.top = '3px';
                            wordCountPopup.style.right = '380px';
                        } else { //일반화면 모드일 경우
                            wordCountPopup.style.top = '35px';
                            wordCountPopup.style.right = '362px';
                        }
                        
                        wordCountPopup.innerHTML = `
                            글자 수(공백 제외): ${charCountNoSpaces} <br>
                            단어 수: ${wordCount}
                        `;
                    }
                    
                    subscribe(updateWordCount);
                    
                    subscribe(() => {
                        const isFullscreen = isFullscreenMode();
                        updateWordCount();
                    });
                });
            })();
        </script>
        <?php
    }
}

add_action('admin_footer', 'add_custom_gutenberg_inline_script');

적용 방법은 다음과 같습니다.워드프레스 관리자 화면에서 ‘모양’ → ‘테마 파일 편집기’로 이동한 다음, 화면 오른쪽에 있는 사이드바에서 ‘functions.php’를 클릭하여 오픈합니다.
functions.php의 맨 마지막에 위의 코드를 복사하여 붙여넣기한 후 ‘파일 업데이트’를 클릭하면 적용됩니다.

이제 글을 작성하는 화면으로 들어가면, 아래와 같이 상단에 글자 수(공백 제외)와 단어 수가 표시되는 것을 보실 수 있으실 겁니다.

오늘은 워드프레스 블로그 포스팅 시 실시간으로 글자 수와 단어 수 확인하기에 대해 알아보았습니다. 워드프레스 블록 편집기에서 제공하는 실시간 글자 수와 단어 수 체크 기능이 불편하실 경우 이 글을 참고하여 제가 소개한 방법을 적용해 보시기 바랍니다. 이 글이 여러분에게 도움이 되기를 바랍니다.