본문으로 바로가기
반응형

워드프레스로 페이지를 구성하는 데 있어서 서로 다른 페이지이지만 동일한 내용의 섹션 (또는 요소)을 사용하고 싶은 경우가 있습니다. 이 경우, 굳이 매번 새롭게 페이지를 꾸미기보다는 한번 생성한 내용을 가져다가 여기저기 붙이는 방법이 편리하겠죠? 

 

Uncode (언코드) 테마에서는 이를 위해서 Content Block이라는 것을 지원합니다. 공통으로 사용될법한 엘리먼트 들을 콘텐트 블록으로 설정하면 페이지 별로 따로 따로 설정할 필요 없이 반복해서 사용하면 되겠죠? 수정도 훨씬 간편해지고요.

 

이번 글에서는 Uncode 테마의 Content Block을 이용하여 공통의 헤더 섹션을 구성하는 예제에 대해서 살펴보겠습니다.

 

1.  Header 섹션을 왜 공통으로 사용해?

웹사이트를 방문할 때 우선적으로 확~ 눈에 들어오는 건 뭐니 뭐니 해도 바로 헤더 섹션 이겠죠?

 

티스토리의 landing page 헤더

 

헤더를 멋있게 꾸미는 건 그만큼 중요합니다. 각각 페이지별로 배경 이미지도 고르고 우아하게 꾸며봅니다.

그런데... 막상 하나하나 꾸미다 보니, 생각보다 페이지가 많습니다.

 

이런... 

 

Landing 페이지라면 모르겠지만 사이트 내의 특정 카테고리 (또는 메뉴) 아래에 연결되어 있는 페이지들 각각에 대해서 서로 다른 디자인을 적용하기란 은근히 힘이 듭니다. 그래서 보통은 특정 카테고리 아래의 페이지들은 공통의 통일된 헤더를 사용하곤 합니다.

 

자... 특정 카테고리 밑의 20여 개 페이지가 있다고 가정해봅니다.

각각에 대해서 동일한 디자인의 헤더 섹션 내용을 19번 복사해 붙여서 겨우 다 완성했네요.

 

페이지를 본 의뢰인이 말합니다.

 

메뉴의 헤더 부분의 색상을 살짝 변경해주세요. 오늘 내로 가능하시죠?

 

.

.

.

 

20개 헤더를 변경해야 한다구요

 

 

이럴 때 필요한 게 바로 Content Block!

 

2. Uncode 테마의 Content Block

앞에서와 같은 비극이 발생하지 않도록 하기 위해서 Content Block을 이용하여 공통의 헤더를 만드는 방법을 살펴보겠습니다.

 

2.1 콘텐트 블록 만들기

먼저 알림판에서 Content Block → Content Block에 들어가 봅니다. 만약 데모를 설치했다면 미리 작성된 여러 가지 Content Block이 있을 것입니다. 새로 생성해도 되고 기존에 있던 것 중에 적당한 것을 복사해서 수정해줘도 됩니다. (여기서는 그냥 기존에 데모에 적당한 것을 골라서 복사해서 사용했습니다)

 

 

콘텐트 블록의 편집 화면에 들어가 보면, 페이지 편집 화면과 동일하게 페이지 빌더 화면이 나타납니다. 여기서 페이지들의 공통된 헤더 작성을 위해서 배경 이미지를 추가하고 제목과 요약을 보여주는 헤더 Content Block을 작성해 보도록 하겠습니다. 이름은 "Header | Examples | Dark Skin"으로 해봤습니다.

 

 

 

우선 배경 이미지를 선택해야겠죠? 헤더 전체 Row를 편집하는 버튼을 클릭하고 스타일 (Style) 탭에서 Background Media를 선택해줍니다. 헤더를 사용하려는 페이지들에 맞는 이미지를 선택하고 변경사항을 저장하면 됩니다. (페이지 빌더의 기타 옵션은 여기서 따로 설명하지는 않겠습니다)

 

 

 

이 콘텐트 블록의 경우 2개의 Heading Text만을 포함하고 있습니다. 랜딩 페이지 용도가 아닌, 공통의 카테고리 내에 포함된 페이지를 위한 것이므로 아무래도 단순한 게 낫겠죠?

Heading element의 편집을 click 하면 메뉴 중에 "Dynamic Heading Text"라는 항목이 있습니다.

여기서 다음 두 가지의 옵션을 선택할 수 있습니다.

  • Get the title
  • Get the excerpt

위 옵션을 사용하면 해당 컨텐트 블록을 페이지에 적용할 때, 타이틀 (title) 또는 요약 (Excerpt)을 가져와서 화면에 반영하게 됩니다. (따로 텍스트를 입력할 필요가 없어집니다)

 

 

 

제목과 요약은 당연히 콘텐트 블록 내에 있는 것이 아니라, 헤더를 적용할 페이지의 제목과 요약을 의미합니다.

 

페이지 내의 요약 부분

혹시 요약(Excerpt)이 안보이면 페이지 내에서 상단의 화면 옵션을 클릭하고 요약을 체크해주세요!

 

2.2 페이지에 콘텐트 블록 적용하기

이제 작성할 콘텐트 블록을 포함하려는 page의 편집 화면을 열어줍니다. 화면 하단으로 scroll 해보면 맨 아래 page Options이란 부분이 있습니다. 여기서 Header를 선택하고 앞에서 작성한 Content Block ('Header | Examples | Dark Skin')을 적용합니다.

 

 

이렇게만 하면 페이지 내에 콘텐트 블록에서 작성한 헤더가 붙게 됩니다. 물론 제목과 요약은 현재 페이지에 작성된 내용으로 가져오게 됩니다.

 

샘플로 EXAMPLES 메뉴 아래에 있는 두 개의 page에 적용해 봤습니다. 아래 그림을 보면 배경 이미지는 동일하지만 하나의 콘텐트 블록으로 제목과 요약은 각 페이지에 맞게 나와있는 것을 확인할 수 있습니다.

 

 

아래 링크를 클릭하여 직접 확인해 보세요!

 

 

만약 배경 이미지를 바꾸고 싶다거나 높이를 조정하고 싶다거나.... 

헤더 디자인에 수정이 필요하다면 페이지 수에 상관없이 하나의 Content block만 변경해 주면 되겠죠? 귀찮은 작업이 대폭 줄어듭니다. 또한 제목이나 요약 내용이 바뀌더라도 자동으로 변경되니 특별히 신경 쓸 필요가 없네요! 

 

맺음말

이번 글에서는 Uncode 테마의 Content Block을 이용하여 Header를 공통으로 사용하는 방법에 대해서 살펴보았습니다. 이 글에서는 헤더 섹션에서 공통으로 사용하는 방법에 대해서 다루었지만, 다른 부분 - 페이지의 일부 섹션 - 에도 적용할 수 있는 등 활용 방안은 많을 것 같습니다.

그리고, 꼭 공통으로 사용하지 않더라도 헤더 섹션과 같이 다소 복잡하게 구성해야 하는 경우는 일반적으로 Content Block으로 구성해서 본 페이지의 페이지 빌더 복잡도를 좀 줄여주는 게 여러모로 좋은 것 같습니다.

 

반응형