워드프레스 사이드바 광고 고정하는 방법
- 워드프레스
- 2024. 4. 24.
반응형
사이드바에 삽입한 광고가 스크롤을 내리면 사라지지 않고 고정되도록 설정하는 방법입니다.
플러그인을 이용하여 사이드바 광고 고정하는 방법
- 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 기능을 선택할 수 있게 되어있습니다.
- 이 기능을 선택하여 사이드바를 고정시킬 수 있습니다.
반응형
'워드프레스' 카테고리의 다른 글
가비아 도메인 벌쳐(Vultr) 연결 방법과 하위 도메인 추가 방법 (0) | 2024.05.17 |
---|---|
워드프레스 벌처(Vultr) 호스팅 설치 방법 (0) | 2024.05.15 |
워드프레스 애드센스 광고 삽입 방법(+ ads.txt 문제 해결) (0) | 2024.04.23 |
WP Statistics 네이버 다음 검색 엔진 추가 방법 (0) | 2024.04.22 |
워드프레스 카카오톡 채널 추가 버튼 삽입 방법 (0) | 2024.04.11 |