WordPress设置页面开发

2020年04月26日 75点热度 0人点赞 0条评论

这两天在学wordpress,记录下WordPress设置页面开发的过程以备后用,其中涉及到设置api,选项api和菜单api

setting、section、field

首先,需要了解这三个概念。大体上,field即为一个配置项,section可以将相关的一些配置项分组在一起。setting对应options表中的一条记录

注意:register_setting以及add_settings_*函数都要添加到admin_init该action中。

添加section

添加section需要使用add_settings_section函数,该函数参数如下:

  • ID – 一个唯一标识,随便取,但是最好保证可读性。在添加section里的field时会用到。
  • Title – 在页面中显示的标题
  • Callback – 渲染用的函数,可以放置一些描述信息等
  • Page – 该section显示在哪个页面上,可以自定义也可以使用自带的,例如general
    add_settings_section(
        'likole_toolkit_todo',
        __( 'Todo List', 'likole-toolkit' ),
        function ($args){
            echo esc_attr( $args[ 'id' ] ).' description...';
        },
        'general'
    );

进入 设置->常规,可以看到该section已添加

回调函数是可以传参的,是一个数组,其中包含title, id, callback

最后一个参数,如果使用自带的,有这些可用:

  • General, "general"
  • Writing, "writing"
  • Reading, "reading"
  • Discussion, "discussion"
  • Media, "media"
  • Privacy, "privacy"
  • Permalinks, "permalink"

添加field

需使用add_settings_field函数,参数如下(最后两个可选):

  • ID – 唯一标识
  • Title – 在页面上显示的名字
  • Callback – 渲染用的回调函数
  • Page – 在哪个页面上
  • Section – 该field放在哪个section里,可选。值即为创建section时指定的ID
  • Arguments – 数组。传递给回调函数的参数
add_settings_field(
        'likole_toolkit_todo_enable',
        __( 'enable', 'likole-toolkit' ),
        function ($args){
            $html = '<input type="checkbox" id="likole_toolkit_todo_enable" name="likole_toolkit_todo_enable" value="1" ' . checked(1, get_option('likole_toolkit_todo_enable'), false) . '/>';
            $html .= '<label for="likole_toolkit_todo_enable"> Enable</label>';
            echo $html;
        },
        'general',
        'likole_toolkit_todo'
    );

注意回调函数中input的name属性,之后register_setting时需要使用该名字。此外也要注意get_option函数中的名称保持一致。

注册setting

到这儿为止,界面就好了,但是将数据保存到数据库还需要一些其他操作。

需要使用register_setting函数,参数如下(最后一个可选):

  • Option Group – This is actually the name of the group of options. This can either be an existing group of options provided by WordPress or an ID that we specified when creating our own settings section. This argument is required.
  • Option Name – option的名称,与上面field回调中input的name保持一致
  • Callback – 可用于在保存页面时进行一些验证
register_setting( 'general', 'likole_toolkit_todo_enable' );

如果有多个field,可以每个field都对应一个option,那么这个函数就要写多个,有几个option就要写几个。此外也可以将这些field的内容都放在一个数组里(推荐),那么只需要一个option就行了(该option为一个数组),此时该函数只需要写一个。如果采用数组的写法,需要注意input的name的写法为xxx[xxx],并注意在最开始需要检查下是否存在该option,不存在的话就创建一个空数组。

    if( false == get_option( 'likole_toolkit_options' ) ) {
        update_option( 'likole_toolkit_options',array() );
    }

获取值

需要使用get_option函数,第一个参数为选项的名称,第二个参数可选,为默认值

添加菜单项

上面的只是添加在自带页面中,如果要添加到自定义页面中,需要先添加菜单项

添加菜单的具体过程省略,就记录下渲染函数。此外,add_settings_section、add_settings_filed中的page,register_setting中的option_group也要相应进行修改,与下面settings_fields与do_settings_sections中的名字相对应

function likole_options_page_html() {
    if ( isset( $_GET[ 'settings-updated' ] ) ) {
        add_settings_error( 'likole_message', 'likole_message', __( 'Settings Saved', 'likole-toolkit' ), 'updated' );
    }
    settings_errors( 'likole_message' );
    ?>
    <div class=wrap>
        <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
        <form action=options.php method=post>
            <?php
            settings_fields( 'likole' );
            do_settings_sections( 'likole' );
            submit_button( 'Save Settings' );
            ?>
        </form>
    </div>
    <?php
}

最终效果:

一个简单实例

function get_my_option($key, $default = null)
{
    $options = get_option('likole_toolkit_options');
    if (isset($options[$key])) {
        return $options[$key];
    }
    return $default;
}
<?php
function likole_settings_init()
{
    //check exists
    if (false == get_option('likole_toolkit_options')) {
        update_option('likole_toolkit_options', array());
    }

    /**
     * settings
     */

    register_setting('likole_toolkit', 'likole_toolkit_options');

    /**
     * sections
     */

    add_settings_section(
        'likole_toolkit_search',
        __('Search Related', 'likole-toolkit'),
        null,
        'likole_toolkit'
    );
    add_settings_section(
        'likole_toolkit_todo',
        __('Todo List', 'likole-toolkit'),
        null,
        'likole_toolkit'
    );

    /**
     * fields
     */

    //search
    add_settings_field(
        'likole_toolkit_search_highlight',
        __('Enable Highlight', 'likole-toolkit'),
        function () {
            echo '<input type="checkbox" name="likole_toolkit_options[search_highlight]" value="1" ' . checked(1, get_my_option('search_highlight'), false) . '/>';
        },
        'likole_toolkit',
        'likole_toolkit_search'
    );
    if (get_my_option('search_highlight')) {
        add_settings_field(
            'likole_toolkit_search_highlight_color',
            __('Highlight Color', 'likole-toolkit'),
            function () {
                echo '<input name="likole_toolkit_options[search_highlight_color]" value="' . get_my_option('search_highlight_color', '#ffe575') . '"/>';
            },
            'likole_toolkit',
            'likole_toolkit_search'
        );
    }
    add_settings_field(
        'likole_toolkit_search_redirect',
        __('Redirect', 'likole-toolkit'),
        function () {
            echo '<input type="checkbox" id="likole_toolkit_options_search_redirect" name="likole_toolkit_options[search_redirect]" value="1" '
                . checked(1, get_my_option('search_redirect'), false) . '/>';
            echo '<label for="likole_toolkit_options_search_redirect">' . __('Redirect when there is only one result', 'likole-toolkit') . '</label>';
        },
        'likole_toolkit',
        'likole_toolkit_search'
    );

    //todolist
    add_settings_field(
        'likole_toolkit_todo_enable',
        __('Show Todo List', 'likole-toolkit'),
        function ($args) {
            echo '<input type="checkbox" name="likole_toolkit_options[todo_enable]" value="1" ' . checked(1, get_my_option('todo_enable'), false) . '/>';
        },
        'likole_toolkit',
        'likole_toolkit_todo'
    );
}

add_action('admin_init', 'likole_settings_init');

function likole_options_page()
{
    add_menu_page(
        'Likole Toolkit Options',
        'Likole Toolkit',
        'manage_options',
        'likole_toolkit_options',
        'likole_options_page_html'
    );
}

add_action('admin_menu', 'likole_options_page');

function likole_options_page_html()
{
    if (isset($_GET['settings-updated'])) {
        add_settings_error('likole_message', 'likole_message', __('Settings Saved', 'likole-toolkit'), 'updated');
    }
    settings_errors('likole_message');
    ?>
    <div class=wrap>
        <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
        <form action=options.php method=post>
            <?php
            settings_fields('likole_toolkit');
            do_settings_sections('likole_toolkit');
            submit_button('Save Settings');
            ?>
        </form>
    </div>
    <?php
}

参考文章:

https://code.tutsplus.com/tutorials/the-wordpress-settings-api-part-2-sections-fields-and-settings--wp-24619

https://code.tutsplus.com/tutorials/the-wordpress-settings-api-part-4-on-theme-options--wp-24902

https://www.wpzhiku.com/document/plugins-settings-options/

likole

人能常清静,天地悉皆归

文章评论