博客目前使用的是 DUX 主题，而 DUX 主题的后台设置页面采用的是 Options Framework 框架，由于自己经常会对主题做些修改，并且为了后期配置方便常常会在后台添加一些选项，这就需要我们对 Options Framework 有所了解，这篇文章也是为了帮助大家同时也是为了帮助自己更好地理解后台设置选项而写。

在了解这款插件之前，我想我们有必要对比一下默认不带主题选项的主题与采用 Options Framework 搭建主题设置选项的区别，下面是WordPress默认主题 Twenty Seventeen （当然了，WordPress官方是推荐使用“自定义”选项进行主题设置的，所以默认主题一般不会有主题设置面板）与我目前使用主题 DUX4.0 的后台设置界面，话不多说，从图中我们就可以看出二者的区别。

当然了，WordPress 后台主题设置相关的框架有很多， Options Framework 只是其中一个，不过从用户体验及操作难度上来看， Options Framework 可以说是相当优秀的，目前很多的主题都在使用它搭建自己的后台设置页面。 Options Framework 是美国德克萨斯州的一位著名的WordPress开发者 Devin Price 所开发的，最近更新是在2016年1月15日。该项目有主题版与插件版，也就是说如果你想为自己的插件添加一些后台设置选项时也可以使用它。下面是 Options Framework 主题版的项目截图，是不是很像一款主题？好吧，他就是一款主题，该项目通过一款主题展示后台主题设置选项。你可以直接上传它到你的主题文件夹下查看后台显示效果及各按钮如何使用等内容。

如何使用 Options Framework

下载并解压 Options Framework Theme 后可以看到文件夹中主要包含上图所示的这些文件，我们只需要将images 文件夹、 inc 文件夹、options.php 文件复制到我们需要添加主题选项的主题中去，然后将 functions.php 文件中调用 inc 文件夹内容的部分复制到主题的 functions.php 文件中就可以了，具体代码如下：

需要注意的是，对于默认主题一般已经有一个 inc 文件夹用于存放模板文件或其他一些 php 文件，为了避免冲突以及日后不好管理，我们可以将新复制的 inc 文件夹命名为 settings 或其他任何名称，同时需要将上述代码中的对应部分进行修改。另外，如果是子主题的话需要将 get_template_directory_uri() 替换为 get_stylesheet_directory_uri()  ，具体原因请参见 WordPress路径函数总结，没有最全只有更全 一文。关于 Options Framework Theme 的使用，下面是作者做的一个视频大家也可以看一下。

这里我将文件复制到了默认主题 Twenty Seventeen 中，并将 inc 文件夹命名为了 settings ，刷新后台后可以看到外观面板下多了一个 Theme Options 的按钮，并且点击该按钮会出现一些已经预设好的按钮，我们可以通过查看这些按钮的相关代码了解其使用方法。

添加后台设置选项

Options Framework 的所有后台设置选项都存储在 options.php 文件中，我们就这个文件分三段进行简单说明。

这地方是用于定义你的主题别名的，比如 DUX 主题的话，这里将 options-framework-theme 修改为了 DUX 。

上面这段代码主要是对后台主题设置界面的一些特殊参数的定义，包括文字样式、图片文件夹路径，常用的一些单选按钮，复选框等内容进行预定义，以方便后面具体内容设置时的调用。

剩下的这些代码就是后台我们真正要添加的一些选项及按钮了，我们可以参照这些代码及后台各类按钮的样式来学习如何添加各种主题设置选项。不过总结下来 options 的设置主要包括以下内容：

其他参数没有什么需要特殊说明的，唯一需要说明的是 type ，目前 Options Framework 支持的选项类型主要有：text、textarea、checkbox、select、radio、upload（上传图片）、images（充当一个单选按钮，更形象化）、background、multicheck、color、typography、editor 。

修改输出方式

Options Framework 默认是使用 of_get_option() 作为输出函数的，其默认输出方式为：

对于该函数的定义在 inc 文件夹下的 options-framework.php 中，具体代码如下：

我们可以找到该函数将函数名 of_get_option 修改为任意你想修改的内容，同时在调用选项的值时，输出函数也要替换为新的输出函数名，比如 DUX 主题将输出函数名改为了 _hui() ,这也是为什么我们在修改主题时常常要调用 _hui 的原因。只不过 DUX 主题并非在 options-framework.php 中修改的输出函数，而是在 functions-theme.php 中进行的修改。相关代码如下：

添加 JavaScript 支持

Options Framework 提供了众多的选项类型，但是遗憾的是并没有提供 JS 代码的选项，不过在 class-options-framework-admin.php 中提供了添加 script 的钩子，我们可以通过在  functions.php 文件中添加如下代码使其对 JavaScript 进行支持。

额，大概就这些了。。。

GitHub项目地址：https://github.com/devinsays/options-framework-theme

作者网站：https://wptheming.com/options-framework-theme/

官网下载：https://github.com/devinsays/options-framework-theme/archive/master.zip