WordPress开发 - Options Framework轻量级后台框架使用设置举例

很多新手wordpress开发者对这款框架不是很理解,我收集了一些教程供各位wordpress开发者参考和学习

这款框架我在蛮多免费主题上就看到有在使用,尽管框架的作者将其做成主题方便各位理解,但因为是国外开发的原因,还是有很多新手wordpress开发者对这款框架不是很理解,我收集了一些教程供各位wordpress开发者参考和学习。

Options Framework新特性

  1. 轻量级
  2. 基于wordpress原生api实现,提供了比较全面的常用选项
  3. 界面与wordpress统一,当然也可以自己定制
  4. 功能强大,使用简单

Options Framework其实是一款主题,安装启用,就可以看到效果了,这时候会在后台→外观菜单下面多出来一个“Theme Options”的菜单(如果需要在左侧主菜单中显示该选项,可通过add_menu_page()实现,打开后即可看到所有的设置选项,下图已经修改为“主题选项”了如下图:

WordPress开发 - Options Framework轻量级后台框架使用设置举例

框架使用方法

1、复制Options Framework主题文件夹下的inc、images文件夹和options.php,放到你的主题根目录下面

2、然后在你的主题的funtions.php加入以下代码(该代码在主题版的funtions.php开头):

  1. if ( !function_exists( 'optionsframework_init' ) ) {
  2. define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/' );
  3. require_once dirname( __FILE__ ) . '/inc/options-framework.php';
  4. }

如果你需要在设置面板中加入javascript代码,在上面代码后面加入以下代码:

  1. add_action('optionsframework_custom_scripts', 'optionsframework_custom_scripts');
  2. function optionsframework_custom_scripts(){ ?>"text/javascript">
  3. your javascript code...
  4. script>

如果你需要在设置面板后面加入自定义内容,需要在以上代码中加入以下代码:(第三页将说明如何在设置面板后面加入一个自定义面板)

  1. add_action(class="hljs-string">'optionsframework_after',class="hljs-string">'options_after', class="hljs-number">100);
  2. class="hljs-function">class="hljs-keyword">function class="hljs-title">options_afterclass="hljs-params">() { class="hljs-meta">?>
  3. your html code...
  4. }

Options Framework产生的后台选项支持功能

后台页面是选项卡式的,非常美观大方,支持的功能也很多,包括:

  • 表单按钮(text、checkbox、radio、select)
  • 图片上传
  • 背景图片和背景色
  • 字体选择
  • 图片选择(例如用来选择主题的layout)
  • 帮助信息
  • 复位按钮

自定义选项

打开options.php中,模仿以下代码能做出自己的选项。

  1. <?php
  2. /* options.php line 60 */
  3. //初始化存储选项的$options数组
  4. $options = array();
  5. //定义一个选项卡,标题是Basic Settings,注意type是heading
  6. $options[] = array("name" => "Basic Settings",
  7. "type" => "heading");
  8. //定义一个text类型的input box,type要设置为text,class为mini会让input长度比较短
  9. $options[] = array("name" => "Input Text Mini",
  10. "desc" => "A mini text input field.",
  11. "id" => "example_text_mini",
  12. "std" => "Default",
  13. "class" => "mini",
  14. "type" => "text");
  15. //同上,但没有设置class mini,input长度较长
  16. $options[] = array("name" => "Input Text",
  17. "desc" => "A text input field.",
  18. "id" => "example_text",
  19. "std" => "Default Value",
  20. "type" => "text");
  21. //输出一个textarea
  22. $options[] = array("name" => "Textarea",
  23. "desc" => "Textarea description.",
  24. "id" => "example_textarea",
  25. "std" => "Default Text",
  26. "type" => "textarea");
  27. //输出select下拉菜单,$test_array存储下拉菜单的选项,“std”表示默认选中的项
  28. $options[] = array( "name" => "Input Select Small",
  29. "desc" => "Small Select Box.",
  30. "id" => "example_select",
  31. "std" => "three",
  32. "type" => "select",
  33. "class" => "mini", //mini, tiny, small
  34. "options" => $test_array);
  35. //对应下面最后的代码
  36. $options[] = array(
  37. 'name' => __('Input Checkbox Name', 'options_framework_theme'),
  38. 'desc' => __('Check to display.'),
  39. 'id' => 'example_checkbox_2',
  40. 'std' => '1',
  41. 'type' => 'checkbox'
  42. );

其中: name – 选项的label名称

id – 这个id很重要,区分每个选项,必须是唯一的,存储和获取选项时这个作为键使用

type – 不同type产生不同的选项

前台调用举例

前台调用的话可以看原来主题版的index.php 。这里给出一些示例:

  1. <?php echo of_get_option('example_checkbox', 'no entry' ); ?>
  2. <?php if ( of_get_option('example_uploader') ) { ?>
  3. <img src="<?php echo of_get_option('example_uploader'); ?>" />
  4. <?php } ?>
  5. <?php $multicheck = of_get_option('example_multicheck', 'none' ); ?>
  6. <?php print_r($multicheck); ?>
  7. <?php
  8. if ( is_array($multicheck) ) {
  9. foreach ($multicheck as $key => $value) {
  10. // If you need the option's name rather than the key you can get that
  11. $name = $test_array_jr[$key];
  12. // Prints out each of the values
  13. echo '<li>' . $key . ' (' . $name . ') = ' . $value . '</li>';
  14. }
  15. }
  16. else {
  17. echo '<li>There are no saved values yet.</li>';
  18. }
  19. ?>

使用Options Framework详解

1.入门,Options Framework(下简称框架)的设置选项以如下形式出现:

  1. $options[] = array(
  2. "name" =>'', //选填,选项名称
  3. "desc" =>'', //选填,选项说明
  4. "id" =>'', //必填,对应表单元素ID,该项作为唯一标识,不可与其他选项重复!
  5. "std" =>'', //可选,元素默认值
  6. "class" =>'', //可选,该类型元素class
  7. "type" =>'', //可选,表单元素类型
  8. "settings"=>'' //可选,仅当调用编辑器时使用
  9. );

比如:

  1. $options[] = array(
  2. "name"=>'网站公告:',
  3. "desc"=>'输入您的网站公告,不要超过50个字符。',
  4. "id"=>'site_notices',
  5. "std"=>'输入您的网站公告',
  6. "class"=>'mini',
  7. "type"=>"text"
  8. );

2.添加选项卡,在需要加入的地方加入如下代码:

  1. $options[] = array(
  2. 'name' => '新选项卡',
  3. 'type' => 'heading'
  4. );

再在以上代码后面加入需要添加的选项保存预览。

3.调用

通过以上两步,后台设置部分基本完成,那么主题如何调用这些设置值呢?框架自带的主题中明确说明了每一种类型的调用方法,可参考主题中的调用方法,简单来说通过of_get_option($id,$default)即可调用保存的值,其中$id为必选值,即为需要调用元素的id值,$default为可选值,表示当所调用的元素值不存在时显示的值,如:

  1. echo of_get_option('site_notices', '暂无公告信息!'); ?>

注意,of_get_option()只是返回了一个值,需要用echo输出才能在主题中显示,某些情况下,也可能需要使用如下代码:

  1. <?php
  2. if(of_get_option("example_checkbox")){
  3. echo "checkbox is checked";
  4. }else{
  5. echo "checkbox is not checked";
  6. } ?>

通过以上两段代码,应该能较深刻的理解为什么要用echo输出。

4.修改输出方式

如果想修改以上函数名,找到inc/options-framework.php中478和480两行,将“of_get_option”替换为需要的函数名称即可。如替换为get_opt,则可以通过get_opt($id,$default)调用。

5.主题本地化,

如果主题需要支持多种语言,则需要在所有文件中替换“options_framework_theme”为您的主题名称或您想要使用的名称。

注意事项

options_framework默认过滤js、src等标签

使用Options Framework框架为自己的主题添加设置页面

刚点开感觉很奇怪对吧?

没错这货本身是一个主题……

废话不多说开始吧~

1.在主函数functions.php中加入以下代码(其实这个在Options Framework主题主函数functions.php里)(记得要放在 <?php 后):

  1. if (!function_exists('optionsframework_init')){
  2. define('OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri().'/inc/');
  3. require_once dirname(__FILE__).'/inc/options-framework.php';
  4. }

然后下载上面那个主题,把其中的inc、images文件夹和options.php文件放入你的主题根目录

打开你的后台~是不是多了一个设置页面呢?

2.添加设置选项

一般,options.php中选项是以这种方式出现的(非标明必填即为选填):

  1. $options[] = array(
  2. "name" =>'', //选项的名称
  3. "desc" =>'', //介绍
  4. "id" =>'', //必填,唯一标示
  5. "std" =>'', //元素默认值
  6. "class" =>'', //该类型元素class
  7. "type" =>'', //表单元素类型
  8. "settings"=>'' //仅当调用编辑器时使用
  9. );

如果你想添加最上面那个可以切换的选项卡,添加以下代码(注:自此段代码开始直到下一个此类代码为止,中间这一段都被视作是这个选项卡以内的!

  1. $options[] = array(
  2. 'name' => '新选项卡',
  3. 'type' => 'heading'
  4. );

3.修改输出方式(非必须)

Options Framework的原本输出函数是of_get_option,如果你想更美观地让他出现,也为了便于记忆,可以进入inc/options-framework.php文件,找到72行和74行(以下1,2,3行分别对应72,73,74行):

  1. if ( ! function_exists( '输出函数' ) ):
  2. function 输出函数( $name, $default = false ) {

比如说,你想要的输出函数是get_jiecao,那么此处就为

  1. if ( ! function_exists( 'get_jiecao' ) ) :
  2. function get_jiecao( $name, $default = false ) {

4.调用设置

可以使用以下代码(此处的of_get_option被改成了get_jiecao,如有需要请自行修改)(请注意要使用echo!):

  1. echo get_jiecao('相应的id', '如果没有内容则输出我'); ?>

5.使用JavaScript

由于此框架的安全机制,回自动过滤掉js,object等,如需使用(比如说你想加一个统计代码,就必须使用这个否则js会无效),请在第一步的代码后加入此段代码:

  1. add_action('optionsframework_custom_scripts', 'optionsframework_custom_scripts');
  2. function optionsframework_custom_scripts(){ ?>
  3. <script type="text/javascript">
  4. 你的js代码
  5. script>

2019年10月27日更新

收到 xiaoz.me 博主的提醒,说按照上面的第3 、4步无法正确获取到字段的值,究其原因是默认保存的选项值不是当前主题名称,导致获取有误。我们可以在 options.php 文件看下面的代码:

WordPress开发 - Options Framework轻量级后台框架使用设置举例

我们可以手动修改下这个选项的值,或者将这个函数代码修改一下,自动获取当前主题的选项值:

WordPress开发 - Options Framework轻量级后台框架使用设置举例

上图中加红色框的代码就是修改部分,具体代码如下:

  1. $option_name = get_option( 'stylesheet' );
  2. $option_name = preg_replace( "/W/", "_", strtolower( $option_name ) );
  3. return $option_name;

希望对大家有所帮助,感谢 xiaoz。

如果感觉以上wordpress开发教程的内容还不够的话,还可以看看这篇文章

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 主题使用教程 WordPress开发 - Options Framework轻量级后台框架使用设置举例 https://www.mbxzb.com/blog/file/rumen/23749.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
暂无评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
官方客服团队

为您解决烦忧 - 24小时在线 专业服务