네이버 카페에 워드프레스 글 제목을 두 줄로 나타내는 방법에 대한 질문이 올라와서 게시물 제목을 두 줄이 되도록 하는 방법에 대하여 생각해보았습니다. 제목을 두 라인으로 표시하여 두 번째 라인을 부제목처럼 활용할 수 있을 것입니다. 글 제목에 줄바꿈 태그를 추가하여 두 줄로 표시하고 싶은 경우 참고해보세요.
인터넷 신문 기사에서 글 제목 아래에 내용을 요약한 부제목을 표시하는 경우가 있습니다. 워드프레스에 부제목을 추가하는 방법은 아래 글에서 확인할 수 있습니다.
워드프레스 글 제목을 두 줄로 표시하는 방법
글 제목을 두 줄로 표시하는 방법은 티스토리 블로그의 "우커머스 상품 이름을 두 줄로 표시하기"라는 글에 제시된 코드를 응용할 수 있습니다.
글 제목에 줄바꿈 태그(br)를 추가하는 방법
기본적으로 다음과 같은 코드를 사용할 수 있습니다.
// Add a line break in WordPress Post Titles
function split_title_on_pipe($title) {
if (strpos($title, '|') !== false) {
$parts = explode('|', $title, 2);
$title = $parts[0] . '<br><span class="second-line">' . $parts[1] . '</span>';
}
return $title;
}
add_filter('the_title', 'split_title_on_pipe');글 제목에서 줄바꿈 태그(<br>)를 추가하고 싶은 곳에 파이프 문자(|)를 입력하면 줄바꿈 태그가 추가되어 두 줄로 표시됩니다. 두 번째 라인의 글자색, 글자 크기 등은 CSS를 사용하여 조정할 수 있습니다.
또 다른 코드를 다음과 같은 사용자 코드를 사용할 수 있습니다. 상기 코드에서 보안을 강화하는 코드를 추가했습니다.
function split_title_on_pipe($title) {
$title = sanitize_text_field($title);
// 제목에 '|' 문자가 있는지 확인합니다.
if (strpos($title, '|') !== false) {
// '|' 문자를 기준으로 제목을 나눕니다.
$parts = explode('|', $title, 2);
// 각 부분을 이스케이프하여 XSS 공격을 방지합니다.
$first_part = esc_html($parts[0]);
$second_part = esc_html($parts[1]);
// 줄 바꿈 및 span 태그 추가
$title = $first_part . '<br><span class="second-line">' . $second_part . '</span>';
}
return $title;
}
add_filter('the_title', 'split_title_on_pipe');위의 코드를 차일드 테마의 함수 파일(functions.php)에 추가하시기 바랍니다. 이 작업을 위해서는 FTP/SFTP에 접속할 수 있어야 합니다.
그리고 다음과 같은 코드를 관리자 페이지 » 디자인 » 사용자 정의하기 » 추가 CSS에 입력합니다.
/* 글 제목에서 두 번째 라인의 스타일 변경 */
.second-line {
font-size: 0.7em; /* 글꼴 크기 조정 */
color: #666; /* 글꼴 색상 조정 */
}제목의 두 번째 라인의 글자 크기와 컬러 등은 테마에 맞게 적절히 조정합니다.
SEO를 고려한 더 좋은 방법?
위의 방법을 이용하면 글 제목에 br 태그가 추가되면서 두 줄로 나타나게 됩니다. SEO적인 측면에서 큰 영향은 없을 수 있지만, HTML 구조를 유지하면서 CSS를 사용하여 두 줄로 보이도록 하는 방법이 SEO를 고러했을 때 더 좋다고 합니다.
상기의 PHP 코드에서 다음 라인을 찾아서
// 줄 바꿈 및 span 태그 추가
$title = $first_part . '<br><span class="second-line">' . $second_part . '</span>';다음 라인으로 바꾸도록 합니다.
// span 태그 추가 (줄 바꿈 없음)
$title = '<span class="two-line-title">' . $first_part . '<span class="second-line">' . $second_part . '</span></span>';
}CSS 코드에는 다음 코드를 추가합니다.
.two-line-title {
display: inline-block;
white-space: pre-wrap; /* 줄 바꿈을 유지 */
}
.two-line-title .second-line {
display: block;
margin-top: 0.5em; /* 두 줄 사이의 간격 조정 */
}0.5em 숫자값은 적절히 변경하세요.
이렇게 하면 구글 등 검색엔진이 볼 때에는 제목이 한 라인에 표시되는 것처럼 인식하게 됩니다.
예시:
<h1 class="entry-title" itemprop="headline"><span class="two-line-title">제목 라인 1 <span class="second-line">제목 라인 2</span></span></h1>적용 예시
상기에 제시된 코드를 GeneratePress 테마에 적용하여 테스트해보았습니다.
글 제목에 줄바꿈 태그(br)를 삽입할 곳에 파이프 문자(|)를 입력합니다. 첫 번째 라인 끝에는 공백을 추가하고 두 번째 라인 앞에는 공백을 추가하지 않도록 합니다.
글을 저장하면 다음과 같이 글 제목이 두 라인으로 표시되고 두 번째 라인의 텍스트 컬러와 크기가 첫 번째 라인과 다르게 표시됩니다.
최신 글 목록에서도 두 줄로 표시됩니다.
최신 글 페이지와 카테고리 페이지 등 아카이브 페이지에서는 한 라인으로 표시하고 싶은 경우에는 추가한 커스텀 CSS 스타일이 개별 게시글에만 적용되도록 CSS 코드를 변경하면 됩니다.
GeneratePress 테마에서 테스트했지만, 다른 테마에서도 잘 작동할 것입니다. CSS 스타일은 테마에 따라 적당히 수정하시기 바랍니다.
댓글 남기기