포스팅된 글이 몇 개 안 될 때는 모르겠지만, 글이 많아지면 화면 하단에 페이지 번호가 있으면 이동하기 편해지기 때문에 사용자가 더 오랜 시간 블로그에 머물게 할 수 있습니다. 이 글에서는 워드프레스 OnePress 테마에 플러그인 없이 페이지 번호 페이지네이션 추가 방법에 대해 알아보겠습니다.
워드프레스 Onepress 테마에 플러그인 없이 페이지 번호 페이지네이션 추가 방법
인터넷을 하다 보면, 아래 그림과 같이 페이지 하단에 페이지 번호가 있어 손쉽게 페이지 간 이동을 할 수 있는 것을 볼 수 있습니다. 이런 기능을 페이지네이션이라고 하는데, 페이지 번호가 있으면 사용자가 현재 읽고 있는 글이 괜찮다고 판단할 경우 다른 글도 보게 될 확률이 높아집니다. 그래서 대부분의 워드프레스 테마에서 이 기능을 지원하고 있습니다.
제가 운영하는 워드프레스 블로그에는 OnePress 테마 무료 버전이 적용되어 있는데, 아쉽게도 페이지네이션 기능을 지원하지 않습니다.
WP-Pagenavi 플러그인을 적용하면 된다고 해서 설치하고 적용해 보았지만 잘 되지 않았고, OnePress 테마의 페이지네이션을 구글과 네이버에서 검색해 보았지만, 만족할 만한 해결 방법을 찾지 못했습니다. 그래서 직접 추가해 보기로 하였고, 이 글에서 그 과정과 방법을 자세히 소개하도록 하겠습니다.
OnePress 테마가 적용된 블로그의 하단을 보면, 아래 그림과 같이 ‘이전 글’과 ‘다음 글’밖에 없어 다른 페이지로 이동하는 것이 매우 불편하게 되어 있습니다.
지금부터 Onepress 테마에 페이지 번호를 추가해 보도록 하겠습니다. 페이지네이션 추가 시 조건은 아래와 같습니다.
- 기본적으로 Onepress 의 구조를 유지할 것
- 자바스크립트를 활용하여 기능을 추가할 것
자바스크립트로 원하는 페이지네이션 기능을 구현하기 위해 Onepress 테마를 분석해 보니 ‘이전 글’ 과 ‘다음 글’ 의 링크가 ‘https://블로그URL.com/page/2/‘ 형식으로 되어 있더군요. 즉, 원하는 페이지로 이동하려면 링크의 끝에 있는 ‘/’ 과 ‘/’ 사이의 숫자를 원하는 페이지 번호로 변경하면 되기 때문에 생각보다 쉽게 해결이 가능할 것 같았습니다.
어떻게 개발해야 할지 기본적인 방향이 정해졌으니, 제가 필요로 하는 페이지네이션을 위한 조건을 정리해 보았습니다.
- 지금까지 포스팅 된 글의 갯수는 자동으로 가져올 것
- 한 페이지당 표시되는 포스팅 갯수는 수동으로 지정 (여기서는 10개로 설정)
- 한 페이지에 5페이지씩 표시하고, 처음과 끝으로 쉽게 이동할 수 있도록 맨 앞에 ‘<<’ 과 맨 뒤에 ‘>>’를 추가
- 현 페이지 세트 기준으로 앞뒤에 페이지가 더 있을 경우 ‘<<’ 과 페이지 사이에 ‘…’ 을 추가하고, 페이지와 ‘>>’ 사이에 ‘…’ 추가
즉, ‘<< … 6 7 8 9 10 … >>’ 의 형식으로 표시할 것. - ‘…’ 을 클릭하면 5페이지 단위로 이동
위의 조건대로 작성한 자바스크립트 코드는 아래와 같습니다.
<script>
document.addEventListener('DOMContentLoaded', function() {
// 'nav-links' 클래스를 가진 요소를 찾습니다.
var navLinks = document.querySelector('.nav-links');
// 'pagination-container'와 'posts-container' div를 생성합니다.
var paginationContainer = document.createElement('div');
var postsContainer = document.createElement('div');
// 각 div에 id와 내용을 설정합니다.
paginationContainer.id = "pagination-container";
postsContainer.id = "posts-container";
// 'nav-links' 다음에 각 div를 삽입합니다.
navLinks.parentNode.insertBefore(paginationContainer, navLinks.nextSibling);
navLinks.parentNode.insertBefore(postsContainer, paginationContainer.nextSibling);
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const postsPerPage = 10; // 페이지당 글 수 설정
let currentPage = getCurrentPage(); // URL에서 현재 페이지 번호 추출
// 총 글 수를 가져와서 총 페이지 수 계산 및 페이지네이션 초기화
fetch('/wp-json/wp/v2/posts?per_page=1')
.then(response => response.headers.get('X-WP-Total'))
.then(totalPosts => {
const totalPages = Math.ceil(totalPosts / postsPerPage);
generatePagination(totalPages, currentPage); // 현재 페이지 기반으로 페이지네이션 생성
})
.catch(error => console.error('Error fetching total posts:', error));
function getCurrentPage() {
// URL에서 페이지 번호 추출, 없으면 1 반환
const regex = /\/page\/(\d+)\//;
const match = window.location.href.match(regex);
return match ? parseInt(match[1], 10) : 1;
}
function generatePagination(totalPages, currentPage) {
const container = document.getElementById('pagination-container');
container.innerHTML = ''; // 페이지네이션 컨테이너 초기화
const ul = document.createElement('ul');
ul.className = 'pagination';
addPageItem(ul, '<<', 1, currentPage > 1);
let startPage = (Math.floor((currentPage - 1) / 5) * 5) + 1;
let endPage = Math.min(startPage + 4, totalPages);
// 첫 번째 페이지 세트가 아닐 경우, '처음' 바로 뒤에 '…' 추가
if (startPage > 1) {
addPageItem(ul, '…', startPage - 1, true);
}
for (let page = startPage; page <= endPage; page++) {
addPageItem(ul, page, page, currentPage !== page);
}
// 마지막 페이지 세트에 도달하지 않았을 경우, '마지막' 바로 앞에 '…' 추가
if (endPage < totalPages) {
addPageItem(ul, '…', endPage + 1, true);
}
addPageItem(ul, '>>', totalPages, currentPage < totalPages);
container.appendChild(ul);
}
function addPageItem(ul, text, page, clickable = true) {
const li = document.createElement('li');
const a = document.createElement('a');
a.textContent = text;
if (clickable) {
a.href = `https://www.zisikbug.com/page/${page}/`;
a.addEventListener('click', function(e) {
e.preventDefault();
window.location.href = this.href;
});
} else {
a.classList.add('active'); // 현재 페이지를 활성화 상태로 표시
}
li.appendChild(a);
ul.appendChild(li);
}
});
</script>
위의 코드를 간단히 설명하면,
- Onepress 테마의 하단에 ‘이전 글’과 ‘다음 글’이 위치하는 부분을 찾은 후,
- 바로 아래에 페이지 번호가 추가될 수 있도록 ‘pagination-container’ 를 추가하고,
- 해당 위치에 ‘페이지네이션을 위한 조건’에 따라 페이지 번호를 생성한 후, addPageItem 을 통해 삽입하는 로직입니다.
코드중 ‘const postsPerPage = 10; // 페이지당 글 수 설정’ 으로 되어 있는 부분이 있는데, 여기를 워드프레스 관리자 화면에서 ‘설정’ → ‘읽기’를 클릭한 후, ‘페이지당 보여줄 글의 수’에 있는 갯수로 수정해 주셔야 합니다.
자바스크립트 코드가 준비되었으니, Onepress 테마 하단에 페이지 번호를 추가하기 위해 <footer> </footer> 사이에 위의 코드를 복사하여 붙여넣기 합니다. <footer></footer> 사이에 코드를 추가하는 방법은 아래 링크를 참고하시면 쉽게 추가할 수 있습니다.
워드프레스 블로그 개설을 위한 모든 것 – Head&Footer Code 플러그인
준비된 자바스크립트 코드를 FOOTER Code에 붙여넣은 후, 화면을 아래로 스크롤하여 ‘변경사항 저장’을 클릭하면 코드가 적용됩니다.
다음으로 페이지 번호의 스타일을 변경하는 CSS 코드를 추가하도록 하겠습니다. CSS 코드는 아래와 같습니다.
.pagination {
display: flex;
list-style: none;
padding: 0;
justify-content: center;
flex-wrap: wrap;
}
.pagination li {
margin: 0 5px;
}
.pagination a {
padding: 5px 10px;
text-decoration: none;
border: 1px solid #ddd;
color: #333;
}
.pagination a.active {
background-color: #007bff;
color: white;
border-color: #007bff;
}
.pagination a:hover {
background-color: #ddd;
}
위의 코드를 워드프레스 관리자 화면에서 ‘외모’ → ‘추가 CSS’를 클릭하고, 아래와 같이 붙여넣기 한 후 ‘발행함’을 클릭하여 적용시킵니다.
Onepress 테마를 적용한 블로그 하단에 페이지 번호를 추가하기 위한 자바스크립트와 CSS 코드의 적용이 완료되었으니, 결과를 확인해 보도록 하겠습니다.
아래는 페이지네이션이 추가된 제 블로그 화면입니다. 이제부터 페이지 번호를 클릭하면 쉽게 원하는 페이지로 이동할 수 있어, 사용자가 좀 더 오래 제 블로그에 머물 수 있게 되었습니다. 덤으로 블로그가 더 보기 좋게 되었네요.
오늘은 워드프레스 OnePress 테마에 플러그인 없이 페이지 번호(페이지네이션)를 추가하는 방법에 대해 알아보았습니다. 워드프레스 블로그를 운영하면서 하나씩 원하는 기능을 추가할 때마다 블로그에 대한 애정이 더 커지는 것 같습니다. 기억하셔야 할 것은 이렇게 워드프레스를 꾸미는 것보다 꾸준한 글쓰기가 더 중요하다는 점입니다. 이 글이 여러분의 블로그 운영에 도움이 되기를 바랍니다.