WordPress開發(fā) - options framework基礎應用

看到好多免費的wordpress主題都采用了這套后臺設置框架，就拿來研究下，其實設置框架也有很多類型，重要的不在于他的設置有多豐富，而是這個框架的使用是否明確。

正好，這款options framework 框架就貼心的準備了一款主題來幫助各位新手開發(fā)者來了解這套框架，可惜的是，即使有這套主題的幫助，很多新手開發(fā)者對此也是一知半解，難以使用，這次在網(wǎng)絡上找到了一份有詳細使用教程的文檔，大家一起來學習下。

• 原文來源：詳情
• 框架下載：詳情

下載并解壓 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';

需要注意的是，對于默認主題一般已經(jīng)有一個 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數(shù)組
$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"=>'調用默認編輯器時使用'
);

其他參數(shù)沒有什么需要特殊說明的，唯一需要說明的是 type ，目前 Options Framework 支持的選項類型主要有：text、textarea、checkbox、select、radio、upload（上傳圖片）、images（充當一個單選按鈕，更形象化）、background、multicheck、color、typography、editor 。

修改輸出方式

Options Framework 默認是使用 of_get_option() 作為輸出函數(shù)的，其默認輸出方式為：

<?php echo of_get_option('元素id', '默認輸出內容'); ?>

對于該函數(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 修改為任意你想修改的內容，同時在調用選項的值時，輸出函數(shù)也要替換為新的輸出函數(shù)名。

添加 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開發(fā)教程的全部內容了，如果你還在找一套更加專業(yè)的開發(fā)框架，你也可以看看這套：