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

自己寫了一個主題沒有設置界面，想弄一下SEO還要編輯文件，面對著一大批代碼很煩有木有！

外國的大神寫了一個設置框架：Options Framework

這貨是輕量級的，使用wp的api，提供了常用選項，使用起來也很簡單。

項目主頁：https://github.com/devinsays/options-framework-theme

直鏈下載新版本：https://github.com/devinsays/options-framework-theme/archive/master.zip

剛點開感覺很奇怪對吧？

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

廢話不多說開始吧~

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！）：

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

5.使用JavaScript

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

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

6.完

此教程只是簡單地告訴你如何使用此框架，要靠你自己去探索才能真正地熟練地使用它！

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。