看到好多免費的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開發教程的全部內容了，如果你還在找一套更加專業的開發框架，你也可以看看這套：
