베스트셀링 인기 워드프레스 테마 Top 30 자세한 정보

워드프레스 사이드에 퀵 메뉴/퀵 바 추가하기

Last Updated: 2021년 9월 7일 | 댓글 남기기
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

그림과 같이 마우스를 스크롤할 때 왼쪽 사이드나 오른쪽 사이드에 고정되어 함께 스크롤되는 퀵 메뉴 혹은 퀵 바를 추가하기를 원하는 경우가 간혹 있습니다. 워드프레스에서는 플러그인을 사용하거나 커스텀 HTML 코드를 사용하여 쉽게 구현이 가능합니다.

Sticklr WP plugin

[ 이 글은 2016년에 작성되었지만 최신 정보를 바탕으로 다시 작성되어 재발행되었습니다. ]

워드프레스 사이드에 퀵 메뉴/퀵 바 추가하기

소셜 아이콘 등과 같은 간단한 요소는 이 글에서 소개한 방법을 통해 쉽게 고정이 가능합니다. 또는, 플러그인을 사용하지 않고 소셜 공유 버튼 추가하기 (네이버, 카카오스토리, 카카오톡)에 소개된 코드를 응용할 수도 있습니다.

메뉴 항목 등을 퀵 메뉴 혹은 퀵 바 형태로 고정시키고자 하는 경우 Sticklr WP - Sticky Side Panel WordPress Plugin라는 플러그인을 사용할 수 있습니다. 하지만 이 플러그인은 오래 전에 Codecanyon에서 제거되었습니다.

비슷한 플러그인으로 WP Floating Menu Pro 플러그인이 있습니다.

HTML 코드로 사이드바에 고정된 퀵 메뉴/퀵 바 구현하기

HTML 코드로 사이드바에 고정된 퀵 메뉴나 퀵 바를 쉽게 구현이 가능합니다.

예를 들어, 다음과 같은 HTML 코드를 footer.php 파일의 </body> 바로 위에 추가하면 오른쪽 사이드에 고정된 퀵 뷰를 표시할 수 있습니다.

<div>
<div class="quickview2" style="right:0px; bottom:60px; position:fixed; z-index:1000;">
<ul class="quickview3" style="list-style:none; margin:0; padding:0;">
<li style="padding:-10; margin:-10;"><a href="https://example.kakao.com/1234/" 
target="_blink">
<img class="quiview5" src="http://example.co.kr/wp-content/uploads/quick/guick_11.png"></a></li> 
<li style="padding:-10; margin:-10;"><a href="http://example.co.kr/board-2/">
<img class="quiview5" src="http://example.co.kr/wp-content/uploads/quick/guick_21.png"></a></li>
 <li style="padding:0; margin:0;"><a href="http://example.co.kr/map/">
<img class="quiview5" src="http://example.co.kr/wp-content/uploads/quick/guick_31.png"></a></li>
 <li style="padding:0; margin:0;"><a href="tel: 02-123-4567">
<img class="quiview5" src="http://example.co.kr/wp-content/uploads/quick/guick_41.png"></a></li>
</ul>
</div>
</div><!-- end -->

이미지 URL와 타겟 URL 등은 적절히 변경하도록 합니다. 이 방법으로 워드프레스 사이트의 사이드에 카카오톡 등의 아이콘을 퀵 뷰 형식으로 추가할 수 있습니다.

차일드 테마를 만들어서 footer.php 파일을 차일드 테마 폴더로 복사한 다음 위의 코드를 넣을 수 있습니다. 또는, footer.php 파일 등에 코드를 추가하는 대신 wp_footer 훅을 사용하여 테마 함수 파일에 추가하는 것도 가능합니다. 예시:

// Add HTML to wp_footer() using a WordPress hook
// 액션을 사용하여 wp_footer()에 HTML 추가하기
function child_theme_footer_script() { ?>
 <!-- HTML 퀵뷰 소스 코드 추가하기 -->
<?php }
add_action( 'wp_footer', 'child_theme_footer_script' );

HTML 퀵뷰 소스 코드 추가하기 부분을 상기의 HTML 코드로 대체합니다. 마찬가지로 차일드 테마 내의 함수 파일(functions.php)에 추가하도록 합니다.

위의 코드에서는 CSS 코드를 인라인 스타일으로 추가되어 있지만, CSS 코드를 분리하여 외모 > 사용자 정의하기 > 추가 CSS 섹션에 추가하는 것이 추후에 관리하기가 더 좋을 것 같습니다.

사이드바 고정

참고로 사이드바를 고정하고 싶은 경우 WP Sticky Sidebar – Floating Sidebar On Scroll for Any Theme 플러그인을 사용할 수 있습니다. 이 무료 플러그인을 사용하면 사용자가 아래로 스크롤해도 항상 사이드바가 따라서 내려가는 고정 사이드바를 구현할 수 있습니다.

플러그인 사용하지 않고 CSS를 사용하여 사이드바를 고정하는 것도 가능합니다. 이 블로그에 사용된 GeneratePress 테마에서는 다음과 같은 CSS 코드를 사용하여 사이드바를 고정할 수 있습니다.

// Make the GeneratePress theme's sidebar sticky
// GeneratePress 테마 사이드바 고정
@media (min-width: 769px) {
    #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

퀵 메뉴와는 약간 성격이 다르지만 화면에 따라 사이드바가 같이 스크롤되도록 사이드바를 고정해주는 Theia Sticky Sidebar for WordPress라는 플러그인도 있습니다.

참고



댓글 남기기

Leave a Comment