Npcink Blog
切换菜单

WordPress 开发 - options framework 基础应用

很多 wordpress 主题都采用了这套 options framework 设置框架，这里有篇详细的教程，大家一起来看看

最后更新于

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

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

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

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

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

//找到includes/class-options-framework-admin.php，第83行
static function menu_settings() {
           $menu = array(
           // Modes: submenu, menu
            'mode' => 'submenu',
            // Submenu default settings
           'page_title' => __( 'Theme Options', 'theme-textdomain' ),
           'menu_title' => __( 'Theme Options', 'theme-textdomain' ),
           'capability' => 'edit_theme_options',
           'menu_slug' => 'options-framework',
            'parent_slug' => 'themes.php',
            // Menu default settings
            'icon_url' => 'dashicons-admin-generic',
            'position' => '61'
);
return apply_filters( 'optionsframework_menu', $menu );
}
//Theme Options改为主题设置
//'page_title' => __( '主题设置', 'theme-textdomain' ),打开后显示的标题名
//'menu_title' => __( '主题设置', 'theme-textdomain' ),外观里面显示的名称

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

<?php
/* options.php 第 94 行*///初始化存储选项的$options数组
$options = array();
//定义一个选项卡，标题是Basic Settings，注意type是heading
$options[] = array("name" => "Basic Settings",
    "type" => "heading");
    //定义一个text类型的input box，type要设置为text，class为mini会让input长度比较短
    $options[] = array("name" => "Input Text Mini",
    "desc" => "A mini text input field.",
    "id" => "example_text_mini",
    "std" => "Default",
    "class" => "mini",
    "type" => "text");
//同上，但没有设置class mini，input长度较长
$options[] = array("name" => "Input Text",
    "desc" => "A text input field.",
    "id" => "example_text",
    "std" => "Default Value",
    "type" => "text");
//输出一个textarea
$options[] = array("name" => "Textarea",
    "desc" => "Textarea description.",
    "id" => "example_textarea",
    "std" => "Default Text",
    "type" => "textarea");
//输出select下拉菜单，$test_array存储下拉菜单的选项，“std”表示默认选中的项
$options[] = array( "name" => "Input Select Small",
 "desc" => "Small Select Box.",
 "id" => "example_select",
 "std" => "three",
 "type" => "select",
 "class" => "mini", //mini, tiny, small
 "options" => $test_array);
//对应下面最后的代码
$options[] = array(
    'name' => __('Input Checkbox Name', 'options_framework_theme'),
    'desc' => __('Check to display.'),
    'id' => 'example_checkbox_2',
    'std' => '1',
    'type' => 'checkbox'
);

总结如下： 

//每添加一次下面代码则会生成一个新的选项卡
$options[] = arry(
    'name' => __('选项卡名称','默认域'),
    'type' => 'heading'    //选项卡的 type 必须为 heading
);


//下面这段代码是添加具体选项的，可重复使用
$options[] = array(
    "name" =>__('元素名称','默认域'),
    "desc" =>__('元素描述','默认域'),
    "id" =>'元素ID必填，调用时用',
    "std" =>'元素的默认值',
    "class" =>'元素的class',
    "type" =>'元素的类型',
    "settings"=>'调用默认编辑器时使用'
);

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

修改输出方式

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

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

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

if ( ! function_exists( 'of_get_option' ) ) :
    function of_get_option( $name, $default = false ) {
        $option_name = '';
        // Gets option name as defined in the theme
        if ( function_exists( 'optionsframework_option_name' ) ) {
            $option_name = optionsframework_option_name();
        }
        // Fallback option name
        if ( '' == $option_name ) {
            $option_name = get_option( 'stylesheet' );
            $option_name = preg_replace( "/\W/", "_", strtolower( $option_name ) );
        }
        // Get option settings from database
        $options = get_option( $option_name );
        // Return specific option
        if ( isset( $options[$name] ) ) {
            return $options[$name];
        }
    return $default;
    }
endif;

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

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

function optionsframework_custom_scripts() { ?>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            jQuery('#example_showhidden').click(function() {
            jQuery('#section-example_text_hidden').fadeToggle(400);
            });
            if (jQuery('#example_showhidden:checked').val() !== undefined) {
                jQuery('#section-example_text_hidden').show();
            }
        });
    </script><?php
}

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

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