Codestar Framework,一個輕量且易用的 WordPress
選項框架,在薩龍龍最新設計開發(fā)的企業(yè)教育培訓類 WordPress 主題 Slearn 中已經(jīng)使用了些框架。之前的主題都是使用 Redux?Framework 選項框架,很強大實用,但不是『開箱即用的』,需要修改或者刪除一些模塊,比如廣告。對比了這兩個選項框架,各有千秋,Redux 免費的只提示主題選項的設置,Codestar 則提供除了了主題選項外的 Metaboxes,Taxonomy,Shortcoder和Customizer 四種類型的選項,這些將包括一個主題所有選項的需求,了解之后實在愛不釋手。
- 資料來源:詳情
相對來說 Codestar 的模塊還是有很多不足,但不足的地方完全不影響使用,所以今天我來介紹下 Codestar Framework。

三、使用
1、集成在主題中
- a、從?Github?下載插件
- b、將 zip 壓縮包解壓并放在主題根目錄下,并重命名:cs-framework
- c、在主題函數(shù)文件 functions.php 添加代碼:
//引入設置框架
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)在可以準備配置你的框架、Metabox、簡碼、自定義工具
- e、所有的選項設置在
themename/cs-framework/config
目錄下 - 詳情請閱讀文檔
2、集成在插件中
- 從?Github?下載插件
- 方法1:解壓到wp-content/plugins/cs-framework你的插件目錄下
- 方法2:在網(wǎng)站后臺上傳安裝插件,并激活它
- 現(xià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
文件中的配置
五、啟用簡約設計模式
插件默認的樣式是深黑色的,在你的主題或插件中添加以下的代碼,亮灰色樣式就會被激活。
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
七、特色
- 選項框架(Options Framework)
八、選項字段
- 文本(Text)
- 文本域(Textarea)
- 復選框(Checkbox)
- 單選框(Radio)
- 選擇項(Select)
- 數(shù)字(Number)
- 圖標(Icons)
- 群組(Group)
- 圖像(Image)
- 上傳(Upload)
- 畫廊(Gallery)
- 分選器(Sorter)
- 所見即所得編輯器(Wysiwyg)
- 開關切換器(Switcher)
- 背景(Background)
- 顏色取樣(Color Picker)
- 混合復選框(Multi Checkbox)
- 圖像復選框(Checkbox Image Select)
- 圖像單選框(Radio Image Select)
- 文本排版(Typography)
- 備份(Backup)
- 頭標題(Heading)
- 子標題(Sub Heading)
- 字段集(Fieldset)
- 通知(Notice)
- 和很多擴展字段
原創(chuàng)部分
如何使用?
上面已經(jīng)提到了,
那么,如何自定義選項?
在主題根目錄下的functions.php
文件的<?php
下添加如下實例代碼即可。
//自定義的framework設置框架
// 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' => '選項卡一',
'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' => '選項卡二',
'fields' => array(
array(
'id' => 'opt-textarea',
'type' => 'textarea',
'title' => 'Simple Textarea',
),
)
) );
}

相關位置添加如下代碼
$options = get_option( 'my_framework' ); // 框架的唯一 id
echo $options['opt-textarea']; // id of the field
為了function.php文件簡單一點,可以參考這篇文章:
實例
Codestar Framework 官網(wǎng)只有代碼文檔而沒有使用的例子,幸好,我最近正在學習這個框架,并且正在漢化它,而且,還在制作一些使用的例子。敬請期待吧!
Codestar Framework使用的例子,這是一份主題,在頁底下載:
我只漢化了一部分,而且還很粗糙。

請你在后臺安裝他,并新建一個頁面:

這只是初步的研究成果,希望能幫助到您。
