WordPress 커스텀 위젯 추가 방법

by


WordPress 위젯은 사이드바, 푸터 등 특정 영역에 원하는 기능을 추가할 수 있는 강력한 도구입니다. 이번 가이드에서는 커스텀 위젯을 개발하는 방법을 단계별로 설명합니다.

1. 커스텀 위젯이란?

WordPress의 위젯은 관리자 패널에서 쉽게 추가, 제거할 수 있는 요소로, 보통 사이드바, 푸터, 헤더 등에 배치됩니다. 기본적으로 제공되는 “최근 글”, “카테고리”, “검색” 등의 위젯 외에도 커스텀 위젯을 직접 제작하여 원하는 기능을 추가할 수 있습니다.

1.1. 커스텀 위젯 활용 예시

  • 최신 글 목록 위젯
  • 인기 글 위젯
  • 사용자 프로필 표시 위젯
  • 소셜 미디어 링크 위젯
  • 날씨 정보 표시 위젯

2. 기본적인 커스텀 위젯 코드 구조

2.1. 플러그인 폴더 및 파일 생성

커스텀 위젯을 플러그인으로 만들기 위해 /wp-content/plugins/my-custom-widget/ 폴더를 생성하고, my-custom-widget.php 파일을 작성합니다.

<?php
/*
Plugin Name: My Custom Widget
Plugin URI: https://example.com/
Description: 기본적인 WordPress 커스텀 위젯 플러그인
Version: 1.0
Author: 개발자명
Author URI: https://example.com/
License: GPL2
*/

// 위젯 클래스 정의
class My_Custom_Widget extends WP_Widget {

    function __construct() {
        parent::__construct(
            'my_custom_widget', 
            __('My Custom Widget', 'text_domain'), 
            array('description' => __('사용자 정의 위젯 예제', 'text_domain'))
        );
    }

    // 위젯 출력 (프론트엔드)
    function widget($args, $instance) {
        echo $args['before_widget'];
        echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        echo "<p>안녕하세요! 이것은 커스텀 위젯입니다.</p>";
        echo $args['after_widget'];
    }

    // 위젯 설정 폼 (관리자 화면)
    function form($instance) {
        $title = isset($instance['title']) ? $instance['title'] : __('기본 제목', 'text_domain');
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('제목:'); ?></label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>"
                   name="<?php echo esc_attr($this->get_field_name('title')); ?>"
                   type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <?php
    }

    // 위젯 설정 저장
    function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        return $instance;
    }
}

// 위젯 등록
function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');

3. 위젯 코드 설명

3.1. __construct() – 위젯 초기 설정

  • ID, 이름, 설명을 정의합니다.
  • 이 값들은 WordPress 관리자 패널에서 위젯을 추가할 때 표시됩니다.

3.2. widget() – 위젯 출력 (프론트엔드)

  • 실제 웹사이트에서 표시될 내용을 정의합니다.
  • before_widget, before_title, after_title 등의 변수를 사용하면 테마의 스타일을 유지하면서 위젯이 표시됩니다.

3.3. form() – 관리자 패널에서 위젯 설정 화면 제공

  • input 필드를 통해 제목을 입력받습니다.
  • get_field_id(), get_field_name()을 사용하여 각 필드가 고유한 ID와 이름을 갖도록 합니다.

3.4. update() – 설정 저장 기능

  • sanitize_text_field()를 사용하여 입력값을 필터링하고 보안을 강화합니다.

3.5. register_widget() – 위젯 등록

  • widgets_init 액션 훅을 사용하여 register_widget('My_Custom_Widget')을 실행합니다.

4. 위젯 추가 및 활용 방법

4.1. 플러그인 활성화

  1. wp-content/plugins/ 폴더에 my-custom-widget 폴더를 업로드합니다.
  2. WordPress 관리자 → 플러그인 → “My Custom Widget” 플러그인을 활성화합니다.

4.2. 위젯 추가하기

  1. WordPress 관리자 → 외모(테마) → 위젯
  2. My Custom Widget을 선택하여 원하는 위치(사이드바, 푸터 등)에 추가
  3. 제목을 입력하고 저장

5. 위젯에 스타일(CSS) 적용

위젯의 디자인을 변경하려면 CSS 파일을 추가하면 됩니다.

style.css 파일 추가 후 플러그인에서 불러오기:

function my_custom_widget_styles() {
    wp_enqueue_style('my-custom-widget-style', plugins_url('style.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'my_custom_widget_styles');

CSS 스타일 예제 (style.css 파일)

.my-custom-widget {
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
}
.my-custom-widget h2 {
    color: #333;
    font-size: 18px;
}

6. 추가 기능 확장하기

  • AJAX 추가: 사용자 입력을 받아 동적으로 콘텐츠 변경
  • 데이터베이스 연동: 인기 글 목록 표시
  • REST API 연동: 외부 API에서 날씨 정보 가져오기
  • 이미지 업로드 기능: 관리자에서 이미지 업로드 가능하도록 설정

7. 결론

WordPress에서 커스텀 위젯을 추가하면 원하는 기능을 사이드바나 푸터에 쉽게 배치할 수 있습니다. 본 글에서는 기본적인 위젯 생성부터 관리자 설정, 스타일 적용, 추가 기능 확장까지 다뤘습니다.



Leave a Comment