블로거나 웹사이트 운영자에게 문화가 된 구글 애드센스 네이티브 광고에는 인피드 광고(In-feed), 콘텐츠 내 자동 삽입 광고(In-article), 콘텐츠 매치 광고(Matched content)가 있습니다. 네이티브 단어만 제외하면 텍스트 및 디스플레이 광고가 있습니다.
인피드 광고는 보통 글(콘텐츠) 목록(루프, loop)에 삽입하여 자연스럽게 글과 어울리도록 제공하는 광고로 워드프레스에 대입하면 아카이브(is_archive), 블로그 포스트(is_home, 꼭 타입 post의 목록만 가능한 것은 아니며 일반적인 사용 방향을 기준으로 할 때), 검색 결과(is_search)에 사용할 수 있습니다. 커스텀 포스트 타입을 사용하지 않으며, 기본 포스트 타입 post만 사용하며, 일반적인 테마의 기본 워드프레스 사이트 또는 블로그 구조에서는 !is_single 또는 !is_singular 조건만으로 인피드 광고를 쉽게 추가할 수 있습니다. 커스텀 포스트 타입의 아카이브도 is_archive 조건 태그를 가지므로 is_post_type_archive 조건 태그를 사용할 필요가 없습니다.
다만, 광고 단위(블록)를 워드프레스 루프(The Loop)에서 the_title 또는 the_content 필터가 아닌 the_post 필터 또는 액션 훅으로 정의해야 포스트 단위로 처리할 수 있다는 것만 알면 됩니다. 물론 the_title 또는 the_content 필터를 사용해도 광고 단위 출력이 가능하지만, 보통은 테마의 스타일에 자연스럽게 어울리지 않을 것이므로 포스트 단위가 적절하다는 뜻입니다.
콘텐츠 내 자동 삽입 광고는 워드프레스의 the_content 필터 훅으로 포스트 콘텐츠 내 p 또는 /p 태그를 기준으로 삽입할 위치를 정할 수 있습니다. 보통 제목 태그(Heading tags)로 부르는 h1, h2 태그 등을 기준으로 처리할 수 있습니다.
콘텐츠 매치 광고는 애드센스에 의해 자동으로 출력되므로 사이트에 맞게 적절한 스타일만 조정하면 되고, 텍스트나 디스플레이 광고는 개별 단위이므로 설명은 생략합니다.
이 글에서는 테마를 편집하지 않고, 같은 광고 코드의 반복 삽입이 허용되는 인피드 광고를 워드프레스 기본 사이트 유형의 루프에 삽입하는 내용을 전달합니다. 인피드 광고 유형 중 섬네일, 텍스트 등 광고 유형은 무엇이든 상관이 없습니다. 사용하는 테마와 루프 스타일에 맞게 선택하여 광고 코드만 획득하고 필요에 따라 세부 조정하면 됩니다.
워드프레스 루프에 인피드 광고 1개 삽입
다음 그림은 인피드 광고의 유형 중 ‘텍스트만’ 광고를 선택한 것입니다. 이미 말한 것처럼 광고 유형은 사용하는 사이트의 테마와 루프 스타일에 맞게 선택하면 됩니다.
애드센스 광고 코드를 획득하는 내용은 생략하며, 텍스트 형식의 인피드 광고 코드를 얻었다고 가정하고, 그 코드를 워드프레스 2016 테마(twenty sixteen)에 3개 삽입하는 내용을 전달합니다. 혹시 테스트 한다면 포스트 목록을 15개 이상 나열되도록 설정을 변경하세요. 아래는 텍스트 유형의 인피드 광고 코드입니다.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout="text-only"
data-ad-layout-key="-gi-00-3n-3f+qn"
data-ad-client="ca-pub-400056635855364"
data-ad-slot="2956000076"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
임시로, 사용하는 테마의 functions.php 파일에 함수를 정의합니다.
function insert_loop_google_ads() {
// 싱글 페이지가 아닐 때
if ( !is_singular() ) {
global $wp_query;
// 워드프레스 루프(The Loop)에서 출력된 포스트 인덱스 프로퍼티 current_post, 0부터 시작
if ( $wp_query->current_post == 2 ) {
// 구글 애드센스 인피드 코드
$loop_ad_code = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="text-only" data-ad-layout-key="-gi-00-3n-3f+qn" data-ad-client="ca-pub-400056635855364" data-ad-slot="2956000076"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
// 테마 2016의 루프 파일 content-*.php 마크업 기준. <article>...</article>
echo '<article class="loop_ads">' . $loop_ad_code . '</article>';
}
}
}임시로, 사용하는 테마의 functions.php 파일에 함수를 정의합니다.
function insert_loop_google_ads() {
// 싱글 페이지가 아닐 때
if ( !is_singular() ) {
global $wp_query;
// 워드프레스 루프(The Loop)에서 출력된 포스트 인덱스 프로퍼티 current_post, 0부터 시작
if ( $wp_query->current_post == 2 ) {
// 구글 애드센스 인피드 코드
$loop_ad_code = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="text-only" data-ad-layout-key="-gi-00-3n-3f+qn" data-ad-client="ca-pub-400056635855364" data-ad-slot="2956000076"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
// 테마 2016의 루프 파일 content-*.php 마크업 기준. <article>...</article>
echo '<article class="loop_ads">' . $loop_ad_code . '</article>';
}
}
}위 함수를 the_post 액션 훅으로 실행(trigger)합니다.
add_action( 'the_post', 'insert_loop_google_ads' );
function insert_loop_google_ads() {
if ( !is_singular() ) {
global $wp_query;
if ( $wp_query->current_post == 2 ) {
$loop_ad_code = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="text-only" data-ad-layout-key="-gi-00-3n-3f+qn" data-ad-client="ca-pub-400056635855364" data-ad-slot="2956000076"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
echo '<article class="loop_ads">' . $loop_ad_code . '</article>';
}
}
}저장 후 아카이브(블로그 포스트, 카테고리, 검색 결과 등) 페이지를 확인하면 두 번째 포스트 다음에 광고가 출력될 것입니다.
워드프레스 루프에 인피드 광고 원하는 수대로 삽입
인피드 광고 코드는 반복해서 사용할 수 있다고 했으므로 위의 코드로 3개의 광고가 출력되도록 변경합니다. 3, 7, 11번째 광고가 출력되도록 정의하며, 간단하게 배열로 지정합니다.
add_action( 'the_post', 'insert_loop_google_ads' );
function insert_loop_google_ads() {
if ( !is_singular() ) {
global $wp_query;
// 3, 7, 11번째 광고가 출력되도록 번호 지정
$loop_position = array( 2, 6, 10 );
/**
* 루프에 출력되는 포스트 인덱스가 위에 지정한 값과 같을 때 (존재할 때).
* 광고는 포스트 수가 존재하는 (지정한 인덱스 값이 존재하는) 만큼 출력.
* 예, 포스트 수가 6개라면 2개의 광고만 출력.
*/
if ( in_array( $wp_query->current_post, $loop_position ) ) {
$loop_ad_code = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="text-only" data-ad-layout-key="-gi-00-3n-3f+qn" data-ad-client="ca-pub-400056635855364" data-ad-slot="2956000076"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
echo '<article class="loop_ads">' . $loop_ad_code . '</article>';
}
}
}위의 코드로 저장하고 확인하면 3개의 광고가 3, 7, 11번째 출력되는 것을 확인할 수 있습니다.
테마 파일 편집하지 않고 코드 추가하기
앞의 코드는 사용하는 테마의 functions.php 파일에 추가한다는 가정으로 진행한 것인데, Child Theme를 사용하지 않았다면 테마 업데이트 후 초기화되므로 플러그인으로 만들어 봅니다. 거창한 플러그인 아니라 코드만 추가하고 플러그인에 필수 요소인 헤더 텍스트만 추가하여 구성합니다. 테마 파일을 편집하지 않거나, 테마를 직접 만들어 사용한다고 해도 이 글의 내용은 플러그인으로 구성하는 것이 더 범용적입니다. 이런 플러그인 사용이 사이트 성능에 영향을 줄까 괜한 걱정을 하는 분이 없기를 바랍니다.
혹시 따라했다면 functions.php 파일에 삽입한 코드는 지웁니다. 다음의 코드를 복사하여 insert-google-infeed-ads.php 파일을 만듭니다. 파일명은 원하는 것으로 정해도 됩니다. 이 파일을 설치한 워드프레스 경로 wp-content > plugins 디렉터리에 업로드합니다. 그리고 관리페이지에서 이 플러그인을 활성화합니다. 사이트를 확인하면 3개의 광고가 위치에 맞게 출력될 것입니다.
<?php
/**
* Plugin Name: 애드센스 네이티브 인피드 광고 삽입
* Description: 테마 편집 없이 워드프레스 루프에 원하는 개수의 구글 애드센스 네이티브 인피드 광고 자동으로 삽입
* Author: 방문자와 운영자
*/
add_action( 'the_post', 'insert_loop_google_ads' );
function insert_loop_google_ads() {
if ( !is_singular() ) {
global $wp_query;
$loop_position = array( 2, 6, 10 );
if ( ( in_array( $wp_query->current_post, $loop_position ) ) ) {
$loop_ad_code = '<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="text-only" data-ad-layout-key="-gi-00-3n-3f+qn" data-ad-client="ca-pub-400056635855364" data-ad-slot="2956000076"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
echo '<article class="loop_ads">' . $loop_ad_code . '</article>';
}
}
}조금 더 다듬기
다음 코드는 루프에서 3번 출력됩니다. 같은 파일을 요청하는 것이므로 한 번만 출력하면 됩니다.
//
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>위의 코드를 사이트 소스의 head 태그 안에 출력되도록 처리합니다.
add_action( 'wp_head', 'site_head_script' );
function site_head_script() {
?>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<?php
}이 글에서 기준으로 정한 2016 테마는 소위 반응형 테마입니다. 화면의 크기에 따라 아카이브 목록의 여백(margin) 값이 다릅니다. 이때 포스트와 조화롭게 광고를 출력하기 위해 CSS 코드도 추가해야 할 것입니다. 물론 테마마다 다르므로 광고 적용 후 확인이 먼저입니다.
이전 코드에 있는 다음의 코드는 테마마다 조금씩 다를 수 있지만, 기준으로 정한 2016 테마의 콘텐츠 루프 파일의 소스 마크업이 article 태그로 정의되어 있으므로 추가한 것이며, 2016 테마에서 특정 화면 크기에서 아카이브 목록의 여백이 달라지므로 CSS 코드를 추가하기 위해 loop_ads 클래스를 미리 추가한 것입니다.
//
echo '<article class="loop_ads">' . $loop_ad_code . '</article>';따라서 다음의 코드로 정리할 수 있습니다. 스타일 정의는 2016 테마에 맞춘 것으로 사용하는 테마에 따라 달라진다는 것을 기억하세요. 또, 구글 애드센스 광고 삽입의 경우 플러그인 방식의 추가가 유연한 것처럼 스타일도 별도의 파일에 추가하지 말고 다음 코드처럼 추가하는 것이 더 좋습니다. 테마 변경이나 사용하지 않는다면 플러그인만 비활성화하면 그만이니까요. 그렇지 않은 경우도 있으며, 상황에 따라 판단하면 됩니다.
add_action( 'wp_head', 'site_head_script' );
function site_head_script() {
?>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<style>
.loop_ads {
margin-bottom:3em;
margin-right: 7.6923%;
margin-left:7.6923%;
}
@media screen and (min-width: 56.875em) {
.loop_ads {
margin-bottom: 3em;
margin-right: 0;
margin-left: 0
}
}
</style>
<?php
}위의 코드를 포함하여 앞에서 만든 플러그인에 추가하면 다음과 같고, 이 글에서 안내하는 최종 코드입니다. 아래 코드로 변경하고 사이트에서 광고 출력을 확인하면 됩니다. 사이트 소스보기를 통해 스크립트 파일 코드와 스타일 코드가 head 태그 블록 안에 출력되는 것을 확인할 수 있습니다.
<?php
/**
* Plugin Name: 애드센스 네이티브 인피드 광고 삽입
* Description: 테마 편집 없이 워드프레스 루프에 원하는 개수의 구글 애드센스 네이티브 인피드 광고 자동으로 삽입
* Author: 방문자와 운영자
*/
add_action( 'wp_head', 'site_head_script' );
function site_head_script() {
?>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<style>
.loop_ads {
margin-bottom:3em;
margin-right: 7.6923%;
margin-left:7.6923%;
}
@media screen and (min-width: 56.875em) {
.loop_ads {
margin-bottom: 3em;
margin-right: 0;
margin-left: 0
}
}
</style>
<?php
}
add_action( 'the_post', 'insert_loop_google_ads' );
function insert_loop_google_ads() {
if ( !is_singular() ) {
global $wp_query;
$loop_position = array( 2, 6, 10 );
if ( ( in_array( $wp_query->current_post, $loop_position ) ) ) {
$loop_ad_code = '<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout="text-only" data-ad-layout-key="-gi-00-3n-3f+qn" data-ad-client="ca-pub-400056635855364" data-ad-slot="2956000076"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';
echo '<article class="loop_ads">' . $loop_ad_code . '</article>';
}
}
}정리
개별 단위 광고인 텍스트나 디스플레이 광고도 반복해서 추가하지 않는다면 루프에 한 번만 출력되도록 설정하여 광고를 출력할 수 있으므로 연구해보면 좋겠습니다.
이 글에서는 워드프레스 사용의 기본을 기준으로 워드프레스 루프에 특정 콘텐츠(광고)를 삽입하였는데, 커스텀 쿼리를 템플릿 페이지를 만들어 사용할 경우, 특정 위치에 연관 포스트를 출력하는 등의 루프는 다양하게 존재할 수 있습니다. 그때마다 조금씩 다른 방법을 찾아야 하며, 이 글의 기준에서 광고를 출력하는 방법도 하나가 아니라 몇 가지 더 존재하므로 절대적이지 않다는 것 기억하세요.