GeneratePress 테마: 자동 광고 로드 시 Read More 버튼 위치 변경 문제

워드프레스 인기 테마 중 하나인 GeneratePress 테마는 가볍고 빠른 속도 때문에 우리나라에서 블로그, 특히 수익형 블로그에 많이 사용되고 있습니다. GP 테마의 유료 버전을 사용하면 보다 수월하게 커스텀이 가능하지만, 이 블로그는 워드프레스닷컴의 개인 플랜을 이용 중이기 때문에 유료 플러그인을 설치할 수 없어 무료 버전을 커스텀해서 이용하고 있습니다.

최신 글 페이지(전면 페이지)에서 애드센스 자동 광고가 로드되면 Read More(더 읽기) 버튼이 요약문 부분과 겹치는 현상이 발생하는 것을 발견했습니다. 이 경우 몇 가지 방법을 고려하여 문제 해결을 시도해볼 수 있습니다.

GeneratePress 테마: 자동 광고 로드 시 Read More 버튼 위치 변경 문제

구글 애드센스의 자동 광고가 예상치 못한 이상한 곳에 표시되는 경우가 간혹 있습니다. 대표적인 경우가 목차 내에 광고가 표시되는 경우인데요. 쉬운 목차(최근 이름이 ‘간편한 목차’로 바뀜) 플러그인을 사용하는 경우 다음 글을 참고하여 CSS 코드로 시도해볼 수 있습니다.

쉬운 목차 플러그인의 목차에 구글 애드센스 자동 광고가 표시되지 않도록 하기…

먼저는 구글 애드센스 설정에서 특정 영약을 제외시킬 수 있습니다. 하지만 목차 영역은 제외시킬 수 없을 것입니다. 그런 경우 CSS를 사용하여 자동 광고를 숨기는 것을 시도할 수 있습니다.

이 방법으로 대체로 잘 되겠지만, 잘 안 된다면 JS를 동원해야 할 수도 있습니다. (이런 방법은 구글에서 공식적으로 발표한 방법이 아니고 일종의 임시적인 조치라 할 수 있습니다.)

저는 무료 GeneratePress 테마를 커스텀하여 전면 페이지(홈)와 카테고리, 태그 등 아카이브 페이지에 최신 글들이 카드 형식으로 나열되도록 했습니다.😄

문제는 자동 광고가 개별 포스트 항목 내에 표시되면서 ‘더 읽기’ 버튼이 요약글 부분과 겹치는 현상이 발생했습니다.

이 문제를 해결하기 위해 챗GPT와 Claude AI와 씨름을 했지만, 인공지능이 제시하는 방법으로 해결이 되지 않았습니다.😥

챗GPT 유료 버전이 처음 출시될 때 저는 곧바로 유료 버전을 구독하여 현재까지 사용하고 있습니다. 또한, 클로드가 코딩 부문에서 챗GPT를 앞서나가서 Claude도 구독했습니다. 최근에는 구글의 Gemini Pro가 성능이 크게 향상되면서 제미나이 프로에 포함된 나노 바나나 프로를 사용하면 이전과는 비교할 수 없을 정도로 향상된 이미지를 생성할 수 있게 되어 제미나이까지 구독하고 있습니다. 이외에도 X.com의 그록도 유료 버전을 사용 중입니다. AI가 나오면서 매달 나가는 고정비가 제법 늘었습니다.

현재는 코딩은 주로 Claude를 사용하고 이미지 생성은 제미나이의 나노바나나 프로를 이용하고 있습니다.

챗GPT와 클로드를 활용하여 문제를 해결하려고 시도했지만, 간단한 코드로 해결이 안 되어 JS/PHP까지 동원해보았지만 원하는 결과를 얻을 수 없습니다.

이렇게 AI를 가지고 아무리 노력해도 좀처럼 해결이 안 될 때가 있습니다. 저는 AI에 의존하는 대신, 해당 부분의 CSS 코드를 직접 살펴보고 다음과 같은 간단한 코드를 입력하니 문제가 해결되었습니다.😊

body:not(.single):not(.page) .site-content #primary .site-main > article .entry-summary:has(.google-auto-placed) .read-more {
	bottom: -35px !important;
}

설치형 워드프레스에서는 모양 » 사용자 정의 » 추가 CSS에 상기 코드를 추가할 수 있습니다.

이 블로그와 같이 가입형 워드프레스를 이용하는 경우 비즈니스 플랜에서는 설치형처럼 코드를 추가할 수 있지만, 개인 플랜 또는 프리미엄 플랜에서는 플러그인을 설치하여 CSS 코드를 추가할 수 있습니다. 이 사이트에서는 Simple Custom CSS라는 플러그인을 설치하여 CSS 코드를 추가하고 있습니다.