#14-4. 글(post) 상세 페이지 템플릿 만들기
워드프레스 블로그 만들 때 헷갈릴 수 있는 부분들
글의 상세 페이지가 표시되는 템플릿은 워드프레스에서는 테마 폴더 안에 single.php 파일을 만들어 준비합니다. 목록에서 글의 사진이나, 제목을 클릭하면 글의 내용을 볼 수 있는 상세 페이지로 이동이 되는데 한 번 열어 보겠습니다.
딱 편집기에서 작성한 글 내용만 나오게 되네요. 참고용 템플릿 사이트를 통해 원하는 디자인의 구조도 같이 확인해 봅니다.
위쪽으로 카테고리와 작성일, 제목, 요약글, 대표(featured) 이미지가 나오고, 그 아래로 콘텐츠의 내용, 끝으로 연관 글이 표시되고 있습니다.
Impreza 테마는 single.php를 수정하는 방법, 또는 어드민 내에서 템플릿 구조를 만들고 테마 옵션을 통해 연결하는 방법 두 가지를 모두 이용을 할 수 있습니다. (개발을 위한 많은 시간을 줄여줌)
[템플릿 > Page Templates]에서 'Posts'라는 이름의 템플릿을 하나 만들고, 상세 페이지에 표시되어야 할 화면 요소들을 차례대로 넣습니다. 대표 이미지 외에는 모두 700px이라는 넓이로 제한이 되는 디자인인데 이 부분도 테마가 업데이트되면서 조금 더 쉽게 적용할 수 있게 바뀌었네요. 로우 편집 > 'Content Width'를 700px로 설정하면 최대폭이 700px까지만 표시됩니다. (테마 옵션에서 설정한 1710px보다 우선순위 적용)
넣을 수 있는 화면 요소로는 코딩으로 템플릿 파일에 적을 수 있는 정보들 대부분이 준비돼 있습니다.
맨 아래 연관글들의 경우 3 칼럼으로 700px 내에서 표시를 하면 너무 글 목록이 좁게 나오는 것 같아 여기는 캐러셀 형태로 2 칼럼으로 표시되는 거로 바꿔봤습니다. 그다음 테마 옵션 > Pages Layout > 글(Post)용 템플릿으로 방금 만든 템플릿을 지정하면 끝.
이제 아무 글이나 다시 클릭해서 열어보면, 의도대로 화면이 구성되면 완료입니다. 참고용 템플릿에서는 blockquote(인용문) 디자인이 배경에 그러데이션이 적용이 되어서 이 부분은 템플릿의 css 부분에 추가해서 수정했습니다.
글 페이지 예
> https://oks-dev.tk/wpblog/people/adipisci-facilis-minima-dignissimos-culpa-aut/
참고용 템플릿을 통해 디자인 가이드가 명확하니 기준에 맞게 테스트 사이트를 제작할 수 있었습니다. 워드프레스는 현재 열린 페이지의 주소에 따라 어떤 데이터를 가져와서 어떤 템플릿을 통해 보일지 규칙이 정해져 있습니다.(설정>고유주소에서 주소를 보기 쉽게 설정 가능) 그래서 작동하는 구조를 이용하면 제작 완료 후에는 내 콘텐츠 생산에만 집중할 수 있도록 도와줍니다.
워드프레스로 블로그 사이트를 하나 만들고자 계획이 있으신 경우, 원하는 디자인의 테마가 없다면 디자인을 따로 구상한 다음 그걸 쉽게 구현 가능한 환경으로 세팅을 하는 것도 좋은 방법이 될 수 있습니다.
블로그 따라 만들어 보기, 끝.
