최근 N 잡에 대한 관심도가 높아지면서 워드프레스에 대한 인기도 함께 높아지고 있는 것 같습니다. 워드프레스 하시는 모든 분들께서 좋은 결과 있으시길 바라며 오늘은 제너레이트 테마(Generate Press)에서 사이드바에 구글 애드센스 광고 추가 및 활용 방법에 대해 알아보는 시간 갖도록 하겠습니다.
PC 버전에서만
해당 과정을 진행하기 전 미리 아셔야 할 것은 우측 사이드바 광고는 모바일 버전이 아닌 PC 버전에서만 해당되는 이야기입니다. 즉, 방문자가 PC나 노트북 등을 통해서 우리의 홈페이지를 접속할 때 오른쪽 사이드 광고가 보이는 것이며, 이 과정을 적용해도 모바일 버전에서는 사이드 광고가 노출되지 않습니다.
어쩌면 당연한 이야기입니다. 모바일에서 사이드 광고까지 넣어버리면 광고로 인해 글 가독성이 현저히 떨어지기 때문이죠. 그래도 PC버전으로 많은 사람들이 유입되기 때문에 텅 비어 있는 것보다는 수익 측면에서 많은 도움을 줄 것입니다. 시작하겠습니다.
구글 애드센스 광고 생성
워드프레스 제너레이트(Generate Press) 테마의 오른쪽 사이드바에 광고를 넣는 과정에서 가장 먼저 해야 할 것은 구글 애드센스의 광고를 생성하는 것입니다. 보통 자동 광고 생성을 많이 하실 텐데요. 사이드바의 경우에는 수동으로 광고 생성을 해야 합니다. 먼저 구글 애드센스에 접속해서 로그인을 진행합니다.
왼쪽 사이드 메뉴 중에서 광고를 클릭합니다. 그리고 오른쪽에 출력되는 화면에서 신규 광고를 만들어줍니다.
상단에 ①광고 단위 기준을 누르고 가장 첫 번째의 ②디스플레이 광고를 누릅니다.
디스플레이 광고는 총 세 가지의 광고 종류를 만들 수 있습니다. 사각형과 수평형은 본문에 넣기 적합한 사이즈이며, 우리는 오른쪽 사이드바에 광고를 추가할 것이기에 ①수직형을 클릭해 줍니다. 그리고 오른쪽에 생성되는 광고의 구분을 위해 ②이름을 입력해 줍니다. 구분을 위한 것이므로 편하신 이름 아무거나 입력하시면 됩니다. 마지막으로 ③만들기를 클릭해 줍니다.
광고 크기는 반응형과 고정형이 있는데, 기본 값으로 세팅된 반응형으로 놔두시면 됩니다. 반응형은 광고주의 광고 크기에 따라 유동적으로 크기가 변하는 것이며, 고정형은 고정된 세팅 값의 광고가 출력되는 것입니다. 고정형으로 세팅할 시 광고 출력이 제한될 수도 있기에 반응형을 추천드립니다.
정상적으로 광고가 생성되면 위와 같은 코드가 생성됩니다. (코드는 임의로 블라인드 처리했습니다.) 이제 워드프레스 사이드바의 위젯에서 HTML 코드를 삽입하여 사이드 광고를 추가해 보도록 합니다.
사이드바 위젯 생성
구글 애드센스에서 광고 생성은 완료되었으며, 워드프레스로 돌아가 오른쪽 사이드에 광고를 배치할 수 있는 위젯을 생성해 보도록 하겠습니다.
먼저 워드프레스 메인 화면에서 왼쪽 메뉴들 중 ①디자인을 클릭 후 ②사용자 정의하기로 들어가줍니다.
다음 과정은 위의 이미지를 천천히 따라 해 주시면 될 것 같습니다. 첫 번째 Layout, 두 번째 Sidebars를 순서대로 클릭 후 세 번째 화면에서 ①②③모든 Layout을 Content / Sidebar 방식으로 변경해 줍니다. 그리고 상단에 ④공개(저장)을 눌러 변경사항을 저장합니다.
취향에 따라서 홈페이지 메인화면 또는 본문 화면의 사이드바를 왼쪽, 오른쪽, 양쪽 등 다양하게 변경할 수 있습니다.
사이드바 위젯 편집 및 광고 삽입
오른쪽 사이드에 위젯이 생성되면 이제 해당 위젯을 편집하여, 구글 애드센스에서 생성한 광고를 삽입해 보도록 합니다.
디자인 ➡️ 사용자 정의하기의 초기 화면에서 ①위젯을 클릭 후 ②Right Sidebar를 클릭해 줍니다.
위 이미지는 사이드 바의 위젯을 편집할 수 있는 화면입니다. 제너레이트 프레스 테마로 변경하면 몇 가지의 위젯이 기본으로 설정되어 있습니다. 위젯을 눌러 키보드의 백스페이스(⬅️, 뒤로 가기)를 누르거나 삭제를 선택하면 삭제가 됩니다. 저의 경우에는 광고만 보이기 위해 모두 삭제했습니다. (위 이미지의 설정 화면은 제가 임의로 넣은 위젯들이라 약간 다를 수 있습니다. 참고만 해주시기 바랍니다.)
위젯을 모두 삭제할 경우 위와 같이 아무것도 없는 화면이 나타나게 됩니다. 여기서 광고 삽입을 위한 위젯을 추가하기 위해 ①+버튼을 누르고 ②오른쪽에 사용자 정의 HTML을 눌러줍니다. 광고 이외에 다른 위젯 추가를 원할 시 +버튼을 활용해 다른 위젯을 추가할 수 있습니다.
추가된 사용자 정의 HTML 위젯에 HTML 코드를 입력할 수 있는데, 해당 공간에 ①구글 애드센스에서 생성했던 코드를 복사 후 붙여넣기를 진행합니다. 그리고 ②공개를 눌러 작업을 마무리합니다.
구글 애드센스의 광고 HTML 코드는 위의 이미지와 같이 하단에 생성된 광고 목록에서 코드 가져오기를 눌러 생성된 코드를 복사 후 워드프레스 위젯에 붙여넣기 하시면 됩니다.
지나치는 사이드바 고정시키는 방법
사이드 광고가 생성되었습니다. 본인의 홈페이지를 방문 후 확인해 보시면 광고가 생성되어 있는 것을 확인할 수 있는데, 이때 화면을 아래로 내리면 사이드바가 그대로 지나치는 것을 확인하실 수 있으실 것입니다.
사이드바를 고정시켜서 방문자가 글을 읽으면서 내려가도 광고가 지속적으로 보이는 방법에 대해 알아보도록 합니다. CSS 코드 삽입을 통해 사이드 광고를 고정하는 법이 되겠습니다.
앞에서 설정했던 방법과 마찬가지로 ①디자인, ②사용자 정의하기를 클릭합니다.
그리고 추가 CSS를 클릭합니다. 그리고 아래의 CSS 코드를 복사 / 붙여넣기 후 저장을 진행하여 작업을 마무리합니다.
| /* GeneratePress 테마 사이드바 고정 */ @media (min-width: 1025px) { .site-content { display: flex; justify-content: space-around; align-items: flex-start; } right-sidebar { position: -webkit-sticky; position: sticky; bottom: 2rem; align-self: flex-end;} } |
사이드바 광고를 다시 확인하시면 페이지가 아래로 스크롤 되어도 광고가 같이 따라 내려가는 것을 확인하실 수 있을 것입니다.
지금까지 워드프레스 제너레이트 테마(Generate Press) 사이드 광고 추가 및 고정 방법에 대해 알아보았습니다. 워드프레스를 통해 많은 수익 내시길 바라며 글을 마칩니다. 감사합니다.