커스텀 사이드바 추가하기 – 워드프레스 강좌

이번에는 워드프레스에서 커스텀 사이드바를 추가하는 방법을 알려드릴게요.

크게 4단계로 나눠서 진행할 거예요.

• function.php에 사이드바 등록하는 함수를 만들
• sidebar.php 내에 만든 커스텀 사이드바를 추가하기
• 해당 사이드바를 원하는 페이지에 추가하기
• 마지막으로 제대로 동작하는지 확인

사이드바를 나눠서, 관리하고 싶을 수 있잖아요? 그럴 때 추가하면 됩니다.

단계 1: functions.php에 사이드바 등록하기

우선 functions.php 파일을 열어 다음 코드를 추가합니다. 이 함수는 사이드바를 등록하는 역할을 합니다.

함수 등록 코드

// 커스텀 사이드바 위젯
function supernormal_widgets_sidebar_init()
{
    register_sidebar(
        array(
            'name'          => __('Sidebar', 'supernormal'),
            'id'            => 'sidebar-widget',
            'description'   => '',
            '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', 'supernormal_widgets_sidebar_init');

변수 구조

• name: 사이드바 명칭
• id: 사이드바 ID
• description: 사이드바 설명
• before_widget: 각 위젯 영역 오프닝 HTML
• after_widget: 각 위젯 영역 클로징 HTML
• before_title: 각 위젯 타이틀 오프닝 HTML
• after_title: 각 위젯 타이틀 클로징 HTML

단계 2: sidebar.php에 커스텀 사이드바 추가하기

사이드바를 추가할 파일(sidebar.php)을 열어 다음 코드를 추가합니다.

<?php if (is_active_sidebar('sidebar-widget')) : ?>
    <div id="sidebar">
        <?php dynamic_sidebar('sidebar-widget'); ?>
    </div>
<?php endif; ?>

단계 3: 원하는 페이지에 사이드바 추가하기

사이드바를 원하는 페이지에 추가합니다. 예를 들어, 특정 페이지 템플릿 파일에서 사이드바를 불러올 수 있습니다.

페이지 템플릿에 사이드바 추가

<?php get_sidebar(); ?>

또는 특정 사이드바를 불러오려면 다음과 같이 사용합니다.

<?php get_sidebar('sidebar-widget'); ?>

단계 4: 멀티 사이드바 등록

여러 사이드바를 등록하려면 배열과 반복문을 사용하여 functions.php 파일에 다음과 같은 코드를 추가합니다.

멀티 사이드바 등록 코드

function supernormal_widgets_sidebar_init()
{
    $my_sidebars = array(
        array(
            'name'          => __('Blog Sidebar', 'supernormal'),
            'id'            => 'blogsidebar-widget',
            'description'   => '',
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',
            'after_widget'  => '</aside>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        ),
        array(
            'name'          => __('Works Sidebar', 'supernormal'),
            'id'            => 'workssidebar-widget',
            'description'   => '',
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',
            'after_widget'  => '</aside>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        ),
        array(
            'name'          => __('About Sidebar', 'supernormal'),
            'id'            => 'aboutsidebar-widget',
            'description'   => '',
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',
            'after_widget'  => '</aside>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        ),
        array(
            'name'          => __('Footer Sidebar', 'supernormal'),
            'id'            => 'footer-widget',
            'description'   => '',
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',
            'after_widget'  => '</aside>',
            'before_title'  => '<h2 class="widget-title">',
            'after_title'   => '</h2>',
        ),
    );

    foreach ($my_sidebars as $sidebar) {
        register_sidebar($sidebar);
    }
}
add_action('widgets_init', 'supernormal_widgets_sidebar_init');

단계 5: 사이드바 추가할 페이지에 코드 추가

sidebar.php

<?php if (is_active_sidebar('your-sidebar-slug')) : ?>
    <div id="sidebar">
        <?php dynamic_sidebar('your-sidebar-slug'); ?>
    </div>
<?php endif; ?>

단계 6: Hierarchy에 따른 분리

• sidebar.php
• sidebar-{name}.php – 특정 사이드바 이름에 해당하는 템플릿으로 우선 순위가 높음

예시

<?php get_sidebar('blogsidebar-widget'); ?>

이와 같은 방법으로 워드프레스에서 커스텀 사이드바를 추가하고 관리할 수 있습니다. 이를 통해 다양한 페이지에서 필요한 사이드바를 쉽게 사용할 수 있습니다.