GeneratePress 테마 헤더
GeneratePress 테마의 헤더는 사용자가 사이트의 첫인상을 결정하게 해주는 중요한 요소입니다. 간결하면서도 직관적인 디자인으로 사이트 주제와 목적을 잘 전달하는 것이 중요합니다. GeneratePress 테마 유료 버전을 사용하면 Elements라는 기능을 통해 헤더를 자유롭게 커스터마이징할 수 있습니다.
헤더에는 사이트 제목, 로고, 네비게이션 메뉴 등의 요소가 들어갈 수 있습니다. 추가적으로 더 디테일한 디자인 설정을 하고 싶다면, 공부를 통해 사용자 정의를 통한 CSS 또는 동적 태그를 활용하여 사이트의 정체성을 좀 더 분명히 할 수 있습니다.
Elements 기능
GeneratePress Premium을 사용하면 Element라는 모듈을 활성화하여 헤더에 표시되는 여러 동적 콘텐츠를 제작할 수 있습니다.
Element의 종류에는 여러 가지가 있습니다.
- Header : 사이트 로고, 제목, 네비게이션 메뉴를 포함하여 배경 이미지 또는 동적 콘텐츠 추가 가능
- Hook : GeneratePress 테마의 다양한 위치에 맞춤형 코드 삽입 가능, HTML, CSS, JavaScript 코드 또는 광고 배너와 같은 외부 콘텐츠 추가 가능
- layout : 특정 페이지나 글에서 사이드바, 컨테이너 너비, 헤더 및 푸터의 표시 등을 조정
- Block : 특정 위치에 콘텐츠 블록을 추가할 수 있음.
- Page Hero : 페이지나 글 상단에 페이지 제목, 설명, 수정 날짜 등과 같은 동적 태그를 표시할 수 있음.
GeneratePress 테마 헤더 애드센스 광고 배치
GeneratePress 테마 헤더에 구글 애드센스 광고를 배치하는 방법으로 GeneratePress 프로 버전의 Elements 기능을 사용할 수 있습니다. Element 중에서 Hook 요소를 활용하여 헤더 아래에 애드센스 광고를 배치할 수 있습니다.
애드센스 광고를 페이지를 보았을 때 가장 먼저 보이는 헤더 부분에 배치한다는 것은 많은 의미를 내포하고 있습니다. 가장 클릭률이 높고 클릭 단가도 높은 위치이기 때문에, 많은 블로거들이 광고를 삽입합니다. 물론 애드센스 광고를 헤더에 노출하게 되면, 웹사이트나 블로그 속도에 안 좋은 영향을 주기도 하니 적절히 판단하여서 적용하시면 될 것 같습니다.
GeneratePress 테마 헤더 애드센스 광고 삽입하는 법
1.Elements 모듈 활성화
일단 먼저 관리자페이지 > 모양(외모) > GeneratePress 메뉴로 이동합니다. GeneratePress 테마의 프로 버전에서 제공하는 Modules 중에서 Elements를 활성화합니다.
2.Element Type Hook 추가하기
Elements 모듈을 활성화하면 새롭게 표시가 되는 Elements 메뉴로 이동을 해줍니다. 그러면 페이지에 표시되고 있는 Element 요소들을 확인할 수 있습니다. 여기서 ‘Add New Element’ 버튼을 클릭합니다.
여기서는 Hook으로 타입을 선택하고 Create 버튼을 클릭해줍니다.
3.Hook 편집기에 애드센스 코드 삽입
다음과 같은 Hook 설정 화면에서 Header Ads 라고 제목을 입력합니다. 바로 하단의 박스에는 광고를 게시하려는 애드센스 코드 스크립트를 붙여넣으면 됩니다. 해당 사이트에서 승인받은 애드센스 계정에 접속합시다.
광고 > 광고 단위 기준 메뉴에 들어간 다음, 아래에 표시된 광고에서 오른쪽의 <> 코드 모양을 클릭합니다. 그러면 애드센스 광고 스크립트를 확인하실 수 있습니다.
해당 광고 스크립트를 복사하여서 아까의 편집기 박스에 붙여넣으면 완료입니다.
- Settings 설정
Setting에서는 Hook : generate_after_header로 설정합니다. Hook이 헤더 다음에 생성되게 한다는 의미입니다.
Priority는 elements간 배치 우선순위를 말합니다. 숫자가 높을수록 나중에 배치가 됩니다.
Display Rules에서는 Location을 Entire Site로 선택을 해주면서 설정을 마무리해주시면 됩니다. 이후 공개 버튼을 클릭하여 Hook을 생성합니다.
4.헤더 광고 크기 조절
설정을 마치고 사이트로 들어가 상단 배너가 어떻게 뜨는지 확인해보시면 위와 같이 헤더 아래에 애드센스 광고가 노출되는 것을 확인할 수 있습니다. 이 애드센스 광고 배너의 크기가 클수록 CPC 단가가 높다고 합니다. 너무 많은 화면을 가리면 사용자 경험을 저해할 수 있기에 조절의 필요성을 느끼실 수 있습니다.
이러한 경우 코드 수정을 통해 헤더 광고의 사이즈를 조절할 수 있습니다. 위 코드에서 data-ad-format 부분의 값을 ‘auto’에서 ‘horizontal’로 수정해줍니다. 그러면 반응형으로 사이즈를 적절히 조절하는 광고가 나타나게 됩니다.
5.CSS 코드 적용하여 레이아웃 조정
보시다시피 코드를 수정하였더니, 작은 콘텐츠 크기의 광고는 사이즈가 작게 설정되는 것을 확인할 수 있습니다. 또 현재는 광고가 한쪽으로 치우쳐져서 별로 보기가 좋지 않은 상태입니다.
광고가 사이트 디자인과 조화를 이룰 수 있도록 맞춤 CSS를 통해 스타일링이 필요합니다. 광고 주변에 여백을 추가하거나, 가로 정렬을 조정하는 등의 레이아웃과 디자인 조정을 통해 광고 배너를 조절해보시기 바랍니다.
한가지 적용 예를 들면, 위의 애드센스 광고 코드에서 style값에 margin-top: 10px; text-align: center; 과 같은 CSS 코드를 삽입하면, 광고를 가운데 배치하고 광고 윗부분의 여백을 10px로 설정할 수 있습니다.
CSS 코드를 적용하고 나니 한쪽으로 치우쳐서 표시되던 광고가 중앙에 보기좋게 표시가 되는 것을 확인할 수 있습니다.
결론 : GeneratePress 테마 헤더 애드센스 광고
GeneratePress 테마에서 헤더에 AdSense 광고를 배치하는 가장 효율적인 방법은 Elements > Hook 기능을 사용하는 것입니다. 이를 통해 광고가 자연스럽게 사이트의 구조에 녹아들게 하고, 사용자 경험을 해치지 않으면서 광고 수익을 극대화할 수 있습니다
<추가로 볼만한 글>