애드센스 자동광고 넣기 소제목 아래, 2가지 방법 Ad inserter 사용방법

01

of 04

글 이력

이 글 (2024.08) 워드프레스에 애드센스 자동광고를 넣는 방법입니다. 티스토리에 애드센스 자동광고를 넣는 방법은 아래 글 목록에서 선택해주세요.

02

of 04

Ad inserter 사용하지 않는 방법

아래 코드를 functions.php 파일에 추가

① 되도록 차일드 테마의 functions.php 파일에 추가한다.

② 코드 설명 : 포스팅에서 h2와 h3를 찾아 h2가 1개인 경우 h3 아래 애드센스 광고를 삽입한다. h2가 여러개인 경우 h2 아래 애드센스 광고를 삽입한다.

③ 코드 수정 : 내가 초기에 착성했던 글이 전부 h2가 1개인 경우로 작성을했다, 그래서 h2가 1개인 경우을 추가했다. 이런 경우가 아니라면 h2를 검색하는 부분을 삭제하면 된다.

④ 코드 결과 : h2 혹은 h3의 1번째, 2번째, 4번째, 7번째, 11번째 하단에 애드센스 광고가 표시된다. 만약 h2 혹은 h3의 갯수가 6개면 1번째, 2번째, 4번째 3개만 애드센스 광고가 표시된다.

/**
 * Ad code
 */
function insert_after_headings($content) {
   // 포스트에만 적용
    if (!is_single()) {
        return $content;
    }

   // 필요한 수만큼 애드센스 코드 입력 (현재 5개, 디스플레이, 인아티클, 인피드 골고루)
    $codes = array(
     '<div>
	 <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxx"
     data-ad-slot="xxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
     <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
	 </div>',     
	 '<div>
	 <ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-xxxxx"
     data-ad-slot="xxxxx"></ins>
     <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
	 </div>',		
     '<div>
	 <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxx"
     data-ad-slot="xxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
     <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
	 </div>',		
	 '<div>
	 <ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="xxx"
     data-ad-client="ca-pub-xxxxx"
     data-ad-slot="xxxx"></ins>
	 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
	 </div>',	
	 '<div>
	 <ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-xxxxx"
     data-ad-slot="xxxxx"></ins>
     <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
	 </div>'
    );

    $doc = new DOMDocument();
    @$doc->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));

    // h2, h3 찾기
    $h2s = $doc->getElementsByTagName('h2');
    $h3s = $doc->getElementsByTagName('h3');

    // h2가 1개인 포스트와 h2가 여러개인 포스트 분리
    // 초창기에 썼던 다수의 글들이 h2가 1개임, 최근 작성하는 글은 h2가 여러개임
    // 이부분은 본인 포스트에 맞게 수정해야함
    // h2를 기준으로 할지, h3를 기준으로 할지 선택해서
    // if문을 제거하고 하나로 사용해도됨

    // h2가 1개인 글은 h3 상단 혹은 하단에 광고 배치
	if ($h2s->length == 1) {
		$count = 0;
		for ($i = 0; $i < min($h3s->length, 11); $i = $i + $count) {
        	$fragment = $doc->createDocumentFragment();
        	$fragment->appendXML($codes[$count]);

            // ->nextSibling 삭제하면 h3태그 위로 광고가 배치됨
        	$h3s->item($i)->parentNode->insertBefore($fragment, $h3s->item($i)->nextSibling);
		$count++;
		}
	}

   // $count++를 1씩 추가로 증가, 1, 2, 4, 7, 11번째 광고 표시 (상단에 광고 많이 뜨게 함)

   // h2가 여러개인 글은 h2 상단 혹은 하단에 광고 배치
	else {
		$count = 0;
		for ($i = 0; $i < min($h2s->length, 11); $i = $i + $count) {
			$fragment = $doc->createDocumentFragment();
        	$fragment->appendXML($codes[$count]);

            // ->nextSibling 삭제하면 h2태그 위로 광고가 배치됨
        	$h2s->item($i)->parentNode->insertBefore($fragment, $h2s->item($i)->nextSibling);
			$count++;	
		}
	}
    return $doc->saveHTML($doc->documentElement);
}
add_filter('the_content', 'insert_after_headings');
Code language: PHP (php)

※ 추가 : 이 코드 사용시 대부분 문제없이 작동했지만, 긴 글 (2 ~ 3천 단어 이상) 에서 사용중인 테마의 목차가 누락되는 현상이 발생함. 아마도 글자수가 너무 많아서 전부 못가져오는것 같습니다. 이거에 대해 아시는 분이 있다면 댓글 부탁드립니다.

03

of 04

Ad inserter 사용방법

① 사용할 애드센스 광고 코드 입력

② Posts 선택

③ 엘리멘트의 아래쪽 (After)에 애드센스 광고 표시 (위쪽이라면 Before 선택)

④ 가운데 정렬 (본인 테마에 따라 커스텀으로 여백 설정을 할 수 있다.)

⑤ 보통 h2, h3를 선택하면 되지만, 내가 사용하는 테마의 경우 “.current_title”를 설정하면 h2, h3와 상관없이 소제목을 선택할 수 있다.

※ 좀더 세밀하고 정확한 위치를 원한다면 본인 포스팅에 마우스 우클릭 후 검사를 눌러 코드를 보면서 확인하면 됨

⑥ 서버 사이드 선택 : 만약 서버 사이드 선택이 안된다면 아래 이미지처럼 설정을 변경해야 한다.

〈클라이언트 사이드와 서버 사이드 차이점〉

⑦ 숏코드에 체크하면 수동으로 광고를 넣을 수도 있다.

⑧ 1이면 첫 번째 소제목 아래 광고가 표시된다. 공백으로 비워두면 모든 소제목 아래 광고가 표시된다. 본인이 원하는데로 설정하면 된다.

04

of 04

Ad inserter 오류 블록 겹침 발생

몇 달간 사용을 해봤지만 아래와 같은 오류가 발생했다. 포스트 아래쪽에 위치한 모든 요소들이 포스트 위에 겹치는 현상이 발생했다. 새로고침을 하거나 마우스 우클릭 후 아무 메뉴를 선택하면 정상적으로 표시되기는 했다.

해결해보려고 이런저런 모든것을 시도해봤지만 결국 해결하지 못했다. 현재는 Ad inserter를 사용하지 않는다. 혹시나해서 다른 플러그인을 사용해봤지만 모두 동일 증상이 나타났다. 이게 내가 사용하는 테마 문제인지 Ad inserter 문제인지는 잘 모르겠다.