GeneratePress 테마 요약글 길이 변경하기

1

워드프레스 GeneratePress 테마에서는 무료 버전의 경우 블로그 설정에 요약글 표시 여부 옵션만 있고 요약글 길이를 설정하는 옵션은 제공되지 않습니다. GP Premium을 사용하면 요약글 길이를 변경할 수 있습니다. 이 글에서는 GeneratePress 테마에서 요약글의 최대 라인 수를 CSS로 조정하는 방법에 대하여 살펴보겠습니다.

GeneratePress 테마 요약글 길이 변경하기

GeneratePress 테마를 사용하는 경우 모양 » 사용자 정의 » 레이아웃 » 블로그에서 블로그 관련 옵션을 설정할 수 있지만 무료 버전에서는 컨텐츠 유형만 표시되고 여기에서 발췌(요약문) 또는 전체 콘텐츠를 선택할 수 있습니다.

GeneratePress 무료 버전 블로그 옵션

GeneratePress 유료 버전을 사용하는 경우에는 다양한 블로그 관련 옵션이 제공됩니다.

GeneratePress 유료 버전 블로그 옵션

Excerpt word count에 블로그 페이지의 요약글에 표시할 단어수를 입력할 수 있고, Read more label에 Read More 버튼에 표시할 텍스트 문구(예: 더 읽기)를 지정할 수 있습니다.

무료 버전에서 요약글 길이를 조정하고 싶은 경우 GeneratePress 포럼 게시글에 제시된 코드를 시도해볼 수 있습니다. 해당 코드들이 실제로 작동하는지는 테스트하지 않았습니다.

이 블로그에는 제너레이트프레스 유료 버전인 GP Premium이 사용되어 요약글 길이를 위의 그림과 같이 설정한 상태입니다. 하지만 블로그 페이지나 아카이브 페이지(카테고리 페이지, 태그 페이지 등)에서 요약글이 들쑥날쑥하여 일부 글에서는 요약글이 길어져서 이미지보다 길어져서 일관성이 떨어져 보이는 것 같습니다.

GeneratePress 테마 요약글 길이 조정 전

무료 버전이든, 혹은 유료 버전이든 CSS를 사용하여 요약글의 라인 수를 제어할 수 있습니다.

GeneratePress 테마 요약글 길이 조정 후

저는 이 블로그에서 PC 해상도에 대하여 요약글 길이가 5줄이 되도록 했습니다. 5줄을 넘어가면 위의 그림과 같이 다섯 줄로 표시되고 끝에 말줄임 기호(...)가 표시돕니다.

GeneratePress 테마의 요약글 길이를 최대 5줄로 제한하도록 이 블로그에는 다음과 같은 CSS 코드가 사용되었습니다.

/* PC 전용(≥ 769px): GeneratePress 요약글 5줄 말줄임 */
@media (min-width: 769px) {
    .entry-summary p:not(.read-more-container),
    .line-clamp-5 { /* 재사용 헬퍼 */
        display: -webkit-box;            /* why: 멀티라인 클램프 엔진 */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        line-clamp: 5;                    /* 신형 사양 */
        overflow: hidden;
        text-overflow: ellipsis;        /* why: 일부 브라우저 시 안정감 */
        line-height: 1.75;                /* why: 가독성 향상 */
        max-height: calc(1.75em * 5);    /* why: 클램프 미지원 대비 */
        margin: 0;
        overflow-wrap: anywhere;
    }

    /* (선택) 클램프 미지원 브라우저: 끝부분 페이드 */
    @supports not (-webkit-line-clamp: 5) {
        .entry-summary p:not(.read-more-container),
        .line-clamp-5 {
            position: relative;            /* why: 페이드 마스크 적용 */
            mask-image: linear-gradient(to bottom, #000 60%, transparent);
        }
    }

    /* (선택) PC에서만 "더 읽기" 상단 간격 조정 */
    .read-more-container {
        margin-top: 1.2rem;
    }
}

데스크톱 해상도에서만 적용되며 모바일 기기에는 적용되지 않도록 CSS 미디어쿼리를 추가했습니다.

상황에 따라 상기 코드를 적절히 응용하여 4줄 또는 3줄 등으로 조정할 수 있을 것입니다.

GeneratePress 무료 버전에서 블로그 레이아웃 변경하기

GP 테마의 무료 버전에서는 블로그 레이아웃을 커스텀할 수 있는 옵션이 제공되지 않고 기본 레이아웃을 사용해야 합니다.

무료 버전을 사용하는 경우에는 CSS를 사용하여 어느 정도 커스터마이징을 시도해볼 수 있습니다. 아래는 워드프레스닷컴(WordPress.com)에서 GeneratePress 무료 테마를 설치하고 CSS로 블로그 페이지와 아카이브 페이지의 레이아웃을 커스텀한 경우를 보여줍니다.

GeneratePress 무료 버전에서 블로그 레이아웃 변경

CSS를 사용하여 요약글 길이를 3줄로 제한하고 있습니다.

워드프레스닷컴에서 가입하여 사용하는 가입형 워드프레스는 요금제에 따라 제약이 있지만, 최근 개인 요금제와 프리미엄 요금제에서도 플러그인 설치가 허용되면서 개인 플랜에서도 이제 CSS/JavaScript/PHP를 사용하여 어느 정도 커스텀이 가능해졌고, 플러그인을 사용하여 애드센스 광고도 게시할 수 있습니다.

마치며

이상으로 GeneratePress 테마에서 블로그의 요약글 길이를 CSS를 사용하여 제어하는 방법에 대하여 살펴보았습니다. 상황에 따라 적절한 길이로 제한하려는 경우 응용할 수 있을 것입니다.

GeneratePress 테마는 우리나라에서 특히 수익형 블로그에 많이 이용되고 있습니다. GP 테마는 현존하는 테마 중에서 가장 빠른 속도를 내는 것으로 평가되는 테마 중 하나입니다.😄

블로그를 운영한다면 무료 버전을 설치하여 별다른 세팅을 하지 않고 그대로 사용하는 것도 가능합니다. 실제로 그렇게 운영되는 블로그들을 간혹 접하게 됩니다. 레이아웃을 변경하려는 경우 유료 버전을 사용하면 보다 수월하게 블로그 세팅이 가능합니다. 유료 버전 구입이 부담이 되는 경우 예시 블로그처럼 CSS/자바스크립트/PHP를 사용하여 직접 커스텀하는 것도 가능합니다.

참고

1개 댓글

댓글 남기기

  1. CSS 코드를 추가하니까 Read more 버튼이 전부 사라져서 아래 함수 코드를 추가로 적용하니 버튼은 생겼는데 요약글 끝에 …이 이상하게 보이는 브라우저가 있네요.

    // Read more 버튼

    add_filter( 'get_the_excerpt', function( $excerpt ) {

    // 기존 버튼이 있는 경우
    if ( preg_match( '/<a[^>]*class="[^"]*read-more[^"]*"[^>]*>.*?<\/a>/', $excerpt, $matches ) ) {

    // 기존 버튼 추출
    $button = $matches[0];

    // 클래스 이름을 read-more 하나로 통일
    $button = preg_replace(
    '/class="[^"]*read-more[^"]*"/',
    'class="read-more"',
    $button
    );

    // <p> 내부 버튼 제거
    $excerpt = preg_replace(
    '/<a[^>]*class="[^"]*read-more[^"]*"[^>]*>.*?<\/a>/',
    '',
    $excerpt
    );

    // 버튼을 문단 뒤로 이동
    $excerpt .= '<div class="read-more-container">' . $button . '</div>';

    } else {
    // 버튼이 없으면 새로 생성
    $read_more_button = sprintf(
    '<p class="read-more-button-container"><a class="read-more" href="%s">%s</a></p>',
    get_permalink(),
    __( 'Read more', 'generatepress' )
    );

    $excerpt .= ' ...' . $read_more_button;
    }

    return $excerpt;
    });

    답글