사이드바보다 본문의 내용이 길 경우(이 글도 해당됨) 스크롤 해서 내려가면 보통 사이드바는 위로 사라져 버립니다. 하지만 사이드바가 화면의 하단에 닿았을 때 멈춰서고 스크롤을 계속해서 내려가도 시야에서 벗어나지 않도록 만드는 방법입니다.(아래영상)
제이쿼리를 이용한 Sticky Kit 스크립트를 이용합니다.

1. GitHub의 sticky-kit로 가서 편집 창 오른쪽 위에 있는 Raw 버튼을 누르고, 나타나는 코드를 모두 복사해서 sticky-kit.min.js라는 이름의 파일로 붙여넣기, 저장합니다.

2. 내 웹사이트의 사이드바가 존재하는 파일을 찾아서(보통 테마 폴더의 sidebar.php) 아래와 같은 구조로 만들어 줍니다. (사이드바 컨테이너 안에 sidebar_inner가 존재하는 구조)

<aside id="sidebar" class="widget-area col-md-3">
    <div id="sidebar_inner">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </div>
</aside>

3. wpbox.js라는 이름으로 빈 파일을 만든 후(독특한 이름의 js 파일 이름이면 됨) 아래의 코드를 파일에 붙여넣기, 저장합니다.

jQuery(document).ready(function($){
     $('#sidebar_inner').stick_in_parent();
})

*2번에서 적용한 사이드바 내부 블럭(id=”sidebar_inner”)의 이름을 이용해서 제이쿼리 함수를 적용하였습니다.

4. 1번과 3번에서 만든 파일을 현재 사용중인 차일드테마 안에 있는 js폴더 안에 FTP로 올려 넣습니다.(만약 js 폴더가 없다면 직접 만들어 넣습니다.)

5. 아래의 코드를 사용 중인 차일드테마의 functions.php 파일 맨 아래에 적어 넣습니다.

function wpbox_scripts() {
wp_enqueue_script('wpbox-sticky-kit',get_template_directory_uri().'/js/sticky-kit.min.js',array('jquery'),'20181112',true);
wp_enqueue_script('wpbox-js',get_template_directory_uri().'/js/wpbox.js',array('jquery'),'20181112',true);
}
add_action( 'wp_enqueue_scripts', 'wpbox_scripts' );

6. 이제 원하는 대로 사이드바가 동작 할 것입니다.

* 만약 원하는 대로 동작하지 않는다면 위 3번의 입력 코드를 아래와 같이 조정해 줍니다.(상위 엘리먼트의 성질에 따라서 다릅니다.)

jQuery(document).ready(function($){
     $('#sidebar').stick_in_parent();
})
글쓴이 :
WPBOX.KR 운영자
AVADA.KR 운영자
EnnioLove.com 운영자
Facebook
everygofine@gmail.com
인기글
구글맵 API 설정 후에도 “개발 목적”이라고 표시되는 경우
카페24 웹호스팅 보안서버 SSL 인증서 443 포트 사용
워드프레스 차일드테마 설치 Child theme
워드프레스 한국형 게시판_KBoard와 MangBoard
레볼루션 슬라이더 버전 4.X 사용법
Yoast seo 플러그 사용법 (1.General)
인스타그램 Access Token 과 UserID 가져오는 방법
MAMP 사용기(내 컴퓨터에 로컬서버 구축하기)
사용자 정의 필드와 ACF (Advanced Custom Fields) 플러그인
워드프레스에서 글과 페이지의 차이

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다