#7-5. 블로그(PROJECT) 콘텐츠 표시하기
그리드 디자인 사이트 만들기
참고사이트를 보면 워드프레스의 글(post) 형식을 프로젝트에 대한 소식 안내를 위해 사용한 것으로 보입니다.
내가 제작할 사이트에도 이런 방식으로 소식들을 보여주고자 한다면, 준비해야 할 것들은 아래와 같습니다.
1. 전체 프로젝트 콘텐츠를 모두 모아 보여주는 페이지 제작
2. 목록 하나의 디자인 (사진, 작성일, 타이틀, 카테고리, 호버 효과 등)
3. 목록이나 글 상세 페이지에서 카테고리 이름을 클릭하면 열리는 카테고리 글만 모아 보여주는 목록 템플릿 제작
4. 글의 상세 내용이 표시되는 템플릿 제작
이제 테스트 사이트에 블로그(Project) 이용 환경을 만드는 과정을 하나씩 진행해 보겠습니다.
1. 글 상세 페이지 템플릿 만들기
좌측 1/3 그리드 선 내에는 글의 타이틀과, 작성일, 카테고리 정보가 표시되어야 하고, 오른쪽에는 최대 넓이 800px로 워드프레스의 글 편집기에서 작성된 내용이 표시되어야 합니다. 그리고 맨 아래에는 전, 후 글로 이어지는 링크와 다시 목록으로 가는 back 버튼이 존재합니다. (필요시 share 기능 추가도 가능)
우선 콘텐츠가 있어야 템플릿을 제작해 볼 수 있으니 글을 몇 개 만들어 봤습니다. 그런데 참고사이트에서는 기획 의도나 디자인상 테이블 구조가 나오는 글도 있네요. html로 table 태그를 이용해서 편집을 해도 되지만, 작업 초반에 페이지에서 테이블을 만들었던 방법을 이용하면 더 편리할 것 같습니다.
기본 설정으로는 글(post)은 페이지 빌더를 안 쓰고 간단하게 워드프레스 기본 편집기를 이용하게 돼 있지만, 페이지 빌더의 옵션에서 쓰겠다고 설정만 하면, 글 편집 시에도 페이지 빌더를 이용할 수 있게 됩니다.
그럼 이제 글을 쓰는 부분까지는 해결이 됐습니다.
이제 모든 글의 기본 화면이 되는 템플릿을 만들어야 하므로, Impreza > Content Templates에서 새 템플릿을 하나 만듭니다. 'Single Content'라는 이름으로 템플릿을 하나 만들고 페이지 편집기 + 포스트 관련 화면 요소의 조합으로 화면을 구성합니다.
이때 주의할 것은
글 편집을 페이지 빌더로 했는데, 'Post Content'로 이걸 그대로 불러와서 표시하게 되면 section 태그라던지 그 하위로 만들어지는 몇 가지 html 태그들로 인해 초반에 약속한 각종 공간 설정 및 css 스타일 정의들이 중복되어 적용될 수 있게 됩니다. (800px로 설정된 오른쪽 최대 넓이 공간 안에 또다시 패딩들이 적용) 이걸 방지하려면 페이지 빌더로 작성된 콘텐츠를 불러올 때에는 안쪽, 또는 바깥의 section 태그 하나를 무시하라 설정을 해줘야 합니다. 지금 상황에서는 불러올 글의 기본 태그들을 제외하면 되겠습니다. 템플릿이 다 제작된 다음에는 Theme Options에서 글의 페이지 템플릿으로 지정해 줍니다.
이제 글을 하나 열어보면 화면에 배치한대로 글의 상세 내용이 나오는 걸 볼 수 있습니다. (요소 등장 transition 효과는 생략)
2. PROJECT 페이지 만들기 (블로그 전체 글)
글들이 몇 개 준비됐고, 글 상세 페이지가 연결됐으니 이젠 목록 페이지를 만들 차례입니다. 모든 글을 보여주는 페이지는 간편하게 페이지 하나를 만든 다음 Grid 화면 요소를 이용해서 원하는 콘텐츠들(모든 글)을 불러다 표시하는 방식을 이용했습니다.
페이지의 구성은 간단합니다. 한 가지 페이지의 타이틀이 이미 1/3을 넘어서는 길이이므로 오른쪽 텍스트들도 1/2 크기로 제한을 해 주면 서로 겹치지 않게 표시가 되겠습니다.
아래에는 전체 글을 불러와서 표시하도록 Grid 요소를 넣고 설정했습니다. 불러올 포스트 각 1개에 적용될 그리드 레이아웃도 디자인에 맞게 하나 제작했습니다. (카테고리 링크가 제목 위로 가도록만 살짝 조정)
페이지를 열어서 모든 프로젝트들(post)이 잘 표시되는지 확인 및 부족한 스타일 적용 내용은 없는지 체크합니다. 카테고리 링크의 색, 그리드 아래쪽의 공간은 css를 추가해서 적용했습니다.
3. 카테고리 목록용 템플릿 만들기
2번에서 만든 페이지와 거의 같은 구조의 템플릿이 제작되면 됩니다. 차이라면 서브 타이틀이 현재 카테고리 이름을 표시하는 것으로 바뀌는 부분 정도입니다.
이럴 땐, 2번 페이지 전체 화면을 저장 후 복사해서 쓰면 됩니다. 페이지 빌더 좌상단의 버튼을 클릭해서 저장한 다음, Impreza > Templates에서 새 템플릿 하나를 만든 다음 거기에 붙여 넣기 합니다. (페이지 빌더 템플릿 목록에서 클릭하면 전체 구조가 그대로 적용됨) 이때 css는 복사가 되지 않으니 따로 복사해서 붙여 넣어야 합니다.
복사 후 수정할 부분들이 있습니다.
서브 타이틀 대신 'Post Title' 요소를 넣어서 현재 보는 카테고리 목록의 제목은 무엇인지 자동으로 나오도록 변경해 주고, 콘텐츠는 '글'이라는 것을 임의로 가져올 게 아니라, 워드프레스가 알아서 주소에 맞는 콘텐츠를 가져오는 것으로 변경해 줘야 합니다. 카테고리용 템플릿이 완성되었다면 테마 옵션에서 카테고리가 열렸을 때 이 템플릿을 쓰라고 약속을 해 줍니다.
여기까지 진행하면, 프로젝트 페이지에서 목록을 보다가, 특정 카테고리 목록의 글만 볼 수 있고, 하나의 프로젝트를 클릭하면 상세 내용을 볼 수 있는 글의 순환 구조가 완성되겠습니다.
> 테스트 사이트 : https://oks-dev.tk/grid3/project/
블로그 관련 템플릿 제작까지 마치고 나면, 참고사이트와 같은 바닥에 선이 있고 콘텐츠가 이 선에 정렬이 되는 형태로 만들어지는 Grid 디자인의 사이트 제작에 필요한 대부분의 구조들은 완성이 된 듯합니다. (문의 폼 제작은 다른 과정에 있어 제외)
매번 비슷한 과정으로 진행하면서도 콘텐츠, 기획, 디자인이 어떤가에 따라 참 다양한 구조가 나올 수 있구나 하는 생각이 듭니다.
디자인 구조가 조금 복잡해 보여도, 잘 짜인 테마와 페이지 빌더의 특징을 이용해서 초반에 설정해야 하는 기준들만 잘 정리하게 되면, 이후 작업들은 대부분 이 기준 안에서 동작을 하는 것이라 매우 간편하게 진행될 수 있습니다.
이번 과정 끝.
