커스텀 사이드바 추가하기

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

크게 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'); ?>

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