brunch

매거진 IMPREZA 테마 활용

라이킷 7 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Jul 08. 2023

#14-3. 블로그 홈, 카테고리별 목록 템플릿 만들기

워드프레스 블로그 만들 때 헷갈릴 수 있는 부분들

1. 블로그 홈(모든 글을 표시하는 곳) 만들기

모든 글이 최신 글부터 순서대로 표시되면 되는 블로그 홈(All articles)은 어떻게 만들어야 할까요? 워드프레스에서는 이렇게 설명하고 있습니다.

워드프레스 사이트에서 홈페이지를 지정하지 않으면 최신 글 목록이 메인에 표시됩니다. 이때, 테마의 파일들 중에 home.php 파일이 있다면 이걸 통해서 모든 글들이 표시됩니다. 이게 없다면 그다음 index.php 파일을 통해 목록이 표시되고요.

그런데 앞에서 메인 페이지를 하나 만들고 이걸 홈페이지로 설정을 하면서 이제 도메인을 입력하고 사이트를 방문하면 특정 페이지가 표시가 되도록 바뀐 상황입니다.

이제 모든 글이 순서대로 나오도록 하기 위해 페이지를 하나 만들어서 [읽기 > 글 페이지]로 설정해 보겠습니다.

'All articles'라는 이름으로 페이지를 하나 만들고, 읽기 설정에서 글 페이지로 지정, 그러면 제목 아래쪽에 '현재 최근 글을 보여주는 페이지를 편집하고 있습니다'라는 메시지가 나오고 페이지 편집 화면에 내용이 전혀 없어도 글 목록이 나오는 걸 볼 수 있습니다. 그런데 리스트가 원하는 디자인과 다르네요. 만약 리스트 모양을 디자인대로 꾸미려면 index.php 파일을 자식 테마에 복사해서 html 태그를 수정하고, css 스타일을 추가하는 작업이 필요할 겁니다.

이 과정을 간편화 하기 위해 Impreza 테마에서는 페이지 콘텐츠 영역에 Grid 요소를 가지고 목록을 편집하면 index.php 파일 대신 페이지의 내용이 나올 수 있도록 코딩 개발이 돼 있습니다.

페이지 빌더를 이용해서 페이지 제목과, 그리드가 추가되도록 한 다음, 이 페이지에 맞는 쿼리 그대로를 pagination과 함께, 메인 페이지의 최신글과 동일한 그리드 레이아웃으로 여기서는 3 칼럼으로, 그리고 반응형 화면에 따라 칼럼수를 바꿔서 표시될 수 있도록 지정합니다. 이제 다시 페이지를 열어보면, 디자인대로 3 칼럼의 글 목록이 최신글부터 나오는 걸 볼 수 있습니다.

만약 이용하는 테마에 이러한 방식이 준비돼 있지 않다면?

이때에는 따로 블로그 홈은 지정을 하지 않고 별도의 페이지로 모든 글을 표시해도 문제는 없습니다.(단, Breadcrumbs가 표시될 경우는 블로그 홈으로 갈 때 문제가 있을 수 있음) 단 이때에는 이 페이지의 기본 쿼리가 아니라 임의로 글 전체를 불러오는 방식으로 설정하면 되겠습니다.

너무 장황하게 설명한 거 같아 요약하면,

읽기 설정에서 '글 페이지'로 지정을 한 페이지에는 사이트의 모든 글들이 표시가 되는데 이 목록을 디자인대로 수정하려면 테마의 index.php 파일 수정이 필요하다.

만약 원하는 디자인대로 리스트를 표시하고자 한다면 Impreza와 같이 이를 고려하여 코딩이 된 테마는 페이지 편집 내용을 이용해서 목록 레이아웃을 마음대로 바꿀 수 있다.

혹시 테마에서 이 부분 고려가 안 되었다면 그냥 글 페이지 설정을 하지 말고, 별도의 페이지를 만들고 페이지 빌더의 요소 중 글 목록 모두를 표시하는 방향으로 별도의 페이지를 만든다.

이 내용입니다.

그러니까 모든 글이 표시되는 페이지의 경우는 디자인을 바꾸고 싶다면 상황에 맞게 가장 간편한 방법으로 준비하면 됩니다.

2. 카테고리별 목록 템플릿 만들기

참고용 템플릿을 보면, 블로그 홈의 구조와 카테고리의 제목이 다르게 나오는 것 외에 나머지는 똑같은 구조로 표시되는 걸 볼 수 있습니다.

워드프레스에선 템플릿 파일 우선순위에 의해 테마에 archive.php나 category.php 파일이 있다면 이걸 토대로 목록 화면이 나오게 되는데, 이 부분도 Impreza는 어드민에서 구조도 만들고 템플릿을 대체하는 설정을 할 수 있도록 방법이 준비 돼 있습니다.

블로그 홈용 페이지 편집에서 'Templates' 버튼을 누르면 이 페이지 전체 구조를 템플릿으로 저장할 수 있습니다.

템플릿 > Page Templates에서 Archive라는 이름의 템플릿을 하나 추가합니다. 그다음 'Templates' 버튼을 눌러보면 아까 저장한 템플릿이 보이고, 클릭하면 그대로 구조가 붙여 넣기 됩니다.

이제 이걸 사이트의 보관함(Archive) 템플릿으로 설정합니다.

그다음 카테고리의 목록 화면을 열어 보면, 해당 카테고리의 글들이 블로그 홈과 마찬가지로 디자인대로 나오는 걸 볼 수 있습니다.

+ 메뉴 구성하기

이제 [외모 > 메뉴]에서 블로그 홈과, 카테고리 주제별 목록을 바로 갈 수 있도록 메뉴를 구성합니다. 주제별 카테고리 글 목록은 따로 페이지로 구성을 할 필요 없이 카테고리 목록 화면이 나오도록만 연결하면 되겠습니다.

! 테마에 따라 코딩으로만 목록 화면을 수정할 수 있는 경우, 종종 임의로 페이지들을 만들어서 주제별 글들을 표시하는 경우가 있는데, 문제는 워드프레스 글 목록에서 카테고리 이름을 클릭 시 페이지로 이동하는 게 아니라 원래의 카테고리 목록으로 가버려서 의도하지 않은 레이아웃이 나오는 경우가 있습니다. 그러니 목록은 템플릿으로 준비 후 메뉴를 구성하는 게 가장 바람직한 방법이 됩니다.

▼ 아래와 같은 목록 상에서의 카테고리 이름 링크 버튼은 페이지로 가지 않습니다. 카테고리 주소로 연결됩니다.