워드프레스 Generated Press 테마 플로팅배너(고정배너) 설정하기

플로팅배너 는 단어 그대로 어느 특정한 위치에 고정되어 있는 배너로 고정배너, 스티키배너 라고도 합니다.
본 블로그 우측에 있는 배너에 적용된 기술이며 티스토리와는 다른 방법으로 워드프레스는 설정을 해 줘야 하기 때문에 특히 제가 평상사용할 유료 워드프레스테마인 Generatepress 에 어떻게 설정하는 기록형으로 남깁니다.

내 블로그에 적용한 기술 – 플로팅배너

플러그인 설치

워드프레스에 플로팅배너를 적용하기 위해서는 Sticky Menu (or Anything!) on Scroll 이란 플러그인을 설치 했습니다. 다른 방법이 있는지는 모르겠지만 현재 내가 선택한 방법은 워드프레스 플러그인을 활용한 것입니다.

설치 후 설정화면에서 아래와 같이 설정 해줍니다.
STICKY ELEMENT 설정에서 required (필수입력) 라고 되어 있는 부분은 무조건 입력 해야 합니다. 즉, 여기서 css 에서 설정할 id 값또는 class 값에 사용할 것을 입력 하는 것입니다. 무슨 말인지 모르겠죠? 그냥 저와 같이 입력 후 계속 따라 해보세요. 앞에 쩜(.)이 있습니다. 다른 입력 사항은 필수 항목이 아니기때문에 차근차근 읽어본 후 설정 해 주면 됩니다.

.sidebar_banner

플로팅배너 설정: Elements 에 HOOK 등록하기

아래와 같이 엘리멘트로 등록하면 간편하게 원하는 위치에 소스(코드)를 적용할 수 있습니다.

새로운 엘리먼트 등록을 하면 엘리먼트 타입을 선택 할 수 있고 Hook 을 선택 합니다.

포스팅 하듯이 제목과 내용을 채워 주면 되는데 내용에는 적용할 코드를 넣어 주면 됩니다.
class=”sidebar_banner” 이부분이 위 플러그인 필수 입력 항목이였던 부분에 입력 한 것입니다. 쩜(.)을 뺀 나머지 단어만 매칭 시키면 됩니다.

하단 설정 부분입니다. 아래와 같이 설정해 주면 됩니다.
generate_after_right_sidebar_content: 우측 사이드바 컨텐츠에 적용하는 것 같습니다. 눌러보면 다양한 위치가 있는데 저와 같이 우측 사이드바에 위치 시킬려면 제가 설정한 것 처럼 하면 됩니다.
Execute PHP: 코드 종류가 php 이기 때문에 이것을 체크해야만 php 코드문이 작동을 합니다.

아래 설정 2번째 입니다. 바로 옆 탭에 있는 display rules 설정으로 아래와 같이 어떤 페이지에 적용할 것인가를 설정하는 것 같고 저와 같이 Entire site 를 선택하면 항상 노출 됩니다.

마무리

티스토리와 다르게 워드프레스는 코드(소스)를 바로 넣지 않고 대부분 플러그인 형태로 삽입해 줍니다.