아스트라(Astra) 테마는 무료 버전에서도 블로그 페이지의 레이아웃을 지정하는 사용자 정의 옵션이 제공됩니다. 또한, 블로그/아카이브 페이지에 표시할 포스트 메타 항목을 세부적으로 지정할 수 있습니다. 요약글을 표시하면 기본 길이로 설정되고 요약글 길이를 변경할 수 있는 옵션이 제공되지 않습니다.
이 글에서는 아스트라 테마의 블로그/아카이브 페이지에 표시되는 요약글의 길이를 조정하는 방법에 대하여 살펴보겠습니다.
워드프레스 아스트라 테마 요약글 길이 조정하기
아스트라 테마를 사용하는 경우 모양 » 사용자 정의 » 게시물 유형 » 블로그/글보관함에서 블로그(최신 글 페이지)의 레이아웃을 설정할 수 있습니다.
무료 버전에서는 4가지 레이아웃 중에서 선택할 수 있습니다.
아스트라 프로에서는 더 많은 레이아웃과 기능을 제공합니다.
포스트 요소에서 대표 이미지, 타이틀, 포스트 메타, 요약글, 카테고리, 태그, 더 읽기 등의 요소를 표시하거나 숨길 수 있습니다.
요약글을 표시하면 워드프레스의 기본 요약글 길이(아마 55단어)가 표시되고 길이를 변경할 수 있는 옵션은 무료 버전에서 제공되지 않습니다.
썸네일(대표 이미지)의 경우 몇 가지 옵션이 제공되지만 썸네일 비율 등을 변경해도 (무료 버전에서 테스트해서 그런지 몰라도) 썸네일의 비율이 제대로 바뀌지 않는 것 같습니다.
그리고 '더 읽기' 요소를 표시하면 [더 읽기"] 또는 [게시물 읽기"]와 같이 어색하게 표시됩니다. (설치형 워드프레스에서는 '더 읽기'(Read More)가, 가입형 워드프레스에서는 '게시물 읽기'(Read Post)가 표시되네요. 설치형, 가입형의 문제인지 아니면 사용자 정의에서 설정이 달라서 그런지 모르겠습니다.)
[더 읽기"] 또는 [게시물 읽기"]와 같이 표시되는 것은 테마 파일의 번역이 잘못되었기 때문입니다. Loco Translate 플러그인을 설치하여 테마나 플러그인 UI의 번역을 수정할 수 있습니다.
요약문 길이와 말줄임 기호를 변경하는 방법에 대하여 살펴보겠습니다.
PHP 코드를 사용하여 변경하기
자식 테마의 함수 파일에 다음과 같은 코드를 추가하여 요약글 길이와 요약글의 말줄임표 기호를 변경할 수 있습니다.
add_filter(
'excerpt_length',
function ( $length ) {
// Number of words to display in the excerpt.
return 20;
},
500
);
function wpdocs_excerpt_more( $more ) {
return ' ...';
}
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );FTP에 접속하여 아스트라 테마의 차일드 테마의 함수 파일(functions.php) 맨 아래에 상기 코드를 추가하여 테스트할 수 있습니다.
경우에 따라 잘 작동하지 않을 수도 있습니다.
CSS를 사용하여 조정하기
간단하게 CSS를 사용하여 조정하는 것도 가능합니다. 예를 들어, 요약글의 길이를 3줄로 제한하고 싶은 경우 다음과 같은 CSS 코드를 모양 » 사용자 정의 » 추가 CSS에 추가할 수 있습니다.
/* 3줄 말줄임(권장) */
.ast-excerpt-container p,
.line-clamp-3 { /* 재사용용 헬퍼 클래스 */
display: -webkit-box; /* why: 다중행 클램프 엔진 */
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3; /* 신형 사양 브라우저 */
overflow: hidden;
text-overflow: ellipsis; /* 단일행용이지만 무해 */
line-height: 1.6; /* 가독성 */
max-height: calc(1.6em * 3); /* 클램프 비지원시 안전선 */
margin: 0; /* 불필요한 여백 제거 */
overflow-wrap: anywhere; /* 긴 URL/단어 대응 */
}
/* (선택) 클램프 미지원 브라우저 시 끝부분 페이드 처리 */
@supports not (-webkit-line-clamp: 3) {
.ast-excerpt-container p,
.line-clamp-3 {
/* 완전한 … 대체는 불가, 시각적 페이드로 대체 */
position: relative;
mask-image: linear-gradient(to bottom, #000 60%, transparent);
}
}두 줄로 표시하고 싶은 경우에는 다음과 같은 코드로 테스트해볼 수 있습니다.
/* 2줄 말줄임 */
.ast-excerpt-container p,
.line-clamp-3 { /* 필요하면 클래스명을 line-clamp-2로 변경해도 됨 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.6;
max-height: calc(1.6em * 2);
margin: 0;
overflow-wrap: anywhere;
}
@supports not (-webkit-line-clamp: 2) {
.ast-excerpt-container p,
.line-clamp-3 {
position: relative;
/* 2줄 기준 페이드: 필요에 따라 45~55%로 미세 조정 */
mask-image: linear-gradient(to bottom, #000 50%, transparent);
}
}또한, Read More 부분을 버튼으로 표시하고 싶은 경우 다음과 같은 코드를 활용할 수 있습니다.
/* Read More 컨테이너 스타일 */
.ast-read-more-container {
margin: 2rem 0;
text-align: left;
}
/* Read More 버튼 스타일 */
.ast-read-more-container a {
display: inline-block;
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
font-weight: 500;
color: #333;
background-color: #fff;
border: 1.5px solid #e0e0e0;
border-radius: 4px;
text-decoration: none;
transition: all 0.3s ease;
letter-spacing: 0.3px;
}
/* 호버 효과 */
.ast-read-more-container a:hover {
color: #000;
background-color: #f9f9f9;
border-color: #333;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* 클릭 효과 */
.ast-read-more-container a:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* 스크린 리더 텍스트 숨김 */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}그러면 아래 그림과 같이 요약문 길이가 조정되고 '더 보기' 링크도 버튼 스타일로 표시됩니다.
무료 버전을 사용하는 경우 커스텀할 수 있는 부분이 프로 버전에 비해 제한적일 수밖에 없습니다. CSS와 PHP 코드를 사용하여 어느 정도 원하는 대로 사이트를 꾸밀 수 있을 것입니다.
마치며
블로그를 운영하려는 경우 아스트라 테마를 하나의 옵션으로 고려할 수 있습니다. 아스트라도 속도가 빠른 테마로 평가받고 있으며, 더 빠른 속도를 원하는 경우 GeneratePress 테마를 선택할 수 있습니다.
아스트라 프로는 특히 쇼핑몰을 만들 때 많이 사용되기도 합니다. 엘리멘터와 함께 사용하면 복잡한 사이트를 수월하게 만들 수 있습니다. 하지만 엘리멘터는 페이지 디자인 작업을 수월하게 하고 시간을 단축시키지만 사이트 속도에 영향을 미칠 수 있습니다. 고급 사용자인 경우 GeneratePress + GenerateBlocks와 같은 조합을 사용하면 빠른 속도를 유지하면서 복잡한 사이트를 제작할 수 있습니다(참고).
댓글 남기기