워드프레스는 강력한 콘텐츠 관리 시스템이지만, 때로는 기본 테마나 에디터 기능만으로는 원하는 디자인과 사용자 경험을 구현하기 어려울 때가 있습니다. 특히, 제가쓰는 OnePress와 같은 인기 테마는 깔끔하지만, 세부적인 가독성이나 동적인 요소 추가는 별도의 커스터마이징이 필요하죠. 그래서, 이번참에 저도 커스터마이징을 한번 해보았습니다. 그래서, 이와 같은 글을 적게 되었습니다.이 글에서는 OnePress 테마의 가독성을 높이고, 동적인 스크롤 애니메이션을 추가하며, 페이지네이션 기능을 강화하는 방법까지, 워드프레스 블로그를 한 단계 업그레이드할 수 있는 다양한 CSS 및 JavaScript 커스터마이징 팁을 종합적으로 안내합니다. 이 가이드를 통해 여러분의 워드프레스 블로그가 검색 엔진에서 더 잘 발견되고, 방문자에게 더 나은 경험을 제공할 수 있도록 돕겠습니다.
1. OnePress 테마 가독성 및 UI/UX 개선 CSS
방문자가 글을 더 편안하게 읽고 사이트를 탐색할 수 있도록, OnePress 테마의 기본 스타일을 개선하는 CSS를 적용해 보세요.
본문 및 제목 스타일 개선
글의 가독성을 높이기 위해 본문 폰트 크기, 줄 간격, 색상 등을 조정하고, 제목(H1~H4)의 시각적 계층을 명확히 합니다. 구글 폰트 Noto Sans KR을 적용하여 한글 가독성을 높이는 것을 권장합니다.
/* ========== [본문 및 전체 텍스트 스타일] ========== */
body {
font-size: 16px;
line-height: 1.7;
color: #4a4a4a;
font-family: 'Noto Sans KR', sans-serif; /* 구글 폰트 Noto Sans KR 적용 예시 */
scroll-behavior: smooth; /* 부드러운 스크롤 */
}
.single-post .entry-content p,
.page .entry-content p {
font-size: 18px;
line-height: 1.8;
color: #222;
letter-spacing: 0.03em;
}
/* ========== [제목 스타일 H1~H4] ========== */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
margin-top: 1.5em;
margin-bottom: 0.5em;
line-height: 1.3;
}
.entry-content h2,
h2 {
font-size: 1.6em;
color: #1769aa; /* 강조 색상 */
font-weight: 600;
}
.entry-content h3,
h3 {
font-size: 1.3em;
color: #555555;
font-weight: 500;
}
.entry-content h4 {
font-size: 1.2em;
color: #444;
font-weight: 500;
}링크, 목록, 인용문, 강조 텍스트 스타일
링크, 목록, 인용문, 그리고 강조 텍스트는 콘텐츠의 구조와 정보를 명확히 전달하는 데 중요합니다.
/* ========== [링크 스타일] ========== */
.entry-content a {
color: #1769aa;
text-decoration: underline;
}
.entry-content a:hover {
color: #ff00ff; /* 호버 시 색상 변경 */
text-decoration: none;
}
/* ========== [목록 / 인용문 / 강조 텍스트] ========== */
.entry-content ul {
padding-left: 1.5em;
list-style-type: disc;
line-height: 1.7;
}
.entry-content blockquote {
font-style: italic;
background-color: #f9f9f9;
border-left: 4px solid #ff00ff; /* 강조 색상 */
padding: 1em 1.5em;
margin: 2em 0;
color: #555;
}
.entry-content .highlight {
background-color: #fff3cd; /* 강조 배경색 */
padding: 0.5em 1em;
border-left: 4px solid #ffc107; /* 강조 테두리 */
color: #856404;
margin: 1em 0;
}테이블, 코드 블록, 이미지 반응형 처리
테이블, 코드 블록, 이미지는 모바일 환경에서 깨지기 쉬우므로, 반응형 처리를 통해 모든 기기에서 최적화된 모습을 보여줍니다. 특히 코드 블록은 어두운 배경에 밝은 글씨로 가독성을 높였습니다.
/* ========== [테이블 스타일] ========== */
.entry-content table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
display: block; /* 모바일에서 가로 스크롤 가능하게 */
overflow-x: auto;
}
.entry-content table th,
.entry-content table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
/* ========== [코드 / pre 태그] ========== */
.entry-content pre,
.entry-content code {
font-family: 'Courier New', monospace;
background-color: #2d2d2d; /* 어두운 배경 */
padding: 5px 10px;
border-radius: 5px;
color: #f8f8f2; /* 밝은 글씨 */
overflow-x: auto;
}
.entry-content pre {
display: block;
white-space: pre-wrap;
margin: 1.5em 0;
}
/* ========== [이미지 반응형] ========== */
.entry-content img {
max-width: 100%;
height: auto;
display: block;
margin: 1.5em auto;
}버튼 및 헤더/네비게이션 메뉴 스타일
버튼과 헤더/네비게이션 메뉴는 사이트의 전반적인 인상과 직결됩니다. 통일된 디자인으로 전문성을 더합니다.
/* ========== [버튼 스타일] ========== */
.btn {
border-radius: 5px;
padding: 10px 25px;
font-weight: bold;
transition: all 0.3s ease;
}
.btn-theme {
background-color: #007bff;
color: #ffffff;
border: 1px solid #007bff;
}
.btn-theme:hover {
background-color: #0056b3;
border-color: #0056b3;
}
/* ========== [헤더 및 네비게이션 메뉴] ========== */
.site-header {
padding-top: 15px;
padding-bottom: 15px;
}
.main-navigation ul li a {
color: #333333;
font-weight: 500;
}
.main-navigation ul li a:hover {
color: #007bff;
}목차(Table of Contents) 스타일 강화
목차는 긴 글에서 방문자의 탐색을 돕는 중요한 요소입니다. 글자색을 진하게 하고, 호버 및 활성화 상태를 명확히 하여 가독성을 높입니다.
/* ========== [목차 (Table of Contents) 스타일 개선] ========== */
.toc-container {
background: #f8f9fa;
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px;
}
.toc_title {
font-weight: bold;
font-size: 18px;
color: #1769aa !important;
margin-bottom: 10px;
}
.toc_list li a {
color: #111 !important; /* 기존 #333보다 더 진하게 */
font-size: 16px;
line-height: 1.6;
font-weight: 500;
}
.toc_list li a:hover {
color: #ff00ff !important;
text-decoration: underline;
}
.toc_list li.active > a,
.toc_list li a.active {
color: #1769aa !important;
font-weight: bold;
}반응형 및 다크 모드 대응
모바일 환경과 다크 모드 사용자를 위한 스타일도 중요합니다.
/* ========== [반응형: 모바일 최적화] ========== */
@media screen and (max-width: 768px) {
.entry-content {
padding: 0 15px;
}
.section-padding {
padding-top: 30px;
padding-bottom: 30px;
}
h2 {
font-size: 28px;
}
.toc-container {
font-size: 15px;
}
}
/* ========== [다크 모드 대응] ========== */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}
.entry-content a {
color: #90caf9;
}
.entry-content blockquote {
background-color: #1e1e1e;
border-left-color: #bb86fc;
color: #ccc;
}
.entry-content pre,
.entry-content code {
background-color: #2d2d2d;
color: #f8f8f2;
}
.btn-theme {
background-color: #2196f3;
border-color: #2196f3;
color: #fff;
}
.btn-theme:hover {
background-color: #1769aa;
border-color: #1769aa;
}
.toc-container {
background-color: #1e1e1e;
border-color: #444;
}
.toc_list li a {
color: #ddd !important;
}
.toc_list li a:hover,
.toc_list li a.active {
color: #bb86fc !important;
}
}적용 방법:
워드프레스 관리자 페이지에서 디자인 → 사용자 정의하기 → 추가 CSS 메뉴로 이동하여 위 CSS 코드를 모두 붙여넣고 “게시” 버튼을 클릭합니다.
2. 동적인 스크롤 애니메이션 효과 추가
방문자가 스크롤을 내릴 때 이미지 썸네일, 제목, 요약 내용 등이 작게 보이다가 확대되는 동적인 효과를 추가하여 시각적인 재미를 더할 수 있습니다.
CSS (초기 상태 및 활성화 상태 정의)
/* 초기 상태: 작고 투명하게 */
.list-article-thumb,
.entry-title,
.entry-excerpt {
transform: scale(0.8);
opacity: 0;
transition: transform 0.5s ease, opacity 0.5s ease; /* 부드러운 전환 효과 */
}
/* 활성화 상태: 원 크기로 확대되고 불투명하게 */
.list-article-thumb.visible,
.entry-title.visible,
.entry-excerpt.visible {
transform: scale(1);
opacity: 1;
}
/* 이미지 호버 효과 유지 (기존 코드) */
.list-article-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.list-article-thumb:hover img {
transform: scale(1.05);
}JavaScript (스크롤 감지 및 클래스 추가/제거)
이 JavaScript 코드는 .list-article-thumb, .entry-title, .entry-excerpt 요소가 화면에 들어오면 .visible 클래스를 추가하고, 화면 밖으로 나가면 제거하여 애니메이션을 반복시킵니다.
document.addEventListener('DOMContentLoaded', function () {
// 애니메이션을 적용할 모든 요소 선택
const elements = document.querySelectorAll('.list-article-thumb, .entry-title, .entry-excerpt');
function checkVisibility() {
const windowHeight = window.innerHeight; // 현재 뷰포트 높이
elements.forEach(el => {
const rect = el.getBoundingClientRect(); // 요소의 위치 정보
// 요소의 상단이 뷰포트 안에 100px 이하로 들어오고, 하단이 뷰포트 아래 100px 이상일 때 활성화
if (rect.top < windowHeight - 100 && rect.bottom > 100) {
el.classList.add('visible');
} else {
// 요소가 화면 밖으로 나가면 'visible' 클래스 제거
el.classList.remove('visible');
}
});
}
// 스크롤 이벤트 리스너 등록
window.addEventListener('scroll', checkVisibility);
// 페이지 로드 시에도 한 번 체크하여 초기 상태 설정
checkVisibility();
});JavaScript 삽입 위치:
워드프레스에서 자바스크립트 코드는 일반적으로 functions.php 파일을 통해 안전하게 등록하거나, 외모 → 테마 편집기에서 footer.php 파일의 </body> 태그 바로 위에 <script> 태그로 직접 삽입하는 것이 좋습니다. 이는 페이지 콘텐츠가 먼저 로드된 후 스크립트가 실행되어 사용자 경험을 개선하고 DOM 요소 접근 오류를 방지하기 위함입니다.
3. 페이지 번호 페이징 추가 (OnePress 테마)
글이 많아질수록 방문자가 원하는 정보를 찾기 어려울 수 있습니다. “이전글/다음글” 링크만으로는 불편할 수 있으므로, 페이지 번호가 있는 페이징 네비게이션을 추가하여 탐색을 용이하게 할 수 있습니다.
방법 1: 테마 파일 직접 수정 (권장: 자식 테마 사용)
OnePress 테마의 index.php, archive.php, home.php 또는 template-parts/content-blog.php 파일에 있는 the_posts_navigation() 함수를 the_posts_pagination() 함수로 교체합니다.
수정 전:
<?php the_posts_navigation(); ?>수정 후:
<?php
the_posts_pagination( array(
'mid_size' => 2, // 현재 페이지 양 옆으로 보여줄 페이지 번호 개수
'prev_text' => __('« 이전'), // 이전 페이지 텍스트
'next_text' => __('다음 »'), // 다음 페이지 텍스트
) );
?>파일 위치:
워드프레스 테마 파일은 일반적으로 /wp-content/themes/your-theme-name/ 경로에 있습니다. 관리자 페이지에서는 외모 → 테마 편집기를 통해 접근할 수 있습니다.
자식 테마 사용 권장:
원본 테마 파일을 직접 수정하면 테마 업데이트 시 변경 사항이 사라질 수 있습니다. 안전하게 커스터마이징하려면 자식 테마(Child Theme)를 생성하여 필요한 파일만 복사하여 수정하는 것이 가장 좋습니다. 워드프레스 자식 테마 생성 가이드와 같은 자료를 참고해 보세요.
방법 2: 플러그인 활용
“WP-PageNavi”와 같은 워드프레스 페이징 플러그인을 설치하면 코드를 직접 수정하지 않고도 쉽게 페이지 번호 네비게이션을 구현할 수 있습니다. 플러그인 설치 후, 플러그인 설정에 따라 테마 파일에 <?php wp_pagenavi(); ?> 함수를 삽입해야 할 수도 있습니다.
4. SEO 최적화를 위한 추가 팁
이 블로그 글의 SEO 점수를 더욱 높이기 위해 다음 사항들을 고려해 보세요.
메타 설명(Meta Description) 및 제목 태그(Title Tag) 최적화
워드프레스 SEO 플러그인(예: Yoast SEO, Rank Math 등)을 사용하여 이 글에 대한 매력적인 메타 설명과 제목 태그를 직접 작성하는 것이 좋습니다. 검색 결과 페이지에서 클릭률(CTR)에 큰 영향을 미치므로, 주요 키워드를 포함하되 사용자에게 흥미를 유발할 수 있도록 작성하세요.
- 예시 메타 설명: “OnePress 테마 워드프레스 블로그를 위한 완벽 커스터마이징 가이드! 가독성 향상, 스크롤 애니메이션, 페이지네이션 추가로 사용자 경험과 SEO를 동시에 잡으세요.”
- 예시 제목 태그: “OnePress 테마 커스터마이징: 워드프레스 블로그 가독성 & 기능 강화 (SEO 최적화)”
내부 링크 및 외부 링크 추가
- 내부 링크: 블로그 내 다른 관련 글(예: 워드프레스 SEO 플러그인 활용법, 워드프레스 자식 테마 생성 방법)으로 연결되는 내부 링크를 추가하면 사이트 내 페이지 간의 연결성을 높이고 크롤링을 돕습니다.
- 외부 링크: 참고 자료(예: 워드프레스 공식 문서, OnePress 테마 공식 웹사이트)로 연결되는 신뢰할 수 있는 외부 링크를 추가하는 것도 좋습니다.
이미지 최적화
글에 이미지를 추가한다면, 이미지 파일 크기를 최적화하고, 관련성 있는 alt 텍스트를 반드시 추가하여 이미지 검색 SEO를 강화하세요. alt 텍스트는 이미지를 설명하는 텍스트로, 시각 장애인 사용자에게 정보를 제공하고 검색 엔진이 이미지를 이해하는 데 도움을 줍니다.
URL 구조
글의 URL이 간결하고 주요 키워드를 포함하도록 설정하는 것이 좋습니다 (예: yourdomain.com/onepress-theme-customization). 워드프레스 설정 → 고유주소에서 포스트 이름으로 설정하는 것을 권장합니다.
결론
이 가이드에서 제시된 CSS 및 JavaScript 코드를 활용하면 OnePress 테마를 사용하는 워드프레스 블로그의 가독성, 시각적 매력, 사용자 편의성을 크게 향상시킬 수 있습니다. 각 코드를 워드프레스의 “추가 CSS” 섹션이나 테마 파일(자식 테마 권장)에 적용하여 멋진 블로그를 만들어 보세요!
또한, 이 글에서 제시된 SEO 최적화 팁(메타 설명, 내부/외부 링크, 이미지 최적화, URL 구조 등)을 적용하여 검색 엔진에서의 가시성을 높이고 더 많은 방문자를 유치할 수 있습니다. 블로그의 페이지 로딩 속도를 지속적으로 관리하고, 정기적으로 콘텐츠를 업데이트하여 최신 정보를 유지하는 것도 중요합니다.
궁금한 점이 있거나 추가적인 커스터마이징이 필요하다면 언제든지 문의해 주세요. 성공적인 블로그 운영을 응원합니다!