Options Framework

介绍

⚡️ Options Framework 将助您在极短时间内搭建网站设置后台

⭕自己造轮子是一件苦差事。 现在，您可以专注于创作。

⭕想深入了解吗？ 来试试吧！

Ztone主题框架

框架默认提供了所有的设置类型，包括

• 文本输入框（text）
• 多行文本框（textarea）
• 图片上传（upload）
• 多选框（multicheck）
• 单选框（radio）
• 颜色选择
• 下拉选项（select）
• 编辑器（editor）
• 复选框（checkbox）

各设置类型的代码可以在options.php文件查看

安装

1、下载Options Framework框架：

github：https://github.com/devinsays/options-framework-theme/archive/master.zip

国内：https://cjw41415.lanzouq.com/iG9pG04qit6j

2、解压后，把options.php文件和inc/文件夹复制到自己主题的根目录

3、在自己主题的functions.php文件第一行<?php下面添加以下代码：

define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/' );
require_once dirname( __FILE__ ) . '/inc/options-framework.php';
$optionsfile = locate_template( 'options.php' );
load_template( $optionsfile );
function optionsframework_custom_scripts() { ?>
<script type="text/javascript">
jQuery(document).ready(function() {
    //自己的js代码
});
</script>
<?php
}

由于Options Framework框架的安全机制，会自动过滤掉js，object等代码 如果需要添加js代码（如统计代码），请添加到上述代码中的“//自己的js代码”位置。

添加完代码后，在后台——外观下面就会出现“Theme Options”主题配置选项，点击就可以进入主题设置页面。

✅配置

修改输出方式（前期条件）

如果修改输出方式必须先进行下述操作

在options.php文件中找到以下代码：

function optionsframework_option_name() {
    // Change this to use your theme slug
    return 'options-framework-theme';
}

修改下这个选项的值，或者将这个函数代码修改一下，自动获取当前主题的选项值：

function optionsframework_option_name() {
    // Change this to use your theme slug
     $option_name = get_option( 'stylesheet' );
    $option_name = preg_replace( "/\W/", "_", strtolower( $option_name ) );
    return $option_name;
}

修改输出方式（非必须）

Options Framework的原本输出函数是of_get_option，如果你想更美观地让他出现，也为了便于记忆，可以进入inc/options-framework.php文件，找到以下代码：

if ( ! function_exists( 'of_get_option' ) ) :
function of_get_option( $name, $default = false ) {

比如说，你想要的输出函数是get_shuchu，那么此处就为:

if ( ! function_exists( 'get_shuchu' ) ) :
function get_shuchu( $name, $default = false ) {

注意：输出函数修改为两个地方

调用调取设置

可以使用以下代码（此处的of_get_option被改成了get_shuchu，如有需要请自行修改）：

<?php echo get_shuchu('相应的id', '如果没有内容则输出我'); ?>

注意：要使用echo

使用JavaScript

由于此框架的安全机制，回自动过滤掉js，object等，如需使用（比如说你想加一个统计代码，就必须使用这个否则js会无效），请在第一步的代码后加入此段代码：

<script type="text/javascript">
你的js代码
</script>
<?php
}

✅选项

代码结构

$options[] = array(
    "name" =>'', //选项的名称
    "desc" =>'', //介绍
    "id" =>'', //必填，唯一标示
    "std" =>'', //元素默认值
    "class" =>'', //该类型元素class
    "type" =>'', //表单元素类型
    "settings"=>'' //仅当调用编辑器时使用
);

'type' => 'text'//选项类型

• text
• textarea
• checkbox
• select
• radio
• upload
• images
• background
• multicheck
• color
• typography
• editor

"class" =>'', //该类型元素class

• mini
• tiny
• small

1、文本输入框（text）

'type' => 'textarea'//文本框（多行）

$options[] = array(
    'name' => 'SEO标题',
    'desc' => '自定义首页title标题',
    'id' => 'seo_title',
    'std' => '',
    'class' => 'mini',
    'type' => 'text'
);

2、多选框架（multicheck）

$options[] = array(
    'name' => '选择数字',
    'desc' => '选择要显示的数字',
    'id' => 'select_num',
    'std' => '1'
    'type' => 'multicheck',
    'options' => array(
        'one' => '1',
        'two' => '2',
        'three' => '3',
        'four' => '4',
        'five' => '5'
    );
);

3、编辑器（editor）

    $wp_editor_settings = array(
        'quicktags' => 1,
        'tinymce' => 1,
        'media_buttons' => 1,
        'textarea_rows' => 5
    );
    $options[] = array(
        'name' => __( '网站底部内容', 'theme-textdomain' ),
        'desc' => __( 'A text input field.', 'theme-textdomain' ),
        'id' => 'ts_tishiwenzi',
        'std' => 'Copyright ©  ts小陈  版权所有', //默认值
        'type' => 'editor',
        'settings' => $wp_editor_settings
    );