Hi!请登陆

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

2021-1-2 67 1/2

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

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

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

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

基本介绍

  • Redux的官方网站:https://reduxframework.com/
  • Redux文档查询:https://docs.reduxframework.com/core/
  • Github:https://github.com/ReduxFramework/redux-framework

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

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

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

如何使用它

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

1、若要硬啃

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

2、若不想这么折腾

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

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

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

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

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

以上的设置项相比 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!

相关推荐