워드프레스 블로그에 한시적으로 표시할 상단 고정바를 세팅하였다. 스크롤 해도 사이트 상단에 계속 고정되어 보여지는 요소를 만드는 방법과, X 버튼을 눌러서 사라지게 하는 방법이다.
상단 고정바 CSS
상단 고정바는 CSS로 간단하게 만들 수 있다. 사이드바를 고정하는 방법과 유사하다.
헤더 위쪽에 고정을 시킬 것이니 워드프레스 > 외모 > Elements > Hook를 하나 등록해서 generate_before_header에 위치하도록, 그리고 Entire Site에서 노출되도록 옵션을 설정해주면 된다. generate_after_header로 해도 상관없는 것이 어차피 위치를 고정해서 박아버릴 거니까.
<div id="top-fixed-bar" class="top-fixed-bar">
<a href="https://link.coupang.com/a/bnvwyO" rel="nofollow sponsored" target="_blank">➔ 갤럭시 s24 사전예약 혜택보기</a>
<span class="close-btn" id="closeTopBarButton" onclick="offDisplay()">X</span>
</div>지금 이 블로그에 보이는 상단 고정바는 위와 같은 html 소스를 엘리먼트를 이용해서 넣어주었다.
어차피 티스토리 떠나고 워드프레스에서 뼈를 묻을거라 큰 맘 먹고 제너레이트 프리미엄 구매했는데 추가된 기능들을 이럴 때 종종 유용하게 사용하고 있다. 한 번 영구구매 해놓으면 500개 도메인에 사용할 수 있어서 이후 내 모든 사이트와 다른 사람들도 적용해 줄 수 있으니.
/* 상단고정 배너바 */
.top-fixed-bar {
height: 40px;
width: 100%;
background-color: #A10909; /* 배경색을 진한 빨간색으로 설정 */
color: white; /* 글자색을 흰색으로 설정 */
font-weight: bold; /* 글자를 굵게 설정 */
position: fixed;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.top-fixed-bar a {
color: white; /* 링크도 흰색으로 설정 */
text-decoration: none; /* 링크 밑줄 제거 (선택 사항) */
}
body {
padding-top: 40px;
}html로 적용한 div id 부분에 대한 css 설정을 이와 같이 워드프레스 > 사용자 정의하기 > 추가 CSS에 입력해주었다. 상단에 고정되고 색깔 설정하는 부분을 여기서 지정한다.
body부분에 상단 여백 40을 준 이유는 고정바가 화면 위에 겹쳐져서 보이기 때문에 그 폭만큼 원래 블로그 내용이 아래로 조금 밀려서 나오라고 해준 것이다.
그 다음에 끄고 싶은 경우를 위해 X 표시를 누르면 없어지는 것을 추가하였는데, 위에 html 소스에서 span 태그로 입력한 close-btn 클래스명이다.
.close-btn {
position: absolute;
right: 10px;
top: 50%; /* 상단 고정 바의 수직 중간 위치 */
transform: translateY(-50%); /* 버튼 자체의 높이의 절반만큼 위로 이동 */
cursor: pointer;
color: white;
font-size: 12px; /* 글자 크기 작게 설정 */
font-weight: normal; /* 굵은 글씨 스타일 제거 */
}X표시 끄기 버튼은 이렇게 CSS로 같이 넣어주었다.
X표시 누르면 사라지는 자바스크립트
그 다음에 이걸 누르면 상단 고정바가 사라지는 기능을 추가해야 하는데, 지피티를 이용해서 간단하게 구현할 수 있다.
<script type="text/javascript">
function offDisplay() {
document.getElementById("top-fixed-bar").style.display = "none";
document.body.style.paddingTop = "0px"; // body의 padding-top을 0px로 설정
}
</script>
이렇게 함수명을 offDisplay 라고 지정해주고 html 부분에 onclick 에다가 넣어주면 클릭할 경우 이 함수명의 자바스크립트가 수행되도록 한다는 의미가 된다.
수행하는 내용은 top-fixed-bar 아이디로 지정한 요소에 대해 display=none 으로 없애버리는 것이다.
그런데 그냥 없애면 원래 상단 고정바가 있던 자리가 빈칸으로 남기 때문에, body에 주었던 여백을 0으로 다시 없애주는 기능을 같이 추가하였다. 이렇게 하면 X표시를 누를 경우 상단 고정바가 사라지면서 밑의 내용이 화면 상단을 채워서 보기 좋게 된다.
