GeneratePress 테마 프리미엄 버전을 사용 중이라면 Query Loop(쿼리 루프) 기능을 활용해서 카테고리 글 모음(아카이브) 페이지 디자인을 변경할 수 있다. 즉 아카이브 페이지를 새로 만들어서 블로그 카테고리 페이지에 적용하는 방법인데 진행은 어렵지 않다.
* 구텐베르크 에디터를 사용하는 다른 테마도 쿼리 루프 기능을 쓸 수 있지만, 구체적인 설정 방법 등은 테마마다 다를 수 있습니다.
참고로 Site Library를 활용하면 기본 테마에 있는 아카이브 페이지 요소를 복사 붙여 넣기가 가능한 점도 알아두자.
관련 글
Site Library로 블로그 디자인 쉽게 하는 방법
1. Element 만들기
워드프레스 대시보드 – 디자인 – Elements로 이동한 다음 Elements 추가 버튼을 클릭하자.
타입 선택 창이 나오면 Block 요소를 선택한 다음 생성 버튼을 클릭하면 된다.
2. Query Loop 만들기
이후 빈 화면에 컨테이너를 하나 만들고(빈칸에 /container 입력) Query Loop를 생성하면 된다.
쿼리 루프 템플릿이 몇 가지 있는데 마음에 드는 것을 선택하면 무난하다. (이 글에서는 예시로 네 번째 템플릿 선택)
3. Query Loop 수정하기
화면처럼 쿼리 루프가 만들어진 것을 볼 수 있는데 드래그&드롭으로 요소끼리 위치를 변경하거나 폰트 크기, 색깔, 비율 등을 설정하면 된다. (화면 왼쪽 목록이나 본문 요소 직접 선택)
예로 Post Template를 선택하면 카테고리 아이콘 전체를 수정할 수 있다.
화면 오른쪽 Block 메뉴를 보면 다양한 편집 옵션이 나온다. Grid Item Width를 수정하면 화면 내 포스트 간격을 조정할 수 있는데 그 외 아래로 레이아웃, 사이즈, 간격, 색깔 등 옵션이 많으니 확인해 보자.
이후 List 탭에서 쿼리 루프 아이콘을 선택한 다음,
화면 오른쪽 Block 탭에서 쿼리 파라미터의 템플릿 속성 상속 버튼을 On으로 하면 최신 글 목록이 나오게 된다. (화면에 한번에 나오는 글 개수 설정은 대시보드 – 설정 – Reading – Blog pages show at most 메뉴에서 숫자 지정)
버튼을 활성화하지 않으면 Block 탭이 위와 같은 모습인데, 쿼리 루프로 특정 카테고리만 지정해서 최신 글을 보이게 하려면 글 개수를 설정하고 아래 매개변수를 추가하면 된다. (Add Parameter – Taxonomi – Categories – Select Terms)
관련 글 (카테고리 지정하기 소제목 참조)
Query Loop로 Post Grid 관련 글 목록 만드는 방법
4. 모바일 버전 확인하기
코딩 같은 주제를 다루는 게 아니라면 모바일 접속자도 많을 것이다. 화면 위 발행 버튼 왼쪽 아이콘을 클릭한 다음 태블릿 PC와 모바일 버전도 페이지를 수정하면 좋다.
5. Element Type 지정하기
디자인 설정을 마쳤다면 현재 Element 타입을 바르게 지정해야 블로그에도 적용된다. 먼저 목록에서 컨테이너를 선택이 필요하다.
그리고 화면 오른쪽 Element 탭 아래를 보면 Element 타입 선택 창이 있는데 Loop Template를 선택하면 된다.
6. 블로그 위치 지정하기
이제 해당 아카이브 페이지가 블로그 내 어디에서 보여질 것인지 위치를 지정해야 한다.
Add Location Rule 버튼을 눌러서 원하는 위치를 선택하면 된다.
– Front Page : 블로그 메인 화면에 적용
– All Archives : 블로그 모든 카테고리 페이지에 적용
– Search/No Search Results : 검색 결과 있음/없음 페이지에 적용
위치 지정을 마치면 화면 위의 저장(발행) 버튼을 누르면 작업은 끝이다.
Element 저장이 완료되면 위처럼 목록에서 제목과 타입, 위치 정보를 볼 수 있는데 제목은 아무 편한 이름도 상관없다.
새로 만든 아카이브 페이지가 잘 적용된 것을 볼 수 있다.
관련 글
GeneratePress 마케터 테마 선택 이유와 설치 방법
GP 마케터 테마 사이드바 카테고리 목록 추가하는 방법
