#10-2. 글(post) 상세 페이지 템플릿 만들기
온라인 매거진 만들기
글 상세 페이지나 목록 화면을 만들기 위해서는 우선 콘텐츠가 있어야 합니다. 디자인 리뉴얼을 하는 경우에는 기존에 작성된 콘텐츠를 가지고 만들면 되겠지만 처음 구축을 하는 상황이라면 임시 콘텐츠를 추가해서 이걸 가지고 작업을 하면 편리합니다.
참고사이트와 같은 콘텐츠 중심의 사이트 만들기인 경우 저는 이런 순서로 진행을 합니다.
1. 더미(dummy) 글 만들기
2. 글의 상세 페이지 만들기
3. 글 리스트 만들기
4. 메인 페이지 만들기
가장 작은 단위부터 역으로 처리를 하면 더 편한 것 같습니다.
1. 임시 글 만들기
이번에도 fakerpress를 이용해서 임시 글들을 추가합니다.
총 150개의 글(post)을 내용도 일부 넣고, 카테고리는 각 1개씩 지정되도록, 그리고 대표 이미지는 목록을 만들기 위한 600x900 사이즈의 것이 등록되도록 했습니다. (※ 더미 글 및 여기에 쓰인 이미지들은 차후에 한꺼번에 삭제 가능합니다.)
2. 각 글이 보일 콘텐츠 템플릿 만들기
목록에서 각 글을 클릭하면 각 글의 상세 내용이 나오는 화면(각 글의 url)으로 이동이 됩니다. 이 글의 모습은 워드프레스 테마에서 single.php라는 파일을 통해 준비를 할 수 있는데요, Impreza 테마의 경우 테마 파일을 수정할 필요 없이 어드민에서 템플릿을 마음대로 만들고 구성할 수 있습니다.
'Impreza > Content templates'에서 템플릿을 제작 후, '테마 옵션 > Page layout'에서 글이 보일 때의 템플릿으로 지정을 하면 앞으로 글은 이 템플릿을 통해 화면에 표시가 되는 겁니다.
이제 참고사이트의 디자인 구조를 한 번 파악해 보겠습니다.
글은 최대 1300px 사이즈의 박스 형태 안에 표시가 됩니다. 위쪽에는 속한 카테고리 이름 / 제목 / 작성일이 나오고, 그 아래로 워드프레스 편집기를 통해 작성된 본문 내용이 이어지는데 글자들은 최대 사이즈가 700px로 제한되어서 표시됩니다.(사진에는 제한 X) 그리고 모든 화면 요소는 가운데 정렬입니다.
모바일 화면에서는 상단 글의 정보 표시들 위로 대표 이미지가 표시됩니다.
템플릿을 편집 시에는 아래와 같이 하면 디자인대로 표시가 가능합니다.
글의 대표 이미지는 'Post Image'라는 화면 요소를 넣으면 표시가 가능합니다. 이때 모바일에서만 보이도록 태블릿 화면 사이즈까지는 'Hide on' 옵션을 적용했습니다. 바로 이어지는 글의 정보들은 세로형 묶음(vertical wrapper)으로 묶은 다음, 모바일 화면에서는 양쪽 공간을 두고 위로 올리는 조치를 하면 사진과 살짝 겹친 구조를 만들 수 있게 됩니다.
편집기의 내용 그대로를 표시하는 'Post Content'요소를 넣을 때 내용 중 p 태그로 감싸인 텍스트는 일정 넓이 내에 있는 css를 적용하기 위해 ID를 적었습니다.
1300px(콘텐츠 최대 넓이)에는 박스 형태를 표시하기 위해 그림자가 표시되어야 합니다. 이건 Impreza 테마에서 표시하는 html 구조를 파악하여 css로 추가를 해 주면 해결이 되었습니다. 로우(섹션) 설정에서 클래스 이름(b-shadow)을 넣고 css를 추가해서 배경색과 박스 형태를 적용했습니다.
글의 내용 아래로 이어지는 연관 글 목록을 만들 순서입니다.
Grid요소를 넣을 때 보일 대상을 현재 글과 같은 카테고리의 글로 설정하면 같은 분류의 글들이 표시되게 할 수 있습니다. 테스트용으로는 페이지 처리는 '없음'으로 해 놨으나, 만약 화면 스크롤 시 계속해서 글이 불러와져서 붙게 하려면 페이지 처리 옵션을 조정하면 됩니다.
연관 글들을 불러왔을 때 목록이 어떤 모습으로 표시될지 그리드 레이아웃을 만들어줘야 합니다.
Impreza > Grid layouts에서 연관 글들 표시를 위한 레이아웃 하나를 추가해서, 참고사이트의 디자인대로 표시되어야 할 정보 및 이미지들을 순서에 맞게 배치를 했습니다.
다시 그리드 설정의 '외모' 탭에서 방금 만든 그리드 레이아웃을 지정하고, 총 표시될 넓이는 디자인대로 759px로 제한을 주면 연관 글들 목록 표시도 완료가 됩니다.
글 화면 예 :
https://oks-dev.tk/vmagazine/fashion/trend-fashion/illum-consequatur-vitae-libero-modi/
( ※ 모바일에서는 사진이 붙어서 표시되는 카테고리 목록과 같은 형태로 바뀌어 연관 글들이 표시됩니다. 이건 다음 과정인 카테고리 목록을 만들게 되면 해당 레이아웃을 이용하면 됩니다. 참고사이트의 경우 콘텐츠 관련 통계를 이용해서 연관 글들 중간중간 노출하는 콘텐츠들이 따로 있습니다. 일단 이건 이번 제작 과정에서는 패스를 했습니다. )
다음으로는 카테고리별 글 목록을 만드는 과정으로 이어집니다.
계속...
