GeneratePress 테마 헤더에 애드센스 광고 삽입하기

GeneratePress 테마(GP Premium)의 헤더 영역에 애드센스 광고를 삽입하는 방법에 대해 알아보겠습니다.

헤더 영역에 노출되는 애드센스 광고의 경우 웹사이트나 블로그의 속도에는 안좋은 영향을 주기는 합니다만 CPC 단가가 높아 블로그의 수익에는 좋은 영향을 미칩니다.
특히 PC로 접속하는 방문자수가 적지 않다면 꼭 헤더에 애드센스 광고를 삽입하는 것을 추천합니다.

GeneratePress 테마 무료 버전의 경우 헤더에 애드센스 광고를 삽입하기 위해서는 테마를 직접 수정해야 합니다만 유료 버전(프로 버전)의 경우 아주 손쉽게 설정을 할 수 있습니다.

1. GeneratePress 테마의 Elements 모듈을 활성화 합니다.

GeneratePress 테마의 프로 버전에서 지원하는 모듈 중 Elements을 활성화 해줘야 합니다.
대시보드의 외모 > GeneratePress 메뉴에서 찾을 수 있습니다.

2. Elements에서 Hook 추가 하기

Elements 모듈을 활성화 한 이후 메뉴로 새롭게 노출이 되는 Elements 메뉴로 이동을 합니다.
대시보드 > 외모 > Elements 메뉴로 들어가면 됩니다.

이 곳에서 Add New Element 버튼을 클릭한 이후 Hook 으로 타입을 선택하고 Create 버튼을 클릭합니다.

3. 새로운 Hook 설정하기

새로운 Hook 추가하는 화면에서 위와 같이 설정을 합니다.

• 구분을 할 수 있는 Hook의 이름을 적어줍니다.
• 삽입할 애드센스 광고 스크립트 코드를 위와 삽입해 줍니다.
• Settings의 Hook 필드는 generate_after_header로 선택을 해줍니다.

그리고 마지막으로 Dispaly Rules에서 Location을 Entire Site로 선택을 해주면 마무리가 됩니다.
이후 공개 버튼을 클릭하여 Hook을 생성합니다.

만약 워드프레스의 광고 플러그인을 이용하여 이미 애드센스 코드를 이용한 광고를 형성하였다면 플러그인이 제공하는 숏코드나 php를 삽입할 수 있습니다.
이 경우에는 꼭 하단의 Execute Shortcodes 또는 Execute PHP를 맞게 선택을 해줘야 합니다.

4. 헤더 광고 크기 조절 하기

설정을 마치면 위와 같이 헤더에 큼직한 애드센스 광고가 노출되는 것을 확인할 수 있습니다.
애드센스의 광고 크기가 클 수록 CPC 단가가 높다는 장점이 있습니다만 너무 많은 화면을 가린다고 생각이 든다면 아래와 같은 코드 변경으로 애드센스 헤더 광고의 사이즈를 줄일 수 있습니다.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-12345678"
     data-ad-slot="XXXXXXX"
     data-ad-format="horizontal"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

data-ad-format 을 “auto”에서 “horizontal”로 변경을 하면 반응형 광고지만 사이즈가 줄어들은 헤더 광고를 볼 수 있습니다.
현재 이 블로그에는 horizontal 로 설정한 애드센스 광고가 헤더에 노출되고 있습니다.

GeneratePress 테마 프로 버전에는 이렇게 Hook을 이용하여 쉽게 원하는 곳에 삽입을 할 수 있습니다.
Hook 추가시 generate_after_header 선택을 다른 것으로 변경하면서 테스트를 한번 해보는 것도 좋을 듯 합니다.

• GeneratePress 테마 본문에 브레드크럼 추가하기 – GP Premium
• GeneratePress 테마에 연관 글 설정하는 방법 – GP Premium