워드프레스 Onepress 테마 카테고리 이름 뒤에 포스팅 개수 표시하기

워드프레스 Onepress 테마를 적용해 블로그를 운영하면서 아쉬운 점이 생길 때마다 하나씩 바꿔나가고 있습니다. 오늘은 카테고리 이름 뒤에 포스팅 개수가 있으면 방문자에게 도움이 될 것 같다는 생각이 들더군요. 이 글에서 Onepress 테마 카테고리 이름 뒤에 포스팅 개수 표시 방법에 대해 알아보겠습니다.

워드프레스 Onepress 테마 카테고리 이름 뒤에 포스팅 개수 표시하기

워드프레스 Onepress 테마는 간결해서 제가 좋아하는 테마입니다. 그런데 간결해도 너무 간결해서 볼 때마다 뭔가 자꾸 추가하고 싶은 욕구가 생기게 하는 단점이 있습니다. 오늘도 블로그를 둘러보다가 아래 그림과 같이 카테고리 이름만 있는 것보다, 이름 뒤에 포스팅 개수가 표시되면 방문객이 더 오래 저의 블로그에 머물지 않을까 하는 생각이 들었습니다. 이 글에서 카테고리 이름 뒤에 포스팅 개수 표시 방법을 상세히 설명드리도록 하겠습니다.

이 글은 이전에 작성했던 ‘카테고리 이름 앞에 기호 붙이기’에서 사용한 자바스크립트 코드를 개선한 것이기 때문에, 아래 링크를 통해 그 글을 먼저 읽는 것이 도움이 되실 겁니다.

워드프레스 Onepress 테마 최신 글과 카테고리 제목 앞에 기호 붙이기

카테고리 이름 뒤에 포스팅 개수를 표시하려면 자바스크립트를 활용해야 합니다. 그렇게 어렵지 않으니 따라해 보세요.

먼저 카테고리별로 포스팅된 개수를 알아야 하는데, 워드프레스 REST API에서는 카테고리 이름 대신 카테고리 ID를 사용하여 글을 필터링합니다. 때문에 카테고리 이름에 대응하는 카테고리 ID를 먼저 알아내야 합니다.

저의 블로그에 있는 ‘IT Skill’, ‘Essential Knowledge’, ‘Blogging Insight’ 카테고리 ID를 확인해 보도록 하겠습니다.

워드프레스 관리자 화면에서 ‘글’ → ‘카테고리’를 순서대로 클릭한 후,
③과 같이 카테고리 이름 위에 마우스를 가져가면
④번의 위치에서 tag_ID를 확인할 수 있습니다.

등록되어 있는 모든 카테고리의 ID를 확인해서 기록합니다.

저의 경우 확인한 3개 카테고리의 ID는 다음과 같습니다.

'IT Skill': 12,
'Blogging Insight': 130,
'Essential Knowledge': 131

카테고리별 ID를 확인하였으니, 해당 내용을 반영하여 자바스크립트 코드를 수정합니다.

▷ 변경 전 코드

    // 카테고리 링크 처리
    var categoryLinks = document.querySelectorAll('.wp-block-categories-list.wp-block-categories li a');
    categoryLinks.forEach(function(link) {
        link.innerText = '▣ ' + link.innerText;
        link.style.color = '#061D7A';
    });

▷ 변경 후 코드

    // 카테고리 링크의 부모 요소를 찾아서 순서를 역순으로 재배치
    const categoriesList = document.querySelector('.wp-block-categories-list.wp-block-categories');
    if (categoriesList) {
        let items = Array.from(categoriesList.children);
        items.reverse().forEach(item => categoriesList.appendChild(item));
    }

    // 카테고리 링크 처리 및 포스팅 글의 개수 추가
    var categoryLinks = document.querySelectorAll('.wp-block-categories-list.wp-block-categories li a');
    categoryLinks.forEach(function(link) {
        const categoryMap = {
            'IT Skill': 12,
            'Blogging Insight': 130,
            'Essential Knowledge': 131,
        };
        const categoryName = link.innerText;
        const categoryId = categoryMap[categoryName];

        if (categoryId) {
            let apiUrl = `/wp-json/wp/v2/posts?per_page=1&categories=${categoryId}`;
            fetch(apiUrl)
              .then(response => response.headers.get('X-WP-Total'))
              .then(totalPosts => {
                  link.innerText = `▣ ${categoryName} (${totalPosts})`; // 포스팅 개수 추가
                  link.style.color = '#061D7A';
              });
        }
    });

위의 코드에서 아래 부분을 여러분의 카테고리 이름과 ID로 변경하셔야 합니다.

const categoryMap = {
    'IT Skill': 12,
    'Blogging Insight': 130,
    'Essential Knowledge': 131,
};

만약 ‘워드프레스 Onepress 테마 최신 글과 카테고리 제목 앞에 기호 붙이기’ 의 코드를 사용하는 것이 아니라, 카테고리 이름 뒤에 포스팅 글 개수만 추가하고 싶다면 아래 코드를 사용하세요.

<script>
document.addEventListener('DOMContentLoaded', function() {
// 카테고리 링크의 부모 요소를 찾아서 순서를 역순으로 재배치
    const categoriesList = document.querySelector('.wp-block-categories-list.wp-block-categories');
    if (categoriesList) {
        let items = Array.from(categoriesList.children);
        items.reverse().forEach(item => categoriesList.appendChild(item));
    }

    // 카테고리 링크 처리 및 포스팅 글의 개수 추가
    var categoryLinks = document.querySelectorAll('.wp-block-categories-list.wp-block-categories li a');
    categoryLinks.forEach(function(link) {
        const categoryMap = {
            'IT Skill': 12,
            'Blogging Insight': 130,
            'Essential Knowledge': 131,
        };
        const categoryName = link.innerText;
        const categoryId = categoryMap[categoryName];

        if (categoryId) {
            let apiUrl = `/wp-json/wp/v2/posts?per_page=1&categories=${categoryId}`;
            fetch(apiUrl)
              .then(response => response.headers.get('X-WP-Total'))
              .then(totalPosts => {
                  link.innerText = `▣ ${categoryName} (${totalPosts})`; // 포스팅 개수 추가
                  link.style.color = '#061D7A';
              });
        }
    });
});
</script>

위의 자바스크립트 코드를 head & footer 플러그인의 ‘Head Code’에 반영한 후 화면을 아래로 스크롤하여 ‘변경사항 저장’을 클릭하면 설정이 적용됩니다.

자바스크립트를 적용한 결과는 아래와 같습니다. 원하는 대로 카테로리 이름 뒤에 포스팅 개수가 추가되었습니다.

Onepress 테마 카테고리 이름 뒤에 포스팅 개수 표시가 되도록 수정한 결과입니다

오늘은 워드프레스 Onepress 테마에서 카테고리 이름 뒤에 포스팅 개수 표시 방법을 자세히 알아보았습니다. 카테고리별 포스팅 개수를 표시하면 검색을 통해 블로그로 유입된 방문자에게 관련 글이 얼마나 있는지를 알려줄 수 있기 때문에, 블로그에 머무는 시간을 늘릴 수 있습니다. Onepress 테마를 사용하시는 분들이라면 이 글을 참고해서 적용해 보시길 바랍니다.