워드프레스 퀵뷰, 퀵바, 퀵메뉴 플러그인/HTML 소스 코드

워드프레스에서 왼쪽 또는 오른쪽 사이드바에 고정된 메뉴나 퀵뷰를 표시하고 싶은 경우 플러그인을 사용하거나 간단한 HTML 코드로 구현이 가능합니다. 이 글에서는 퀵뷰/퀵메뉴를 만들 수 있는 몇 가지 플러그인을 소개하고 간단한 HTML/CSS를 이용한 퀵뷰 소스를 확인할 수 있습니다.

워드프레스 퀵뷰, 퀵바, 퀵메뉴 플러그인

위의 그림과 같이 화면을 스크롤해도 따라다니는 메뉴를 표시하고 싶은 경우 WP Floating Menu와 같은 플러그인을 사용할 수 있습니다.

이 플러그인은 무료 플러그인이므로 원하는대로 퀵메뉴/퀵뷰를 사이드바에 표시할 수 있는지 테스트해보시기 바랍니다. 

이 무료 플러그인이 마음에 들지 않으면 WP Floating Menu Pro라는 유료 플러그인도 있습니다. 무료 플러그인보다는 기능이 더 다양하고 정교하게 만들 수 있는 것 같습니다.

또 다른 플러그인으로 Brave라는 무료/유료 팝업 플러그인이 있습니다. 이 플러그인은 팝업뿐만 아니라 사이드바에 메뉴/배너 등을 고정하는 기능도 제공합니다. 드래그 & 드롭 방식으로 만들 수 있기 때문에 사용이 쉽습니다.

사용이 쉬운 워드프레스 팝업 플러그인 Brave Popup Builder - 워드프레스 정보꾸러미

HTML 코드로 퀵뷰/퀵메뉴 만들기

사이드바에 고정된 메뉴는 HTML로 간단히 구현이 가능합니다. 가령, 다음과 같은 HTML 코드태그를 사용할 수 있습니다.

<div class="quickview1">
<div class="quickview2">
<ul class="quickview3">
<li><a href="https://example.kakao.com/1234/" 
target="_blink">
<img src="http://example.co.kr/wp-content/uploads/quick/guick_11.png"></a></li> 
<li><a href="http://example.co.kr/board-2/">
<img src="http://example.co.kr/wp-content/uploads/quick/guick_21.png"></a></li>
 <li><a href="http://example.co.kr/map/">
<img src="http://example.co.kr/wp-content/uploads/quick/guick_31.png"></a></li>
 <li><a href="tel: 02-123-4567">
<img src="http://example.co.kr/wp-content/uploads/quick/guick_41.png"></a></li>
</ul>
</div>
</div><!-- end -->

카톡, 네이버 블로그 등 필요한 이미지를 준비하여 워드프레스 미디어 라이브러리에 업로드한 다음, 해당 이미지의 URL을 복사하여 이미지 URL과 링크를 적절히 변경하도록 합니다. 필요한 경우 <li>...</li> 부분을 복사하여 개수를 늘리거나 불필요한 항목은 삭제할 수 있습니다.

[참고*미디어 라이브러리에 업로드된 이미지의 URL을 확인하는 방법은 "워드프레스 미디어 라이브러리 이미지 URL 확인하기"을 참조하세요.*]

위의 코드를 테마 폴더 내의 [**footer.php**] 파일의 [**</body>**] 바로 위에 추가하도록 합니다. (차일드 테마를 만들어 작업하세요.)

또는, Insert Headers and Footers 플러그인을 설치하여 푸터 섹션에 추가하는 것도 가능합니다. FTP에 접속하여 작업하는 것이 번거로운 경우 이 방법으로 코드를 추가할 수 있습니다.

워드프레스 헤더와 푸터에 쉽게 코드 삽입하기: Insert Headers and Footers 플러그인

GeneratePress 테마를 사용하는 경우 Element를 사용하여 HTML 코드를 추가할 수 있고 퀵뷰가 표시될 페이지를 지정(전체 사이트, 특정 페이지, 특정 글 또는 전체 글, 특정 카테고리 등)하는 것도 가능합니다.

그리고 다음 CSS 코드를 외모 > 사용자 정의하기 > 추가 CSS 섹션에 추가합니다.

/* 퀵뷰 퀵메뉴 스타일 */
.quickview2 { 
	position:fixed; 
	right:5px; /* 사이드바에서 떨어진 거리 */
	top: 50%;
	transform: translateY(-50%);
	z-index:1000; 
}
.quickview3 { 
	list-style:none; 
	margin:0; padding:0; 
}
.quickview3 li { 
	padding:-10; 
	margin:-10; 
}

.quickview3 img { 
	width:45px; /* 이미지 너비 변경 */
}

이미지 너비 부분은 없어도 상관 없을 것 같지만, 이미지 크기가 원하는 크기로 표시되지 않으면 위의 코드에서와 같이 이미지 폭을 적절히 지정하시기 바랍니다. 위의 코드를 사용할 경우 다음과 비슷하게 사이드바에 따라다니는 퀵메뉴가 표시됩니다. 왼쪽에 표시하고 싶은 경우에는 상기 CSS 코드에서 [**right**]를 [**left**]로 변경하여 테스트해보세요.

세로는 가운데 정렬되도록 설정되어 있습니다("css vertically centering a fixed positioning div" 참고). CSS 코드를 적절히 수정하여 원하는 곳에 고정되도록 할 수 있습니다.

그리고 모바일에서는 숨기고 싶은 경우에는 다음과 같은 CSS 코드를 추가할 수 있습니다.

/* 모바일 기기에서 퀵뷰 숨기기 */
@media screen and (max-width: 768px){
    .quickview1 {
        display: none;
    }
}

위의 코드를 추가하면 해상도 768px 이하에서는 퀵뷰가 표시되지 않습니다. 해상도는 이용 중인 테마에 따라 적절히 변경할 수 있습니다.

예:

• 워드프레스 아바다 테마 CSS 미디어 쿼리 디바이스별 해상도 분기점
• 워드프레스 GeneratePress 테마 CSS 미디어 쿼리 반응형 분기점

이 방법으로 플러그인을 사용하지 않고 간단히 퀵뷰를 추가할 수 있습니다.

추가: 모바일에 대하여 CSS를 사용하지 않고 숨기고 싶은 경우 워드프레스 내장 함수인 [**wp_is_mobile()**]을 사용할 수 있지만 이 함수는 태블릿과 모바일을 구분하지 못하는 버그가 있습니다. 

<?php
if ( wp_is_mobile() ) {
/* 모바일 장치용 코드 */
}
?>

모바일과 태블릿을 구분해야 하는 경우 다음 글에 소개된 플러그인을 사용하면 해당 버그가 수정됩니다. 그냥 이런 것이 있다는 것만 알아 두시고 잊어버리시기 바랍니다. 보통은 CSS 미디어쿼리를 사용하여 모바일 기기에 대하여 숨기면 되지만, 꼭 PHP를 통해 조정하고 싶은 경우 이러한 방법을 응용할 수 있을 것입니다.

워드프레스 모바일 기기 감지 플러그인 - Mobile Detect

[참고*위의 코드는 예시일 뿐입니다. 더 좋은 코드가 있다면 댓글을 통해 알려주시기 바랍니다. 그러면 글을 업데이트하도록 하겠습니다.*]

참고

https://avada.tistory.com/2462

워드프레스 엘리멘터 문의폼 위젯(Form 요소)

https://avada.tistory.com/2417

엘리멘터(Elementor) 토글 위젯과 아코디언 위젯 차이점