不到50行代码就实现一个 WordPress 主题的选项框架

相信很多订阅我博客和公众号的同学是想学习 WordPress 开发的，那么对于使用 WordPress 二次开发的同学来说，最快上手的方法就是去开发一个 WordPress 主题，很多使用 WordPress 进行开发的同学，一开始的想法也是希望自己能做一个 WordPress 主题。

对于 WordPress 主题开发，其中最重要的一步就是就是在后台做一个选项设置页面，然后在主题中调用这些选项来对主题进行一些自定义设置。

主题选项开发框架

现在网上有很多这方面适合二次开发的选项框架（Option Framework），但是我看了一圈下来，感觉一是这些选项框架都做得非常大，文件非常多，另外 UI 样式也是和 WordPress 原生的 UI 差距甚大，点击进去显得和 WordPress 后台其他页面有点格格不入，并且使用起来有一定的门槛，上手比较难。

所以我就把之前制作制作 Sweet 主题中选项设置部分代码，做一些简单的整理，也出了一个主题的选项开发框架，全部加起来不到50行代码，只需要修改或者增加设置的选项字段，和其他的一些名字即可直接使用。

开始使用 WPJAM 主题框架

我们的主题开发框架使用是非常简单的，首先在自己开发的主题中引入该文件，假设我们把它放到主题的 inc 目录下，那么在主题的 functions.php 文件通过一下代码引入框架：

include TEMPLATEPATH.'/inc/option.php';

先不做任何修改，我们直接进入 WordPress 后台先看看效果，什么都不修改的情况下，这个框架就在后台增加了一个名为「主题设置」主菜单：

「主题设置」这个名字和左边的图标，我们可以修改成将要主题的名字，修改的位置大概在30行，对应的代码如下：

public static function get_menu_page(){
	return [
		'menu_slug'		=> 'wpjam-theme',
		'menu_title'	=> '主题设置',			// 改成你主题的名字
		'icon'			=> 'dashicons-hammer',	// 改成自己喜欢的 icon
		'capability'	=> 'manage_options',
		'position'		=> '59',
		'function'		=> 'option',
		'option_name'	=> 'wpjam_theme',
	];
}

需要修改的位置，我都通过注释做了标记。

最后点击进去主题设置页面，首先可以看到 UI 样式和其它 WordPress 后台原生的设置页面几乎一致，没有任何唐突的感觉，我们的框架默认带了两个标签页：

第一个标签页有两个图片上传按钮和一个多图上传器，第二个标签页，简单罗列了常用的几种表单字段：

这两个标签页的名字和他们的字段如何修改也是非常简单，相关的代码在类的 get_sections 方法中：

public static function get_sections(){
	return [
		'section1'		=> [
			'title'		=>'标签页1', 
			'fields'	=>[
				'logo'		=> ['title'=>'网站 LOGO',	'type'=>'img',		'item_type'=>'url',	],
				'favicon'	=> ['title'=>'Favicon',		'type'=>'img',		'item_type'=>'url',	],
				'images'	=> ['title'=>'多图上传',		'type'=>'mu-img',	'item_type'=>'url',	],
			]
		],
		'section2'	=> [
			'title'		=>'标签页2', 
			'fields'	=>[
				'text'		=> ['title'=>'普通输入框',	'type'=>'text'],
				'number'	=> ['title'=>'数字输入框',	'type'=>'number'],
				'checkbox'	=> ['title'=>'选择框',		'type'=>'checkbox',	'description'=>'你要开启该功能'],
				'checkboxs'	=> ['title'=>'复选框',		'type'=>'checkbox',	'options'=>[1=>'选项1', 2=>'选项2', 3=>'选项3', ]],
				'radio'		=> ['title'=>'单选框',		'type'=>'radio',	'options'=>[1=>'选项1', 2=>'选项2', 3=>'选项3', ]],
				'textarea'	=> ['title'=>'文本框',		'type'=>'textarea'],
			]
		],
	];
}

可以说完全是配置型代码，先备份一下，然后自己尝试一下去修改，我相信你肯定能增加自己想要的字段。😄

在主题中调用选项的值

主题的选项字段都设置好了，并且也做了保存，那么接下来在主题中进行自定义设置的时候怎么获取字段对应的值呢？WPJAM 主题框架还提供了获取选项设置的函数：

wpjam_theme_get_setting($name, $default=null);

这个函数有两个参数，$name 是选项名称，$default 是默认值，一眼就明白怎么用了吧？这里就不再重复了。

有了这个选项框架，制作 WordPress 主题的选项页面和应用这些选选项的时候就变得异常的简单。😁 

但是还是那句话：多说无用，重要的是自己亲手试一下。

最后说一下，使用该框架制作的后台设置页面（上面的两个截图），都是 WordPress 默认的 UI 样式，感觉和 WordPress 后台原生的页面几乎一样，对于用户来说体验是最好的。

下载：WPJAM Option Framework。