워드프레스 사이드바 광고 고정하는 방법

사이드바에 삽입한 광고가 스크롤을 내리면 사라지지 않고 고정되도록 설정하는 방법입니다.

플러그인을 이용하여 사이드바 광고 고정하는 방법

• Fixed Widget 플러그인을 설치합니다.

Fixed Widget and Sticky Elements for WordPress

• 이 플러그인으로 사이드바 광고를 고정하려면 Ad insertetd와 FixedWidget 플러그인이 모두 설치되어 있어야합니다.
• 외모 -> 위젯
• 위젯으로 광고 삽입 시 아래 그림과 같이 FixedWidget을 선택해주면 스크롤바를 내릴때 광고만 고정되어 따라다니게 됩니다.

 

CSS 코드를 이용하는 방법(GeneratePress 테마)

/* GeneratePress 테마 사이드바 고정 */

@media (min-width: 769px) {
.site-content {
display: flex;
justify-content: space-around;
align-items: flex-start;
}

#right-sidebar {
position: -webkit-sticky;
position: sticky;
bottom: 0.1rem;
align-self: flex-end;}
}

• 위 코드를 외모 -> 추가 CSS에 삽입합니다.
• 오른쪽 사이드바를 데스크탑에서 고정시키는 코드입니다.
• CSS position:sticky 속성은 IE를 비롯하여 일부 구형 브라우저에서는 지원되지 않습니다.
• 이 코드를 사용하면 사이드바의 가장 아래부분이 화면의 가장 아래에 붙어서 움직입니다.

 

테마 자체 기능 사용

• 워드프레스 일부 테마에서는 사이드바에 Sitcky 기능을 선택할 수 있게 되어있습니다.
• 이 기능을 선택하여 사이드바를 고정시킬 수 있습니다.