#5-3. 블로그 페이지, 글 상세 페이지 만들기
IMPREZA 테마로 포트폴리오 사이트 만들기
이번에 진행할 과정은 사이트의 또 하나의 주요 콘텐츠 종류인 글(post)의 목록이 나오는 페이지와, 글 상세 내용을 볼 수 있는 페이지 템플릿을 만드는 과정입니다.
글 목록이 나오는 페이지를 만들기 위해서 우선 워드프레스의 글 페이지가 연결되는 구조를 알아보겠습니다.
워드프레스는 블로그 형태로 처음 시작이 된 것으로 알고 있습니다. 그만큼 워드프레스의 글(post)은 비중이 높은 콘텐츠 형식입니다. 워드프레스의 템플릿 우선순위를 보면 이 글들만의 템플릿이 약속돼 있기도 하고, '설정> 읽기'를 보면 글 페이지라는 것을 지정할 수 있게 돼 있습니다.
이렇게 지정을 한 페이지는 편집하려고 하면 이런 메시지가 보이게 됩니다. 테마에 따라 편집이 아예 안 되게 해 놓는 경우도 있습니다.
그러면 글(post) 목록이 나오는 화면을 꾸미려면 어떻게 해야 할까요?
1) 글 목록 관련 템플릿 파일을 열어서 수정합니다. (home.php 또는 index.php)
2) 최근에는 페이지 빌더를 대부분 사용하다 보니 아예 블로그 페이지를 지정하지 않고 별도의 페이지에서 글을 불러다가 보여주는 방식을 이용하기도 합니다. (읽기 > 글 페이지 지정을 하지 않고 비워둠)
3) Impreza 테마의 경우는 읽기> 설정에서 지정한 페이지를 가지고 어드민 내에서 목록을 꾸밀 수 있게 개발돼 있어서 페이지 빌더를 이용해서 마음대로 디자인에 맞게 수정이 가능합니다. 테마의 화면을 다루는 체계를 그대로 이용할 수 있으니 그리드 하나의 디자인도 만들어서 준비할 수 있습니다.
블로그 목록 페이지 구성하기
이제 블로그의 목록 화면도 디자인대로 페이지를 꾸미기만 하면 되겠습니다.
참고사이트의 목록 디자인에 맞게 Grid Layout을 하나 만들었습니다. 이미지 부분 위에 마우스를 올렸을 때 오버레이가 나타나는 것, 그리고 화살표 아이콘이 나오는 효과는 화면 요소를 넣어서 구현이 어려우므로 css를 추가해서 해결을 했습니다. (css의 :before, :after 이용)
글 상세 페이지용 템플릿(Content template) 만들기
모든 글의 템플릿을 만들어야 하므로, Impreza > Content templates에서 'Post Single'이라는 템플릿을 하나 추가합니다. 참고사이트의 디자인을 보면 본문의 텍스트와 아래쪽 전, 후 글 내비게이션, 댓글 부분은 총 넓이 730px로 돼 있는 걸 볼 수 있습니다.
로우의 콘텐츠 폭을 임의 제한을 해야겠지요. 로우 편집에서 디자인 > Sizes에서 최대 넓이를 800px로 설정해 주면 되겠습니다. (양쪽 패딩이 각각 35px이 있음)
글 내용이 나오는 'Post Content' 부분은 글의 편집 내용 그대로 기본 콘텐츠 폭 1100px로 나오게 됩니다. 이미지도 한 번 넣어봐야겠네요.
우선 글에 이미지를 넣는 방법은 편집 화면 좌상단 '미디어 추가' 버튼을 눌러주면 됩니다. 이미지를 1개를 넣을 수도 있고, 여러 개를 갤러리 형태로 그룹으로 넣을 수도 있습니다. 테스트를 위해 이미지 2개를 갤러리로 만들어 한 번 넣어 보겠습니다. 다시 글의 주소를 열어 보니 이미지는 의도대로 잘 추가가 되는 듯합니다.
디자인처럼 중간중간 들어가는 사진만 1100px이 되어야 하고, 텍스트는 730px 안으로 들어가려면 뭔가 조치가 필요하겠습니다.
워드프레스의 기본 편집기에서 적게 되는 텍스트는 한 문장이 기본적으로 p 태그로 묶여 있게 되는데요, 이 p 태그에만 적용되는 css 스타일을 추가해서 폭을 730px로 제한해 주면 디자인과 같이 보일 수 있게 됩니다. css를 추가한 후 다시 글을 열어 보면, 이제 의도대로 글 내용 중 텍스트는 730px로 최대 넓이가 고정이 되어, 아래쪽 화면 요소들과 폭이 같아지게 됩니다.
여기까지 적용을 하면 블로그 목록, 그리고 글의 상세 페이지가 완성됩니다.
> https://oks-dev.tk/portfol/blog/
(※ 댓글 폼과, 전후 내비게이션의 스타일은 Impreza의 것을 일부만 수정해서 사용했습니다.)
이제 중요한 워드프레스의 구조적인 연결은 어느 정도 완료가 되었고, 남은 부분은 소개를 위한 About 페이지, 지도와 문의 폼이 있는 Contact 페이지 추가 정도가 될 듯합니다.
계속...
