안녕하세요! 워드프레스 가이드 Dave입니다.
지난 시간에 이어 이번 시간에도 GeneratePress 모듈에 대한 소개를 이어 가도록 하겠습니다. 이번엔 GenereatePress에 포함된 “엘리먼트(Elements)” 모듈에 대한 소개입니다.
엘리먼트(Elements)란?
엘리먼트는 GeneratePress 테마에서 페이지에 적용할 수 있는 일종의 구성요소(컴포넌트) 같은 것입니다. 예를 들어, 프론트 페이지에 히어로(hero) 섹션을 두거나 모든 아카이브 페이지 상단에 배너를 표시하거나 할 때 이 엘리먼트 기능을 쓸 수 있습니다.
또한 엘리먼트는 사이트의 레이아웃(layout)을 조정하거나 사이트 내에서 특정 기능을 끄거나 켜는데도 사용될 수 있구요.
엘리먼트 모듈 활성화
GeneratePress의 다른 모듈과 마찬가지로 엘리먼트 모듈 역시 활성화/비활성화 시킬 수 있습니다. 엘리먼트 모듈을 사용하기 위해서는 “GeneratePress > Modules” 메뉴로 가서 “Elements” 모듈을 활성화시켜야 합니다.
엘리먼트 모듈이 활성화되면, 아래와 같이 “Elements” 메뉴가 표시됩니다.
엘리먼트 유형
GeneratePress는 3가지 유형의 엘리먼트를 제공합니다. 엘리먼트 메뉴에서 “새로 추가” 버튼을 눌러 보면 아래와 같이 추가할 엘리먼트의 유형을 선택할 수 있습니다.
그 3가지 엘리먼트 유형은 다음과 같습니다.
- Header 엘리먼트: 페이지 헤더 영역을 다루는 엘리먼트입니다. 흔히 “히어로 영역”이라 부르는 페이지의 헤더 부분을 변경할 수 있게 해 줍니다.
- Hook 엘리먼트: 워드프레스의 훅 시스템을 다루는 엘리먼트입니다.
- Layout 엘리먼트: 사이트 레이아웃 영역을 다루는 엘리먼트입니다. 페이지 사이드바나 푸터를 조정할 때 주로 사용됩니다.
그럼 이제 이 각각의 엘리먼트에 대해 조금 더 자세하게 알아 볼까요?
Header 엘리먼트
헤더 엘리먼트는 말 그대로 페이지의 헤더 영역을 커버하는 모듈입니다. 여기서 헤더 영역이란 통상적으로 페이지의 타이틀 영역과 네비게이션 영역, 그리고 본문 위의 히어로 섹션을 아우르는 영역입니다. 아래 사이트에서 빨갛게 둘러싼 영역이죠.
GeneratePress의 Header 엘리먼트를 사용하면 이 헤더 영역을 입맛대로 변경할 수 있습니다. 또한 그 변경 범위를 지정할 수도 있구요. 예를 들면 특정 페이지라든가 아니면 특정 카테고리 등 다양한 범위로 헤더 영역을 다르게 가져갈 수 있게 해 주죠.
예를 한번 볼까요?
아래는 앞선 강좌에서 사이트 라이브러리 예제로 사용했던 “Split” 사이트를 설치했을 경우 만들어지는 엘리먼트들입니다.
3개의 헤더 엘리먼트가 만들어져 있네요.
- Page Hero: 모든 싱글 페이지에 적용되는 헤더. 단, 프론트 페이지와 포스트(글)은 제외
- Single Posts: 모든 글에 적용되는 헤더
- Home Hero: 프론트 페이지에 적용되는 헤더
이런 식으로 헤더를 구성하면 각각의 페이지 유형에 맞는 헤더를 적절하게 구성할 수가 있겠죠.
이 중 “Home Hero” 엘리먼트를 한번 열어 볼까요?
다음과 같이 편집창이 제공되어 간단하게 “Page Hero” 영역을 구성할 수 있게 해 줍니다. 게다가 우측 사이드에는 이 편집창에서 사용 가능한 템플릿 태그(Template Tags) 들도 제공되기 때문에 이 태그를 활용하면 콘텐츠 내용이 동적으로 변경되는 페이지도 쉽게 구성할 수가 있습니다.
그런 다음 “Display Rules” 메뉴에서 이 엘리먼트가 적용될 영역(location)을 지정합니다. 여기서는 프론트 페이지에 적용하게끔 설정했습니다.
이런 식으로 구성된 Split 사이트의 Home Hero 헤더입니다.
그리고 아래는 Split 사이트의 Single Posts 헤더이구요.
마지막으로 Split 사이트의 Page Hero 헤더입니다.
언뜻 비슷해 보이지만 조금씩 다르다는 걸 느끼셨나요? ㅎㅎ
이런 식으로 각각의 페이지 유형에 맞춰 다르게 헤더를 구성할 수가 있겠죠.
Hook 엘리먼트
Hook 엘리먼트는 말 그래도 워드프레스의 훅(hooks) 시스템을 쉽게 사용할 수 있게끔 도와주는 엘리먼트입니다. 워드프레스가 제공하는 기본 훅은 물론 GeneratePress가 제공하는 각종 훅들과 각종 플러그인 등에서 제공하는 커스텀 훅을 모두 처리할 수 있습니다.
예를 들어, 사이트의 모든 콘텐츠 상단에 “안녕하세요, 여러분!” 이라는 텍스트를 표시하기 위해 워드프레스의 before_content 필터를 적용하려면 다음과 같은 식으로 GeneratePress에서 Hook 엘리먼트를 추가할 수 있습니다.
그런 다음, “Display Rules”에서 이 훅을 적용할 범위를 선택합니다.
그러면 이제 이 범위로 선택한 모든 페이지(여기서는 “All Singular”)에 이 훅이 적용되겠죠.
그런데 말이죠.. 훅을 처리하는데 굳이 이렇게 엘리먼트를 쓸 필요가 있을까요? 그냥 통상적인 방법을 쓰는 게 더 낫지 않을까요? 뭐, 판단은 순전히 여러분 각자의 몫입니다. (저는 개인적으로 비추입니다!)
Layout 엘리먼트
Layout 엘리먼트는 말 그대로 사이트 전역에 걸친 레이아웃 요소들을 수정하거나 변경할 때 사용하는 모듈입니다. 예를 들면, 사이드바나 푸터 영역을 카테고리나 페이지 단위로 다르게 설정할 때 사용할 수 있습니다.
예를 하나 들어 볼까요? 특정 카테고리 아카이브 페이지에서는 사이드바를 표시하지 않게 하고 싶습니다. 이럴 때 GeneratePress에서는 Layout 엘리먼트를 쓰면 됩니다.
우선 새 Layout 엘리먼트를 하나 만듭니다. 이 때 “Sidebar” 레이아웃은 “Content (no sidebar)”를 선택하면 되겠죠.
그런 다음, “Display Rules” 탭으로 가서 이 엘리먼트가 적용될 영역(location)을 지정해 주면 됩니다. 여기서는 카테고리 아카이브 중 “Featured” 카테고리에만 적용되게끔 설정했습니다.
이제 “Featured” 카테고리 아카이브 페이지는 사이드바 없이 글 목록만 표시됩니다.
Disable Elements
“Disable Elements” 기능을 추가하면 엘리먼트의 작동을 좀더 세밀하게 제어할 수 있습니다.
이 기능은 “GeneratePress > Modules” 메뉴에서 활성화시킬 수 있으며,
이 기능이 활성화되면 각각의 엘리먼트 메뉴에 아래와 같이 “Disable Elements” 라는 탭이 하나 더 추가됩니다.
지정된 엘리먼트에서 특정 영역을 표시할지 말지 정할 수 있습니다. 예를 들어 앞서 만든 “No Sidebar” Layout 엘리먼트에서 사이트 헤더 부분은 표시하지 않고 싶다면 “Disable Elements”에서 “Site Header”를 체크하면 되겠죠?
GeneratePress 테마의 엘리먼트(Elements) 기능은 사실 굳이 이 기능을 쓰지 않고도 얼마든지 구현할 수 있는 기능이긴 합니다. 하지만 엘리먼트를 쓰면 아주 편리합니다. 특정 페이지나 카테고리 목록 등을 자유롭게 커스터마이징할 수가 있죠.
어떻게 하면 워드프레스 사용자들이 “코딩 없이” 간단하고 쉽게 테마를 커스터마이징할 수 있을까 고민한 개발사의 노력이 돋보이네요!
그렇다고 너무 많이 남용하지는 않는 게 좋을 듯 합니다. 필요 최소한으로 사용하여 사이트를 최대한 가볍게 가져가는 게 GeneratePress의 기본 철학이기도 하구요.
Elements 기능에 대한 더 자세한 설명이 필요하신 분들은 GeneratePress 공식 문서를 참고하세요! 🙂
0 thoughts on “GeneratePress 테마 Elements 모듈 사용하기”