看到好多免費(fèi)的wordpress主題都采用了這套后臺(tái)設(shè)置框架，就拿來研究下，其實(shí)設(shè)置框架也有很多類型，重要的不在于他的設(shè)置有多豐富，而是這個(gè)框架的使用是否明確。
正好，這款options framework 框架就貼心的準(zhǔn)備了一款主題來幫助各位新手開發(fā)者來了解這套框架，可惜的是，即使有這套主題的幫助，很多新手開發(fā)者對(duì)此也是一知半解，難以使用，這次在網(wǎng)絡(luò)上找到了一份有詳細(xì)使用教程的文檔，大家一起來學(xué)習(xí)下。
下載并解壓 Options Framework Theme 后可以看到文件夾中主要包含下圖所示的這些文件，我們只需要將images 文件夾、 inc 文件夾、options.php 文件復(fù)制到我們需要添加主題選項(xiàng)的主題中去，然后將該 functions.php 文件中調(diào)用 inc 文件夾內(nèi)容的部分復(fù)制到我們自己wordpress主題的 functions.php 文件中就可以了。
具體代碼如下 ：
define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/' );
require_once dirname( __FILE__ ) . '/inc/options-framework.php'; 需要注意的是，對(duì)于默認(rèn)主題一般已經(jīng)有一個(gè) inc 文件夾用于存放模板文件或其他一些 php 文件，為了避免不必要的麻煩，建議將新復(fù)制的 inc 文件夾命名為 options-framework 或其他你喜歡的名稱，同時(shí)修改上述調(diào)用的路徑。如果是子主題還需要將 get_template_directory_uri() 替換為 get_stylesheet_directory_uri()。
修改Theme Options這個(gè)選項(xiàng)為主題選項(xiàng):
//找到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改為主題設(shè)置
//'page_title' => __( '主題設(shè)置', 'theme-textdomain' ),打開后顯示的標(biāo)題名
//'menu_title' => __( '主題設(shè)置', 'theme-textdomain' ),外觀里面顯示的名稱
如何自定義選項(xiàng)？打開options.php中，按照這個(gè)文件的代碼就能做出自己的選項(xiàng)。比如：
<?php
/* options.php 第 94 行*///初始化存儲(chǔ)選項(xiàng)的$options數(shù)組
$options = array();
//定義一個(gè)選項(xiàng)卡，標(biāo)題是Basic Settings，注意type是heading
$options[] = array("name" => "Basic Settings",
"type" => "heading");
//定義一個(gè)text類型的input box，type要設(shè)置為text，class為mini會(huì)讓input長度比較短
$options[] = array("name" => "Input Text Mini",
"desc" => "A mini text input field.",
"id" => "example_text_mini",
"std" => "Default",
"class" => "mini",
"type" => "text");
//同上，但沒有設(shè)置class mini，input長度較長
$options[] = array("name" => "Input Text",
"desc" => "A text input field.",
"id" => "example_text",
"std" => "Default Value",
"type" => "text");
//輸出一個(gè)textarea
$options[] = array("name" => "Textarea",
"desc" => "Textarea description.",
"id" => "example_textarea",
"std" => "Default Text",
"type" => "textarea");
//輸出select下拉菜單，$test_array存儲(chǔ)下拉菜單的選項(xiàng)，“std”表示默認(rèn)選中的項(xiàng)
$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);
//對(duì)應(yīng)下面最后的代碼
$options[] = array(
'name' => __('Input Checkbox Name', 'options_framework_theme'),
'desc' => __('Check to display.'),
'id' => 'example_checkbox_2',
'std' => '1',
'type' => 'checkbox'
);總結(jié)如下：
//每添加一次下面代碼則會(huì)生成一個(gè)新的選項(xiàng)卡
$options[] = arry(
'name' => __('選項(xiàng)卡名稱','默認(rèn)域'),
'type' => 'heading' //選項(xiàng)卡的 type 必須為 heading
);
//下面這段代碼是添加具體選項(xiàng)的，可重復(fù)使用
$options[] = array(
"name" =>__('元素名稱','默認(rèn)域'),
"desc" =>__('元素描述','默認(rèn)域'),
"id" =>'元素ID必填，調(diào)用時(shí)用',
"std" =>'元素的默認(rèn)值',
"class" =>'元素的class',
"type" =>'元素的類型',
"settings"=>'調(diào)用默認(rèn)編輯器時(shí)使用'
);其他參數(shù)沒有什么需要特殊說明的，唯一需要說明的是 type ，目前 Options Framework 支持的選項(xiàng)類型主要有：text、textarea、checkbox、select、radio、upload（上傳圖片）、images（充當(dāng)一個(gè)單選按鈕，更形象化）、background、multicheck、color、typography、editor 。
修改輸出方式
Options Framework 默認(rèn)是使用 of_get_option() 作為輸出函數(shù)的，其默認(rèn)輸出方式為：
<?php echo of_get_option('元素id', '默認(rèn)輸出內(nèi)容'); ?> 對(duì)于該函數(shù)的定義在 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;我們可以找到該函數(shù)將函數(shù)名 of_get_option 修改為任意你想修改的內(nèi)容，同時(shí)在調(diào)用選項(xiàng)的值時(shí)，輸出函數(shù)也要替換為新的輸出函數(shù)名。
添加 JavaScript 支持
Options Framework 提供了眾多的選項(xiàng)類型，但是遺憾的是并沒有提供 JS 代碼的選項(xiàng)，不過在 class-options-framework-admin.php 中提供了添加 script 的鉤子，我們可以通過在 functions.php 文件中添加如下代碼使其對(duì) JavaScript 進(jìn)行支持。
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開發(fā)教程的全部內(nèi)容了，如果你還在找一套更加專業(yè)的開發(fā)框架，你也可以看看這套：
