글 목록이 보이지 않아요

Divi 테마를 사용 중 관리자 페이지에서 설정을 만지고 있는데 글 목록 페이지에서 푸터 컨테이너가 본문 영역에 떠있으면서 블로그 목록을 가리는 문제가 발생하였습니다.

원인을 찾기 위해 테마를 수 십번 수정했지만 결과는 동일… 광고 삽입 플러그인을 비활성화 했더니 정상!

원인

Ad Inserter에서 광고를 between posts로 설정했을 때 문제가 발생하였습니다.

구글 애드센스에서 본문 영역의 스타일 속성의 높이 값을 0으로 강제 설정합니다.

<div id="content-area" class="clearfix" style="height: 0px;">

조건

출력 내용이 글 목록 유형일 때 반응형 광고를 사용하면 문제가 발생합니다. 디스플레이, 인피드 등.

조치

광고 유형 변경

제일 간단한 방법은 광고 유형을 고정 크기로 설정하면 됩니다. 고정 크기는 디스플레이 광고에서 가능합니다.

height 값을 삭제하는 코드를 적용

height: 0px; 코드가 있는 style 자체를 제거하는 방법입니다. 구글 애드센스는 시간차 광고 투척을 하기때문에 즉시 실행되는 코드는 적용되지 않습니다. 아래와 같이 setTimeout 명령을 사용해야 합니다.

<script>
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
	setTimeout(function() { 
		$("#content-area").removeAttr('style');
    }, 1000);
});
</script>

지연 시간이 너무 짧으면 광고가 표시되지 않으며, 너무 길면 페이지를 불러온 후에도 레이아웃이 변형되는 것을 목격하게 됩니다.

여러 CSS 속성 중 height 값만 삭제하려면 $.css('height', ''); 코드를 사용하면 됩니다.

Mutation, observe를 사용하더라도 시간차 갱신을 해야하기 때문에 훨씬 복잡해집니다.