제가 운영하는 블로그 본문의 텍스트 크기는 16px입니다. 저는 적당한 크기라고 생각하지만 글자 크기가 작다고 생각하시는 분도 있을 겁니다. 이 글에서는 블로그 가독성 향상을 위해 사용자가 워드프레스 블로그에서 포스팅된 글의 본문 폰트 크기를 동적으로 변경할 수 있는 기능을 추가해 보도록 하겠습니다.
워드프레스 블로그에서 포스팅된 글의 본문 폰트 크기를 동적으로 변경하기
1. 본문 폰트 리사이저 코드 작성하기
포스팅된 본문 폰트의 크기를 동적으로 변경하기 위해서는 functions.php 에 해당 기능을 할 수 있는 코드를 추가해야 합니다. 폰트 리사이저는 타이틀과 디스크립션 사이에 위치시키도록 하겠습니다.
사용할 코드는 아래와 같습니다.
// 폰트 크기 조절 기능을 추가하는 함수
function add_font_resizer_script() {
// 단일 포스트 페이지에서만 실행
if (is_single()) {
// Font Awesome CSS 파일 로드
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
// JavaScript 코드 정의
$script = <<<SCRIPT
jQuery(document).ready(function($) {
// 폰트 크기 조절 버튼 HTML 생성
var fontResizerHtml = '<div id="font-resizer-container">' +
'<div class="container">' +
'<div id="font-resizer">' +
'<button id="font-decrease" aria-label="글자 크기 줄이기"><i class="fas fa-minus-circle"></i></button>' +
'<span>글자 크기</span>' +
'<button id="font-increase" aria-label="글자 크기 늘리기"><i class="fas fa-plus-circle"></i></button>' +
'</div></div></div>';
// 폰트 크기 조절 버튼 스타일 정의
var fontResizerStyle = '<style>' +
'.entry-meta { margin-bottom: 0 !important; }' +
'#font-resizer-container { width: 100%; background-color: #f8f9fa; border-bottom: 1px solid #e9ecef; margin-bottom: 25px; }' +
'#font-resizer-container .container { padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; max-width: 1140px; }' +
'#font-resizer { display: flex; align-items: center; padding: 10px 0; }' +
'#font-resizer button { background: none; border: none; font-size: 16px; color: #03c4eb; cursor: pointer; padding: 0 5px; }' +
'#font-resizer button:hover { color: #00b0bd; }' +
'#font-resizer span { margin: 0 10px; font-size: 14px; color: #333333; }' +
'@media (max-width: 1140px) { #font-resizer-container .container { max-width: 100%; } }' +
'</style>';
// 스타일을 head 태그에 추가
$('head').append(fontResizerStyle);
// 폰트 크기 조절 버튼을 entry-meta 클래스 뒤에 삽입
$('.entry-meta').after(fontResizerHtml);
// 글 내용 요소 선택 및 현재 폰트 크기 가져오기
var content = $(".entry-content");
var currentSize = parseInt(content.css("font-size"));
// 글자 크기 줄이기 버튼 클릭 이벤트
$("#font-decrease").on("click", function() {
if (currentSize > 12) { // 최소 크기 제한
currentSize -= 2;
content.css("font-size", currentSize + "px");
}
});
// 글자 크기 늘리기 버튼 클릭 이벤트
$("#font-increase").on("click", function() {
if (currentSize < 24) { // 최대 크기 제한
currentSize += 2;
content.css("font-size", currentSize + "px");
}
});
});
SCRIPT;
// jQuery에 인라인 스크립트로 추가
wp_add_inline_script('jquery', $script);
}
}
// wp_enqueue_scripts 훅에 add_font_resizer_script 함수 연결
add_action('wp_enqueue_scripts', 'add_font_resizer_script');
코드의 주요 사항은 아래와 같습니다.
- Font Awesome 아이콘을 사용합니다.
- 폰트 크기 조절 버튼의 HTML과 스타일을 동적으로 생성합니다.
- 생성된 버튼을 타이틀과 디스크립션 사이에 삽입니다.
- 글자 크기를 줄이거나 늘리는 기능을 JavaScript로 구현합니다.
- 글자 크기는 12px에서 24px 사이로 제한됩니다.
2. 본문 폰트 리사이저 코드 functions.php에 추가하기
위에서 작성한 코드가 정상적으로 작동하기 위해서는 functions.php의 맨 밑에 코드를 추가해야 합니다.
워드프레스 관리자 화면에서 ‘디자인’ → ‘테마 파일 편집기’ 로 이동한 다음, 오른쪽에 있는 functions.php 를 클릭하고, 위의 코드를 맨 밑에 추가합니다.
코드 추가가 완료되면 ‘파일 업데이트’를 클릭하여 적용합니다.
3. 폰트 리사이저 적용 결과 확인하기
아래는 functions.php에 위의 코드를 추가한 결과 화면입니다. ‘-‘를 클릭하면 본문 폰트 크기가 작아지고, ‘+’를 클릭하면 본문 폰트가 커지는 것을 확인할 수 있으실 겁니다.
오늘은 워드프레스 블로그에서 포스팅된 글의 본문 폰트 크기를 동적으로 변경하는 방법에 대해 알아보았습니다. 이번 글도 ‘워드프레스에서 코드 블록에 복사 버튼을 추가하는 방법’과 마찬가지로 사용자 편의성을 높이기 위해 적용한 기능입니다. 어렵지 않으니 필요하신 분들은 이 글을 참고하여 적용해 보시기 바랍니다.