[Wordpress Plugin] 워드프레스 플러그인 설정 페이지 만드는 방법

 

워드프레스 플러그인을 개발하게 되면 거의 대부분 설정 페이지를 개발하게 됩니다.
워드프레스 플러그인 개발은 쉽게 생각해서 웹 서비스를 하나 개발하고 관리자 페이지를 만든다고 보시면 됩니다.
Wordpress 생태계가 워낙 거대하다 보니 플러그인 하나하나가 어플리케이션이고 Wordpress는 운영체제라고 생각하는 편이 이해가 쉽죠. 

플러그인 개발에 필수인 설정페이지를 만들어볼 겁니다.
아주 간단한 플러그인이 아니라 어느 정도 사이즈가 있는 플러그인을 개발한다면 클래스로 구현하는 것을 추천합니다. 그래야 협업도 가능하고 나중에 유지 보수할 때 헤매지 않습니다.

디렉토리 구조 잡기

일단 나중 유지보수를 위해 디렉토리 구조를 제대로 잡고가는 것이 좋습니다.
플러그인 이름을 example-plugin이라고 해봅시다.
저의 경우는 아래처럼 디렉토리 구조를 잡았습니다.

- example-plugin
----example-plugin.php -> 플러그인 메인파일
----example-plugin-admin.php -> 설정페이지 총관리 클래스
----module1
--------module1-admin.php -> 모듈1 관련 설정페이지
----module2
--------module2-admin.php

이렇게 아키텍처를 잡아 놓으면 추후에 새로운 모듈(기능)을 추가할 때에도 많이 수정할 필요 없고 가독성도 훨씬 낫습니다.

플러그인 메인 파일

<?php 
defined('ABSPATH') || exit;
/* 
Plugin Name: Example Plugin
Plugin URI: https://example.com
Description: 예제 플러그인
Version: 1.0 
Author: Grey Jeong
Author URI: https://show-me-the-money.thistory.com/ 
License: GPLv2 or later */ 

define('PLUGIN_DIR', plugin_dir_path(__FILE__));

/**
 *  Admin 파일 로드
 * 
 */
require_once PLUGIN_DIR . 'jejuand-admin.php';


 // Admin 클래스 초기화
 function init_admins(){
    $admin = new JejuandAdmin();
    $admin->register_admin();
 }
 

// 관리자 메뉴를 등록한다
add_action('admin_menu', 'init_admins');

?>

플러그인 메인 파일에서는 설정 페이지를 총 관리하는 클래스를 생성하고 어드민을 등록해주는 함수를 실행합니다.
add_action(‘admin_menu’, ‘init_admins’) 부분이 실행되면 관리자 페이지 메뉴를 생성할 때 init_admins() 메서드가 실행됩니다. 따라서 이때 직접 구현한 설정 페이지들이 등록되는 것이죠.

 

설정 페이지 관리 클래스 구현

 

<?php
/**
 *  관리자 페이지 모듈
 * 
 */
require_once PLUGIN_DIR . 'config/config-admin.php';

class JejuandAdmin{
    protected $page_title;
    protected $menu_title;
    protected $capability; 
    protected $menu_slug;
    protected $position; 
    protected $namespace;

    function __construct(){
        // 멤버 필드 초기화
        $this->namespace = "jejuand-rest-api";
        $this->page_title = "설정";
        $this->menu_title = "설정";
        $this->capability = 'manage_options';
        $this->menu_slug = "app-setting";
        $this->position = "10";
        
    }

    /**
     *  관리자 메인 페이지 
     * 
     */
    function admin_main_page(){
        
        echo '<h1> 앱 관련 설정 </h1>';
    }

    /**
     * 
     *  어드민을 등록하는 메서드
     */
    function register_admin(){
        // 어드민 메뉴 등록
        add_menu_page(
            $this->page_title,    // 페이지 이름
            $this->menu_title,    // 메뉴 이름
            $this->capability,    // 권한설정
            $this->menu_slug,     // URL에 나타날 명칭
            array($this, 'admin_main_page'),    // 설정페이지 클릭시 실행할 콜백함수
            null,   // icon url.  // 아이콘 URL 또는 위치
            $this->position.      // 대시보드 메뉴에 나타나는 순서
        );
        // 서브메뉴 등록
        $this->register_sub_menus();
    }

    /**
     *  
     *  각 모듈별 서브 메뉴를 로딩하는 메서드
     *
     */
    function register_sub_menus(){
        // 버전 설정관련 어드민 메뉴 등록
        $config_admin = new ConfigAdmin($this->menu_slug);
        $config_admin->register_admin();
    }
}
?>

Wordpress에서는 정말 고맙게도 잘 만들어진 관리자 페이지 인터페이스들을 제공합니다.
기본적으로 설정 페이지의 메뉴는 두 가지로 나뉘는데요

• 메인 메뉴 : Wordpress 관리자 대시보드 왼쪽 탭에 나타나는 메뉴입니다
• 서브 메뉴 : 메인 메뉴를 클릭했을 때 나타나는 서브 메뉴들입니다.

이 클래스에서는 메인 메뉴를 등록하고 타이틀 이름이나 아이콘 등 세부 설정 사항들을 등록합니다.
추후에 아이콘이 변경된다거나 설정 페이지 이름을 다르게 보여주고 싶을 때 이 클래스 속성들을 수정하면 되겠죠

또한, 위에서 구분한 각 모듈별 설정 페이지들도 등록해주는 역할을 합니다. 나중에 새로운 기능이 추가되어 새로운 설정 페이지가 필요한 경우 구현을 모두 하고 서브 메뉴 등록 메서드에 추가만 해주면 됩니다.

 

서브 메뉴 클래스 구현하기

 

<?php
/**
 *  앱 설정 관련 관리자 페이지
 *  
 */
class ConfigAdmin{
    protected $parent_slug;
    protected $page_title;
    protected $menu_title;
    protected $capability;
    protected $menu_slug;

    function __construct($parent_slug){
        $this->parent_slug = $parent_slug;
        $this->page_title = "버전 설정";
        $this->menu_title = "버전 설정";
        $this->capability = "manage_options";
        $this->menu_slug = "config";
    }

    /**
     *  관리자 메뉴를 등록하는 메서드
     */
    function register_admin(){
        // 서브 메뉴를 등록한다 
        add_submenu_page(
            $this->parent_slug,
            $this->page_title,
            $this->menu_title,
            $this->capability,
            $this->menu_slug,
            array($this, 'render_config_admin')
        );
        
        // 버전 정보 변경 요청을 처리하는 함수를 등록한다
        add_action('admin_init', array($this, 'update_version_info'));
    }

    /**
     *  버전 정보를 설정할 수 있는 페이지를 보여주는 메서드 
     */
    function render_config_admin(){
        ?>
        <h1>제주앤 앱 버전 설정하기</h1>
        <form method="post" action="options.php">
            <?php   settings_fields('version-info-settings');?>
            <?php   do_settings_sections('version-info-settings');?>
            <table class="form-table">
            <tr valign="top">
                <th scope="row">현재 버전 정보: </th>
                <td><input type="text" name="version_info" value="<?php echo get_option("version_info");?>"></td>
            </tr>
            <tr>
            <th scope="row">업데이트 강제하기 여부: </th>
                <td>
                    <input type="radio" name="is_force_update" value="true" <?php if(get_option('is_force_update')=="true") echo 'checked';?>>네
                    <input type="radio" name="is_force_update" value="false"<?php if(get_option('is_force_update')=="false") echo 'checked';?>>아니오
                </td>
            </tr>
            </table>
            <?php submit_button(); ?>
        </form>
        <?php
    }

    /**
     * 
     *  변경된 버전 정보를 저장하는 메서드 
     */
    function update_version_info(){
        register_setting("version-info-settings", 'version_info');
        register_setting("version-info-settings", 'is_force_update');
    }

}
?>

 

이제 세부 모듈 설정 페이지를 구현해보겠습니다.
간단하게 버전 정보를 입력하고 저장할 수 있는 설정 페이지를 만들어볼 텐데요.
가장 먼저 해야 할 것은 서브 메뉴를 등록하는 일입니다. Wordpress에서 제공하는 add_submenu_page 메서드를 활용합니다.

설정 페이지를 통해 Wordpress 데이터베이스에 값을 저장하고 불러오기 위해서는 신경 써야 할 부분이 크게 2가지 있습니다.

• 설정 페이지 UI 구현 : Form을 생성해서 데이터베이스로부터 값을 가져오고 보여줍니다. 또, 사용자가 값을 수정할 수 있도록 화면을 구현합니다.
• Form 요청 처리 : 저장하기 버튼을 누르면 Wordpress의 options.php로 POST 요청을 보내서 데이터베이스에 값이 저장될 수 있도록 합니다.

각각의 부분을 나눠서 한번 알아봅시다. 먼저 UI 구현 부분입니다.

 

 /**
     *  버전 정보를 설정할 수 있는 페이지를 보여주는 메서드 
     */
    function render_config_admin(){
        ?>
        <h1>제주앤 앱 버전 설정하기</h1>
        <form method="post" action="options.php">
            <?php   settings_fields('version-info-settings');?>
            <?php   do_settings_sections('version-info-settings');?>
            <table class="form-table">
            <tr valign="top">
                <th scope="row">현재 버전 정보: </th>
                <td><input type="text" name="version_info" value="<?php echo get_option("version_info");?>"></td>
            </tr>
            <tr>
            <th scope="row">업데이트 강제하기 여부: </th>
                <td>
                    <input type="radio" name="is_force_update" value="true" <?php if(get_option('is_force_update')=="true") echo 'checked';?>>네
                    <input type="radio" name="is_force_update" value="false"<?php if(get_option('is_force_update')=="false") echo 'checked';?>>아니오
                </td>
            </tr>
            </table>
            <?php submit_button(); ?>
        </form>
        <?php
    }

 

일단 서브메뉴 생성 시 호출되도록 콜백 함수로 등록이 되어있어야 합니다. 그래야 메뉴를 클릭했을 때 이 메서드가 호출되면서 HTML이 그려지고 화면이 보이게 됩니다. 메서드 구현이 좀 특이하다고 느껴질 수 있는데 이것은 PHP 언어적 특성을 활용한 것입니다. PHP 언어는 HTML과 함께 쓸 수 있죠. <?php ?> 이 태그를 열고 닫음으로써 PHP와 HTML을 구분하게 됩니다.

Form을 생성하고 내부에 테이블 태그를 넣어서 값을 입력받는 부분을 구현했습니다.
여기에서 눈여겨볼 부분은 아래 부분들인데요.

• settings_fields(‘version-info-settings’)
• do_settings_sections(“version-info-settings”)
• echo get_option(“version_info”)

이렇게 세 가지 입니다. 이 세가지 메서드는 Wordpress에서 제공해주는 메서드입니다. Form을 생성해서 Wordpress 데이터베이스에 저장을 하게 되면 wp_options라는 테이블에 저장이 됩니다. 다른 여러 가지 값들도 함께 저장이 되는 만큼 내 플러그인의 특정 모듈과 관련 있는 값이라는 것을 나타내기 위해 키값을 설정해주어야 합니다.
가장 먼저 사용되는 settings_fields는 사용될 속성 값들이 속하는 그룹을 설정하는 메서드입니다.
이어서 do_settings_sections는 해당 그룹을 사용하겠다는 메서드입니다. 버전 정보 관련 설정값들을 version-info-settings라는 그룹에 저장했으니 불러오려면 이 그룹을 불러와야겠죠?
마지막으로 특정 값의 키를 통해 값을 불러오는 메서드가 get_option입니다. 이 메서드로 불러오는 값을 사용자가 보게 됩니다.

input type 태그를 보면 name 속성이 있는데요. 이 값이 wp_options 테이블에 저장되는 키가 됩니다.
wp_options에는 option_name과 option_value 이렇게 한 쌍으로 저장됩니다. 불러올 때는 option_name으로 값을 찾아서 가지고 오게 되죠.

 

이렇게 extra_post_info가 option_name으로, option_value에는 실제 값인 EXTRA INFO가 들어가게 되는 것입니다. get_option(“extra_post_info”)를 하면 EXTRA INFO가 리턴되는 것이죠.

이제는 저장하기 버튼을 눌렀을 때 어떻게 Wordpress 데이터베이스에 저장되는지 살펴봐야 합니다.
여기까지 구현하면 Form 요청이 정상적으로 되기 때문에 알아서 다 저장되고 처리가 될 것 같지만 그렇지 않습니다.
앞서 정의한 version-info-settings에 대한 내용을 Wordpress에서는 모르기 때문입니다.
따라서 Form 요청을 통해 보내는 필드 값들을 Wordpress에서 인식하고 데이터베이스에 저장하기 위해 등록하는 작업이 필요합니다.

 

/**
     * 
     *  변경된 버전 정보를 저장하는 메서드 
     */
    function update_version_info(){
        register_setting("version-info-settings", 'version_info');
        register_setting("version-info-settings", 'is_force_update');
    }

위의 메서드가 그 역할을 합니다. 그룹 이름과 저장되어야 할 필드들을 등록해주는 작업입니다.
사용자가 수정한 값들은 Input type에 들어가고 Form이 이것들을 모두 모아 POST 요청을 보냅니다.
따라서 Input type의 name과 register_setting으로 등록하는 값이 반드시 같아야 합니다. 조금이라도 다르면 데이터베이스에 값이 제대로 저장되지 않습니다. 이제 Wordpress에서 설정 페이지에서 어떤 값들이 넘어오는지 알기 때문에 알아서 저장을 해줍니다.

 

워드프레스 플러그인 개발에 조금이나마 도움이 됐으면 좋겠습니다^^

궁금한 것은 언제든 댓글로 물어봐주세요! 더불어 현업 풀 스택 개발자에게 마음껏(개발 관련 이외에도 취업, 이직 등) 질문할 수 있는 서비스도 운영 중이니 궁금한 것이 있거나 도움이 필요하면 언제든 편하게 물어봐주세요 :)