워드프레스 글과 페이지에 부제목 추가하기 - 워드프레스 정보꾸러미
베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

워드프레스 글과 페이지에 부제목 추가하기

Last Updated: 2022년 8월 24일 | 1개 댓글
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

부제목을 추가하여 독자의 흥미 유발
워드프레스에서는 플러그인을 사용하거나 사용자 정의 필드를 사용하여 부제목 추가 가능

제목 아래에 부제목을 표시하면 독자들의 궁금증을 유발하여 본문 글을 읽도록 유도할 수 있습니다. 언론 사이트에서 자주 독자들의 관심을 끌기 위해 부제목을 사용하는 경우가 많습니다. 해외 블로그에서도 부제목을 효과적으로 활용하는 사이트를 종종 접하게 됩니다.

워드프레스 글과 페이지에 부제목 추가하기

워드프레스 글과 페이지, 커스텀 포스트 타입에 부제목을 표시하고 싶은 경우 Secondary Title, WP Subtitle 등의 플러그인을 사용할 수 있습니다.

워드프레스 글과 페이지에 부제목을 추가하는 방법

부제목을 표시하는 방법으로 커스텀 필드를 추가한 다음, 테마 파일을 수정하여 원하는 곳(예: 글 제목 아래)에 해당 필드를 표시할 수 있을 것입니다.

간단한 방법으로 플러그인을 사용할 수 있습니다.

Secondary Title 플러그인을 사용하여 포스트와 페이지에 부제목 추가하기

부제목을 표시하는 플러그인으로 Secondary TitleWP Subtitle 플러그인이 있습니다. Secondary Title은 포스트, 페이지, 커스텀 포스트 타입 글에서 대체 제목을 추가하는 심플하고 가벼운 플러그인으로, 자동으로 또는 숏코드나 PHP를 사용하여 제목을 표시할 수 있습니다.

워드프레스 관리자 페이지 » 플러그인 » 새로 추가에서 "Secondary Title"를 검색하여 이 무료 플러그인을 설치할 수 있습니다.

플러그인을 활성화하면 설정 메뉴 아래에 "Secondary Title" 하위 메뉴가 추가됩니다. 설정 » Secondary Title로 이동하여 몇 가지 설정을 할 수 있습니다.

워드프레스 글과 페이지에 부제목 추가 플러그인

General Settings(일반 설정) 아래의 Auto show(자동 표시) 옵션에서 부제목을 자동으로 표시할지 여부를 선택할 수 있습니다.

Title format(제목 형식) 옵션에서 제목이 표시되는 형식을 지정할 수 있습니다. 다음 파라미터를 사용할 수 있습니다.

  • %title% - 기본 타이틀
  • %secondary_title% - 부제목

자동으로 부제목이 표시되도록 선택하는 경우 여기에 지정한 형식이 제목을 대체하게 됩니다. 제목 형식 지정 시 HTML 태그를 사용할 수 있습니다. 예시:

<span style="color:#ff0000;font-size:14px;">%secondary_title%</span>

간단한 CSS를 사용하여 부제목이 기본 제목 아래에 표시되도록 할 수도 있습니다. 예시:

%title%<span style="color:gray; font-size:17px;display: block; margin-top: 10px; border-left: gray solid 5px; padding-left: 5px;">%secondary_title%</span>

Title format에 제목 형식을 지정하면 Preview 섹션에 미리 보기가 표시됩니다.

워드프레스 글과 페이지에 부제목 표시 플러그인

Auto show(자동 표시) 옵션을 OFF로 설정하면 원하는 위치에 부제목을 입력할 수 있도록 PHP 코드가 표시됩니다.

워드프레스 글과 페이지에 부제목 추가하기 3

테마 파일을 직접 수정하는 경우 다음과 같은 PHP 코드를 부제목이 표시될 위치에 추가하시기 바랍니다.

<?php echo get_secondary_title(); ?>

GeneratePress 테마의 경우 후크를 사용하여 원하는 위치에 쉽게 추가할 수 있습니다.

워드프레스 GeneratePress 테마 후크

설정 » Secondary TitleDisplay Rules(표시 규칙) 섹션에서 Only show in main post 옵션에 On을 선택하여 부제목이 메인 블로그 롤에서만 표시되도록 합니다.

워드프레스 글과 페이지에 부제목 추가하기 4

이제 개별 글이나 페이지에 서브 타이틀을 입력할 수 있습니다.

워드프레스 글과 페이지에 부제목 추가하는 방법

블록 에디터의 설정 패널에 표시된 Secondary Title 필드에 부제목을 입력합니다. 부제목에는 HTML 태그를 추가할 수 있지만, 자동으로 표시하는 경우에만 태그가 작동하고 수동으로 표시하는 경우에는 작동하지 않습니다.

사용자 정의 필드를 사용하여 부제목 표시하기

다른 방법으로 커스텀 필드를 사용할 수 있습니다. 워드프레스에서 제공하는 사용자 정의 필드 기능을 사용하여 'subtitle'(예시) 커스텀 필드를 추가합니다.

워드프레스 사용자 정의 필드

다음과 같은 코드를 사용하여 커스텀 필드 값을 프런트엔드에 표시할 수 있습니다.

<?php 

global $post;
 
$subtitle = get_post_meta($post->ID, 'subtitle', true);
 
if ($subtitle) { ?>
 
<p><? echo $subtitle; ?></p>
 
<?php 
 
} else { 
// do nothing; 
}
 
?>

이 방법을 사용하면 서브 타이틀에 HTML 태그(예: <br>)를 추가할 수 있습니다. 그리고 표시되는 스타일을 CSS로 조정할 수 있습니다.

만약, ACF 플러그인이 설치되어 있는 경우 커스텀 필드를 추가하고, 텍스트 필드를 다음과 같은 코드로 표시(출력)할 수 있습니다. 자세한 방법은 ACF 플러그인 문서를 참고해보세요.

$value = get_field( "text_field" );

if( $value ) {
    echo $value;
} else {
    echo 'empty';
}

참고



1 개 댓글

Leave a Comment

  1. 커스텀 필드와 GeneratePress 테마에서 제공하는 후크(hook)를 활용하여 이 블로그에 부제목을 추가해보았습니다. 새로 작성하는 글에는 가급적 부제목을 추가하여 표시할 예정입니다.

    응답