워드프레스 탑 바 플러그인 Top Bar PRO

0

재작년에 ‘워드프레스 상단 배너/알림/공지 표시 플러그인‘라는 글을 통해 워드프레스에서 이용할 수 있는 탑 바(top bar) 플러그인에 대해 간략히 소개한 적이 있습니다.

오늘 살펴보니 이 중에서 쓸만한 플러그인은 Top Bar 정도 같습니다. 이 플러그인은 무료 버전과 유료 버전이 있습니다.

워드프레스 Top Bar 플러그인

워드프레스 상단 배너 플러그인

Top Bar 무료 버전을 사용하면 상단에 배너나 알림을 표시할 수 있습니다. 유료 버전인 Top Bar PRO에서는 지연 로드, Top Bar 위치를 하단에 표시할 수 있는 기능, 그리고 배너를 사용자가 닫을 수 있는 Close 버튼을 추가로 제공합니다.

무료 버전을 가지고 테스트해보니 테마에 따라 제대로 작동되지 않는 경우가 있었습니다. PRO 버전을 사용하면 아바다 등의 테마에서 제대로 작동했습니다. Divi 테마의 경우 상단 대신 하단에 표시하면 제대로 작동했던 것 같습니다.

무료 버전을 사용했을 때 제대로 작동하지 않으면, PRO 버전에서 지연 로드 기능을 사용하거나 배너 위치를 하단에 배치하면 제대로 작동할 수 있습니다.

Top Bar PRO 버전. 지연(Delay) 로드 기능과 배너를 종료(Close)할 수 있는 기능 등이 추가로 제공된다.

Top bar 기능은 간단한 javascript로 구현이 가능합니다. 플러그인을 사용하지 않고 Top bar 기능을 구현하는 방법도 고려해볼 수 있습니다.

플러그인을 사용하지 않고 상단에 알림 표시하기

플러그인을 사용하지 않고 상단이나 하단에 알림을 표시하려는 경우 “How to Create a WordPress Notification Bar Without a Plugin“에 제시된 글을 참고할 수 있습니다.

Close 버튼을 추가하려면 다음과 같은 코드를 사용할 수 있습니다.

HTML:

<div id="dabar" class="hide_on_mobile"><button id="closexButton" onclick="document.getElementById('dabar').style.display='none'" >Close</button>알림 텍스트</div>

CSS:

/* top-bar */
#dabar{
background: #2c3644;
color: #fff;
font-size:16px;
position: fixed;
z-index:1;
top: 0px;
left: 0px;
width: 100% !important;
padding: 10px 0px;
text-align: center;}
#dabar a {color: #ffffff; border-bottom: 1px dotted;}

@media only screen and (max-width:783px) {
.hide_on_mobile {
display: none !important;}
}

#closexButton {
position: absolute;
top: 5px;
right: 70px;
background-color: #f92c8b;
padding: 2px 10px 2px;
color: white !important;
text-decoration: none;
margin: 0px 20px;
border-radius: 3px;
}

테마에 따라 조금씩 틀어지는 부분은 CSS를 통해 적절히 제어하도록 합니다.

※일부 글에 제휴링크가 포함될 수 있습니다._커피 한잔 값으로 블로그 운영을 후원하실 수 있습니다.