워드프레스 최신 글에 New 라벨 표시하기

워드프레스 최신 글 목록에서 최근 발행된 글 제목 옆에 New 라벨을 표시하고 싶은 경우가 있을 수 있습니다. 그런 경우 the_title 훅을 사용하여 최신 글 제목에 신규 라벨 또는 아이콘을 표시할 수 있습니다.

워드프레스 최신 글에 New 라벨 표시하기

일부 티스토리 스킨에서는 최신 글 리스트에서 최근에 발행된 글의 제목에 New 라벨 또는 아이콘을 표시하는 경우가 있습니다.

워드프레스에서는 몇 가지 방법으로 가능합니다.

워드프레스 훅(Hook)을 사용하여 최신 글 타이틀에 New 라벨 추가하기

최신 글 리스트 페이지에서 최근 3일 이내에 발행된 포스트에 New 라벨을 표시하도록 해 보았습니다. 이렇게 New 라벨을 표시하고 싶은 경우 테마의 함수 파일에 다음과 같은 코드를 추가할 수 있습니다.

// 전면 페이지와 아카이브 페이지에서 최신 글에 New 라벨 표시하기 

add_filter('the_title', 'my_new_icon_title', 10, 2);
function my_new_icon_title($title, $id){
    // If it's not the front page or an archive page, return the original title.
   // 전면 페이지 또는 아카이브 페이지(카테고리, 태그 페이지 등)가 아닌 경우 원래 제목을 반환
    if (!is_front_page() && !is_archive()) {
        return $title;
    }

    // If it's not a post, return the original title.
    // 포스트가 아닌 경우 본래 제목 표시
    if (get_post_type($id) !== 'post') {
        return $title;
    }

    $date = get_post_time('U', true);
    // Check if the post was published within the last 259200 seconds (3 days).
    // 글이 발행된지 3일(259200초) 이내인지 체크
    if ((current_time('timestamp') - $date) <= 259200) {
       return $title . ' <span class="new-label">New</span>';
    }

    return $title;
}

만약 24시간 이내에 발행된 글의 제목에만 라벨을 표시하려면 상기 코드에서 숫자 "259200"를 "86400"으로 변경합니다. 숫자는 초를 의미하며 1일의 경우 60x60x24=86400이 됩니다. 2일 또는 7일 등으로 바꾸는 경우 이 숫자값을 적절히 변경할 수 있습니다.

상기 코드를 차일드 테마 내의 함수 파일(functions.php)에 추가하시기 바랍니다. 차일드 테마를 만들지 않고 부모 테마의 함수 파일에 직접 코드를 추가할 경우 추후 테마 업데이트 시 추가된 코드가 사라집니다.

New 라벨의 스타일은 CSS를 사용하여 조정할 수 있습니다. 예:

/* new 라벨 */

.new-label {
  color: red;
  font-size: 0.5em;
  margin-left: 5px;
}

GeneratePress 테마에서는 상기 그림의 New 라벨과 비슷하게 표시됩니다. 다른 테마에서도 비슷하게 적용이 가능합니다. (테마에 따라 글자 크기 등이 조금 달라질 수 있을 것입니다.)

자바스크립트를 사용하여 New 라벨 추가하기

엘리멘터 프로의 Posts 위젯이나 직접 코드를 만들어 글 목록을 표시하는 등 the_title 필터를 사용하여 포스트 타이틀을 제어할 수 없는 경우에는 자바스크립트를 사용하여 New 라벨이나 아이콘을 표시하는 것을 고려해 볼 수 있습니다.

예를 들어, 다음은 최신 글 리스트에서 첫 페이지 페이지의 글 리스트에서만 최신 글 제목 옆에 New 라벨을 추가하는 기능을 합니다.

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Check if the URL has the pagination pattern
    if (!window.location.href.match(/page\/\d+/)) {
        // 1. Get all articles from the page
        const articles = document.querySelectorAll('article');

        articles.forEach(article => {
            // 2. For each article, fetch the published date
            const publishedDateElem = article.querySelector('.entry-date.published');
            
            // Check if the publishedDateElem exists
            if (publishedDateElem) {
                const publishedDate = new Date(publishedDateElem.getAttribute('datetime'));
                
                // 3. Get the current date and calculate the difference in days
                const currentDate = new Date();
                const timeDiff = currentDate - publishedDate;
                const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));

                // 4. If the difference is less than or equal to 2 days, append "New" label to the title
                if (dayDiff <= 2) {
                    const entryTitle = article.querySelector('.entry-title');
                    const newLabel = document.createElement('span');
                    newLabel.textContent = " New";
                    
                    // Add the 'new-label' class to the element
                    newLabel.classList.add('new-label');

                    entryTitle.appendChild(newLabel);
                }
            }
        });
    }
});
</script>

코드는 상황에 따라 적절히 변경하시기 바랍니다. 위의 코드는 발행일과 현재 날짜를 비교하여 2일 이내에 발행되었다면 New 라벨이 표시됩니다.

PHP 코드를 이용할 경우 서버 사이드에서 작동하지만, 자바스크립트를 사용하면 서버 사이드 렌더링이 끝난 후에 렌더링이 되기 때문에 조금 지연되어 라벨이 추가되는 것처럼 보일 수 있습니다.