WordPress后台主题设置框架ReduxFrameWork精简整合使用教程

投稿   INLOJV  2017-03-29 07:39:25  322 人阅读  18 条评论

投放广告联系   诚邀合作伙伴   赞助我们   公告栏   赞助光荣榜

一提到 wp 的后台设置框架最常见的要属 OptionsFramework ,国内不少原创商业主题均使用此框架来支持后端与前端的各种字段交互来曾强用户对主题的自定义深度。

OptionsFramework 我也试用过,各种设置项可以说已经很完备了,可以让开发者自由方便地分配想要的设置项目。只不过它有一个小小的瑕疵:就是设置项 tab 标签是横向排列的,一旦设置项分类比较多会被挤成两行,而且 UI 相对简陋。那么除了用 OptionsFramework 之外还有没有其他选择? 其实要说针对 wp 的后台设置框架确实还是挺多,光是搜索相关插件就有不少,但值得推荐的却相对罕有,除非开发者自己有能力写一个框架,否则还是选择“站在巨人的肩膀上”比较稳妥。

今天我要推荐的“巨人”有两个后台框架:1、ReduxFramework;2、CodestarFramework ,而本篇主要针对ReduxFramework的特点和使用进行详细介绍。

WordPress后台主题设置框架ReduxFrameWork精简整合使用教程 WordPress 第1张

基本介绍

WordPress后台主题设置框架ReduxFrameWork精简整合使用教程 WordPress 第2张

进入官网后可以看到Redux的几大特点:

  • 干净的代码库
  • 完全品牌化
  • 跨浏览器兼容
  • 无限的灵活性
  • 优秀的社区
  • 100% 开源

如何使用它

由于这东西是老外写的,首次接触 Redux,不仅由于是英文,自带的翻译中文语言包对有些英文不起作用,还因为它的各项设置构建功能比较强大,所以若从头啃起来还是比较硬的。

1、若要硬啃

可以从上面的 Github 链接进入下载页面,直接下载 Redux 的源码并解压。之后只需要在主题的 functions.php 引用 ReduxCore 文件夹里的 framework.php(框架核心文件) 以及 引用 sample 文件夹里的 sample-config.php(配置文件)就会在后台看到此框架的设置入口页面,然后根据配置文件上的各种设置项数组的书写规范来创建自己的设置项即可。

2、若不想这么折腾

所幸的是我熟悉过 OptionsFramework ,配置上的代码也比较容易辨认,我就把语言包给移除了,直接针对配置的 php 文件 __() 函数内的英文进行直接汉化,并且也把最常用也是最典型的一些设置项进行整理,同时精简掉极少用到的那一部份,最后就成了符合我们国人习惯的一个后台设置框架。如下图:(下载地址见下方)

WordPress后台主题设置框架ReduxFrameWork精简整合使用教程 WordPress 第3张

WordPress后台主题设置框架ReduxFrameWork精简整合使用教程 WordPress 第4张

WordPress后台主题设置框架ReduxFrameWork精简整合使用教程 WordPress 第5张

WordPress后台主题设置框架ReduxFrameWork精简整合使用教程 WordPress 第6张

以上的设置项相比 OptionFramework 要丰富一些,UI 也比较容易让人接受,而且是 ajax 保存,还是值得考虑的。不足的地方恐怕就是这个框架的文件大小了:解压之后将近 3.4M。虽说体积大,但进入后台设置页面在速度上并不会有太大影响,至于最终如何选择,看个人喜好了。

整合版下载地址以及使用教程

下载之后解压,得到 redux 文件夹,将 redux 文件夹复制粘贴到主题目录下,然后用 functions.php 引入,具体操作步骤如下:

(1) functions.php 引入配置和框架核心文件

  1. if ( !class_exists( 'ReduxFramework' ) && file_exists( get_template_directory() . '/redux/framework.php' ) && file_exists( get_template_directory() . '/redux/config.php' ) ){
  2.     require_once get_template_directory().'/redux/framework.php';
  3.     require_once get_template_directory().'/redux/config.php';
  4. }

其中 config.php 是配置文件,在里面你可以设置自己的全局变量和相关参数,还有一个 config-section.php 则是设置项模板文件,你可以参考这个模板里面的各种设置类型来创建自己的设置项!

(2) 通过参考 config-section.php 来创建修改自定义设置项目

例如:

  1. array(
  2.     'id'       => 'baidu_push_api',
  3.     'type'     => 'text',
  4.     'title'    => __( '百度推送接口', 'redux-framework-demo' ),
  5.     'subtitle' => __( '子标题', 'redux-framework-demo' ),
  6.     'desc'     => __( '描述', 'redux-framework-demo' ),
  7.     'default'  => '默认文字',
  8. )

修改每项 array里面的数组元素:

  • id : 设置项id
  • type : 设置项类型
  • title : 设置项标题
  • default : 设置项默认值
  • …… 不同设置类型有不同的元素参数

(3) 设置项调用 - 使用的是全局变量,这个变量名可以在 config.php 参数配置数组中找到 'global_variable' -> 'inlojv_inlobase' 来修改

使用时的调用方法

  1. <?php
  2. global $inlojv_inlobase// 引入全局变量一次即可,可以放在header.php
  3. $inlojv_inlobase['设置项id'];  // 在需要的位置使用 echo 输出值
  4. ?>

例如:上面 array中 你创建的设置项 id 为 baidu_push_api,在前端输出方式就为

  1. <?php echo $inlojv_inlobase['baidu_push_api'];?>

使用前务必引入全局变量一次。

  1. <?php global $inlojv_inlobase; ?>

最后特别强调:这个全局变量 $inlojv_inlobase 是我本人演示用的,在配置文件 config.php 里面你可以改为自己喜欢的名称。

好了,其实整个过程并不复杂:下载文件 —— 在 functions.php 引入文件 —— 自己依样画葫芦创建设置项 —— 前端输出  OK!

文章标签: ,   ,  
原文地址:http://www.inlojv.com/20170326redux.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 INLOJV 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress/zblogPHP免费响应式博客主题Blogs

 发表评论


  1. YangOne
    YangOne 【进士】 @回复

    挺好的,感谢分享

  2. 我要网赚
    我要网赚 【状元】 @回复

    每天都来拜读,学习

  3. 握富吧
    握富吧 【书童】 @回复

    留给喜欢折腾的人吧

  4. 呆毛电脑配置网
    呆毛电脑配置网 【进士】 @回复

    我是连前台设计都不会弄。更别说后台了。

  5. 爱时尚
    爱时尚 【尚书】 @回复

    感觉在这边能学到很多东西

  6. 橘子书
    橘子书 【丞相】 @回复

    这个框架没接触过。不过倒是多了不少选择!

  7. benen005
    benen005 【进士】 @回复

    再折腾折腾

  8. 明月登楼
    明月登楼 【王爷】 @回复

    OptionsFramework我以前用过一个主题好像就是用的这个,感觉还是很不错的,就是有点儿耗费资源!

  9. 捕鱼游戏
    捕鱼游戏 【举人】 @回复

    感谢分享

  10. 雅兮网
    雅兮网 【尚书】 @回复

    多一个选择是相当不错的啊,不过个人还是感觉后台框架OptionsFramework更加轻便一些,本就稍显臃肿的WP后台,不太适合复杂化了;当然题主分享的也是非常优秀的框架,值得尝试。

  11. 笛梵微商代理
    笛梵微商代理 【小白】 @回复

    一窍不通

  12. 磨浆机
    磨浆机 【秀才】 @回复

    不错,支持博主

  13. 金榜台博客
    金榜台博客 【状元】 @回复

    想不到还是沙发呀