워드프레스에서 화면을 따라 아래로 내려가는 요소(배너/메뉴/위젯 등) 만들기

페이지 영역 외부에 배너나 메뉴 등을 고정하여 사용자가 마우스를 스크롤해도 화면을 따라 아래로 내려가는 효과를 구현하고자 하는 경우:

비반응형 사이트에서 요소 고정하기

비반응형(Non-responsive) 사이트에서는 아래와 같은 CSS 코드로 비교적 수월하게 div 요소를 고정할 수 있습니다. 예를 들어, 페이지 너비가 1,000px인 경우 다음과 비슷한 코드를 사용할 수 있습니다.

position: fixed;
top: 0;
left: 50%;
margin-left: 505px;
margin-top: 225px; 
z-index: 100;

여기서 margin-top 값은 해당 요소의 수직 위치에 해당하고, margin-left는 페이지 경계와 해당 요소 간의 간격에 해당합니다. 페이지 너비가 1,000px인 경우 페이지 중앙으로부터 요소의 왼쪽 여백이 margin-left가 됩니다. 그러므로 위의 코드는 배너 등의 요소가 페이지 밖으로 5px 떨어진 곳에 배치됩니다.

반응형 사이트에서 요소 고정하기

워드프레스의 경우 반응형(Responsive)인 경우가 많습니다. 즉, 화면 해상도에 따라 페이지/사이드바 너비가 변하게 됩니다. 페이지 너비가 고정되어 있지 않기 때문에 위의 CSS 코드를 사용할 수 없습니다. 위의 코드에 translateX를 추가하면 사이드바 옆에 원하는 요소를 고정시킬 수 있습니다.

position: fixed;
top: 5px;
left: 50%;
transform: translateX(1000%); 
margin-left: 50px;

위의 코드에서는 transform: translateX(1000%);가 새롭게 추가되었습니다. 그리고 margin-left 값은 테마에 따라 적당히 조정하여 요소의 가로 위치를 결정합니다. 이 값은 테마마다 달라질 수 있으므로 여러 값으로 테스트하여 사용 중인 워드프레스 테마에 가장 적합한 값을 찾도록 합니다. 이 방법을 사용하면 별도의 플러그인 설치 없이 배너, 메뉴, 그림, 텍스트 등 원하는 요소를 테마 외부에 고정시킬 수 있습니다. 테스트로 이 코드를 사용하여 사이드바 옆에 도움말(?) 기호를 추가한 모습입니다:
Stick a help sign outside the theme
마우스를 스크롤해도 이 도움말 기호는 사이드바 옆에 고정되어 화면을 따라 함께 내려가게 됩니다.

응용하기

위의 방법을 사용하면 배너, 그림, 메뉴, 위젯 등을 별도의 플러그인 없이 고정이 가능합니다. div 요소 코드를 header의 적당한 위치에 추가하고 위에 제시된 코드를 적절히 변형하여 스타일시트 파일에 추가하도록 합니다. CSS 코드를 워드프레스 테마의 스타일시트 파일에 추가하는 방법은 여기를 참고하시기 바랍니다.

배너나 그림은 간단한 Html 코드로 구현이 가능합니다. 그러면 위젯이나 메뉴는 어떻게 추가하면 될까요? 위젯 영역을 새로 만들어 헤더의 적당한 곳에 추가한 후에 위에 설명된 CSS 코드를 적용하는 방식으로 메뉴나 위젯을 테마 외부 영역에 고정시킬 수 있습니다. 위젯 영역을 추가하는 방식은 아래를 참고하여 적당한 위젯 영역을 추가한 다음 새롭게 추가한 위젯 영역 코드를 header 파일의 적당한 위치에 삽입합니다.

예:
<div class="mycustom_child">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('mycustom_outside_widget') ) :
endif; ?>
</div>

그러면 알림판에서 외모 > 위젯에 새롭게 추가한 위젯 영역이 표시되고, 해당 위젯 영역에 원하는 위젯을 추가하도록 합니다. 메뉴를 추가하려는 경우에는 외모 > 메뉴에서 메뉴를 만들고 "사용자 정의 메뉴"를 새로 만든 위젯 영역에 추가하고 새롭게 만든 메뉴를 지정하면 됩니다.
custom menu in widget

위젯 영역 추가 예시

처음 워드프레스를 접하고 PHP 등에 대해 잘 모르는 사용자의 경우 위젯 영역을 만들어 메뉴에 추가하는 것이 어려울 수 있습니다. WordPress Codex 페이지How to Register a Widget Area 부분을 참고하여 사용 중인 워드프레스 테마 파일(functions.php)에 위젯 영역을 등록하고 WordPress Codex 페이지의 How to display new Widget Areas 부분에 나오는 방법에 따라 등록된 위젯 영역의 PHP 코드를 테마 파일(여기에서는 header.php)에 추가하면 위젯 영역이 대시보드의 위젯 페이지에 표시됩니다.

functions.php에 추가할 코드

function mycustom_child_widgets_init() {

register_sidebar( array(
'name' => 'New Widget',
'id' => 'mycustom_child_widget',
'before_widget' => '<div>',
'after_widget' => '</div>',
) );
}
add_action( 'widgets_init', 'mycustom_child_widgets_init' );

테마 파일(예: header.php, index.php, footer.php...)에 추가할 코드

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('mycustom_child_widget') ) :

endif; ?>
일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

2개 댓글

  1. 안녕하세요 항상 좋은 정보 감사히 잘 보고 있습니다.
    워프페이지를 보다 보면 본문에 고정되어 X를 누르기 전까지 따라다니는 정사각형의 배너를 볼 수 있는데요.이런 배너를 간편하게 이용할 수 있는 플러그인이 있을까요?

    1. 배너를 클릭해야 콘텐츠를 볼 수 있도록 하는 방법으로 Brave 팝업 플러그인(무료/유료)이나 Bloom 플러그인(Divi 테마와 함께 제공됨)을 사용할 수 있습니다. 다음 글을 참고해보세요.

      https://www.thewordcracker.com/intermediate/%EB%B0%B0%EB%84%88%EB%A5%BC-%ED%81%B4%EB%A6%AD%ED%95%B4%EC%95%BC-%EA%B8%80%EC%9D%84-%EB%B3%BC-%EC%88%98-%EC%9E%88%EB%8F%84%EB%A1%9D-%EC%84%A4%EC%A0%95/

      이 글에서는 Bloom 플러그인을 사용하여 표시하고 있습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.