워드프레스 GeneratePress 테마 댓글 개수 표시하기

설 명절 연휴를 맞이하여 잠시 시간을 내어 워드프레스 블로그를 개선하는 작업을 했습니다. GeneratePress 테마의 Element에 추가한 코드와 차일드 테마 함수 파일에 입력한 긴 코드는 별개의 플러그인으로 분리해서 코드를 추가했습니다. 그리고 블로그 글에서 제목 아래에 표시되는 작성 날짜(업데이트 날짜), 작성자 항목 외에 댓글 개수를 추가하고 디자인도 세련되게 바꾸었습니다.😄

워드프레스 GeneratePress 테마 댓글 개수 표시하기

메인 워드프레스 블로그의 포스트 헤더 부분이 정돈되지 않게 보여서 잠시 짬을 내어 나름 깔끔하게 정리해 보았습니다.

그리고 며칠 전에는 오랫동안 사용하던 Tocer(구 Fixed TOC)라는 유료 목차 플러그인을 제거하고 왼쪽 사이드에 고정되어 표시되는 목차로 변경했습니다.

현재 섹션이 하이라이트되는 목차는 해외 블로그 글에 제시된 코드를 참고하여 AI를 사용해 만들었습니다.😄

현재 섹션 표시 목차 (고정 사이드바 목차)

제 블로그에 표시된 것과 비슷하게 날짜, 낙성자, 댓글 개수 등 메타 요소들을 표시하려면 다음과 같은 코드를 차일드 테마에 추가할 수 있습니다.

// 1. 메타 항목 출력 순서 지정: 작성자 -> 날짜
add_filter( 'generate_header_entry_meta_items', function( $items ) {
	if ( is_single() ) {
		return array( 'author', 'date' );
	}
	return $items;
} );

// 2. 작성자 표시: 사람(User) SVG 아이콘 추가 및 순수 이름만 출력
add_filter( 'generate_post_author_output', function( $output ) {
	if ( is_single() ) {
		$author_name = esc_html( get_the_author() );
		$author_url = esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) );
		
		// 사람 모양(Author) SVG 아이콘으로 교체
		$user_svg = '<svg class="meta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>';
		
		return sprintf(
			'<span class="byline">%1$s<span class="author vcard" itemprop="author" itemtype="https://schema.org/Person" itemscope><a class="url fn n" href="%2$s" title="%3$s" rel="author" itemprop="url"><span class="author-name" itemprop="name">%4$s</span></a></span></span>',
			$user_svg,
			$author_url,
			esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), $author_name ) ),
			$author_name
		);
	}
	return $output;
} );

// 3. 날짜 표시(달력 SVG) 및 댓글 표시(말풍선 SVG + 숫자만) 결합
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
	if ( is_single() ) {
		// 날짜 세팅
		$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
		if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
			$time_string = '<time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time>';
		}
		$time_string = sprintf( $time_string,
			esc_attr( get_the_date( 'c' ) ),
			esc_html( get_the_date() ),
			esc_attr( get_the_modified_date( 'c' ) ),
			esc_html( get_the_modified_date() )
		);

		// 달력 모양 SVG 아이콘
		$calendar_svg = '<svg class="meta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 64 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z"/></svg>';
		
		$date_html = sprintf( '<span class="posted-on">%s%s</span>', $calendar_svg, $time_string );

		// 댓글(숫자만) 및 말풍선 모양 SVG 아이콘 생성
		$comments_html = '';
		if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
			ob_start();
			$comment_svg = '<svg class="meta-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4l0 0 0 0 0 0 0 0 .3-.3c4.6-5.2 7.1-10.4 16.3-25.1c11.6-18.7 26-44.1 32.7-68c-35-31.5-57.9-74.8-57.9-122.9C0 121.9 114.6 28.8 256 28.8s256 93.1 256 211.2zM256 76.8C137 76.8 40.3 154 40.3 240c0 36.3 16.1 70.1 43.8 96c10.3 9.7 16 23.4 14.9 37.6c-1.2 14.5-5.8 28.6-12.8 40.9c13.7-4.4 26.6-10.8 38.3-19c15.1-10.6 33.7-14.6 51.5-11.4C199 389.9 227 393.6 256 393.6c119 0 215.7-77.2 215.7-163.2s-96.7-163.2-215.7-163.2z"/></svg>';
			
			echo '<span class="comments-links">';
			echo $comment_svg;
			comments_popup_link( '0', '1', '%' );
			echo '</span>';
			$comments_html = ob_get_clean();
		}

		return $date_html . $comments_html;
	}
	return $output;
}, 10, 2 );

글자 크기, 색상 등 스타일은 CSS로 조정할 수 있습니다. 예시:

/* 개별 포스트(.single)의 메타 영역 전체 레이아웃 (가로 정렬, 간격 벌림) */
.single .entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px; /* 각 항목(작성자, 날짜, 댓글) 사이의 간격 */
	font-size: 0.9em; /* 전체 텍스트 크기 지정 */
}

/* 각 항목 내부(아이콘과 텍스트)를 나란히 배치하고 간격 조정 */
.single .entry-meta > span {
	display: inline-flex;
	align-items: center;
	gap: 8px; /* 아이콘과 텍스트 사이의 간격 */
}

/* SVG 아이콘 스타일 및 색상 지정 */
.single .entry-meta svg.meta-icon {
	width: 16px;
	height: 16px;
	fill: #8e1c64; /* 이미지와 비슷한 자주색 계열 지정. 원하시는 색상(#hex)으로 변경 가능 */
}

/* 작성자, 날짜, 댓글 링크 텍스트 색상 및 꾸밈 제거 */
.single .entry-meta a,
.single .entry-meta time {
	color: #1155cc; /* 텍스트 파란색 지정 */
	text-decoration: none;
	font-weight: 500;
}

.single .entry-meta a:hover {
	text-decoration: underline; /* 마우스 올렸을 때만 밑줄 */
}

/* 기존 버튼 형태(파란 배경 등) 완전히 초기화 */
.single span.comments-links a {
	display: inline;
	padding: 0;
	background-color: transparent;
	color: #1155cc !important;
	border-radius: 0;
}

상기 PHP 코드는 폰트 어썸과 같은 무거운 외부 폰트를 로드하지 않고 구현되었기 때문에 사이트 속도에 영향을 거의 미치지 않습니다.

조금 복잡한 코드를 추가하여 만들었던 기능들은 코드들을 분리해서 플러그인으로 만들었습니다. 이렇게 하면 추후 유리 관리하는 데 편리할 것 같습니다.

마치며

GeneratePress 테마가 속도가 빠르지만, 최적화되지 않은 방식으로 코드를 추가하거나 플러그인을 많이 설치할 경우 속도가 느려질 우려가 있습니다.

특히 홈페이지의 레이아웃을 뉴스 사이트와 비슷하게 구현하기 위해 PostX와 같은 플러그인을 사용할 경우 사이트 속도에 영향을 미칠 수 있습니다. 저는 사이트 속도에 영향을 거의 미치지 않는 방식으로 구현했습니다.

조금 더 시간을 내어 사이트를 더 최적화하고 싶지만, 본래 자신의 사이트는 시간을 투자하지 않게 되는 것 같습니다.😥

참고

https://avada.tistory.com/3893

워드프레스 GeneratePress 테마 애드센스 자동광고 코드 추가하기

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)

https://avada.tistory.com/3046

해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)