워드프레스 본문 글씨 밑줄 형광펜 효과주기

워드프레스 블록 에디터에서 텍스트에 밑줄을 그으려면 Ctrl+U 단축키를 사용할 수 있습니다. 단축키가 작동하지 않는 경우에는 문단 블록의 더 보기 아이콘(v 모양의 아이콘)을 클릭하여 밑줄을 적용할 수도 있습니다.

워드프레스 블록 에디터에서 본문 텍스트에 밑줄을 그으면 자동으로 형광펜(강조 표시) 효과를 주는 방법에 대하여 살펴보겠습니다.

워드프레스 본문 글씨 밑줄에 형광펜 효과를 주는 방법

워드프레스 블록 에디터(구텐베르크)에서 밑줄을 치면 자동으로 형광펜 효과가 적용되도록 하고 싶은 경우 아래의 방법으로 시도할 수 있습니다.

먼저 다음과 같은 자바스크립트 코드를 추가합니다.

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.entry-content span').forEach(function(span) {
    if (span.style.textDecoration === 'underline') {
      span.removeAttribute('style'); // Remove the inline style
      span.setAttribute('class', 'custom-highlight'); // Use the class 'custom-highlight'
    }
  });
});
</script>

위의 코드는 GeneratePress 등을 비롯한 대부분의 테마에서 잘 작동합니다. 하지만 뉴스페이퍼 등 일부 테마에서는 작동하지 않을 수 있습니다. 그런 경우 entry-content 클래스 부분을 체크하여 적절히 변경하거나 .entry-content를 삭제할 수 있습니다.

간단하게는 WPCode와 같은 플러그인을 사용하여 푸터 섹션에 위의 코드를 추가할 수 있습니다.

사이트 속도에 영향을 덜 미치도록 추가하려는 경우에는 위의 코드에서 맨 앞줄의 <script>와 맨 끝줄의 </script>를 제거하고 차일드 테마 폴더에 js 파일로 저장하도록 합니다.

JS 파일을 네이버 카페에 올렸습니다. 다운로드하여 /wp-content/themes/차일드테마_폴더/js/ 디렉터리로 업로드하세요.

그런 다음, 차일드 테마 함수 파일에 다음과 같은 코드를 추가할 수 있습니다.

/wp-content/themes/child-theme-folder/js/custom-highlight.js 파일로 자바스크립트 파일을 저장한 경우:

// Enqueues the 'custom-highlight.js' script exclusively on single post pages.
// This function first checks if the current page being viewed is a single post using is_single().
// If true, it registers 'custom-highlight.js', located within the child theme's 'js' directory, and sets jQuery as a dependency.
// The script is then enqueued to be loaded in the footer of the page, ensuring it is executed after the page content has loaded.
// This targeted loading approach optimizes site performance by loading the script only where it is needed.

function enqueue_custom_highlight_script() {
    if (is_single()) {
        // Register the script
        wp_register_script('custom-highlight-script', get_stylesheet_directory_uri() . '/child-theme/js/custom-highlight.js', array('jquery'), '', true);
        
        // Enqueue the script
        wp_enqueue_script('custom-highlight-script');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_custom_highlight_script');

상기 코드를 추가하면 블로그 게시글의 본문에 적용된 밑줄에만 형광펜 효과가 적용됩니다.

그리고 외모 » 사용자 정의하기 » 추가 CSS에 다음과 같은 커스텀 코드를 추가합니다.

/* Applies a gradient background to elements with the 'custom-highlight' class, 
   creating a unique highlighting effect. The gradient starts with a solid yellow (#FFEB3B) 
   color at the bottom, covering the lower 33% of the element, and transitions to transparent 
   at the 25% mark from the bottom. This creates an overlap in the gradient effect,
   which may not render as expected due to the reverse percentages. Adjust the transparent 
   percentage to be greater than 33% for a more conventional gradient effect where the color 
   smoothly transitions from yellow to transparent upwards. */

.custom-highlight {
  background: linear-gradient(to top, #FFEB3B 33%, transparent 25%);
}

색상과 투명도는 적절히 변경합니다.

이제 포스트 본문에 적용된 밑줄이 다음과 같이 노란색 형광펜으로 표시됩니다.