Codestar Framework，一個輕量且易用的 WordPress 選項(xiàng)框架，在薩龍龍最新設(shè)計開發(fā)的企業(yè)教育培訓(xùn)類 WordPress 主題 Slearn 中已經(jīng)使用了些框架。之前的主題都是使用 Redux?Framework 選項(xiàng)框架，很強(qiáng)大實(shí)用，但不是『開箱即用的』，需要修改或者刪除一些模塊，比如廣告。對比了這兩個選項(xiàng)框架，各有千秋，Redux 免費(fèi)的只提示主題選項(xiàng)的設(shè)置，Codestar 則提供除了了主題選項(xiàng)外的 Metaboxes，Taxonomy，Shortcoder和Customizer 四種類型的選項(xiàng)，這些將包括一個主題所有選項(xiàng)的需求，了解之后實(shí)在愛不釋手。
- 資料來源：詳情
相對來說 Codestar 的模塊還是有很多不足，但不足的地方完全不影響使用，所以今天我來介紹下 Codestar Framework。
三、使用
1、集成在主題中
- a、從?Github?下載插件
- b、將 zip 壓縮包解壓并放在主題根目錄下，并重命名：cs-framework
- c、在主題函數(shù)文件 functions.php 添加代碼：
//引入設(shè)置框架
require_once get_template_directory() .'/cs-framework/codestar-framework.php';文檔建議：
require_once get_theme_file_path() .'/inc/codestar-framework/codestar-framework.php';- d、現(xiàn)在可以準(zhǔn)備配置你的框架、Metabox、簡碼、自定義工具
- e、所有的選項(xiàng)設(shè)置在
themename/cs-framework/config目錄下 - 詳情請閱讀文檔
2、集成在插件中
- 從?Github?下載插件
- 方法1：解壓到wp-content/plugins/cs-framework你的插件目錄下
- 方法2：在網(wǎng)站后臺上傳安裝插件，并激活它
- 現(xiàn)在可以準(zhǔn)備配置你的框架、Metabox、簡碼、自定義工具
- 查看
themename/cs-framework/config里的配置文件 - 詳情請閱讀文檔
四、啟用/禁用模塊
添加 define 代碼到themename/functions.php文件中：
define( 'CS_ACTIVE_FRAMEWORK', true ); // default true
define( 'CS_ACTIVE_METABOX', false ); // default true
define( 'CS_ACTIVE_TAXONOMY', false ); // default true
define( 'CS_ACTIVE_SHORTCODE', false ); // default true
define( 'CS_ACTIVE_CUSTOMIZE', false ); // default true
或者直接修改/cs-framework/cs-framework.php文件中的配置
五、啟用簡約設(shè)計模式
插件默認(rèn)的樣式是深黑色的，在你的主題或插件中添加以下的代碼，亮灰色樣式就會被激活。
define( 'CS_ACTIVE_LIGHT_THEME', true ); // default false六、重寫文件
你可以在不改動themename/cs-framework的目錄情況下重寫一個文件，只需創(chuàng)建一個themename/cs-framework-override文件夾，例如：
themename/cs-framework-override/config/framework.config.php
themename/cs-framework-override/functions/constants.php
themename/cs-framework-override/fields/text/text.php七、特色
- 選項(xiàng)框架(Options Framework)
八、選項(xiàng)字段
- 文本（Text）
- 文本域（Textarea）
- 復(fù)選框（Checkbox）
- 單選框（Radio）
- 選擇項(xiàng)（Select）
- 數(shù)字（Number）
- 圖標(biāo)（Icons）
- 群組（Group）
- 圖像（Image）
- 上傳（Upload）
- 畫廊（Gallery）
- 分選器（Sorter）
- 所見即所得編輯器（Wysiwyg）
- 開關(guān)切換器（Switcher）
- 背景（Background）
- 顏色取樣（Color Picker）
- 混合復(fù)選框（Multi Checkbox）
- 圖像復(fù)選框（Checkbox Image Select）
- 圖像單選框（Radio Image Select）
- 文本排版（Typography）
- 備份（Backup）
- 頭標(biāo)題（Heading）
- 子標(biāo)題（Sub Heading）
- 字段集（Fieldset）
- 通知（Notice）
- 和很多擴(kuò)展字段
原創(chuàng)部分
如何使用？
上面已經(jīng)提到了，
那么，如何自定義選項(xiàng)？
在主題根目錄下的functions.php文件的<?php下添加如下實(shí)例代碼即可。
//自定義的framework設(shè)置框架
// Control core classes for avoid errors
if( class_exists( 'CSF' ) ) {
//// Set a unique slug-like ID
$prefix = 'my_framework';
//// Create options
CSF::createOptions( $prefix, array(
'menu_title' => 'My Framework',
'menu_slug' => 'my-framework',
) );
//// Create a section
CSF::createSection( $prefix, array(
'title' => '選項(xiàng)卡一',
'fields' => array(
//// A text fieldarray('id' => 'opt-text','type' => 'text','title' => 'Simple Text',
),
array(
'id' => 'mirages_testm',
'type' => 'media',
'title' => '媒體一',
'library' => 'image',
),
)
) );
CSF::createSection( $prefix, array(
'title' => '選項(xiàng)卡二',
'fields' => array(
array(
'id' => 'opt-textarea',
'type' => 'textarea',
'title' => 'Simple Textarea',
),
)
) );
}
相關(guān)位置添加如下代碼
$options = get_option( 'my_framework' ); // 框架的唯一 id
echo $options['opt-textarea']; // id of the field為了function.php文件簡單一點(diǎn)，可以參考這篇文章：
實(shí)例
Codestar Framework 官網(wǎng)只有代碼文檔而沒有使用的例子，幸好，我最近正在學(xué)習(xí)這個框架，并且正在漢化它，而且，還在制作一些使用的例子。敬請期待吧！
Codestar Framework使用的例子，這是一份主題，在頁底下載：
我只漢化了一部分，而且還很粗糙。
請你在后臺安裝他，并新建一個頁面：
這只是初步的研究成果，希望能幫助到您。
