Codestar Framework主題后臺框架介紹和部署WordPress教程記錄

麥子 主題插件98字?jǐn)?shù) 3294閱讀10分58秒閱讀模式

Codestar Framework 框架是一個應(yīng)用在WordPress主題和插件開發(fā)后臺比較常用的框架之一。比如我們看到很多的國內(nèi)國外的WordPress主題和插件都是用的Codestar Framework框架開發(fā)的,能夠提高開發(fā)的效率。今天我們就一起來介紹這款Codestar Framework框架。

Codestar Framework 在2.0之前均是免費開源的,但是從2.0之后,他出來2個版本。Free Version、Premium Version 版本。那兩者到底有什么區(qū)別?

我們可以看到,CSF框架免費版本支持Admin Option Framework管理框架,但是對于菜單、用戶自定義、側(cè)邊欄、短代碼等框架是需要Pro版本支持的,但是我們可以看到大部分的簡單的主題開發(fā)基本上免費CSF框架就足夠用的,如果我們確實需要深入開發(fā)全部功能的,我們需要選擇一個高級版本。

如果我們確實需要深入開發(fā)主題或者插件的,建議還是選擇付費的框架,且是永久授權(quán)的。我們可以確保最新版本更新升級,畢竟免費的框架像OP等,還有很多的免費框架都有好多年沒有升級更新,擔(dān)心安全問題或者兼容問題。

如果我們是準(zhǔn)備主題開發(fā)和插件開發(fā)的,建議直接購買付費版本而且是永久不限制使用的。永久版權(quán)49美元,而且不限制項目,這個對于我們準(zhǔn)備職業(yè)開發(fā)的來說是有必要的。這里要順帶提一下Options Framework框架,他是不支持插件的,且OP框架已經(jīng)很久不維護(hù)更新。

我們可以看到最新才更新且兼容最新WP5.9版本。如果我們選擇其他開源免費的WordPress選項框架,升級兼容沒有得到及時的更新,這個對于我們?nèi)f一需要長期維護(hù)的商業(yè)主題插件確實是比較麻煩的。

我們一起看看如何將 Codestar Framework 框架部署到我們的WordPress主題開發(fā)里。

我們將解壓好的CF框架文件夾(codestar-framework)放到當(dāng)前需要采用框架的主題目錄的 inc 文件夾里面。inc 文件夾也是我們自己創(chuàng)建。

然后在 Functions.php 文件中引用框架。

require_once get_theme_file_path() .'/inc/codestar-framework/codestar-framework.php';

這里的URL目錄要配合我們上面的目錄路徑一致,如果你調(diào)整的這里也要調(diào)整。然后我們在 codestar-framework 創(chuàng)建一個 options 目錄。這里我們單獨將配置文件獨立出來,不準(zhǔn)備和 Functions.php 湊到一起,因為 這個 Functions.php 文件以后還有其他站點功能需要用到。

然后我們創(chuàng)建一個 options.lezaiyun.php 文件。

<?php

if( class_exists( 'CSF' ) ) {

$prefix = 'my_framework';

//
// Create options
//
CSF::createOptions( $prefix, array(
'menu_title' => '主題設(shè)置',
'menu_slug' => 'csf-demo',
) );

//
// Create a section
//
CSF::createSection( $prefix, array(
'title' => '基礎(chǔ)設(shè)置',
'icon' => 'fas fa-rocket',
'fields' => array(

//
// A text field
//
array(
'id' => 'opt-text',
'type' => 'text',
'title' => 'Text',
),

array(
'id' => 'opt-textarea',
'type' => 'textarea',
'title' => 'Textarea',
'help' => 'The help text of the field.',
),

array(
'id' => 'opt-upload',
'type' => 'upload',
'title' => 'Upload',
),

array(
'id' => 'opt-switcher',
'type' => 'switcher',
'title' => 'Switcher',
'label' => 'The label text of the switcher.',
),

array(
'id' => 'opt-color',
'type' => 'color',
'title' => 'Color',
'default' => '#3498db',
),

array(
'id' => 'opt-checkbox',
'type' => 'checkbox',
'title' => 'Checkbox',
'label' => 'The label text of the checkbox.',
),

array(
'id' => 'opt-radio',
'type' => 'radio',
'title' => 'Radio',
'options' => array(
'yes' => 'Yes, Please.',
'no' => 'No, Thank you.',
),
'default' => 'yes',
),

array(
'id' => 'opt-select',
'type' => 'select',
'title' => 'Select',
'placeholder' => 'Select an option',
'options' => array(
'opt-1' => 'Option 1',
'opt-2' => 'Option 2',
'opt-3' => 'Option 3',
),
),


array(
'id' => 'opt-icon',
'type' => 'icon',
'title' => 'Icon',
),



)
) );


}

這里先放一個簡單的演示文件。這里的規(guī)則我們也可以參考CSF的演示文檔,然后進(jìn)行漢化和修改。演示文檔里包括有很多常用的文本,比如上傳、文本框、選擇框等等。

然后我們需要到 codestar-framework 文件夾中的 codestar-framework.php 文件引用,添加。

require_once plugin_dir_path(__FILE__) .'options/options.lezaiyun.php';

這樣子,我們就可以去WP后臺看看我們這個主題。

這里我用CSF框架自帶的基礎(chǔ)功能可以作為主題的后臺,是不是比我們自己做后臺簡單很多?那我們?nèi)绾握{(diào)用后臺設(shè)置配置好的參數(shù)呢?

我們需要先看下 options.lezaiyun.php 文件上面的:

$prefix = 'my_framework';

這個 "my_framework" 可以根據(jù)我們的需要修改自定義創(chuàng)意的,比如 lezaiyun_framework,因為后面調(diào)用數(shù)據(jù)前端顯示的時候需要用到。

<?php echo get_option('lezaiyun_framework')['文本ID']; ?>

或者我們也可以自定義更短的。

在 Functions.php 自定義獲取數(shù)據(jù)方式:

if (! function_exists('lezaiyun')) {
function lezaiyun($option = '', $default = null) {
$options = get_option('my_framework');
return (isset($options[$option])) ? $options[$option] : $default;
}
}

這樣我們調(diào)用的時候直接用:

<?php echo lezaiyun('文本ID'); ?>

這樣是不是更簡潔。

這樣,我們就完成Codestar Framework框架的部署到WordPress主題中,我們可以在后端設(shè)置需要調(diào)用的參數(shù)部分,然后在前端主題里調(diào)用出來,這樣就可以依托Codestar Framework框架做比較豐富的主題,而不是讓用戶在主題里修改代碼。

投上你的一票
 
  • 本文由 麥子 發(fā)表于 2024年10月31日 13:05:47
  • 轉(zhuǎn)載請務(wù)必保留本文鏈接:http://bjj.org.cn/codestar-framework.html