#11-6. 메인 페이지 만들기 (마무리)
'펜트하우스'도 워드프레스 사이트
'펜트하우스' 따라 만들기는 이제 사이트의 모든 콘텐츠들을 조금씩 보여줄 수 있는 메인 페이지를 만드는 과정을 진행하면 마무리가 됩니다.
전체 구조부터 한 번 확인해 보면, 총 7개의 로우(섹션)로 각 주제별 콘텐츠를 나눠서 표시를 하면 됩니다. 콘텐츠를 가져다 표시해야 하는 부분은, Grid 또는 Carousel 요소가 담당합니다. (보여주고 싶은 개수만큼만, 페이지네이션 없음)
그럼 섹션 순서대로 작업 시 필요했던 부분들을 한 번 정리해 보겠습니다.
1. 메인 탑 섹션 (카테고리 바로가기)
참고사이트의 메인 페이지의 특색이라고 하면, 어느 섹션들은 페이지를 방문 시 랜덤 하게 다른 내용이나 이미지가 표시된다는 점입니다.
확인된 섹션
> 상단 풀 화면 바로가기 / 아래쪽 6개의 이미지 버튼들 / 그 아래 4개의 바로가기 칼럼 버튼
이 중에서 테스트 사이트에는 맨 위쪽 풀 화면의 바로가기 버튼만 랜덤 하게 표시되는 것을 구현해 봤습니다. (나머지는 같은 원리) 위의 페이지 구성 내용 중 위쪽에 붉은색으로 묶은 섹션 두 개가 랜덤 하게 표시되도록 한 부분입니다.
원리는 이렇습니다.
- 페이지가 만들어질 때, 같은 이름의 클래스를 가진 화면 요소(로우)가 몇 개인가를 체크
- 0~1 사이의 난수와 체크된 개수를 곱합니다.
- 곱해져 나온 수에서 소수점 아래는 '내림' 처리를 하면 0에서 (개수-1) 사이의 랜덤 한 수가 나옵니다.
- 이제 결괏값으로 나온 수를 이용, 'eq(결과)'로 선택된 요소에 'active' 클래스를 추가합니다.
이제 메인 페이지를 열어 보면, 두 섹션 중 하나만 'active' 클래스가 있어서 화면에 보이게 됩니다.
모든 '.main-slide'를 display:none >>> '.main-slide.active'인 경우에는 display:flex
2. 베너 이미지 섹션
로우(섹션) 내에 클릭하면 원하는 주소로 이동시키는 베너를 넣은 곳입니다. 이미지는 비율대로 화면 사이즈에 맞춰지기 때문에 만약 모바일 기기에서는 세로로 긴 베너를 넣고 싶다면, pc용 모바일용 따로 이미지를 넣고 화면에 따라 숨김 처리를 하면 되겠습니다.
3. 최신 글 보이기 섹션
최신 글 5개를 카테고리 기본 목록 레이아웃을 이용해서 표시되도록 했고, 'mixed-grid'라는 클래스명을 추가해서 기존에 css로 모양을 살짝 바꾼 게 적용되도록 했습니다. (처음 1개만 100% 넓이 적용했던 것)
! 정리하다 보니, 바로 아래 legacy 글 모아보기 섹션이 이어지는데, 일단 최신 글 모음에도 legacy가 나올 수 있는 상황이네요. 한 가지 떠오른 아이디어는 레거시 글들 나머지는 따로 '메인 카테고리'로 묶어 놓는 방법이 있을 듯합니다.
4. 레거시 최신 글 보이기 섹션
메인 카테고리 'legacy'를 가진 최신 글 2개를, 메인용 레이아웃 그리드에 맞게 2개 표시되도록 했습니다.
5. PES 최신 글 보이기 섹션
pes 목록은 캐러셀 형태로 표시를 했습니다. 캐러셀의 현재 위치 표시용 내비게이션은 좌/우 이미지 버튼으로 동작을 시키기 위해 일부러 숨겼습니다. (페이지 구조에는 있으나 display:none이 됨)
자식 테마의 functions.php에 메인 페이지에서만 동작하는 스크립트를 추가해서, 이미지 좌우 버튼에 클래스명을 넣고, 클릭했을 때 캐러셀의 숨겨진 원래의 내비게이션 버튼도 같이 클릭된 것처럼 동작하도록 조치합니다.
6. 카테고리 바로가기 섹션
사이트의 주요 카테고리들을 한눈에 볼 수 있게 이미지 버튼 형태로 표시해 주는 섹션입니다. (메뉴의 주요 글 분류와 비슷) 특징은 마우스를 이미지 버튼 위에 올릴 때 크기가 살짝 커지는 효과가 있습니다. 이미지들을 안쪽 로우의 칼럼으로 나누고 넣은 다음, css 적용을 위해 로우에 클래스명 'hover-scale-up'를 추가했습니다.
이미지를 감싸고 있는 공간은 그대로인데, 안쪽의 이미지만 살짝 커지는 원리를 적용하면 되겠습니다. (공간에서 벗어난 이미지는 hidden)
7. 바로가기 버튼 섹션
먼저 안쪽 로우를 하나 추가해서, 칼럼을 4개로 나눴습니다. 서로 30px의 공간을 두고 박스 형태의 칼럼들이 되는 옵션을 체크했습니다. 이미지, 텍스트에도 링크를 넣을 수 있지만, 칼럼 편집에서 링크를 넣어주면 칼럼 전체를 버튼화 할 수도 있습니다.
칼럼에 이미지와 텍스트를 디자인대로 배치하고, 공간과 border 2px을 설정하면 칼럼 하나가 버튼처럼 동작하는 구조가 완성이 됩니다.
메인 페이지
> https://oks-dev.tk/logohouse/
(※ 테스트 사이트를 해외 호스팅으로 옮겨 놓은 관계로 접속이 느릴 수 있습니다.)
여기까지 하면 따라 하기용 테스트 사이트는 참고사이트와 비슷한 구조를 갖출 수 있게 됩니다.
워드프레스는 콘텐츠 자체를 크게 구분해서 관리를 하고 싶을 때, 나만의 글 형식(custom post type)과 나만의 분류 방법(custom taxonomy)을 추가해서 사용할 수 있는 방법이 있습니다. 이를 잘 활용하면 콘텐츠의 양이 많은 사이트에서는 내 기획대로 콘텐츠를 노출시키는 데에도 도움이 되고, 작성을 할 때에도 서로 다른 방법의 콘텐츠 작성을 적용할 수 있는 등 활용 방법이 많아집니다.
끝으로 하나 전달하고 싶은 내용은 워드프레스 사이트도 웹 디자인은 매우 중요합니다. 수많은 테마가 있고, 멋진 템플릿을 제공하는 빌더가 있지만, 내가 가진 콘텐츠에 맞는 웹 디자인은 그게 다 대신해 줄 수는 없습니다. 그림을 그릴 때에도 스케치를 먼저 한다든지, 집을 지을 때에도 설계 단계부터 모델하우스 제작해 보고, 그걸 가지고 최종 시공 작업을 해서 결과물이 나오듯이 제대로 웹사이트가 나오려면 디자인 가이드가 필요합니다. 따라 하기 과정은 완성된 사이트를 토대로 그 디자인을 따라 만들기를 한 것이라 편했던 것이고요.
제가 주로 쓰는 이 테마와 페이지 빌더도 최종 결과물을 간편하게, 그리고 짜임새 있게 만들 수 있는 도구일 뿐입니다.
펜트하우스 따라 만들기
끝.
