0°

wordpress添加原生设置框架-WordPress的Settings API

为主题添加原生的设置选项。

也许大部分主题是使用相关的设置框架。如果我们的主题只有几个选项呢?可以在主题的自定义里面配置。

参考资料:

  1. https://maddisondesigns.com/2017/05/the-wordpress-customizer-a-developers-guide-part-1
  2. https://maddisondesigns.com/2017/05/the-wordpress-customizer-a-developers-guide-part-2/

本站下载该页历史版本

Github:

https://github.com/maddisondesigns/customizer-custom-controls

本站下载:

customizer-custom-controls-master

提取码:无,解压码:

下载

我开发的博客主题Mirages就是使用这个方法来进行主题的设置。可以下载下来看看(新年前发布?)。

设置 API是在 2.7 版本中加入的新功能。它令包含设置表单的管理页面实现“半自动工作”,允许您定义整个管理页面、选项区域,甚至具体的栏目。

参考主题:

https://themegrill.com/themes/colormag/

本站下载:

当前内容已被隐藏,您需要登录才能查看

官方文档:

https://codex.wordpress.org/zh-cn:%E8%AE%BE%E7%BD%AE_API

在主题的functions.php文件中底部添加如下代码:

 
//注册自定义设置
function mytheme_customize_register( $wp_customize ) {
   
//添加第一个设置面板
	//id = one_options
	$wp_customize->add_panel( 'one_options', array(
		'capabitity'  => 'edit_theme_options',
		//根据用户的权限级别显示或隐藏该部分。默认为edit_theme_options 
		'description' => __( '第一个设置面板功能介绍', 'colormag' ),
		//可选。显示在面板顶部的描述隐藏在帮助图标后面。
		'priority'    => 500,//优先级,可选。这将控制此部分在Theme Customizer侧栏中的显示顺序。
		'title'       => __( '第一个设置面板', 'colormag' ),//面板的可见名称。
	) );
	////////////////////////////////////////////////////////////////////////////////////////
	//第一个设置项目
	//id = set_one_one
	$wp_customize->add_section('set_one_one',array(
        'title'     => '第一个标题',//设置的可见名称。
		'panel' => 'one_options',//加入第一个设置面板'priority'  => 50//优先级
    ) );
    $wp_customize->add_setting( 'set_one_one', array(
        'default'   => '',//可选。如果数据库中不存在任何值,则关联控件的默认值。默认值:空白"transport" => "postMessage",//可选。定义实时预览的更新方式。默认值:刷新。'type'      => 'option'//可选。定义如何保存设置。默认值:theme_mod。
    ) );
    $wp_customize->add_control( 'set_one_one', array(
         'label'     => '第一个标题描述',//可选。将显示的标签默认值:空白'section'   => 'set_one_one'//必填。控制部分应显示
    )  );
	/////////////////////////////////////////////////////////////////////////////////
	//第二个设置项目
	//id=set_one_two
	$wp_customize->add_section('set_one_two',array(
        'title'     => '第二个标题',
		'panel' => 'one_options',//加入第一个面板'priority'  => 50
    ) );
    $wp_customize->add_setting( 'set_one_two', array(
        'default'   => '',
        "transport" => "postMessage",
        'type'      => 'option'
    ) );
    $wp_customize->add_control( 'set_one_two', array(
         'label'     => '第二个设置标题描述',
         'section'   => 'set_one_two'
    )  );
	
	
//第二个设置面板
	$wp_customize->add_panel( 'two_options', array(
		'capabitity'  => 'edit_theme_options',
		//根据用户的权限级别显示或隐藏该部分。默认为edit_theme_options 
		'description' => __( '第二个面板功能介绍', 'colormag' ),
		//可选。显示在面板顶部的描述隐藏在帮助图标后面。
		'priority'    => 500,
		'title'       => __( '第二个设置面板', 'colormag' ),
	) );
	//第一个设置项目
	$wp_customize->add_section('set_two_one',array(
        'title'     => '第一个设置标题',//设置的可见名称。
		'panel' => 'two_options',//加入第一个设置面板'priority'  => 50//优先级
    ) );
    $wp_customize->add_setting( 'set_two_one', array(
        'default'   => '',//可选。如果数据库中不存在任何值,则关联控件的默认值。默认值:空白"transport" => "postMessage",//可选。定义实时预览的更新方式。默认值:刷新。'type'      => 'option'//可选。定义如何保存设置。默认值:theme_mod。
    ) );
    $wp_customize->add_control( 'set_two_one', array(
         'label'     => '第一个设置标题描述',//可选。将显示的标签默认值:空白'section'   => 'set_two_one'//必填。控制部分应显示
    )  );
	//第二个设置
	$wp_customize->add_section('set_two_two',array(
        'title'     => '第二个设置标题',//设置的可见名称。
		'panel' => 'two_options',//加入第一个设置面板'priority'  => 50//优先级
    ) );
    $wp_customize->add_setting( 'set_two_two', array(
        'default'   => '',//可选。如果数据库中不存在任何值,则关联控件的默认值。默认值:空白"transport" => "postMessage",//可选。定义实时预览的更新方式。默认值:刷新。'type'      => 'option'//可选。定义如何保存设置。默认值:theme_mod。
    ) );
    $wp_customize->add_control( 'set_two_two', array(
         'label'     => '第二个设置标题描述',//可选。将显示的标签默认值:空白'section'   => 'set_two_two'//必填。控制部分应显示
    )  );
	
	
	
};
add_action( 'customize_register', 'mytheme_customize_register' );
?>

即可在主题的自定义面板中得到这样的效果:

wordpress添加原生设置选项
wordpress添加原生设置选项
wordpress添加原生设置选项

如何使用呢?

在你需要的页面添加如下代码:

id为set_one_one: echo get_option('set_one_one'); ?>

id为set_one_two: echo get_option('set_one_two'); ?>

id为set_one_two: echo get_option('set_two_one'); ?>

id为set_one_two: echo get_option('set_two_two'); ?>

效果就是这样:

wordpress添加原生设置选项

添加更多类型请看这里:

https://maddisondesigns.com/2017/05/the-wordpress-customizer-a-developers-guide-part-1

需要更多?

如何在您自己的主题中利用主题定制器

024

需要简单设置框架?

Codestar Framework-简约实用的主题选项框架

085

WordPress轻量级后台框架OptionsFramework使用设置举例

074

因主题原因,在示例代码中,有部分
2 条回复 A 作者 M 管理员
  1. 稳,老哥,支持支持

    • 谢谢支持

欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论