JSON 구조를 기반으로 WordPress 플러그인 옵션 만들기

저번에 WordPress 플러그인 옵션을 JSON 파일로 제어하여 나중에 코드 자체를 조정하지 않고도 더 쉽게 추가 설정을 추가할 수 있는 방법이 궁금했습니다.

이 문서에서는 섹션 2개와 필드 3개/옵션으로 구성된 단일 설정 페이지가 포함된 매우 간단한 WordPress 플러그인의 예를 제공합니다.

전체 코드는 Github에서 확인하실 수 있습니다.

베이스 설정

플러그인은 기본적으로 3개의 파일로 구성되어 있습니다.

• adventures.json
• adventures.php
• class.adventures.php

기본 플러그인 등록이 포함된adventures.php:

<?php /*
Plugin Name: Adventures
Plugin URI: https://mortenhartvig.dk
Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra nisi eu varius pellentesque. Aenean posuere, velit mollis sodales convallis, ipsum lectus feugiat nunc, ac auctor sapien enim eu metus.
Version: 1
Requires at least: 6.1
Requires PHP: 8.3
Author: Morten Hartvig
Author URI: https://mortenhartvig.dk
License: Do whatever you want
*/

define('ADV__PLUGIN_DIR', plugin_dir_path(__FILE__));
define('ADV__PLUGIN_VIEW', ADV__PLUGIN_DIR . 'views');
define('ADV__PLUGIN_SLUG', 'adv');

require_once ADV__PLUGIN_DIR . 'class.adventures.php';

(new Adventures());

빈 클래스가 있는 class.adventures.php:

<?php class Adventures {
    public function __construct() {

    }
}

adventures.json에는 플러그인 설정의 JSON 구조가 포함되어 있습니다.

{
    "settings": {
        "pages": [
            {
                "title": "Adventures",
                "capability": "manage_options",
                "slug": "adv"
            }
        ],
        "sections": [
            {
                "id": "portal_base",
                "title": "Base configuration",
                "description": "Lorem 1, ipsum dolor sit amet consectetur adipisicing elit. Cumque nulla in officiis. Laborum quisquam illo eaque, deserunt facere mollitia sint doloremque maiores, obcaecati reiciendis voluptate itaque iure fugiat quia architecto!",
                "view": "section"
            },
            {
                "id": "portal_appearance",
                "title": "Appearance",
                "description": "Lorem 2, ipsum dolor sit amet consectetur adipisicing elit. Cumque nulla in officiis. Laborum quisquam illo eaque, deserunt facere mollitia sint doloremque maiores, obcaecati reiciendis voluptate itaque iure fugiat quia architecto!",
                "view": "section"
            }
        ],
        "fields": [
            {
                "id": "adv_portal_key",
                "title": "Portal Key",
                "section": "portal_base",
                "type": "text",
                "placeholder": "Enter your portal key",
                "view": "field.text"
            },
            {
                "id": "adv_api_host",
                "title": "Host API",
                "section": "portal_base",
                "type": "text",
                "placeholder": "Enter API host",
                "default": "https://api.mortenhartvig.dk",
                "view": "field.text"
            },
            {
                "id": "adv_portal_theme",
                "title": "Theme",
                "section": "portal_appearance",
                "type": "select",
                "options": {
                    "rounded.v1": "Round (V1)",
                    "squared.v1": "Square (V1)",
                    "standard": "Standard"
                },
                "default": "standard",
                "view": "field.select"
            }
        ]
    }
}

JSON 데이터 읽기

설정에 대한 속성을 생성하고 set_settings()를 호출합니다.

private $settings;

public function __construct() {
    $this->set_settings();
}

set_settings() 및 get_json_data() 생성:

private function set_settings() {
    $data = $this->get_json_data();

    $this->settings = $data['settings'];
}

private function get_json_data() {
    $file = ADV__PLUGIN_DIR . 'adventures.json';

    if (!file_exists($file)) {
        die('adventures.json not found');
    }

    return json_decode(file_get_contents($file), true);
}

die(print_r($this->settings))를 __construct에 추가하면 실제로 설정이 로드되었는지 확인할 수 있습니다.

설정 페이지

생성자에서 init_hooks()를 호출합니다.

public function __construct() {
    $this->set_settings();
    $this->init_hooks();
}

init_hooks() 생성:

private function init_hooks() {
    add_action('admin_menu', [$this, 'register_settings_pages']);
}

register_settings_pages() 및 settings_page_callback()을 생성합니다.

public function register_settings_pages() {
    foreach ($this->settings['pages'] as $page) {
        add_options_page($page['title'], $page['title'], $page['capability'], $page['slug'], [$this, 'settings_page_callback']);    
    }
}

public function settings_page_callback() {
    $this->render('settings.php');
}

렌더링() 생성:

private function render($filename, $args) {
    if (is_array($args)) {
        $value = get_option($args['id']);

        if (empty($value) && isset($args['default'])) {
            $value = $args['default'];
        }

        $args = array_merge($args, ['value' => $value]);
    }

    $file = ADV__PLUGIN_VIEW . $filename;

    if (!str_ends_with($file,'.php')) {
        $file .= '.php';
    }

    if(!file_exists($file)) {
        die('File not found ' . $filename);
    }

    require $file;
}

view/settings.php 만들기:

<div>



<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173390329693560.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating WordPress plugin options based on a JSON structure"></p>

<h3>
  
  
  Sections
</h3>

<p>Add another action in init_hooks:<br>
</p>

<pre class="brush:php;toolbar:false">private function init_hooks() {
    add_action('admin_menu', [$this, 'register_settings_pages']);
    add_action('admin_init', [$this, 'register_settings_sections']);
}

register_settings_sections() 및 settings_section_callback() 생성:

public function register_settings_sections() {
    foreach ($this->settings['sections'] as $section) {
        add_settings_section($section['id'], $section['title'], [$this, 'settings_section_callback'], ADV__PLUGIN_SLUG, $section);
    }
}

public function settings_section_callback($args) {
    $this->render($args['view'], $args);
}

view/section.php 만들기:

<p>
    <?php echo $args['description']; ?>
</p>

전지

init_hooks에 세 번째 작업을 추가합니다.

private function init_hooks() {
    add_action('admin_menu', [$this, 'register_settings_pages']);
    add_action('admin_init', [$this, 'register_settings_sections']);
    add_action('admin_init', [$this, 'register_settings_fields']);
}

register_settings_fields() 및 settings_field_callback() 생성:

public function register_settings_fields() {
    foreach ($this->settings['fields'] as $field) {
        add_settings_field($field['id'], $field['title'], [$this, 'settings_field_callback'], ADV__PLUGIN_SLUG, $field['section'], $field);

        register_setting(ADV__PLUGIN_SLUG, $field['id']);
    }
}

public function settings_field_callback($args) {
    $this->render($args['view'], $args);
}

뷰 생성/field.select.php:

<?php $html_options = '';

foreach ($args['options'] as $key => $val) {
    $html_options .= sprintf('<option value="%s">%s</option>', $key, selected($args['value'], $key, false), $val);
}

printf('<select name="%s">



<p>Create views/field.text.php:<br>
</p>

<pre class="brush:php;toolbar:false"><?php printf('<input name="%s">



<h3>
  
  
  Saving
</h3>

<p>To view and save your options add a form to settings.php:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Change an option and attempt to <em>Save</em>. The save should be successful.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173390329893991.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating WordPress plugin options based on a JSON structure"></p>

<p>Your settings are now saved and can be accessed throughout the site via:<br>
</p>

<pre class="brush:php;toolbar:false"><?php echo get_option('adv_portal_theme'); // squared.v1

새 필드 추가

adventures.json에 아래 JSON을 추가하세요.

{
    "id": "adv_api_token",
    "title": "Host API Token",
    "section": "portal_base",
    "type": "text",
    "placeholder": "Enter API host token",
    "default": "",
    "view": "field.text"
}

설정에 자동으로 추가됩니다: