WordPress开发 - options framework基础应用.

也想出现在这里？点击联系我~

看到好多免费的wordpress主题都采用了这套后台设置框架，就拿来研究下，其实设置框架也有很多类型，重要的不在于他的设置有多丰富，而是这个框架的使用是否明确。

正好，这款options framework 框架就贴心的准备了一款主题来帮助各位新手开发者来了解这套框架，可惜的是，即使有这套主题的帮助，很多新手开发者对此也是一知半解，难以使用，这次在网络上找到了一份有详细使用教程的文档，大家一起来学习下。

• 原文来源：详情
• 框架下载：详情

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

1. define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/' );
2. require_once dirname( __FILE__ ) . '/inc/options-framework.php';

需要注意的是，对于默认主题一般已经有一个 inc 文件夹用于存放模板文件或其他一些 php 文件，为了避免不必要的麻烦，建议将新复制的 inc 文件夹命名为 options-framework 或其他你喜欢的名称，同时修改上述调用的路径。如果是子主题还需要将 get_template_directory_uri() 替换为 get_stylesheet_directory_uri()。
修改Theme Options这个选项为主题选项:

1. //找到includes/class-options-framework-admin.php，第83行
2. static function menu_settings() {
3. $menu = array(
4. // Modes: submenu, menu
5. 'mode' => 'submenu',
6. // Submenu default settings
7. 'page_title' => __( 'Theme Options', 'theme-textdomain' ),
8. 'menu_title' => __( 'Theme Options', 'theme-textdomain' ),
9. 'capability' => 'edit_theme_options',
10. 'menu_slug' => 'options-framework',
11. 'parent_slug' => 'themes.php',
12. // Menu default settings
13. 'icon_url' => 'dashicons-admin-generic',
14. 'position' => '61'
15. );
16. return apply_filters( 'optionsframework_menu', $menu );
17. }
18. //Theme Options改为主题设置
19. //'page_title' => __( '主题设置', 'theme-textdomain' ),打开后显示的标题名
20. //'menu_title' => __( '主题设置', 'theme-textdomain' ),外观里面显示的名称

如何自定义选项？打开options.php中，按照这个文件的代码就能做出自己的选项。比如：

1. <?php
2. /* options.php 第 94 行*///初始化存储选项的$options数组
3. $options = array();
4. //定义一个选项卡，标题是Basic Settings，注意type是heading
5. $options[] = array("name" => "Basic Settings",
6. "type" => "heading");
7. //定义一个text类型的input box，type要设置为text，class为mini会让input长度比较短
8. $options[] = array("name" => "Input Text Mini",
9. "desc" => "A mini text input field.",
10. "id" => "example_text_mini",
11. "std" => "Default",
12. "class" => "mini",
13. "type" => "text");
14. //同上，但没有设置class mini，input长度较长
15. $options[] = array("name" => "Input Text",
16. "desc" => "A text input field.",
17. "id" => "example_text",
18. "std" => "Default Value",
19. "type" => "text");
20. //输出一个textarea
21. $options[] = array("name" => "Textarea",
22. "desc" => "Textarea description.",
23. "id" => "example_textarea",
24. "std" => "Default Text",
25. "type" => "textarea");
26. //输出select下拉菜单，$test_array存储下拉菜单的选项，“std”表示默认选中的项
27. $options[] = array( "name" => "Input Select Small",
28. "desc" => "Small Select Box.",
29. "id" => "example_select",
30. "std" => "three",
31. "type" => "select",
32. "class" => "mini", //mini, tiny, small
33. "options" => $test_array);
34. //对应下面最后的代码
35. $options[] = array(
36. 'name' => __('Input Checkbox Name', 'options_framework_theme'),
37. 'desc' => __('Check to display.'),
38. 'id' => 'example_checkbox_2',
39. 'std' => '1',
40. 'type' => 'checkbox'
41. );

总结如下：

1. //每添加一次下面代码则会生成一个新的选项卡
2. $options[] = arry(
3. 'name' => __('选项卡名称','默认域'),
4. 'type' => 'heading' //选项卡的 type 必须为 heading
5. );
7. //下面这段代码是添加具体选项的，可重复使用
8. $options[] = array(
9. "name" =>__('元素名称','默认域'),
10. "desc" =>__('元素描述','默认域'),
11. "id" =>'元素ID必填，调用时用',
12. "std" =>'元素的默认值',
13. "class" =>'元素的class',
14. "type" =>'元素的类型',
15. "settings"=>'调用默认编辑器时使用'
16. );

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

修改输出方式

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

1. <?php echo of_get_option('元素id', '默认输出内容'); ?>

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

1. if ( ! function_exists( 'of_get_option' ) ) :
2. function of_get_option( $name, $default = false ) {
3. $option_name = '';
4. // Gets option name as defined in the theme
5. if ( function_exists( 'optionsframework_option_name' ) ) {
6. $option_name = optionsframework_option_name();
7. }
8. // Fallback option name
9. if ( '' == $option_name ) {
10. $option_name = get_option( 'stylesheet' );
11. $option_name = preg_replace( "/\W/", "_", strtolower( $option_name ) );
12. }
13. // Get option settings from database
14. $options = get_option( $option_name );
15. // Return specific option
16. if ( isset( $options[$name] ) ) {
17. return $options[$name];
18. }
19. return $default;
20. }
21. endif;

我们可以找到该函数将函数名 of_get_option 修改为任意你想修改的内容，同时在调用选项的值时，输出函数也要替换为新的输出函数名。

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

1. function optionsframework_custom_scripts() { ?>
2. <script type="text/javascript">
3. jQuery(document).ready(function() {
4. jQuery('#example_showhidden').click(function() {
5. jQuery('#section-example_text_hidden').fadeToggle(400);
6. });
7. if (jQuery('#example_showhidden:checked').val() !== undefined) {
8. jQuery('#section-example_text_hidden').show();
9. }
10. });
11. </script><?php
12. }

这里有一套框架作者写的教程，可以看看：

主题使用教程 WordPress开发 - Options Framework轻量级后台框架使用设置举例 很多新手wordpress开发者对这款框架不是很理解，我收集了一些教程供各位wordpress开发者参考和学习 这款框架我在蛮多免费主题上就看到有在使用，尽管框架的作者将其做成主题方便各位理解，但因为... 时间:2021/10/27 阅读:1.5K 阅读全文

至此，就是本篇wordpress开发教程的全部内容了，如果你还在找一套更加专业的开发框架，你也可以看看这套：

主题使用教程 Codestar Framework - 简约实用的wordpress主题选项框架 用于主题和插件的简单轻量级WordPress选项框架。内置具有大量自定义字段和大量选项的面向对象编程范例。允许您将自定义管理，元框，分类法和自定义设置引入所有页面，帖子和类别。它是高度现代和先进的框架... 时间:2021/10/27 阅读:1.4K 阅读全文