jkOptionsFramework 是由即刻学术开发的一款 Typecho 选项框架，移植于WordPress。

目前完成：

• [x] 图片设置、图片选择、图片上传、图库管理
• [x] 颜色选择器、日期选择器
• [x] 基本的Radio、Text、TextArea、Select
• [x] 设置分组、设置增加选项（扩展选项）
• [x] 设置混合选项、不同组件嵌套如：Accordion、Tab、Fiedset
• [x] 代码编辑器：codemirror支持
• [x] 颜色：颜色选择、颜色分组、链接颜色、颜色卡
• [x] 设计字段：背景（链接、颜色、位置），排版（字体大小颜色、文本对齐、间距等），宽度高度（px为单位），间距，边框，微调器，数字
• [x] 额外组件：滑块组件，可拖动排序组件，switcher开关组件，图标组件，地图组件，链接组件，日期选择，时间选择，图片选择，按钮组，
• [x] 组件依赖：例如打开开关时才显示相应的选项
• [x] 验证器：邮件、数子、email
• [x] 避雷针：将字符串a替换为b//没啥用
• [x] 备份以及导出

它能做什么？

熟悉Typecho的伙计都知道，typecho 以简洁为主，然而，开发主题或者插件的过程中，其设置选项对于用户来说并不是很友好。 由于内容很多，只简要介绍部分设置。 例如，一个typecho 的主题设置可能长这样：

而使用 jkOptionsFramework 后，它可以是这样：

下面以一个简单的单页设置为例：

点击上传按钮即可上传图片。 更好的图片上传：

更好的媒体库：

当然也可以直接选择图片：

更好的颜色选择：

当然也可以混合设置：

添加图标：

快速入门指南

下载最新版本 的插件，上传自Typecho 插件目录，并修改目录名为 jkOptionsFramework ，然后启用插件即可。 打开你的主题的 functions.php 然后粘贴以下代码： 需要注意的是，该选项插件与Typecho的设置选项并无关联。

// Check core class 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'  => 'Tab Title 1',
    'fields' => array(

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

    )
  ) );

  // Create a section
  CSF::createSection( $prefix, array(
    'title'  => 'Tab Title 2',
    'fields' => array(

      // A textarea field
      array(
        'id'    => 'opt-textarea',
        'type'  => 'textarea',
        'title' => 'Simple Textarea',
      ),

    )
  ) );

}
function themeConfig($form)
{
    $params = [
        'args'=> [
            'framework_title' => 'xxx主题设置',
            'footer_text' => '感谢您使用xxx主题',
        ]
    ];
    CSF::setup('my_framework', $params);
    CSF::setTypechoOptionForm($form);
}

如何获取一个配置的值呢？

$options = get_option( 'my_framework' ); // 唯一的识别号

echo $options['opt-text']; // 选项的id
echo $options['opt-textarea']; // 选项的id

更多详情请参考：jkOptionsFramework文档

https://www.wolai.com/xvse6BfZ5vMxd9LgjYBjRM