워드프레스 테마들은 사이트를 수정하려고 하면 테마마다 제어하는 방식이 모두 다릅니다. 같은 “글 목록”을 수정하는 작업이라도 어떤 테마는 커스터마이저에서, 어떤 테마는 위젯에서, 또 어떤 테마는 별도의 템플릿 빌더에서 관리합니다.
이 방식이 매번 새로워서 커스텀하는 재미가 있기도 하지만, 여러 테마를 번갈아 사용하다 보면 설정 위치를 잊어버리기 쉽습니다.
현재 저는 GeneratePress(제너레이트프레스) 테마를 사용하는 블로그에서 카테고리 페이지에 표시되는 글 목록(카드 레이아웃)의 디자인을 수정하게 되었습니다. 나중에 같은 작업을 다시 해야 할 수도 있기 때문에 그 과정을 자세하게 기록해 둡니다.
글 목록 수정 전 상태 점검
기존 카테고리 페이지에서는 카드 내부가 다음과 같은 순서로 표시되고 있었습니다.
썸네일 이미지
↓
글 제목
↓
카테고리 태그
↓
작성자 이름 / 발행일
하지만 실제 방문자 입장에서 생각해 보면 작성자와 날짜보다 “이 글이 어떤 내용을 다루는지”가 훨씬 중요할 수 있습니다.
특히 1인 운영 블로그라면 작성자 정보가 큰 의미가 없는 경우도 많고, 날짜 역시 반드시 보여줄 필요가 없는 경우가 있습니다.
그래서 저는 작성자와 날짜를 제거하고, 대신 글의 일부 내용을 보여주는 본문 요약문(Post Excerpt)을 넣어 방문자가 글 내용을 미리 파악할 수 있도록 변경하기로 했습니다.
Elements 메뉴 진입하기
워드프레스 관리자 화면에서 다음 메뉴로 이동합니다.
외모(Appearance)
→ 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개 있다고 가정해 보겠습니다.
각 게시글마다 작성자, 제목, 날짜가 모두 다를 텐데
동적 태그는 그 게시글에 맞는 값을 자동으로 불러와 표시합니다.
그래서 템플릿 하나만 만들어 두면 모든 카드에 서로 다른 정보가 자동 출력됩니다.
“그럼 이 안에 들어갈 데이터는 어떻게 찾지?”
“동적 태그 이름을 전부 외워야 하나?”
라는 생각이 들 수 있습니다. 하지만 걱정할 필요는 없습니다.
GenerateBlocks는 동적 태그를 직접 입력하는 방식뿐 아니라 목록에서 선택해서 삽입할 수 있도록 만들어져 있습니다.
본문 요약문(Post Excerpt) 추가하기
1. 동적 태그 메뉴 열기
날짜 영역을 선택한 뒤, Preview 버튼 왼쪽에 있는 원통 모양 아이콘(Open Dynamic Tags)을 클릭합니다.
2. 새로운 태그 추가
Insert a new one 버튼을 클릭합니다.
3. Post Excerpt 선택
SELECT A DYNAMIC TAG 항목을 누르면 여러 종류의 데이터가 표시됩니다.
여기서 Post Excerpt 를 선택합니다.Post Excerpt는 게시글의 본문 일부를 자동으로 가져와 출력하는 기능입니다.
4. 글자 수 제한
Post Excerpt를 선택하면 EXCERPT LENGTH 설정이 나타납니다.
기본값은 보통 55 정도인데 블로그에서는 길게 보일 수 있습니다.
저는 깔끔하게 보이는 것을 선호하기 때문에 30정도로 설정했습니다.
30으로 설정하면 글 앞부분 30자 정도만 표시됩니다.
이 값은 선호하는 디자인에 따라 적절하게 조정하면 됩니다.
5. 적용
설정을 마쳤다면 Insert Dynamic Tag 버튼을 눌러 적용합니다.
변경 사항 저장 및 확인
설정을 완료하면 편집 화면에서도 카드 디자인이 변경된 것을 확인할 수 있습니다.
Loop Template의 가장 큰 장점은 템플릿 하나만 수정해도 블로그 전체에 자동 적용된다는 점입니다.
즉,
카테고리 페이지
태그 페이지
아카이브 페이지
검색 결과 페이지
등에서 사용하는 수십, 수백 개의 카드가 한 번에 변경됩니다.
일일이 게시글을 수정할 필요가 없습니다.
마지막으로 우측 상단의 업데이트(Update) 버튼을 눌러 저장합니다.
결과 확인
실제 카테고리 페이지로 이동한 뒤 새로고침(F5)을 해보면 변경된 설정으로 적용됩니다.
방문자는 제목만 보는 것이 아니라 글의 내용을 미리 확인할 수 있기 때문에 어떤 글을 읽을지 판단하기도 쉬워집니다.
특히 이런 수정은 클릭률 향상에도 도움이 될 수 있고 또 홈페이지 주인의 마음에도 드는 디자인으로 수정할 수 있다는 장점이 있습니다.
마무리
GeneratePress와 GenerateBlocks 조합은 처음 사용할 때는 구조가 다소 낯설게 느껴질 수 있습니다.
하지만 Dynamic Tags와 Loop Template 개념만 이해하면 코딩 없이도 상당히 자유롭게 블로그 디자인을 변경할 수 있습니다.
이번 작업처럼 작성자와 날짜를 제거하고 본문 요약문을 추가하는 정도는 몇 번의 클릭만으로 가능하며, 템플릿 하나만 수정해도 사이트 전체에 자동 적용된다는 점이 매우 편리했습니다.
나중에 다시 비슷한 작업을 하게 될 경우를 대비해 기록으로 남겨 둡니다.
