WordPress开发 - options framework基础应用

很多wordpress主题都采用了这套options framework 设置框架,这里有篇详细的教程,大家一起来看看

看到好多免费wordpress主题都采用了这套后台设置框架,就拿来研究下,其实设置框架也有很多类型,重要的不在于他的设置有多丰富,而是这个框架的使用是否明确。

正好,这款options framework 框架就贴心的准备了一款主题来帮助各位新手开发者来了解这套框架,可惜的是,即使有这套主题的帮助,很多新手开发者对此也是一知半解,难以使用,这次在网络上找到了一份有详细使用教程的文档,大家一起来学习下。

下载并解压 Options Framework Theme 后可以看到文件夹中主要包含下图所示的这些文件,我们只需要将images 文件夹、 inc 文件夹、options.php 文件复制到我们需要添加主题选项的主题中去,然后将该 functions.php 文件中调用 inc 文件夹内容的部分复制到我们自己wordpress主题的 functions.php 文件中就可以了。
具体代码如下 :

  1. define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri() . '/inc/' );
  2. require_once dirname( __FILE__ ) . '/inc/options-framework.php';

需要注意的是,对于默认主题一般已经有一个 inc 文件夹用于存放模板文件或其他一些 php 文件,为了避免不必要的麻烦,建议将新复制的 inc 文件夹命名为 options-framework 或其他你喜欢的名称,同时修改上述调用的路径。如果是子主题还需要将 get_template_directory_uri() 替换为 get_stylesheet_directory_uri()。
修改Theme Options这个选项为主题选项:

  1. //找到includes/class-options-framework-admin.php,第83行
  2. static function menu_settings() {
  3. $menu = array(
  4. // Modes: submenu, menu
  5. 'mode' => 'submenu',
  6. // Submenu default settings
  7. 'page_title' => __( 'Theme Options', 'theme-textdomain' ),
  8. 'menu_title' => __( 'Theme Options', 'theme-textdomain' ),
  9. 'capability' => 'edit_theme_options',
  10. 'menu_slug' => 'options-framework',
  11. 'parent_slug' => 'themes.php',
  12. // Menu default settings
  13. 'icon_url' => 'dashicons-admin-generic',
  14. 'position' => '61'
  15. );
  16. return apply_filters( 'optionsframework_menu', $menu );
  17. }
  18. //Theme Options改为主题设置
  19. //'page_title' => __( '主题设置', 'theme-textdomain' ),打开后显示的标题名
  20. //'menu_title' => __( '主题设置', 'theme-textdomain' ),外观里面显示的名称

如何自定义选项?打开options.php中,按照这个文件的代码就能做出自己的选项。比如:

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

总结如下:

  1. //每添加一次下面代码则会生成一个新的选项卡
  2. $options[] = arry(
  3. 'name' => __('选项卡名称','默认域'),
  4. 'type' => 'heading' //选项卡的 type 必须为 heading
  5. );
  6. //下面这段代码是添加具体选项的,可重复使用
  7. $options[] = array(
  8. "name" =>__('元素名称','默认域'),
  9. "desc" =>__('元素描述','默认域'),
  10. "id" =>'元素ID必填,调用时用',
  11. "std" =>'元素的默认值',
  12. "class" =>'元素的class',
  13. "type" =>'元素的类型',
  14. "settings"=>'调用默认编辑器时使用'
  15. );

其他参数没有什么需要特殊说明的,唯一需要说明的是 type ,目前 Options Framework 支持的选项类型主要有:text、textarea、checkbox、select、radio、upload(上传图片)、images(充当一个单选按钮,更形象化)、background、multicheck、color、typography、editor 。

修改输出方式

Options Framework 默认是使用 of_get_option() 作为输出函数的,其默认输出方式为:

  1. <?php echo of_get_option('元素id', '默认输出内容'); ?>

对于该函数的定义在 inc 文件夹下的 options-framework.php 中,具体代码如下:

  1. if ( ! function_exists( 'of_get_option' ) ) :
  2. function of_get_option( $name, $default = false ) {
  3. $option_name = '';
  4. // Gets option name as defined in the theme
  5. if ( function_exists( 'optionsframework_option_name' ) ) {
  6. $option_name = optionsframework_option_name();
  7. }
  8. // Fallback option name
  9. if ( '' == $option_name ) {
  10. $option_name = get_option( 'stylesheet' );
  11. $option_name = preg_replace( "/\W/", "_", strtolower( $option_name ) );
  12. }
  13. // Get option settings from database
  14. $options = get_option( $option_name );
  15. // Return specific option
  16. if ( isset( $options[$name] ) ) {
  17. return $options[$name];
  18. }
  19. return $default;
  20. }
  21. endif;

我们可以找到该函数将函数名 of_get_option 修改为任意你想修改的内容,同时在调用选项的值时,输出函数也要替换为新的输出函数名。

添加 JavaScript 支持
Options Framework 提供了众多的选项类型,但是遗憾的是并没有提供 JS 代码的选项,不过在 class-options-framework-admin.php 中提供了添加 script 的钩子,我们可以通过在 functions.php 文件中添加如下代码使其对 JavaScript 进行支持。

  1. function optionsframework_custom_scripts() { ?>
  2. <script type="text/javascript">
  3. jQuery(document).ready(function() {
  4. jQuery('#example_showhidden').click(function() {
  5. jQuery('#section-example_text_hidden').fadeToggle(400);
  6. });
  7. if (jQuery('#example_showhidden:checked').val() !== undefined) {
  8. jQuery('#section-example_text_hidden').show();
  9. }
  10. });
  11. </script><?php
  12. }

这里有一套框架作者写的教程,可以看看:

快速入门 WordPress开发 - Options Framework轻量级后台框架使用设置举例 WordPress开发 - Options Framework轻量级后台框架使用设置举例 很多新手wordpress开发者对这款框架不是很理解,我收集了一些教程供各位wordpress开发者参考和学习 这款框架我在蛮多免费主题上就看到有在使用,尽管框架的作者将其做成主题方便各位理解,但因为... 时间:2021/10/27 阅读:91 阅读全文

至此,就是本篇wordpress开发教程的全部内容了,如果你还在找一套更加专业的开发框架,你也可以看看这套:

快速入门 Codestar Framework - 简约实用的wordpress主题选项框架 Codestar Framework - 简约实用的wordpress主题选项框架 用于主题和插件的简单轻量级WordPress选项框架。内置具有大量自定义字段和大量选项的面向对象编程范例。允许您将自定义管理,元框,分类法和自定义设置引入所有页面,帖子和类别。它是高度现代和先进的框架... 时间:2021/10/27 阅读:92 阅读全文
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

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

模板下载吧 快速入门 WordPress开发 - options framework基础应用 https://www.mbxzb.com/blog/file/rumen/23763.html

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

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

相关文章

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

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

WordPress开发 - options framework基础应用-海报