게시일: 발행 수정 글쓴이 Mincheol Im

[해결] 워드프레스 글 발행일, 수정일 함께 표시하는 테마 편집 방법

워드프레스 블로그에 발행된 글은 발행한 날짜를 표시한다. 처음 발행한 날짜는 이후 글 내용을 고쳐 업데이트해도 기본적으로 바뀌지 않는다. 기존 글의 내용에 변화가 있을 때, 이를 나타내기 위해 고친 시점을 글 제목 위치에 함께 표시하면 좋겠다는 생각이 들었다. 이 글에서는 내가 사용 중인 워드프레스 기본 테마 Twenty Seventeen을 기준으로 이렇게 글 발행일, 수정일을 함께 표시하는 테마 편집 방법을 설명한다.

이 글의 안내대로 하면 다음 그림처럼 A 또는 B 영역에 발행일과 별개로 수정일시를 추가할 수 있다.

Twenty Seventeen 테마를 사용하는 mincheol.im 블로그의 글 수정일시가 제목 윗줄(A)과 아랫줄(B)에 추가된 모습.

수정되지 않은 Twenty Seventeen 테마는 글 제목 위치 앞에 발행일을 표시하고 있다. 워드프레스 테마의 functions.php 파일을 수정해 php 코드 몇 줄을 추가하는 것으로, 발행일 위치에 수정일을 나란히 표시할 수 있다. 일반적인 테마 파일 수정 시 원본에 해당하는 부모(parent) 테마를 건드리지 않기 위해 자식(child) 테마를 생성하고, 자식 테마의 functions.php 파일을 수정하는 것이 권장된다.

자식 테마를 생성하는 방법은 인터넷에서 쉽게 찾아 볼 수 있으므로 이 글의 설명은 자식 테마를 이미 생성한 것으로 가정하고 안내하기로 한다. 워드프레스 관리자 화면의 ‘모양’에 ‘테마 파일 편집기’로 들어가 현재 사용 중인 자식 테마의 functions.php 파일을 열고, 끝부분에 아래 코드를 추가하면 된다. 코드 추가 후 저장한 뒤 위 이미지의 A 영역처럼 보이는 것을 확인할 수 있다.

// 포스팅 수정일, 제목 위에 표시, 부모테마 inc/template-tags.php 파일 내 twentyseventeen_time_link() 함수 덮어쓰기
function twentyseventeen_time_link() {
    $u_time = get_the_time('U');
    $u_modified_time = get_the_modified_time('U');
    
    // 기본적으로 작성일을 표시
    $time_string = '발행일 <time class="entry-date published" datetime="%1$s">%2$s.</time> ';

    // 수정일 변수를 기본값으로 설정 (경고 방지)
    $updated_date = '';
    $updated_time = '';

    // 작성일과 수정일이 1일(86400초) 이상 차이가 날 경우 수정일 추가
    if ( $u_modified_time >= $u_time + 86400 ) {
        $updated_date = get_the_modified_time('Y-m-d');
        $updated_time = get_the_modified_time('a g:i');
        $time_string .= ' 수정일시 <time class="updated published" datetime="%3$s">%4$s.</time> ';
    }

    // 변수를 실제 데이터로 치환
    $time_string = sprintf(
        $time_string,
        get_the_date( DATE_W3C ),   // 작성일 (ISO 형식)
        get_the_date(),             // 작성일 (일반 형식)
        $updated_date ? get_the_modified_date( DATE_W3C ) : '', // 수정일 (ISO 형식, 없으면 빈 값)
        $updated_date ? ($updated_date . ', ' . $updated_time) : '' // 수정일 (YYYY-MM-DD, AM/PM 시간, 없으면 빈 값)
    );

    // 최종 출력 형태
    return sprintf(
        __( '<span class="screen-reader-text">게시일:</span> %s', 'twentyseventeen' ),
        '<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>'
    );
}

위 코드는 twentyseventeen_time_link() 함수 동작을 정의한다. 이 함수는 사실 이 테마의 template-tags.php 파일에 포함되어 있다. 이론적으로는 Twenty Seventeen 부모 테마의 template-tags.php 파일을 자식 테마의 동일한 경로에 복사한 다음 이 파일을 직접 수정하면 된다. 하지만 이 블로그에선 자식 테마의 template-tags.php 파일 변경 내용이 반영되지 않았다.

이유는 알 수 없지만 검색으로 찾은 한 일본 개발자의 블로그 글(https://blog.popweb.dev/programming/child-theme-directory-overwrite/)에서 이런 현상이 원래 있다는 것과 functions.php 파일 변경으로 문제를 우회할 수 있다는 점을 확인했다. 챗GPT 무료 버전에 몇 번의 명령을 내려 위 코드를 얻을 수 있었고, 현재 이 블로그 테마에 적용했다.

위 코드는 글 발행 시점(작성일)로부터 하루(24시간) 이상 지났을 때 글을 수정하고 저장할 경우, 글을 열었을 때 발행일에 이어서 수정일시를 나란히 표시하게 만들어 준다. 수정일시가 표시되는 부분은 원래 발행일이 표시되는 ‘글 제목의 바로 위’이다. 수정한 시점이 발행 시점의 24시간 이내이거나, 수정한 이력이 없는 글은 기존 방식대로 발행일만 표시된다. 또한 이 코드를 약간 변경하면 발행일 표시 형식도 수정일시처럼 시각을 함께 나타낼 수 있다.

이를 통해 직관적으로 이 글이 발행 시점으로부터 일정 시간 경과했을 때 내용이 바뀌었다는 점과 그 바뀐 시점을 나타낼 수 있다. 대신 제목을 향해야 하는 시선이 분산될 수 있다는 것이 단점이다.

단점이 신경쓰인다면 발행일을 표시하는 부분을 그대로 놔두고, 수정일시를 본문이 시작되기 직전 위치, 즉 ‘글 제목의 바로 아래’에 표시할 수 있다. 마찬가지로 테마 파일 편집기에서 현재 사용하는 자식 테마의 functions.php 파일을 열고 끝부분에 아래 코드를 추가하면 된다. 코드 추가 후 저장한 뒤 위 이미지의 B 영역처럼 보이는 것을 확인할 수 있다.

// 포스팅 수정일, 제목 밑에 표시
function my_last_updated_date( $content ) {
$u_time = get_the_time('U');
$u_modified_time = get_the_modified_time('U');
$custom_content = ''; // 변수 초기화
if ($u_modified_time >= $u_time + 86400) {
$updated_date = get_the_modified_time('Y-m-d');
$updated_time = get_the_modified_time('a g:i');
$custom_content .= '<p class="last-updated entry-meta">수정일시 '. $updated_date . ', '. $updated_time .' 고침.</p> ';
}
$custom_content .= $content;
return $custom_content;
}
add_filter( 'the_content', 'my_last_updated_date' );

위 코드는 앞서 제시한 코드와 마찬가지로 글 작성일로부터 24시간 이상 지났을 때 글을 수정하고 저장하면, 수정일시를 표시해 준다. 앞서 제시한 코드와 달리 수정일시가 글 제목의 아래, 본문이 시작되기 전에 표시된다는 점이 다르다. 발행일과 수정일시를 따로 보여주기 때문에 시인성과 가독성에 유리하다.

다만, 이 코드를 사용하면 워드프레스가 자동으로 생성하는 발췌문(excerpt)의 앞부분에 수정일시가 자동으로 포함된다는 것이 단점이다. 발췌문에 수정일시를 비롯한 특정 문자열을 포함하지 않도록 하는 방법도 있지만, 너무 복잡하기에 이 글에선 다루지 않는다.

마지막 주의사항이 있다. 자식 테마의 functions.php 파일에 삽입한 코드는 작동하는데, 수정일시 값을 표시하는 CSS 속성 때문에 의도한 결과가 표시되지 않을 수 있다. 따라서 브라우저의 개발자 도구를 이용해 해당 값을 감싸는 클래스가 숨김 처리된(A 위치에 수정일시를 표시하는 코드를 예를 들면 .updated {display:none;} 같은 ) 코드가 적용됐는지 확인해 봐야 한다.

원래 Twenty Seventeen 부모 테마의 template-tags.php 파일 twentyseventeen_time_link() 함수도 발행일, 수정일 값을 모두 표시하도록 돼 있다. 수정일 값을 표시하는 CSS 클래스에 처음부터 숨김 처리가 돼 있어 보이지 않을 뿐이다. 해당 CSS 클래스의 display:none 상태를 해제하는 코드를 CSS 커스터마이즈 영역에 추가하고 레이아웃을 적절히 조정하기만 해도 이 글이 소개한 방법과 비슷한 효과를 얻을 수 있다. 하지만 원래의 함수는 작성일로부터 24시간 이상 지났는지 여부와 무관하게 작성일과 동일한 수정일도 표시할 수 있다는 점, 글이 수정된 날짜만 보여 주고 수정된 시각을 표시할 수 없다는 점은 감안해야 한다.

—

250303 7년 전부터 써 온 Twenty Seventeen 테마(https://mincheol.im/84) 고치다가 구상. 250304 작성, 발행.