GeneratePress 카테고리 글 목록(Loop Template) 수정하기 – 작성자·날짜 제거하고 본문 요약문 추가하기

워드프레스 테마들은 사이트를 수정하려고 하면 테마마다 제어하는 방식이 모두 다릅니다. 같은 “글 목록”을 수정하는 작업이라도 어떤 테마는 커스터마이저에서, 어떤 테마는 위젯에서, 또 어떤 테마는 별도의 템플릿 빌더에서 관리합니다.

이 방식이 매번 새로워서 커스텀하는 재미가 있기도 하지만, 여러 테마를 번갈아 사용하다 보면 설정 위치를 잊어버리기 쉽습니다.

현재 저는 GeneratePress(제너레이트프레스) 테마를 사용하는 블로그에서 카테고리 페이지에 표시되는 글 목록(카드 레이아웃)의 디자인을 수정하게 되었습니다. 나중에 같은 작업을 다시 해야 할 수도 있기 때문에 그 과정을 자세하게 기록해 둡니다.

글 목록 수정 전 상태 점검

기존 카테고리 페이지에서는 카드 내부가 다음과 같은 순서로 표시되고 있었습니다.

썸네일 이미지
↓
글 제목
↓
카테고리 태그
↓
작성자 이름 / 발행일

발행 날짜도 중요하지만 저는 글의 도입부가 좀 있어야 어떤 글인지 파악하기 더 좋다고 생각해서 작성자/날짜 밑에 글의 내용 중 일부를 보여주게 만들기로 했습니다. 이런 기능을 본문 요약문(Post Excerpt)이라고 합니다. 이것을 넣어 방문자가 글 내용을 미리 파악할 수 있도록 변경하려고 합니다.

Elements 메뉴 진입하기

워드프레스 관리자 화면에서 다음 메뉴로 이동합니다.

외모(Appearance)
→ Elements

Elements란?

Elements는 GeneratePress에서 제공하는 템플릿 관리 기능입니다.

특정 위치에 공통으로 표시되는 레이아웃을 만들어 두고 원하는 페이지에 적용할 수 있습니다.

• 푸터 영역
• 카테고리 페이지
• 검색 결과 페이지
• 게시글 표시 페이지
• 특정 위치의 광고 영역
• 등…

위와 같은 다양한 기능들을 별도의 템플릿으로 관리할 수 있습니다.

목록을 살펴보면 다양한 Element가 존재하는데, 그중 우리가 수정해야 할 곳은 다음 항목입니다.

Loop – Blog and Archives

카테고리, 태그, 검색 결과 페이지 등에서 표시되는 글 목록(카드 디자인)을 담당하는 영역입니다.

해당 항목에 마우스를 올려 [편집(Edit)]버튼이 나타나면 클릭합니다.

동적 태그(Dynamic Tags) 이해하기

편집 화면에 들어가면 현재 글 목록 카드가 어떻게 구성되어 있는지 시각적으로 확인할 수 있습니다.

카드 내부에서 날짜 또는 작성자 영역을 클릭해 보면 나타나는 툴바에 다음과 같은 버튼들이 있습니다.

• Open Dynamic Tags
• Preview
• Edit

여기서 Edit를 눌러보면 {{author_meta}}나 {{post_date}} 같은 코드를 볼 수 있습니다. 이것이 바로 “동적 태그(Dynamic Tag)”입니다.

동적 태그는 실제 데이터베이스에서 정보를 가져와 출력하는 역할을 합니다.

• {{author_meta}} → 작성자 이름
• {{post_date}} → 게시글 발행일
• {{post_title}} → 게시글 제목

이 덕분에 템플릿 하나만 만들어 두면, 블로그에 글이 100개든 1,000개든 각 게시글에 맞는 제목과 날짜가 자동으로 바뀌어 표시됩니다.

동적 태그 이름을 일일이 외울 필요는 없습니다. GenerateBlocks는 목록에서 필요한 태그를 선택만 하면 자동으로 삽입해 주는 기능을 제공하기 때문입니다. 이제 이 기능을 활용해 본문 요약문을 추가해 보겠습니다.

본문 요약문(Post Excerpt) 추가하기

1. 동적 태그 메뉴 열기

날짜 영역을 선택한 뒤, Preview 버튼 왼쪽에 있는 원통 모양 아이콘(Open Dynamic Tags)을 클릭합니다.

2. 새로운 태그 추가

Insert a new one 버튼을 클릭합니다.

3. Post Excerpt 선택

SELECT A DYNAMIC TAG 항목을 누르면 여러 종류의 데이터가 표시됩니다.

여기서 Post Excerpt 를 선택합니다. Post Excerpt는 게시글의 발췌문(Excerpt)을 출력하는 기능입니다. 게시글에 별도로 발췌문을 작성했다면 해당 내용이 표시되고, 작성하지 않은 경우에는 본문 앞부분을 자동으로 가져와 표시합니다.

4. 글자 수 제한

[Excerpt Length]는 화면에 표시할 요약글 길이를 제어하는 옵션입니다. GeneratePress 테마는 단어 수(Word)를 기준으로 삼지만, 한글 블로그에서는 자르는 기준이 애매해져서 레이아웃이 안좋게 보일 수 있습니다. 요약글이 너무 길면 카드 높이가 달라져서 전체적인 디자인을 해치므로, PC와 모바일 화면을 모두 고려해 적절한 길이를 찾아주는 것이 좋습니다.

💡 Tip: 한글 환경에서 글자 깨짐 없이 카드의 높이를 완벽하게 통일하고 싶다면, 테마의 단어 수 설정 대신 CSS의 line-clamp 속성을 활용해 줄 수(Line) 단위로 제한하는 것이 가장 깔끔합니다. (유료 버전 사용자는 GeneratePress Premium의 ‘Block Element’ 기능을 활용하면 코딩 없이 더 직관적으로 레이아웃을 구성할 수 있습니다.)

발췌 부분 3줄만 보이게 하고 싶은 경우

에디터에서 클래스 추가:

• Elements 편집 화면에서 요소 선택 → 블록(우측 탭) → [고급]을 클릭합니다.
• 고급 클릭하면 [추가 CSS 클래스]라는 입력 부분이 표시됩니다.
• 클래스 이름(예: custom-excerpt)을 입력합니다.

CSS 수정:

• 이제 그 클래스 이름을 사용하여 CSS를 작성합니다.

/* 방금 지정한 클래스(custom-excerpt)에만 적용 */
.custom-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 원하는 줄 수 */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 방금 지정한 클래스(custom-excerpt)에만 적용 */
.custom-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 원하는 줄 수 */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;
}

무료 버전인 경우: 관리자 페이지에서 [외모] → [사용자 정의하기] → [레이아웃] → [Blog] 에서 블로그 본문 발췌 기능을 사용 가능합니다.

5. 적용

설정을 마쳤다면 Insert Dynamic Tag 버튼을 눌러 적용합니다.

변경 사항 저장 및 확인

설정을 완료하면 편집 화면에서도 카드 디자인이 변경된 것을 확인할 수 있습니다.

Loop Template의 가장 큰 장점은 템플릿 하나만 수정해도 블로그 전체에 자동 적용된다는 점입니다.

즉,

• 카테고리 페이지
• 태그 페이지
• 아카이브 페이지
• 검색 결과 페이지
• 등…

위와 같은 곳에서 사용하는 수십, 수백 개의 글 목록 템플릿이 한 번에 변경됩니다.

일일이 하나씩 수정할 필요가 없습니다.

마지막으로 우측 상단의 업데이트(Update) 버튼을 눌러 저장합니다.

결과 확인

실제 카테고리 페이지로 이동한 뒤 새로고침(F5)을 해보면 변경된 설정으로 적용됩니다.

방문자는 제목만 보는 것이 아니라 글의 내용을 미리 확인할 수 있기 때문에 어떤 글을 읽을지 판단하기도 쉬워집니다.

특히 이런 수정은 클릭률 향상에도 도움이 될 수 있고 또 홈페이지 주인의 마음에도 드는 디자인으로 수정할 수 있다는 장점이 있습니다.

Elements 메뉴가 보이지 않는 경우

이 가이드는 GeneratePress Premium과 GenerateBlocks 조합을 기준으로 작성되었습니다.

• Premium 버전: Elements와 Dynamic Tags 기능을 활용해 마우스 클릭만으로 글 제목, 작성자, 날짜, 요약문(Excerpt) 등을 자유롭게 수정할 수 있습니다. 코딩 없이도 레이아웃을 마음대로 변경할 수 있는 것이 가장 큰 장점입니다.
• 무료 버전: 무료 버전에서는 위와 같은 Elements 기반 템플릿 편집 기능을 사용할 수 없거나 제한될 수 있습니다. 따라서 완전히 동일한 결과를 자동으로 내려면 자식 테마를 만들고 워드프레스 훅(Hook)이나 PHP 코드를 직접 수정해야 합니다.

관리자 화면에 [모양] → [Elements] 메뉴가 보이지 않나요? GeneratePress Premium 모듈이 정상적으로 활성화되어 있는지 먼저 확인해 주세요. 해당 모듈이 켜져 있어야 이 기능을 사용할 수 있습니다.

마무리

GeneratePress와 GenerateBlocks 조합은 처음 사용할 때는 구조가 다소 낯설게 느껴질 수 있습니다.

하지만 Dynamic Tags와 Loop Template 개념만 이해하면 코딩 없이도 상당히 자유롭게 블로그 디자인을 변경할 수 있습니다.

이번 작업처럼 작성자와 날짜를 제거하고 본문 요약문을 추가하는 정도는 몇 번의 클릭만으로 가능하며, 템플릿 하나만 수정해도 사이트 전체에 자동 적용된다는 점이 매우 편리했습니다.

💡 Tip: 별도의 발췌문을 작성하지 않았다면 본문의 앞부분을 자동으로 가져와 표시합니다. 요약문에 어떤 내용이 보일지 염두하고 글 서두를 조금 더 본문을 잘 요약할 수 있는 형태로 작성하는 것이 좋습니다.

나중에 다시 비슷한 작업을 하게 될 경우를 대비해 기록으로 남겨 둡니다.