WordPress開發 - Options Framework輕量級后臺框架使用設置舉例

這款框架我在蠻多免費主題上就看到有在使用，盡管框架的作者將其做成主題方便各位理解，但因為是國外開發的原因，還是有很多新手wordpress開發者對這款框架不是很理解，我收集了一些教程供各位wordpress開發者參考和學習。

• 原文參考：511遇見
• 原文參考：wordpress大學

Options Framework新特性

1. 輕量級
2. 基于wordpress原生api實現，提供了比較全面的常用選項
3. 界面與wordpress統一，當然也可以自己定制
4. 功能強大，使用簡單

Options Framework其實是一款主題，安裝啟用，就可以看到效果了，這時候會在后臺→外觀菜單下面多出來一個“Theme Options”的菜單（如果需要在左側主菜單中顯示該選項，可通過add_menu_page()實現，打開后即可看到所有的設置選項，下圖已經修改為“主題選項”了如下圖：

框架使用方法

1、復制Options Framework主題文件夾下的inc、images文件夾和options.php，放到你的主題根目錄下面

2、然后在你的主題的funtions.php加入以下代碼（該代碼在主題版的funtions.php開頭）：

if ( !function_exists( 'optionsframework_init' ) ) {
 define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/' );
 require_once dirname( __FILE__ ) . '/inc/options-framework.php';
}

如果你需要在設置面板中加入javascript代碼，在上面代碼后面加入以下代碼：

add_action('optionsframework_custom_scripts', 'optionsframework_custom_scripts');
function optionsframework_custom_scripts(){ ?>"text/javascript">
        your javascript code...
    script>

如果你需要在設置面板后面加入自定義內容，需要在以上代碼中加入以下代碼：（第三頁將說明如何在設置面板后面加入一個自定義面板）

add_action(class="hljs-string">'optionsframework_after',class="hljs-string">'options_after', class="hljs-number">100);
class="hljs-function">class="hljs-keyword">function class="hljs-title">options_afterclass="hljs-params">() { class="hljs-meta">?>
    your html code...

}

Options Framework產生的后臺選項支持功能

后臺頁面是選項卡式的，非常美觀大方，支持的功能也很多，包括：

• 表單按鈕（text、checkbox、radio、select）
• 圖片上傳
• 背景圖片和背景色
• 字體選擇
• 圖片選擇（例如用來選擇主題的layout）
• 幫助信息
• 復位按鈕

自定義選項

打開options.php中，模仿以下代碼能做出自己的選項。

<?php
/* options.php line 60 */
//初始化存儲選項的$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'
);

其中：?name?– 選項的label名稱

id?– 這個id很重要，區分每個選項，必須是唯一的，存儲和獲取選項時這個作為鍵使用

type?– 不同type產生不同的選項

前臺調用舉例

前臺調用的話可以看原來主題版的index.php 。這里給出一些示例：

<?php echo of_get_option('example_checkbox', 'no entry' ); ?> 
 <?php if ( of_get_option('example_uploader') ) { ?>
            <img src="<?php echo of_get_option('example_uploader'); ?>" />
            <?php } ?> 
<?php $multicheck = of_get_option('example_multicheck', 'none' ); ?>
            <?php print_r($multicheck); ?> 
<?php
            if ( is_array($multicheck) ) {
                foreach ($multicheck as $key => $value) {
                    // If you need the option's name rather than the key you can get that
                    $name = $test_array_jr[$key];
                    // Prints out each of the values
                    echo '<li>' . $key . ' (' . $name . ') = ' . $value . '</li>';
                }
            }
            else {
                echo '<li>There are no saved values yet.</li>';
            }
            ?>

使用Options Framework詳解

1.入門，Options Framework（下簡稱框架）的設置選項以如下形式出現：

$options[] = array(
        "name"    =>'',  //選填，選項名稱
        "desc"    =>'',  //選填，選項說明
        "id"      =>'',  //必填，對應表單元素ID，該項作為唯一標識，不可與其他選項重復！
        "std"     =>'',  //可選，元素默認值
        "class"   =>'',  //可選，該類型元素class
        "type"    =>'',  //可選，表單元素類型
        "settings"=>''   //可選，僅當調用編輯器時使用
    );

比如：

$options[] = array(
        "name"=>'網站公告：',
        "desc"=>'輸入您的網站公告，不要超過50個字符。',
        "id"=>'site_notices',
        "std"=>'輸入您的網站公告',
        "class"=>'mini',
        "type"=>"text"
    );

2.添加選項卡，在需要加入的地方加入如下代碼：

$options[] = array(
		'name' => '新選項卡',
		'type' => 'heading'
    );

再在以上代碼后面加入需要添加的選項保存預覽。

3.調用

通過以上兩步，后臺設置部分基本完成，那么主題如何調用這些設置值呢？框架自帶的主題中明確說明了每一種類型的調用方法，可參考主題中的調用方法，簡單來說通過of_get_option($id,$default)即可調用保存的值，其中$id為必選值，即為需要調用元素的id值，$default為可選值，表示當所調用的元素值不存在時顯示的值，如：

echo of_get_option('site_notices', '暫無公告信息！'); ?>

注意，of_get_option()只是返回了一個值，需要用echo輸出才能在主題中顯示，某些情況下，也可能需要使用如下代碼：

<?php
if(of_get_option("example_checkbox")){
    echo "checkbox is checked";
}else{
    echo "checkbox is not checked";
} ?>

通過以上兩段代碼，應該能較深刻的理解為什么要用echo輸出。

4.修改輸出方式，

如果想修改以上函數名，找到inc/options-framework.php中478和480兩行，將“of_get_option”替換為需要的函數名稱即可。如替換為get_opt，則可以通過get_opt($id,$default)調用。

5.主題本地化，

如果主題需要支持多種語言，則需要在所有文件中替換“options_framework_theme”為您的主題名稱或您想要使用的名稱。

注意事項

options_framework默認過濾js、src等標簽

使用Options Framework框架為自己的主題添加設置頁面

剛點開感覺很奇怪對吧？

沒錯這貨本身是一個主題……

廢話不多說開始吧~

1.在主函數functions.php中加入以下代碼（其實這個在Options Framework主題主函數functions.php里）（記得要放在 <?php 后）：

if (!function_exists('optionsframework_init')){
 define('OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri().'/inc/');
 require_once dirname(__FILE__).'/inc/options-framework.php';
}
?

然后下載上面那個主題，把其中的inc、images文件夾和options.php文件放入你的主題根目錄

打開你的后臺~是不是多了一個設置頁面呢？

2.添加設置選項

一般，options.php中選項是以這種方式出現的（非標明必填即為選填）：

$options[] = array(
"name" =>'', //選項的名稱
"desc" =>'', //介紹
"id" =>'', //必填，唯一標示
"std" =>'', //元素默認值
"class" =>'', //該類型元素class
"type" =>'', //表單元素類型
"settings"=>'' //僅當調用編輯器時使用
);

如果你想添加最上面那個可以切換的選項卡，添加以下代碼（注：自此段代碼開始直到下一個此類代碼為止，中間這一段都被視作是這個選項卡以內的！）

$options[] = array(
'name' => '新選項卡',
'type' => 'heading'
);

3.修改輸出方式（非必須）

Options Framework的原本輸出函數是of_get_option，如果你想更美觀地讓他出現，也為了便于記憶，可以進入inc/options-framework.php文件，找到72行和74行（以下1,2,3行分別對應72,73,74行）：

if ( ! function_exists( '輸出函數' ) ):
 
function 輸出函數( $name, $default = false ) {
?

比如說，你想要的輸出函數是get_jiecao，那么此處就為

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

4.調用設置※

可以使用以下代碼（此處的of_get_option被改成了get_jiecao，如有需要請自行修改）（請注意要使用echo！）：

echo get_jiecao('相應的id', '如果沒有內容則輸出我'); ?>

5.使用JavaScript

由于此框架的安全機制，回自動過濾掉js，object等，如需使用（比如說你想加一個統計代碼，就必須使用這個否則js會無效），請在第一步的代碼后加入此段代碼：

add_action('optionsframework_custom_scripts', 'optionsframework_custom_scripts');
function optionsframework_custom_scripts(){ ?>
<script type="text/javascript">
 你的js代碼
script>

2019年10月27日更新：

收到?xiaoz.me?博主的提醒，說按照上面的第3 、4步無法正確獲取到字段的值，究其原因是默認保存的選項值不是當前主題名稱，導致獲取有誤。我們可以在 options.php 文件看下面的代碼：

我們可以手動修改下這個選項的值，或者將這個函數代碼修改一下，自動獲取當前主題的選項值：

上圖中加紅色框的代碼就是修改部分，具體代碼如下：

  $option_name = get_option( 'stylesheet' );
  $option_name = preg_replace( "/\W/", "_", strtolower( $option_name ) );
  return $option_name;

希望對大家有所幫助，感謝 xiaoz。

如果感覺以上wordpress開發教程的內容還不夠的話，還可以看看這篇文章：