작성일 2019-11-262020-01-02 작성자 oksambari

숍 상단에 베너 추가하기

기존 제작된 숍 사이트 상단에 베너를 노출하고 싶다는 요청 사항이 있어서 적용을 해 본 방법입니다.

차후 직접 수정이 잦고, 간단하면서 편리해야 할 것을 고려하다 보니, ‘simple banner’라는 플러그인 + html 구조 + css 스타일 수정 방법을 적용하게 됐습니다.

1. 플러그인 설치 : Simple Banner

플러그인 활성화 시 사이트의 맨 상단에 베너가 바로 추가가 되는점, 그리고 html로 내용 추가, 기본 배경 컬러 색 지정이 가능한 점이 좋았습니다.

2. 베너 안 내용 만들기

<div id="top-banner-div">
    <span class="top-banner-close"><i class="fa fa-times-circle" aria-hidden="true"></i></span>
    <a href="#"><img src="https://storefront.oksdev.tk/wp-content/uploads/2019/11/top_banner.jpg"></a>
</div>

베너 텍스트 부분에 html을 적을 수 있습니다. ( ※ 이미지 주소는 미디어에 파일 업로드 후 확인 )

3. css 스타일 정의로 이미지 및 닫기 아이콘 위치 조정

/* Top Banner */
#top-banner-div {
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
.top-banner-close {
  display: inline-block;
    position: absolute;
    left: 1%;
  padding:5px; 
}
.top-banner-close:hover {
  cursor:pointer;
}

4. jQuery 스크립트를 추가해서 닫기 아이콘을 클릭 시 베너를 닫게 하는 동작 추가

/**
 * Add scripts to wp_footer()
 */
function child_theme_footer_script() {   ?>
  <script>
    (function($) {        
      $(document).on("click",".top-banner-close",function(event){
        $('#simple-banner').hide();
      });       
    })( jQuery );   
  </script>
<?php  }
}
add_action( 'wp_footer', 'child_theme_footer_script', 99 );

끝.

0