#6-6. 토픽(blog) 글 리스트, 상세페이지
상점 소개 사이트 만들기
참고사이트도 워드프레스의 주요 포스트 타입인 글(post)을 활용하여 소식을 전하고 있습니다. 카테고리는 1개만 이용 중인 것으로 보이고, 글의 리스트가 나오는 곳은 메인 페이지, 그리고 토픽 글만 보이는 카테고리 주소 페이지 두 곳입니다. 글의 상세 페이지는 콘텐츠의 최대 넓이를 800px로 기본 1450px보다 조금 좁게 표시를 하고 있습니다. 하단에는 댓글은 없고 전후 글로 이동하는 내비게이션만 표시됩니다.
모바일에서의 스타일 변경도 체크를 해 보면, 리스트에서는 제목이 아래로 내려가고 날짜 뒤 선은 사라집니다. 글 상세 페이지에서는 내비게이션이 푸터 바로 위로 붙어서 가로를 꽉 차게 있는 형태로 바뀝니다.
1. 목록을 위한 그리드 디자인 만들기
메인과 카테고리 주소에서 보이는 리스트 모양은 거의 같은데, 카테고리 주소에서는 글의 위아래에 공간만 추가가 된 형태입니다. 1개의 리스트 디자인만 만들고 카테고리 주소에서는 css로 위아래 공간만 추가하면 되겠습니다.
Impreza > Grid Layouts에서 새 그리드 모양 하나를 추가합니다.
[ 날짜 - 제목 ] 이렇게 가로로 화면 요소를 배치하려면 css flex를 쓰면 편리합니다. 이 스타일이 적용될 수 있는 Horizontal Wrapper를 추가 후 Post Date, Post Title 두 화면 요소를 추가했습니다.
모바일 화면에서는 두 화면 요소의 최소 넓이를 100%로 변경해서 1열로 변경되도록 조치합니다.
2. 목록이 표시될 페이지 만들기
이제 목록 디자인을 이용해서 페이지에 Grid를 넣어볼 차례입니다.
기존의 따라 하기 과정에서는 각 목록을 위한 템플릿을 제작하여 카테고리, 태그, 작가를 위한 주소에 맞는 리스트 뷰를 제공하였다면, 이 사이트에서는 다양한 목록이 나오는 구조는 아닙니다. 그래서 이번에는 간단히 페이지를 하나 만들어서 글을 표시하는 방법을 이용해 봤습니다.
페이지를 만들고, 목록이 표시될 Grid 화면 요소를 넣은 다음, 한 페이지에 글 10개씩을 '페이지네이션'이 있는 목록으로 표시되도록 했습니다. 목록의 모양은 1번에서 만든 'Topic Grid'를 지정했고, 1열로 각 글 간의 공간은 일단 없도록 설정했습니다.(공간은 css로 적용) 이 목록에 css를 적용하기 위해 'Extra class'에 'topic-grid'라는 이름을 붙여줬습니다.
미디어 쿼리를 이용해서 pc 화면에서는 날짜 뒤에 선이 나오게, 그리고 마우스를 올렸을 때(:hover) 패딩을 추가해서 글이 오른쪽으로 조금 이동하는 효과를 추가했습니다.
목록이 제대로 구현이 되었다면, 메인 페이지에도 그리드를 같은 방법으로 추가합니다. 적용했던 css도 메인 페이지에도 복사하여 추가를 하되, 위아래 padding-top / padding-bottom만 빼면 되겠습니다.
3. 글 상세 페이지 템플릿 만들기
Impreza > Content templates에서 'Single Post'라고 템플릿을 하나 추가했습니다.
최대 넓이 800px인 섹션을 넣고, 순서에 따라 각 화면 요소들을 넣어줬습니다. 내비게이션 섹션을 따로 분리를 한 것은, 모바일에서 꽉 차는 상단 구분선을 넣기 위해서입니다.
내비게이션 버튼에 대한 스타일은 css를 추가해서 박스 형태로 만들었습니다.
만든 템플릿을 테마 옵션에서 글의 상세 페이지를 위한 템플릿으로 지정한 다음 글의 주소를 열어 보면, 글을 편집한 내용이 디자인대로 표시되는 것을 볼 수 있습니다. (※ 전후 내비게이션 기본 스타일은 테마의 것을 그대로 활용)
적용된 글 리스트 : https://oks-dev.tk/foodstore/topics/
여기까지 하면 전체적으로 표현되어야 할 기본 구조나, 효과, 화면 요소들은 대부분 준비가 된 상태입니다. 이후에는 페이지를 추가가 필요하더라도 앞서 준비해 놓은 구조들을 활용해서 콘텐츠를 잘 배치해서 사용을 하면 되겠습니다.
상점 소개 사이트 따라 만들기, 끝.
