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

之前我写了一个函数就搞定系列来介绍使用 WPJAM Basic 开发，一共有5篇，分别涉及设置选项，文章选项，后台文章列表栏目， 分类选项，后台分类列表栏目这五个方面的快速开发。

为了大家使用，我还还提供了 PDF 文档下载，大概有20多页，当作「WordPress果酱」公众号的第一本电子书发布。

但是还是有些同学觉得难以上手，所以今天想了一下，就简单更新了一下 Sweet 主题，并且出了一个主题的选项开发框架，并且不到50行代码。

什么意思呢？一般来说新人接触 WordPress 开发，最早肯定是想自己做一个 WordPress 主题，而做 WordPress 主题，在后台做一个设置选项页面，然后在主题中调用这些选项是最繁琐。

现在网上有很多这方面适合二次开发的选项框架（Option Framework），所以我把 Sweet 主题这部分代码单独整理成一个文件，然后只需要修改或者增加设置的选项字段，和其他的一些名字即可直接使用。

首先在自己开发的主题中引入该文件，假设我们把它放到主题的 inc 目录下，那么在主题的 functions.php 文件增加引入的代码如下：

include TEMPLATEPATH./inc/option.php;

然后我们先看看效果，目前在后台增加了一个「主题设置」的后台主菜单：

「主题设置」这个名字和左边的图标，你可以修改成你主题的名字即可，修改的位置大概在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, ]; }

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

然后点击进去，可以看到设置页面有两个标签页：

第一个标签页有两个图片上传按钮和一个多图上传器。

然后第二个标签页，我简单罗列了常用的几种表单字段：

标签页名字和这些字段怎么修改也非常简单，相关的代码在 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_theme_get_setting($name, $default=null);

它有两个参数，$name 是选项名称，$default 是默认值，一眼就明白如何用了吧？

有了这个选项框架，制作 WordPress 主题的选项页面，和应用这些选型，变得异常的简单，但多说无用，最重要的是自己亲手试一下。

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