有朋自远方来,不亦乐乎。
主题选项框架:Codestar Framework
原创 橘子书  发布于 4个月前 ( 09-02 ) 阅读: 661 次 评论: 4 条 A+

Codestar Framework是我一直在使用的,如果不使用选项框架的话,几乎就它没别的了。

轻量级主题后台框架

折腾主题,免不了要接触到主题的后台框架。有能力的大神自己写,惰惫的大神二开或者套用市面上的开源主题框架。至于小白...

发布时间:2017/06/26 作者:橘子书 评论:4

这个选项框架其实蛮轻量级的,而且作者也一直在更新(虽说更新幅度不频繁,到现在三四年了也才勉强1.0.2版本)。

正如官方所宣称的那般:A Lightweight and easy-to-use WordPress Options Framework(一个轻量级和易于使用的WordPress选项框架)。

Codestar Framework真的很轻量级、很强大,扣除FontAwesome字体文件1.02MB(4.7版本),整个框架包也才900KB左右(这也是我为什么会考虑给Leo前后端替换字体图标的原因)。

官方一个橘子半个橙
官网
Github
开发文档
升级上有蔚蓝天,垂光抱琼台

Codestar Framework虽然升级不频繁,但对于一个常青主题来说,维护个三四五年都不是事儿(比如begin、dux……),所以Codestar Framework适当的紧跟更新是必须的。

以下记录Codestar Framework更新覆盖新版本需注意的地方:

  1. 删除codestar-framework根目录的.editorconfig、.gitignore、CHANGELOG.md、README.md文件;
  2. 删除codestar-framework/assets/scss ;(这个文件夹的文件用不到,除非要用scss而不是css)
  3. 删除codestar-framework/assets/css里面的cs-framework.css、cs-framework-rtl.css、font-awesome.css文件;(注意font-awesome.css里面的路径)
  4. 删除codestar-framework/assets/js里面的cs-framework.js、cs-plugins.js文件;
  5. 保留codestar-framework/config里面的文件;(这很重要!!!!)
  6. 注意codestar-framework/fields里面是否有自定义的type选项类型;
  7. 修改codestar-framework/functions/enqueue.php里面的css与js文件路径;(因为保留了min文件,所以需要手动修改正确路径)
  8. 删除codestar-framework/languages里面的非中文语言翻译文件;
  9. 修改codestar-framework根目录的cs-framework.php,开启或关闭一些modules。

就酱,其他的应该没啥了。

实操爽,框架包降至867KB.——2018.9.3

昨天写完这篇文章,思来想去最终着手把Leo前后端的字体图标都给换了,毕竟说是计划下个季度版或下下下下……下次再搞,但又有谁能保证那会有那份心态呢!

所以,一个字搞,别怂!

简单说下战果:站长心里美滋滋,选项框架文件包直接从1.92MB降至867KB。完美!

因为是在框架版本升级后的基础上替换字体图标,为此有一些注意点要牢记:

  1. 直接删掉codestar-framework/assets/css/fonts(整个fonts文件夹);
  2. 直接删掉codestar-framework/assets/css/font-awesome.min.css文件(当然,也可以不删,省得操作下面的一些步骤,而是直接替换掉里面的代码,重新定义新的字体图标样式);
  3. 在合适的地方新建一个.css文件,且里面重新定义新字体图标样式;
  4. 删除codestar-framework/functions/enqueue.php里面关于font-awesome.min.css文件的引入,且重新引入新的.css文件(后端引入新图标);
  5. 修改codestar-framework/fields/icon/01-font-awesome.json里面的代码,替换icon type旧图标为新图标引入(很重要!!!);
  6. 打开codestar-framework/assets/css/cs-framework.min.css,找到.cs-framework .cs-nav ul li .cs-arrow:after,重新定义它;
  7. 在新的.css文件,重新定义fa-question-circle:before,fa-eye-slash:before。
  8. 前端加载新的.css文件(方法自行百度或谷歌,实在不会就打开主题根目录的header.php,看看人家是怎么引入css的);
  9. 替换前端一切的旧图标调用代码为新图标调用代码;
  10. 收尾工作:后端主题选项面板跟metabox面板,如果有使用旧图标,那么就顺手收拾一下,省得出现空白一片的框框……
  11. 前端style.css样式因为图标改变,要微调;
  12. 打开style.css,找到.fa,调整为新图标的标签,从而兼容主题前端样式;

以上注意点,基本解决了Leo主题的图标替换问题(好像整个主题包就选项框架文件夹里面,遗留了五处fa fa-图标的调用,而且还是我从来都没使用过的功能选项,可以忽略不计),所以应该没有其他的了,现在脑子明显不够用,装逼都缺钙啦……

Principle Team
龙砚庭官方QQ群,一个坚持强怼的7P成员群!
10人已关注

目前评论:4   其中:访客  2   博主  2

发表评论

莫慌,小狮子正在努力加载评论...
  1. 晓庄
    晓庄2 ( 2018.09.02 21:07:46 )  板凳

    我只能说很骚。

  2. 龙笑天
    龙笑天3 ( 2018.09.02 20:31:20 )  沙发

    这主题框架相当强大,找机会折腾下~ :idea: