Extra 테마로 매거진 사이트 만들기

Extra 테마는 Divi 테마와 함께 Elegant Themes의 대표적인 워드프레스 테마입니다. Divi 테마가 일반적인 웹사이트 제작에 초점이 맞춰져 있다면, Extra 테마는 말그대로 ‘매거진(Magazine)’ 용도에 특화된 프리미엄 테마죠. 온라인 매거진이나 뉴스 사이트를 만들거나 콘텐츠 중심 블로그, 브랜디 미디어 사이트 등에 사용하면 좋습니다.

오늘은 이 Extra 테마를 가지고 매거진 사이트를 만드는 방법을 간단하게 소개합니다.

테마 시작하기

우선 테마를 설치합니다. Extra 테마는 프리미엄 유료 테마이기에 워드프레스 테마 디렉터리에서 직접 내려 받을 수는 없고 Elegant Themes 사이트에서 다운로드 받아야 합니다.

다운로드 받은 테마 파일(zip 파일)을 워드프레스에 업로드하면 됩니다.

테마를 설치한 후 메인 페이지에 접속했을 때 아래와 같이 표시되면 테마가 제대로 설치된 것입니다.

어딘가 ‘매거진 스러운’ 느낌이 나나요? 네?? 뭐 취향에 따라 다르겠죠?

사실 Extra 테마 역시 Elegant Themes에서 만든 테마인지라 Divi 테마와 사용법에 있어 큰 차이는 없습니다. 둘 다 Divi 빌더(Builder)를 내장하고 있고 테마 설정 메뉴 구조나 설정 방법 등이 거의 똑같습니다. Divi 사용법에 관한 아래 글을 참조하세요!

Divi 테마 간단 사용법

카테고리 빌더

Extra 테마가 Divi 테마와 크게 다른 점은 바로 “카테고리 빌더(Category Builder)”가 있다는 점입니다. 카테고리 빌더는 Extra 테마에서 홈페이지나 목록 페이지를 디자인할 때 사용하는 빌더 도구입니다.

매거진 스타일의 사이트는 통상적인 웹사이트와는 달리 ‘목록’의 역할이 중요합니다. 한 곳에서 여러 유형의 콘텐츠를 다양한 방식으로 표시할 수 있어야 겠죠? Extra 테마의 카테고리 빌더가 바로 그 역할을 합니다.

워드프레스 관리자 대시보드에서 “Extra > 카테고리 빌더” 메뉴에 접속하면 아래와 같이 카테고리 레이아웃이 만들어져 있는 것이 보입니다.

이 2개의 “레이이웃”은 Extra 테마 설치 시에 기본으로 만들어진 레이아웃입니다. 제목을 보면 알겠지만 하나는 “홈페이지”라는 이름이 붙었으며 현재 테마에서 메인 홈 페이지 (앞서 잠깐 보았던 바로 그 메인 페이지)의 레이아웃을 가리킵니다.

나머지 하나 “기본 범주” 레이아웃은 포스트(글) 목록 페이지의 기본 레이아웃입니다. 즉, 워드프레스 카테고리 아카이브(Category Archive) 페이지의 디폴트 레이아웃이죠.

Extra 테마에서는 이 “카테고리 빌더”를 이용하여 각각의 카테고리 페이지에 대해 커스텀한 레이아웃을 다양하게 구성할 수 있다는 게 큰 장점입니다.

하지만 대개의 경우 Extra 테마에서 미리 제공하는 이 2종의 레이아웃만으로도 간단한 매거진 사이트의 콘텐츠를 담기엔 부족함이 없습니다. 필요하면 언제든 더 만들면 되구요.

홈페이지 레이아웃

그럼 우선 홈페이지 레이아웃부터 한번 수정해 볼까요?

홈페이지 레이아웃 편집창을 열면 아래와 같이 카테고리 빌더에 의해 미리 만들어진 샘플 레이아웃이 보일 것입니다. 그리고 우측 메뉴의 “레이아웃 사용” 박스를 보면 이 레이아웃이 “홈 레이아웃으로 사용” 체크되어 있는 것도 보일 것입니다. 우측 “추가설정” 메뉴에서는 사이드를 어디에 어떻게 표시할지도 설정할 수 있구요.

그러니 이 레이아웃을 변경하면 메인 페이지의 레이아웃이 변경되겠죠? 한번 맘대로 변경해 보세요! 빌더 사용법은 아주 간단하고 직관적이라서 한두 번 사용해 보면 금방 감을 잡을 수 있을 것입니다.

레이아웃을 잡을 때는 “행 추가”를 하여 다양한 열(colums) 구조 중 하나를 골라 행을 이어 나가는 것이 포인트입니다.

저는 여기서 간단하게 상단에 “Featured Posts Slider” 모듈을 두고, 그 하단의 행을 3/4 열과 1/4 열로 나눠 각각 “블로그 피드 표준” 모듈과 “이미지” 및 “게시물” 모듈을 두었습니다.

그런 다음, 포스트를 몇 개 샘플로 만들어 입력하고서 다시 메인 화면을 보면 앞서 카테고리 빌더를 통해 변경한 레이아웃이 잘 반영되어 있는 것을 확인할 수 있습니다.

앞서보단 훨씬 ‘매거진’ 스럽죠? ㅎㅎ

카테고리 페이지 레이아웃

동일한 방식으로 “기본 범주 레이아웃(Default Category Layout)”도 내 사이트에 맞게 변경할 수 있습니다. 이 레이아웃은 별도 지정이 없는 한 모든 워드프레스의 아카이브 타입 페이지(예를 들면, 카테고리 페이지, 태그 페이지, 검색 결과 페이지 등)의 레이아웃으로 사용됩니다.

카테고리 빌더 도구를 사용하여 레이아웃을 변경하는 방법은 앞서 “홈페이지 레이아웃”과 동일하기에 설명은 생략합니다. 이번에도 역시, 우측 “레이아웃 사용” 메뉴에 “이 레이아웃을 기본 레이아웃으로 사용” 체크 박스가 체크되어 있음을 확인하세요!

“뉴스” 카테고리 페이지에 대한 레이아웃입니다. (기본 범주 레이아웃 적용)

나머지 작업들

홈페이지 레이아웃과 카테고리 페이지 레이아웃이 완료되면, 기본적인 매거진 사이트의 골격이 완성됩니다. 이제 나머지 작업은 로고를 변경하고 메뉴를 추가하고 사이트 디자인과 룩앤필을 좀더 멋지게 다듬는 일이 되겠죠? 그리고 무엇보다 이처럼 멋진 매거진에 잘 어울리는 멋진 기사와 좋은 글들을 싣는 일일테구요.

사이트 디자인을 수정하는 작업은 상당 부분 CSS를 추가하거나 수정하는 작업이며, 이는 Extra 테마라고 해서 다른 테마와 다를 건 없습니다. 아래 글을 참조하세요!

워드프레스에 커스텀 CSS 추가하기

아래는 로고와 메뉴를 조정하고 몇몇 색상값을 수정한 최종 매거진 사이트의 메인페이지 샘플입니다. 테마 설치하고 카테고리 빌더에서 간단하게 레이아웃만 조금 조정한 걸로 이 정도의 매거진 사이트를 만들 수 있다니요!

Extra 테마 및 카테고리 빌더에 관한 더 자세한 사용법은 아래 Extra 테마 공식 문서를 참조하세요.

0 thoughts on “Extra 테마로 매거진 사이트 만들기”