现在位置: 首页 > 程序设计 > 正文
A+

如何部署options-framework后台框架?

6个月前 程序设计 1,216 12

options-framework框架我想不用我介绍太多了,玩wordpress的开发人员都知道它的名气,我接触过的主题有很多都是使用这个框架的,你可能只需要知道它是最具易用性的一款后台框架插件之一就行了,部署起来简单且它的前端调用我想应该是最方便易懂的。

fengsay之前一直用的都是ashuwp_framework,虽然在搭建上也是极为简单,但它的扩展性和前端调用我认为都是没有办法跟options-framework比的,今天就来讲讲我的部署心得。

不得不说的是options-framework其实分两个版本,分别是options-framework-theme和options-framework-plugin,我注意到了在github上插件版的最新提交时间是2018年,而主题版的最后提交时间为2016年,那话不多说,我今天要说的东西就是拿插件版本适配我的主题。

下面是主题版本的链接地址:

正因为主题版的options-framework部署起来太简单了,所以我就不说怎么实施了,因为在作者的github上有详细的部署教程,有兴趣的朋友不妨看看。

言归正传,先把插件版本的下载到电脑并解压出来。

将解压后的 css images includes js 这四个文件夹连同 options-framework.php 文件上传到主题的任意路径,为了以后方便查看建议新建一个文件夹存放,我的路径是\inc\options-framework。

找到主题的functions.php文件,添加以下代码,注意要添加在 <?pho   <--->    ?>之间并修改路径为你自己的正确路径。

  1. require get_template_directory() . '/inc/options-framework/options-framework.php';

到这一步部署的步骤就已经算是完成了,接下来我们需要做的就是修改文件,达到能适配主题的目的。

在插件文件夹中找到 options-check 文件夹并打开,把里面的 options.php 文件复制到主题的任意位置并改成你想要的名字,我的路径是 \inc\options-framework\themes-options.php。

首先找到 includes  文件夹中的 class-options-framework.php 文件并使用你用的编辑器打开,找到以下代码:

  1. $location = apply_filters( 'options_framework_location', array( 'options.php' ) );

替换成

  1. $location = apply_filters( 'options_framework_location', array( '/inc/options-framework/themes-options.php' ) );

这里我需要说明的是 options.php 文件是options-framework的一个范例,你最好的选择就是在这个返利是进行增加和修改,以达到你想要的一些功能,而我们想要在后台加载这个返利就需要进行以上的修改,否则你的后台将空空如也。

等一切才做完成之后,你后台的外观分类菜单下将会多了一个主题选项的分类菜单,当你看到这个选项之后就已经完成了80%的部署操作了,但你一定感觉这个框架很丑,那是因为还没有css样式的缘故,没关系,我们继续修改。

找到 includes 文件夹下的 class-options-framework-admin.php 文件并使用编辑器打开,大概在184-191行左右的位置,我们需要将以下的代码做一下修改。

原代码

  1. wp_enqueue_style(
  2.     'optionsframework',
  3.     plugin_dir_url( dirname(__FILE__) ) . 'css/optionsframework.css',
  4.     array(),
  5.     Options_Framework::VERSION
  6. );

替换成

  1. wp_enqueue_style( 'optionsframework', get_template_directory_uri() . '/inc/options-framework/css/optionsframework.css', array(),Options_Framework::VERSION);

部署完之后再看看是不是好看多了,当然你可以自己对样式进行修改。

最后我们需要修改两个js的路径,如下

找到 class-options-framework-admin.php 文件的 205-210行左右,根据下面的代码进行替换。

  1. wp_enqueue_script(
  2.     'options-custom',
  3.     plugin_dir_url( dirname(__FILE__) ) . 'js/options-custom.js',
  4.     array( 'jquery','wp-color-picker' ),
  5.     Options_Framework::VERSION
  6. );

替换成

  1. wp_register_script( 'options-custom', get_template_directory_uri() . '/inc/options-framework/js/options-custom.js', array( 'jquery','wp-color-picker' ), Options_Framework::VERSION );

找到并打开 class-options-media-uploader.php 文件,在大概119-124行左右

  1. wp_register_script(
  2.     'of-media-uploader',
  3.     plugin_dir_url( dirname(__FILE__) ) .'js/media-uploader.js',
  4.     array( 'jquery' ),
  5.     Options_Framework::VERSION
  6. );

替换成

  1. wp_register_script( 'of-media-uploader', get_template_directory_uri() . '/inc/options-framework/js/media-uploader.js', array( 'jquery' ), Options_Framework::VERSION );

如此修改结束之后你就会有一个很好的wordpress后台框架了。

如果你真的打算把后台框架改成options-framework,请记住一定不能把我的那些代码原模原样的复制,因为每段代码都会有路径的存在,我不知道你会把文件放在你主题的哪个位置,所以这个路径必须要你自己手动去修改才行。

最后再说说前端要怎么调用数据,也许你需要先打开 options-framework.php 文件先看看下面这段代码:

  1. if ( ! function_exists( 'of_get_option' ) ) :
  2. function of_get_option( $name$default = false ) {
  3.     $config = get_option( 'optionsframework' );
  4.     if ( ! isset( $config['id'] ) ) {
  5.         return $default;
  6.     }
  7.     $options = get_option( $config['id'] );
  8.     if ( isset( $options[$name] ) ) {
  9.         return $options[$name];
  10.     }
  11.     return $default;
  12. }
  13. endif;

其实它就是调用数据的函数,当然你可以给这个函数另外起一个名字,只需要修改of_get_option就可以,比如你可以修改成

  1. if ( ! function_exists( 'feng_get_option' ) ) :
  2. function feng_get_option( $name$default = false ) {
  3.     $config = get_option( 'optionsframework' );
  4.     if ( ! isset( $config['id'] ) ) {
  5.         return $default;
  6.     }
  7.     $options = get_option( $config['id'] );
  8.     if ( isset( $options[$name] ) ) {
  9.         return $options[$name];
  10.     }
  11.     return $default;
  12. }
  13. endif;

如果是这样那前段要调用主题选项中的一个text文本框的内容的话,假设这个文本框的ID是fengsay-text,那你可以这样写:

  1. <?php echo feng_get_option ( 'fengsay-text' ); ?>

是不是很简单,更多的配置建议去作者的github上去看,或者是这个插件里有很多的范例,可以多看看,今天就说到这里,结束。

发表评论取消回复

评论列表 ( 有 1,216 次浏览 和 12 条评论 其中 访客有 7 条 博主有 5 条 )
  • 2周前

    我知道这个东西,从知更鸟主题那里,对于不想学习的我来说,太复杂了,所以我只是拿别人搭建好的来改改。

  • 1个月前

    下海了,都不打理博客了!

  • 3个月前

    有幸接触过这个框架,只是内容一直看不懂,惭愧。
    话说,你这主题被你优化后,有棱有角的,很耐看啊,不错不错!

    • 锋言锋语作者 Safari浏览器 Mac OS X 10_15_1
      @回复
      3个月前

      回复@林三 感谢三哥大驾光临!

  • 3个月前

    交换链接吗

  • 4个月前

    主题越来越好,就是站加载速度3s!

  • 5个月前

    会代码程序技术就是好

    • 锋言锋语作者 谷歌浏览器 Windows 10
      @回复
      4个月前

      回复@叶忠文博客 入门都不算!

      • 3个月前

        回复@锋言锋语 同一个文章第二次评论的时候,你这滑块并没有复位,必须刷新页面才能回复,你看看是不是这样?

        • 锋言锋语作者 Safari浏览器 Mac OS X 10_15_1
          @回复
          3个月前

          回复@林三 不知道啊,这个插件不是我开发的,我只是把样式修改成了我想要的自适应,有空去原作者的博客上测试一下!

搜索