워드프레스 테마에 위젯 영역 만들고 표시하기

워드프레스 테마를 개발하면서 워드프레스의 꽃 중 하나인 위젯 영역을 만들고 사용자에게 표시 하는 방법을 알아 봅시다. 기본적으로 위젯영역을 만들때는 register_sidebar 를 이용하고, 보여줄 때는 dynamic_sidebar 를 사용하면 됩니다.

위젯 영역 만들기

테마에 위젯영역이 있다고 워드프레스에게 알려주기 위해서는 functions.php 파일에서 위젯 영역을 등록해줘야 합니다. 아래는 WordPress.org – Codex에 있는 기본 사용법입니다.

<?php

function yourtheme_widget_register() {
    register_sidebar( array(
        'name'          => __( 'Sidebar name', 'theme_text_domain' ),
        'id'            => 'unique-sidebar-id',
        'description'   => '',
            'class'         => '',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>'
    ) );
}

add_action( 'widgets_init', 'yourtheme_widget_register' );

?>

상세 파라미터 설명

name 은 관리자 화면에 표시될 위젯 영역의 이름을 나타냅니다.

id 는 해당 위젯 영역의 고유한 식별자를 의미합니다. 위젯 영역을 호출해서 사용자에게 보여줄 때 사용되죠.

description 은 위젯 영역에 대한 설명을, class 는 해당 위젯 영역에 적용시킬 CSS class 를 의미합니다.

before_widget 과 after_widget 은 해당 위젯 영역에 있는 각각의 위젯 앞, 뒤에 위치할 내용을 입력 합니다. 위젯 영역 앞, 뒤가 아닌 위젯 영역 안에 있는 각각의 위젯 앞, 뒤입니다. 보통은 각각의 위젯을 감쌀 태그를 입력합니다.

before_title 과 after_title 은 각각의 위젯 제목 앞, 뒤에 위치할 내용을 입력 합니다.

위 코드는 위젯을 등록하는 함수(yourtheme_widget_register)를 만들고, 워드프레스가 위젯 영역을 인식 하도록 action 을 추가해 주는 것입니다.

위젯 영역 표시 하기

위젯 영역을 화면에 표시 하기 위해서는 dynamic_sidebar() 함수를 사용하면 됩니다.

<?php dynamic_sidebar('위젯 영역 이름') ?>

위젯 영역 이름에는 위젯 영역을 등록 할 때 name 파라미터에 넣어 주었던 값을 넣어주면 해당 위젯 영역이 표시 됩니다.

주의 할 점

그런데 위젯 영역을 표시 할 때 주의 할 점이 한가지 있습니다. 실제 해당 위젯 영역에 위젯이 하나도 등록 되어 있지 않으면(실제 사용 되지 않는 위젯 영역이라면), 굳이 위젯 영역을 표시 할 필요가 없잖아요? 페이지 레이아웃을 망칠 수도 있고.

그래서 is_active_sidebar() 라는 함수를 사용해서 해당 위젯 영역이 사용 중인지(등록된 위젯이 있는지) 확인 한 후, 사용 중일 경우에만 표시 하는게 좋습니다. 아래와 같은 방법으로요.

<?php
    if ( is_active_sidebar('widget_area_name') ) {
        dynamic_sidebar('widget_area_name');
    }
?>

코드가 워낙 간단해서 따로 설명할 필요 없겠죠?

이제 여러분은 워드프레스에 다양한 위젯을 추가 할 수 있습니다.