워드프레스 새 글 New 아이콘 카테고리에 추가하는 방법

네이버나 티스토리에는 New 아이콘 표시 기능이 기본적으로 포함되어 있지만, 워드프레스에는 없어서 따로 설정이 필요하다.

찾아보면 관련 플러그인이 있을 지는 모르겠는데, AI에게 물어서 php와 css 코드로만 기능을 추가하였다.

GeneratePress 테마 기준으로 대시보드 – Appearance – Theme File Editor를 선택하고 현재 적용된 차일드 테마의 Functions.php 화면을 열어 보자. 참고로 적용한 테마에 따라 진입 경로는 다를 수 있으며, Functions.php를 잘못 건드리면 블로그 기능이 마비될 수 있으므로 작업은 항상 신중해야 한다.

GeneratePress 차일드 테마 설치 이유와 방법


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
add_filter(‘wp_list_categories’, ‘add_new_badge_to_categories’, 10, 2);
function add_new_badge_to_categories($output, $args) {
    // 카테고리 항목에서 링크와 글 수까지 함께 매칭
    preg_match_all(‘/(<a href=”([^”]+)”[^>]*>[^<]+<\/a>\s*\(\d+\))/’, $output, $matches, PREG_SET_ORDER);
 
    foreach ($matches as $match) {
        $full_item = $match[1]; // <a …>카테고리명</a> (숫자)
        $link = $match[2];
 
        // 카테고리 이름 추출
        preg_match(‘/>([^<]+)<\/a>/’, $full_item, $name_match);
        if (!isset($name_match[1])) continue;
        $name = trim($name_match[1]);
 
        // 카테고리 객체 가져오기
        $category = get_term_by(‘name’, $name, ‘category’);
        if (!$category) continue;
 
        // 최근 포스트 확인
        $recent_posts = get_posts([
            ‘category’ => $category->term_id,
            ‘numberposts’ => 1
        ]);
 
        if ($recent_posts) {
            $latest = strtotime($recent_posts[0]->post_date);
            $now = time();
            $diff_days = ($now – $latest) / 86400;
 
            // 5일 이내면 N 배지 표시
            if ($diff_days <= 5) {
                $new_output = str_replace(
                    $full_item,
                    $full_item . ‘ <span class=”n-badge”>N</span>’,
                    $output
                );
                $output = $new_output;
            }
        }
    }
 
    return $output;
}
cs

위 코드에서 새 글 작성 아이콘이 표시되는 기간은 5일로 해두었다. 만약 기간을 바꾸려면 if ($diff_days <= 5) 여기서 숫자 5를 변경하면 된다.


1
2
3
4
5
6
7
8
9
10
11
.n-badge {
    background: #ff5438;
    color: white;
    font-size: 10px;
    padding: 0px 2px;
    margin-left: 0px;
    border-radius: 3px;
      vertical-align: middle; 
    position: relative;
    top: -1px;
}
cs

이후 워드프레스 CSS 입력란으로 온 뒤 위의 코드를 입력해 보자.


이후 위처럼 새 글 작성한 카테고리 이름 옆에 N 아이콘이 나온다면 작업은 성공이다. 아이콘 색깔이나 디자인은 취향에 따라 CSS 코드를 변경하면 된다.

AI에게 추가로 물어보니 해당 코드는 블로그 방문자 수가 수천 명 수준일 때 페이지 로딩 속도에 조금 영향이 있을 수 있다고 한다. 하지만 카테고리 수가 적거나 그 정도의 방문자 규모가 안 된다면 캐시 플러그인 정도만 사용해도 딱히 신경 쓰지 않아도 된다는 것 같다.

사실 블로그는 글 콘텐츠의 양과 질이 가장 중요하므로 N 아이콘은 굳이 추가하지 않아도 상관은 없다. 다만, 새 글 아이콘이 있으면 방문자에게 활성화된 블로그라는 인상을 줄 수 있어서 필요하다면 설정하는 것도 좋겠다.

워드프레스 마스터 가이드
블로그는 예쁜 디자인보다 글쓰기 본질이 중요한 이유
워드프레스 블로그를 시작하게 된 이유
워드프레스 시작은 공유 호스팅도 충분한 이유

Leave a Comment