WordPress主题后台选项开发框架 Options Framework 介绍
最近一直在学习 WordPress 主题后台的开发,看了不少教程,但作为一只PHP菜鸟,颇为感到吃力。后来谷歌搜索找到了这个WordPress主题后台选项开发框架 Options Framework。虽然这个后台框架解决了我不少问题,但还有许多问题需要解决。结合一些英文资料,下面Jeff来介绍一下这个 Options Framework。
Options Framework相关信息
Options Framework是国外一款非常流行的主题后台开发框架,因为其便捷性与开源免费,许多主题都是采用它作为WordPress主题后台。其分为主题版Options Framework Theme 与插件版Options Framework Plugin。在这里Jeff主要介绍主题版Options Framework Theme。
Options Framework集成到你的主题教程
一、先往上面的地址下载主题版,下载后直接放到themes目录下启用就可以看到主题选项面板,可以通过index.php来研究研究代码。
二、集成到自己的主题的话,首先是复制主题版的inc文件夹、images文件夹到你的主题中。然后在你的主题的funtions.php加入以下代码(该代码在主题版的funtions.php开头):
if ( !function_exists( 'optionsframework_init' ) ) { define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/' ); require_once dirname( __FILE__ ) . '/inc/options-framework.php'; } |
---|
保存后再WordPress管理界面的“外观”就可以看到菜单“Theme Options”了。
三、Options Framework产生的后台选项页面是选项卡式的,非常美观大方,支持的功能也很多,包括:
- 表单按钮(text、checkbox、radio、select)
- 图片上传
- 背景图片和背景色
- 字体选择
- 图片选择(例如用来选择主题的layout)
- 帮助信息
- 复位按钮
如何自定义选项?打开options.php中,按照这个文件的代码照葫芦画瓢就能做出自己的选项。比如:
<?php /* options.php line 60 */ //初始化存储选项的$options数组 $options = array(); //定义一个选项卡,标题是Basic Settings,注意type是heading $options[] = array("name" => "Basic Settings", "type" => "heading"); //定义一个text类型的input box,type要设置为text,class为mini会让input长度比较短 $options[] = array("name" => "Input Text Mini", "desc" => "A mini text input field.", "id" => "example_text_mini", "std" => "Default", "class" => "mini", "type" => "text"); //同上,但没有设置class mini,input长度较长 $options[] = array("name" => "Input Text", "desc" => "A text input field.", "id" => "example_text", "std" => "Default Value", "type" => "text"); //输出一个textarea $options[] = array("name" => "Textarea", "desc" => "Textarea description.", "id" => "example_textarea", "std" => "Default Text", "type" => "textarea"); //输出select下拉菜单,$test_array存储下拉菜单的选项,“std”表示默认选中的项 $options[] = array( "name" => "Input Select Small", "desc" => "Small Select Box.", "id" => "example_select", "std" => "three", "type" => "select", "class" => "mini", //mini, tiny, small "options" => $test_array); //对应下面最后的代码 $options[] = array( 'name' => __('Input Checkbox Name', 'options_framework_theme'), 'desc' => __('Check to display.'), 'id' => 'example_checkbox_2', 'std' => '1', 'type' => 'checkbox' ); |
---|
其中:
- name – 选项的label名称
- id – 这个id很重要,区分每个选项,必须是唯一的,存储和获取选项时这个作为键使用
- type - 不同type产生不同的选项
四、前台调用
前台调用的话可以看原来主题版的index.php 。这里给出一些示例:
<?php echo of_get_option('example_checkbox', 'no entry' ); ?> <?php if ( of_get_option('example_uploader') ) { ?> <img src="<?php echo of_get_option('example_uploader'); ?>" /> <?php } ?> <?php $multicheck = of_get_option('example_multicheck', 'none' ); ?> <?php print_r($multicheck); ?> <?php if ( is_array($multicheck) ) { foreach ($multicheck as $key => $value) { // If you need the option's name rather than the key you can get that $name = $test_array_jr[$key]; // Prints out each of the values echo '<li>' . $key . ' (' . $name . ') = ' . $value . '</li>'; } } else { echo '<li>There are no saved values yet.</li>'; } ?> |
---|
- appium+python自动化32-android_uiautomator定位进阶版
- appium+python自动化33-解锁九宫格(TouchAction)
- 用qemu中最少的代码实现一个kvm模拟器
- 关关的刷题日记07——Leetcode 26. Remove Duplicates from Sorted Array 方法1
- openstack如何扩展API之一:新添加API
- 值得收臧 | 从零开始搭建带GPU加速的深度学习环境(操作系统、驱动和各种机器学习库)
- python接口自动化16-multipart/form-data上传多个附件
- python接口自动化17-响应时间与超时(timeout)
- python+requests+excel接口自动化数据驱动
- python+selenium+requests爬取我的博客粉丝的名称
- python接口自动化21-规范的API接口文档示例
- 自然语言处理(4)之中文文本挖掘流程详解(小白入门必读)
- JMeter断言07
- 编程入门的姿势-5月8日微信群语音分享
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R语言中的多类别问题的绩效衡量:F1-score 和广义AUC
- Dart语言基础Map、List、Set操作合辑
- 2.2.2 类反射场景与使用 -《SSM深入解析与项目实战》
- 每天手撕一道算法-64. 最小路径和
- Flutter 1.20 下的 Hybrid Composition 深度解析
- Flutter 1.17 对列表图片的优化解析
- SQL注入常用函数和关键字总结
- 用遗传算法求解函数
- javafx框架tornadofx实战-益智游戏-找出指定的内容1
- Qt音视频开发8-ffmpeg保存裸流
- PyTorch6:nn.Linear&常用激活函数
- Python制作图片验证码?也就三行代码罢了
- 小技巧整理(一)
- 20个能够有效提高 Pandas数据分析效率的常用函数,附带解释和例子
- 4.深入k8s:持久卷PV、PVC及其源码分析