#2-1. 레이아웃 설정 및 싱글 페이지 탬플릿 제작
IMPREZA로 KMONG 블로그 사이트 따라 만들기
모든 작업이 마찬가지겠지만 워드프레스 사이트도 뼈대가 되는 레이아웃이 완성이 되면 이후에는 작업이 훨씬 수월해집니다.
그럼 중심이 되는 레이아웃 설정이란 무엇인가라고 한다면, 제가 생각하는 기본 요소로는 다음과 같습니다.
1. 주요 색 배합
2. 폰트
3. 헤더
4. 푸터
5. 주 사이트 콘텐츠 폭
6. 모바일 화면의 분기점
7. 기타 이 외 테마 옵션에서 설정할 수 있는 것들
IMPREZA 테마의 경우 이 요소들을 설정하기가 매우 쉬운 편입니다. 꼭 필요한 요소의 설정별로 주제가 딱 나눠져 있고 옵션의 설정량도 다른 테마에 비해 그리 많지 않습니다.
그럼 이제 실제 적용을 하는 과정입니다.
1. 테마의 옵션 설정
참고사이트에서 확인한 정보들 : 폭 1120px / 대표 색 번호 #ffce00 / 폰트 open sans, 15px
테마 옵션 각 메뉴설정을 통해 하나씩 적용합니다.
2. 헤더 만들기
Impreza > Headers 메뉴를 클릭 후 'Add Header'를 클릭하면 헤더 빌더 편집기가 나오게 됩니다.
처음부터 구조를 하나씩 넣어도 되지만, 더 쉽게 하려면 이미 만들어진 템플릿을 활용합니다. 오른쪽 상단에 탬플릿 버튼을 클릭 후 참고 사이트와 비슷한 탬플릿을 하나 선택합니다.
로고 이미지를 교체하고, 메뉴는 테마 디자인 > 메뉴에서 새로 만들어준 메뉴를 연결해 주고, 검색 기능은 오른쪽 끝으로 이동해 주면 참고 사이트와 모양이 같아지겠네요.
(※ 각 영역의 높이, 로고 사이즈, 스티키 설정, 그리고 기기별 헤더 모양의 변경은 모두 이곳에서 옵션으로 제어가 가능합니다.)
테마 디자인 > 메뉴는 아직은 대략적인 메뉴의 양 및 서브 메뉴의 존재에 대한 표시만 확인하면 되기 때문에 사용자 정의 링크들로 빠르게 구성해서 사용합니다. 이건 차후에 실제 페이지 또는 카테고리 주소들로 언제든 대체가 가능합니다.
다 만들어진 헤더 구조를 노출하는 방법은, 테마 옵션 > Pages Layout에서 설정 가능합니다. 만든 헤더를 연결 후 사이트를 열어 보면 참고 사이트와 거의 비슷하게 표시가 되는 걸 볼 수 있습니다.
3. 푸터 만들기
참고 사이트에서는 3컬럼의 상단 구조 및 아래쪽에는 카피라이트, 그리고 주 메뉴와 똑같은 메뉴가 한 번 더 노출이 되고 있습니다. 푸터는 사이트에서 하나의 조각 개념으로 Impreza > Page Blocks 에서 블럭 개념으로 제작을 할 수 있습니다.
여기서도 페이지 빌더를 통해 직관적인 구조로 푸터 구조를 구성할 수 있고, 현재까지 적용한 내용을 열어보면 참고사이트와 유사한 구조가 완성이 됩니다.
4. 그리드 제작을 위한 더미 콘텐츠 생성
리스트 뷰를 만들기 전에 우선 콘텐츠들이 있어야 작업이 가능합니다. 이런 걸 도와주는 플러그인들 중에 저는 'FakerPress'를 종종 사용을 하는데, 차후 일괄 제거도 가능해서 편리한 듯합니다.
자동으로 더미 글들을 생성하기 전에 우선 글들을 분류할 카테고리들을 만들어 줘야 합니다.
그 다음, FakerPress > Posts 메뉴를 클릭 후 몇개의 글을 어떤 방식으로 임시로 만들지 설정을 하게 되는데, 플러그인을 통해 저는 150개의 더미 글을 만들어 봤습니다. 주의할 점이라고 하면 중간에 Rate가 나오는데, 100으로 하면 이 설정을 꼭 적용해라 하는 부분이고, 카테고리 지정 및 대표 이미지 적용 부분은 꼭 확인 후 적용을 해야 한다라는 점 같습니다.
여기까지 하고 사이트를 열어보면, 워드프레스의 기본 특성 상 최신 글들부터 잘 나열이 된 걸 볼 수 있습니다.
5. 싱글 글 페이지 탬플릿 만들기
글이 만들어졌으니 글 페이지 탬플릿 제작까지 진행을 해 봤습니다.
참고사이트는 헤더 아래, 브래드크럼이라고 해서 현재 위치를 표시한 다음, 글의 대표이미지 위에 글 제목과 작성일, 카테고리들을 표시하고 있습니다. 그 아래로 왼족엔 본문 글과 오른쪽엔 검색 기능 + 최신 글 5개를 노출하고 있습니다.
따라하기 사이트에서 생성한 글을 한 번 열어보면 아직은 본문 내용만 나오는 기본 구조로 표시가 됩니다.
워드프레스의 탬플릿 구조상 테마의 single.php 파일을 이용해서 탬플릿을 직접 수정하는 방법으로도 이 구조를 수정할 수도 있지만, Impreza 테마는 탬플릿 구조도 어드민에서 쉽게 설정할 수 있게 구조를 만들어 놨습니다.
Impreza > Content templates 에서 탬플릿 하나를 추가합니다.
'Single Post Page'라 탬플릿 이름을 짓고, 화면에 표시할 요소들을 페이지 빌더를 이용해서 구성합니다. 탬플릿을 제작 후 테마 옵션에서 이 탬플릿 구조를 통해 글을 보여줘라 약속을 하게 되면, 방금 만든 탬플릿 구조대로 글이 표시되는 걸 볼 수 있습니다.
여기까지 설정이 되고 나면, 이후 해야 할 것은 글들이 어떻게 원하는 디자인대로 나열이 되도록 할 것인가에 대한 부분입니다. 그리드 빌더를 통한 리스트 구성 작업은 다음 글에 다뤄보겠습니다.
현재까지 적용한 사이트의 모습은 당분간 여기서 참고 가능합니다.
