앞 글에서 Query Loop를 사용해서 카테고리 아카이브 페이지 만드는 방법을 알아보았다. 같은 방법을 활용하면 본문 글 아래 Post Grid 관련 글 목록을 만들 수 있다.
1. Query Loop 설정하기
워드프레스 대시보드 디자인 – Elements – Add New Element – Block
Container와 쿼리 루프를 만들면 위와 같이 글 목록이 나오는 것을 볼 수 있다. 이후 전체 글 개수와 개별 글 화면 비율을 설정해주면 된다. 이 글에서는 예시로 3개 글만 가로 한 줄로 정렬되게 진행하기로 했다.
우선 왼쪽 블록 목록에서 쿼리 루프 선택 후
오른쪽 Block 탭에서 Posts Per Page를 3개로 설정하자. 기본 값은 10인데 원하는 만큼 숫자를 변경하면 된다.
* (수정) 블로그 최신 글 목록을 나오게 하려면 쿼리 매개변수(Query Parameters)에서 ‘템플릿에서 쿼리 상속’을 클릭해야 한다. 화면에 한번에 나오는 글 개수는 대시보드 – 설정 – Reading – Blog pages show at most 메뉴에서 원하는 숫자를 입력하면 된다.
이번에는 목록에서 Post Template를 선택하고
화면 오른쪽 Block 탭으로 오면 Grid Item Width 비율을 설정할 수 있다.
관련 글 목록을 4개로 하는 경우 25%를 선택하면 된다.
설정 결과, 위처럼 본문 영역에 3개의 글이 한 줄로 정렬된 것을 볼 수 있다.
2. 헤드라인 추가하기
글 목록만 있으면 허전할 수 있으니 목록 위에 헤드라인을 추가하는 것도 좋다.
최신 글
You May Like
카테고리 이름
위처럼 설정하는 글 목록에 따라 적당한 이름이면 무난하다.
먼저 화면 왼쪽 블록 목록에서 가장 위에 있는 컨테이너 메뉴(⋮) – add before 선택 후 새로운 컨테이너와 하위에 속하는 헤드라인을 추가하면 된다.
* 요소마다 상위에 컨테이너를 배치하면 수정/편집 할 때 일관성 있어 보여서 편한 부분은 있지만, 취향에 따라 선택해도 상관없다.
예시로 만든 Category A라는 헤드라인이 잘 구성된 모습이다. 글 목록 생성은 마쳤는데 필요한 경우 요소마다 디자인 편집을 진행한 다음 카테고리 이름을 지정하면 된다.
3. 카테고리 지정하기
카테고리를 지정하지 않으면 블로그 전체 최신 글 목록이 나오게 된다. 만약 특정 카테고리 글을 보이고 싶다면 간단하게 설정할 수 있다. 먼저 블록 목록에서 쿼리 루프를 선택한 다음,
화면 오른쪽 Block 탭에서 Post Per Page 아래 보이는 파라미터 추가 버튼을 클릭하자. (Post Per Page에서 원하는 화면에 나오는 글 개수 설정)
순서대로 Taxonomies – Categories – 원하는 카테고리를 선택하면 된다.
Taxonomies에는 카테고리 말고도 페이지, 정렬 기준 등 다양한 옵션이 있으니 필요하면 추가할 수 있다.
설정을 마쳤더니 선택한 카테고리 A의 글만 나오는 모습이다.
4. Pagination 만들기
카테고리 지정을 마쳤다면, 글 목록 아래 페이지네이션을 만들면 방문자는 버튼을 눌러서 다음 페이지 글 목록을 볼 수 있다.
먼저 쿼리 블록 목록을 선택하면 화면 가운데 메뉴 바가 나오는데 + Add Pagination 버튼을 선택하자. 참고로 이 버튼은 블록 목록에서는 나오지 않는다.
Grid 블록 아래 새로운 컨테이너와 글 목록 아래 이전, 숫자, 다음 버튼 생성이 완료되었다. 기본 색깔과 문구, 모양 등은 각 블록 요소 선택 후 화면 오른쪽 Block 탭에서 변경할 수 있다.
– 버튼 둥글기 : border-radius 20px
– 버튼 색깔 : #434343
– 버튼 간격 : 각 버튼 margin-left 20px
예시로 위처럼 만들 수 있는데 취향에 따라 디자인하면 된다. 이때 모바일 버전 화면도 보면서 완성하면 좋다. (화면 위 Save 버튼 왼쪽에서 PC, 태블릿, 모바일 아이콘 선택)
5. 글 목록 위치 지정하기
디자인을 마치면 목록을 본문 글 아래 나오도록 지정하면 된다. 먼저 블록 목록에서 Post Tempolate를 선택하고
화면 오른쪽에서 Block이 아닌 Element 탭을 보면 Element Type 설정 창이 나오는데 Post Navigation을 선택하자.
이후 설정 창 아래 Quick Hook Select라는 곳이 생기는데 기본 설정되는 After content container로 두면 된다.
마지막으로 화면 아래 Display Rules – Location 설정을 Post로 한 다음, 화면 위 저장 버튼을 누르면 작업을 마칠 수 있다.
이후 블로그 아무 글 본문 페이지로 오면 조금 전 만든 글 목록이 잘 나오는 것을 볼 수 있다. 헤드라인이나 이미지 크기, 제목 글씨 등 아무 설정도 하지 않은 모습인데 각 블록을 선택해서 취향 대로 디자인을 진행하면 된다.
또한 페이지네이션은 해당 카테고리 글이 별로 없어서 이전(Previous) 버튼이 없는데, 다음 페이지로 넘기거나 글이 많아지면 활성화되는 점 참고하자.
워드프레스 마스터 가이드
