0°

Codestar Framework-简约实用的主题选项框架

Codestar Framework,一个轻量且易用的 WordPress 选项框架

官网:

http://codestarframework.com/

文档:

http://codestarframework.com/documentation/

演示:

http://codestarthemes.com/plugins/codestar-framework/wp-admin/

Github:

https://github.com/Codestar/codestar-framework/#installation

本站下载:

来源于:

https://salongweb.com/codestar-framework.html

Codestar Framework,一个轻量且易用的 WordPress 选项框架,在萨龙龙最新设计开发的企业教育培训类 WordPress 主题 Slearn 中已经使用了些框架。之前的主题都是使用 Redux Framework 选项框架,很强大实用,但不是『开箱即用的』,需要修改或者删除一些模块,比如广告。对比了这两个选项框架,各有千秋,Redux 免费的只提示主题选项的设置,Codestar 则提供除了了主题选项外的 Metaboxes,Taxonomy,Shortcoder和Customizer 四种类型的选项,这些将包括一个主题所有选项的需求,了解之后实在爱不释手。

选择 Codestar 另一个重要原因是有 Group Field 模块,可设置任意字段并无限增加新的字段,这个功能在幻灯片的设置选项中尤其重要。Redux 的 Slides 模块只提供默认的几个选项,如果幻灯片想使用两个按钮,就无从下手了。相对来说 Codestar 的模块还是有很多不足,但不足的地方完全不影响使用,所以今天我来介绍下 Codestar Framework。

Codestar Framework-简约实用的主题选项框架

一、五大选项

1、框架选项

内置OOP范例,具有大量自定义字段和选项,高度现代化和先进的框架。

2、Metaboxes 选项

允许您将自定义 metabox 设置添加到所有页面和文章中,并提供具有大量高级设置的字段。

3、分类选项

允许您将自定义分类设置添加到所有类型的分类,标签或CPT,并提供具有大量高级设置的字段。

4、简码选项

附带预先创建好的简码编辑器来管理,非常简单灵活构建无限布局。

5、自定义工具选项

继承默认的WordPress定制器,并集成自己的自定义字段,实时定制您的网站更加强大。

二、官网及文档

1、官网:http://codestarframework.com/

2、文档:http://codestarframework.com/documentation/

三、使用

1、集成在主题中

  • a、从 Github 下载插件
  • b、将 zip 压缩包解压并放在主题根目录下,并重命名:cs-framework
  • c、在主题函数文件 functions.php 添加代码:
require_once get_template_directory() .'/cs-framework/cs-framework.php';
//牧:或者,加这个。
//引入设置框架
require_once get_template_directory() .'/cs-framework/codestar-framework.php';
  • d、现在可以准备配置你的框架、Metabox、简码、自定义工具
  • e、所有的选项设置在themename/cs-framework/config目录下
  • 详情请阅读文档

2、集成在插件中

  • 从 Github 下载插件
  • 方法1:解压到wp-content/plugins/cs-framework你的插件目录下
  • 方法2:在网站后台上传安装插件,并激活它
  • 现在可以准备配置你的框架、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的目录情况下重写一个文件,只需创建一个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)
  • Metabox框架(Metabox Framework)
  • 分类框架(Taxonomy Framework)
  • WP自定义框架(WP Customize Framework)
  • 简码生成(Shortcode Generator)
  • 支持子主题(Supports Child Themes)
  • 验证字段(Validate Fields)
  • 清理字段(Sanitize Fields)
  • 本地化(Localization)
  • 字段依赖(Fields Dependencies)
  • 支持混合字段(Supports Multilangual Fields)
  • 复位/恢复/导出/导入选项(Reset/Restore/Export/Import Options)
  • 还有很多…

八、选项字段

  • 文本(Text)
  • 文本域(Textarea)
  • 复选框(Checkbox)
  • 单选框(Radio)
  • 选择项(Select)
  • 数字(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)
  • 和很多扩展字段

牧泽原创部分:

如何使用?

上面已经提到了,

那么,如何自定义选项?

在主题的functions.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',
      ),

    )
  ) );

}
?>
Codestar Framework-简约实用的主题选项框架

如何使用?

相关位置添加如下代码

<?php $options = get_option( 'my_framework' ); // 框架的唯一 id

echo $options['opt-textarea']; // id of the field
?>

为了function.php文件简单一点,可以参考这篇文章:

WordPress的functions.php引用其他php文件-WordPress主题开发

07
你也有好的想法?点击右下角的“灯泡”,开始你的创作。与我们一起,让生活更愉悦,让工作更高效,让世界更美好!
随记
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论