#15-5. 글(post) 상세 페이지 템플릿 만들기
Vogue 워드프레스 사이트 따라 만들기
글이 나열된 목록에서 하나를 클릭했을 때 열리는 글의 상세 페이지 템플릿을 만들 차례입니다.
15-4에서 카테고리들의 목록 화면을 템플릿화 해서 알아서 열리게 했던 것처럼, 글(post)도 템플릿을 통해 DB에 있는 내용이 불러와져서 화면에 표시가 됩니다. 완성된 모습을 먼저 보면 이렇습니다.
이번 글에는 칼럼을 반응형 화면 사이즈에 맞게 크기 조정을 하는 방법, 모바일 화면을 위해 배치를 바꾸는 방법 등을 주로 참고해 보시면 될 거 같습니다.
1. 템플릿의 칼럼 영역 나누기
먼저, 'Page Templates'에서 'Single basic'이라는 이름의 템플릿을 하나 만듭니다. 참고 사이트는 주된 내용이 나오는 큰 칼럼 외에 양쪽에 부가 정보들 및 베너가 나오는 두 영역이 존재합니다. 이걸 위해 기본적으로 이렇게 나눴습니다.
로우(섹션)는 크게 12조각으로 나눌 수 있다고 보면 됩니다. 합해서 12가 되는 범위 안에서 디자인에 맞게 로우 하나를 칼럼 3개로 나눌 수 있습니다.
조금 더 화면이 좁아진 경우(노트북 해상도 정도) 왼쪽 칼럼을 숨기고 콘텐츠 영역의 넓이에 추가를 하면 주요 콘텐츠가 잘 보일 수 있게 조정이 가능합니다. (콘텐츠 8/12 + 오른쪽 4/12)
태블릿 화면 사이즈(1080px 미만으로 설정)부터는 이제 주요 콘텐츠 표시용 칼럼을 1/1로 전체 넓이로 늘리고, 오른쪽 칼럼까지 숨기면 참고용 V 사이트와 같은 반응형 디자인을 위한 칼럼 조정이 완료됩니다.
참고로, 이때 디폴트 값은 태블릿 화면에서의 사이즈이고, 기본적으로 테마 옵션에서 설정한 모바일 화면 사이즈에서는 알아서 모든 칼럼의 영역은 1/1(100%)로 전환됩니다.(세로로 내려가서 이어짐) 만약 특정 칼럼은 모바일에서도 넓이를 유지하고 싶을 때에는 모바일 화면의 칼럼 넓이를 직접 지정하면 되겠습니다. (칼럼으로 표 만들 때 좋음)
2. 불러올 글의 화면 구성하기
템플릿을 만드는 목적은 글(post)의 내용을 DB에서 가져다 알아서 보여주기 위함입니다. 이걸 빌더에서 구성이 가능하도록 테마 개발사에서 아래와 같은 화면 요소를 개발해 놓은 것으로, 적절한 위치에 배치만 하면 되겠습니다.
중간 화면에서는 왼쪽 칼럼이 숨겨지고, 타이틀 위아래로 분류와 작성일 등이 표시되어야 하는데 요소 편집의 '디자인' 탭에서 화면에 따라 안 보였다 보였다를 설정할 수 있습니다. (테마 옵션에서 설정한 화면 사이즈와 연동)
3. 기획에 따른 연관 콘텐츠들 나열
글의 상세 페이지에는 기본 콘텐츠들 외에 아래쪽과 오른쪽에는 지금 보고 있는 글과 연관된 또는 의도된 콘텐츠들이 노출이 됩니다. 메인 페이지 제작 시 만들어 놓은 '그리드 레이아웃'이 이미 있으니 '그리드' 요소를 활용하여 마음대로 콘텐츠를 노출시킬 수 있습니다.
예를 들어, 관련 기사의 경우 지금 보이는 글과 같은 카테고리의 것들을 5개 보여줄 수 있습니다.
인기 기사의 경우, 방문자가 글을 열어서 읽을 때 열어 본 횟수를 각 글에 기록해서 그걸 토대로 글을 노출시킬 수도 있습니다. (Post Views Counter 설치 시 기록)
4. 화면 전체 높이 중 스크롤된 위치 표시하기
스크롤을 해서 읽을 내용이 많을 경우, 현재 어느 위치까지 스크롤이 됐는지 표시를 해 줄 수 있는 방법이 있습니다. 저는 이 글을 참고해서 적용했습니다.
> https://www.w3schools.com/howto/howto_js_scroll_indicator.asp
템플릿 끝에 '사용자 정의 html'요소를 넣고, 예제를 참고하여 바 표시를 위한 html을 추가했습니다. css를 추가해서, 이 바가 화면 맨 상단에 고정(fixed)되게 높이는 3px에 검정 배경이 되도록 정의합니다. (아직 넓이가 없어서 안 보이는 상태)
이제 마우스로 스크롤이 되는 때를 체크해서 화면의 전체 높이와 스크롤된 높이를 계산 후 바의 넓이를 변경해 주는 스크립트가 추가되면 끝입니다. 자식 테마의 functions.php에 스크립트를 추가하는 방법을 이용했습니다.
wp_footer 훅을 이용하면 body 태그가 끝나는 쪽에 스크립트를 추가할 수 있는데, 조건을 하나 추가해서 글이 열리는 화면( is_single() )에서만 동작하게 할 수 있습니다. 코드는 위 참고 사이트의 것을 id명만 바꿔서 그대로 적었습니다.
이제 화면이 스크롤된 정도를 체크해서 바의 넓이를 조정해 주는 걸 볼 수 있습니다.
완성된 화면 예 :
https://oks-dev.tk/vmagazine2/2024/01/05/aut-iure-aliquam-delectus-aut-inventore/
기타 참고한 V 사이트에 적용된 author의 모든 글들을 표시하는 목록 화면이나, 태그를 클릭 시 같은 태그 글들만 보여주는 목록 화면은 이 과정에서는 빠졌습니다. 단, 페이지 템플릿을 만들어서 연결을 할 수 있다는 부분은 모두 동일합니다.
이상 리뉴얼 된 V사 워드프레스 홈페이지를 따라 만들어 보기였습니다. 설명이 부족한 부분이나 혹시 빼먹은 부분이 있다면 알려 주세요.
끝.
