23. 고급 기능 구현, 커스텀 위젯과 쇼트코드 만들기

워드프레스는 그 유연성과 확장성 덕분에 많은 개발자들이 선호하는 플랫폼입니다. 이번 글에서는
워드프레스의 고급 기능 구현에 대해 살펴보며, 커스텀 위젯(custom widget)과 쇼트코드(shortcode)를
만드는 방법에 대해 깊이 있게 알아보겠습니다.

1. 커스텀 위젯 만들기

위젯은 사용자 인터페이스의 한 부분으로, 일반적으로 사이드바 또는 기타 위젯 영역에서
표시됩니다. 워드프레스에서 커스텀 위젯을 만들려면
WP_Widget 클래스를 상속받아 새로운 클래스를 정의해야 합니다.

1.1. 커스텀 위젯 클래스 정의하기

기본적인 위젯 클래스를 정의하는 예제는 다음과 같습니다.

class My_Custom_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'my_custom_widget', // ID
            __('My Custom Widget', 'text_domain'), // 이름
            array('description' => __('A Custom Widget Example', 'text_domain')) // 옵션
        );
    }

    public function widget($args, $instance) {
        // 위젯의 프론트엔드 출력
        echo $args['before_widget'];
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        }
        // 여기에 위젯의 내용을 출력합니다.
        echo __('Hello, World!', 'text_domain');
        echo $args['after_widget'];
    }

    public function form($instance) {
        // 관리자 대시보드에서 위젯의 설정 양식
        $title = !empty($instance['title']) ? $instance['title'] : esc_html__('New title', 'text_domain');
        ?>
        

            
                
            
            
        
        
    

1.2. 위젯 등록하기

위젯 클래스를 정의한 후에는 functions.php 파일에서 위젯을 등록해야 합니다.
다음의 코드를 추가하여 위젯을 등록할 수 있습니다.

function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');

    

위 코드를 추가하면 관리자 대시보드의 ‘위젯’ 섹션에서 ‘My Custom Widget’을
사용할 수 있게 됩니다.

2. 쇼트코드 만들기

쇼트코드는 게시물이나 페이지의 콘텐츠 내에 간단한 문법을 통해 복잡한 기능을 빠르게 삽입할 수
있게 해주는 워드프레스의 기능입니다. 쇼트코드의 구조는 상당히 유연하며, 필요에 따라 다양한
매개변수를 받을 수 있습니다.

2.1. 기본 쇼트코드 생성하기

기본적인 쇼트코드는 다음과 같이 생성할 수 있습니다.

function my_custom_shortcode($atts) {
    // 쇼트코드의 기본 속성 정의
    $atts = shortcode_atts(array(
        'title' => '기본 제목',
        'content' => '기본 내용'
    ), $atts);

    // 쇼트코드로 출력할 HTML
    return '

                
' . esc_html($atts['title']) . '
                
' . esc_html($atts['content']) . '
            
';
}
add_shortcode('my_shortcode', 'my_custom_shortcode');

    

2.2. 쇼트코드 사용하기

이제 생성한 쇼트코드를 페이지나 포스트 내에서 사용할 수 있습니다. 다음과 같이 삽입하면
됩니다:

[my_shortcode title="환영합니다!" content="여기에 커스텀 콘텐츠를 입력하세요."]

    

2.3. 매개변수를 받아서 사용하기

사용자가 제공하는 매개변수에 따라 다양한 내용을 출력하려면
shortcode_atts 함수를 활용할 수 있습니다. 위의 예제와 같이
기본값을 설정해두면 사용자 친화적인 쇼트코드를 만들 수 있습니다.

3. 커스텀 위젯과 쇼트코드 사이의 연계

커스텀 위젯은 사용자와의 상호작용에 강점을 가지며, 쇼트코드는 사용자에게 필요한
콘텐츠 재사용성을 제공합니다. 때때로, 이러한 두 기능을 결합하여 더 많은
효과를 얻을 수 있습니다.

3.1. 위젯 내에서 쇼트코드 사용하기

위젯에서 쇼트코드를 사용할 수 있도록 하려면 do_shortcode 함수를
사용하여 위젯의 출력 상에서 쇼트코드를 호출할 수 있습니다.

public function widget($args, $instance) {
    echo $args['before_widget'];
    if (!empty($instance['title'])) {
        echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
    }
    echo do_shortcode('[my_shortcode title="위젯에서의 쇼트코드" content="여기에 위젯 내용을 추가하세요."]');
    echo $args['after_widget'];
}

    

4. 마무리

이번 포스트에서는 커스텀 위젯과 쇼트코드를 만드는 방법에 대해 알아보았습니다. 이러한
기능들은 워드프레스 테마와 플러그인을 개발하는 강력한 도구가 됩니다. 쿠스텀 위젯이
사용자 인터페이스의 요소로서 기능하는 반면, 쇼트코드는 콘텐츠 내에서 다기능을
제공할 수 있습니다. 적절히 활용함으로써 더욱 유용한 웹사이트를 구축할 수 있을 것입니다.

앞으로도 다양한 워드프레스 개발 기법에 대해 알아보며, 활용할 수 있는 유용한 도구가
되었으면 좋겠습니다. 감사합니다!