워드프레스 사이트에 커스텀 위젯 영역 추가하기

워드프레스 사이트에서는 사이드바나 푸터 영역에 다양한 콘텐츠들을 배치할 때 위젯(widgets)을 사용할 수 있습니다. 기본적으로 워드프레스는 설치와 동시에 바로 사용할 수 있는 여러 가지 기본 위젯들을 제공하며 또 사용자가 임의로 플러그인 등을 통해 다양한 위젯들을 추가할 수도 있도록 되어 있습니다.

위젯 영역

사이트 상에서 이런 위젯들이 놓이는 공간을 위젯 영역(Widgets Area)이라고 부르죠. 워드프레스 관리자 대시보드 “테마 디자인 > 위젯” 메뉴에서 우측에 표시되는 박스들이 바로 위젯 영역입니다.

이들 위젯 영역은 워드프레스 테마의 특정 공간과 맵핑되기 때문에, 우리가 어떤 위젯을 위젯 영역에 떨구면 해당 위젯이 실제로 테마의 그 특정 공간에 표시되는 방식으로 작동합니다.

대부분의 테마에서는 테마 개발자가 각각의 테마와 어울리는 곳에 미리 위젯 영역을 설정하여 제공하기 떄문에 우리가 위젯 영역을 위해 별도로 해야 할 일은 별로 없습니다.

하지만, 경우에 따라서는 테마가 제공하는 위젯 영역이 아닌 곳에 위젯을 떨구고 싶을 때가 있습니다. 예를 들어, 프론트 페이지의 상단에 슬라이더 위젯을 추가하거나 포스트 하단 부분에 배너광고 위젯을 추가하는 경우 등이 되겠죠.

이럴 땐 우리 스스로 위젯 영역을 만들어 테마에 추가할 수 있습니다. 말하자면 커스텀 위젯 영역을 만드는 것이죠.

커스텀 위젯 영역 만들기

워드프레스에서는 위젯 영역 처리를 위해 다음과 같은 API함수를 이미 제공하기 떄문에 간단하게 위젯 영역을 추가할 수 있습니다.

• register_sidebar()
• dynamic_sidebar()

예를 들어, 프론트 페이지 상단에 슬라이더 위젯을 위한 위젯 영역을 하나 만든다고 해 보죠.

register_sidebar로 위젯 영역 등록하기

워드프레스에서 새로운 위젯 영역을 추가하는 함수는 register_sidebar 함수입니다. 이 함수를 워드프레스에서 위젯 영역을 처리하는 지점인 widgets_init 액션에 추가해 주면 됩니다. 다음과 같은 식이죠.

function wpguide_widgets_init() {
    register_sidebar( array(
        'name'          => __( 'Main Slider', 'twentyfifteen' ),
        'id'            => 'main-slider',
        'description'   => __( 'Add widgets here to appear in front slider area.', 'twentyfifteen' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'wpguide_widgets_init' );

실제 코드는 각자의 테마에 따라 조금 달라질 수 있지만, 대체로 위와 같은 식으로 작동합니다. 여기서 특히 중요한 옵션은 id값입니다. 위 코드에서는 main-slider라고 주었지만, 다른 위젯 영역의 id값과 중복되지만 않으면, 임의로 지정해 주면 됩니다. 이 id 값이 위젯 영역을 대표하며, 나중에 테마에 위젯 영역을 포함시킬 때 사용됩니다.

테마 속 functions.php에 위 코드를 추가하고 다시 워드프레스 관리자 대시보드로 돌아와 위젯 영역을 확인해 보면, 아래와 같이 새로운 위젯 영역이 추가된 것을 확인할 수 있습니다.

dynamic_sidebar로 위젯 영역 표시하기

위젯 영역을 만들었으면 이제 실제로 테마에 표시하는 일만 남았습니다.

이 부분은 통상적으로 테마 속 템플릿 파일을 수정해야 하는 부분입니다. 앞선 예제에서처럼 프론트 페이지 영역에 이 위젯 영역을 추가하려 한다면, 테마에서 프론트 페이지 템플릿 파일을 찾아 위젯 영역을 추가하고 싶은 부분에 아래와 같이 간단하게 코드를 추가해 주면 됩니다.

<?php if ( is_active_sidebar( 'main-slider' ) ) : ?>
    <div id="main-slider-widget-area" class="widget-area" role="complementary">
        <?php dynamic_sidebar( 'main-slider' ); ?>
    </div><!-- .widget-area -->
<?php endif; ?>

위 코드에서 보면 dynamic_sidebar 함수를 호출하여 앞서 우리가 만들어 두었던 위젯 영역인 main-slider 영역을 표시하고 있습니다. 그리고 그 주위를 위젯 영역임을 표현하는 HTML 코드로 감쌌습니다. 역시 이번에도 이 HTML 코드는 각자의 테마에 맞게 자유롭게 변경해 주면 됩니다. (필요 없으면 안써도 상관 없습니다)

자, 그럼 이제 위젯 영역이 제대로 작동하는지 한번 테스트해 볼까요?

관리자 대시보드에서 위젯 영역에 슬라이더 위젯을 하나 추가해 봅니다.

그런 다음, 앞서 우리가 이 위젯 영역을 포함시켰던 곳으로 와서 확인해 보면 위젯이 제대로 표시되는 것을 확인할 수 있습니다. 이 예제에서는 프론트 페이지 상단에 슬라이더 위젯을 표시하도록 했기 때문에 아래와 같이 슬라이더가 표시됩니다.

이런 식으로 하면, 사이트의 모든 곳에 위젯을 장착할 수 있습니다. 헤더나 푸터 영역, 그리고 콘텐츠 영역 할 것 없이 말이죠.

통상적으로 위젯은 사이드바 영역에만 포함시킨다고 알고 있고 또 그래서 워드프레스 API에서 조차도 해당 함수들의 이름을 sidebar라고 주고 있지만, 실제로 위젯은 꼭 사이드바에만 포함되는 게 아님을 기억하시길 바랍니다.

플러그인을 써도 될까요?

물론입니다. 워드프레스 플러그인들 중에도 이 위젯 영역을 만들고 관리해 주는 플러그인들이 여럿 나와 있습니다.

• Custom Sidebars – Dynamic Widget Area Manager
• WP Custom Widget area
• Widget Areas
• Simple Page Sidebars
• Custom Widget Areas for WordPress

굳이 코딩을 할 것 없이 그냥 이 플러그인을 사용해도 커버가 되는 부분이라면 코딩 대신 플러그인을 쓰는 게 워드프레스를 좀더 ‘잘’ 활용하는 방법이겠죠.

하지만 플러그인을 쓰더라도 위젯 영역의 작동 원리를 알고 쓰는 것과 모르고 쓰는 것 간에는 약간의 차이가 있겠죠? 또 이렇게 간단한 기능은 굳이 플러그인 없이 직접 코드로 구현하는 게 좀더 빠른 방법일 수도 있구요.

대부분의 사이트에서 우리가 커스텀으로 위젯 영역을 추가하는 경우는 많아야 한두 개 정도일테니까요. 🙂