• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 分享一个CSS和JS合并的WordPress插件

分享一个CSS和JS合并的WordPress插件

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了合并CSS和JS,WordPress插件等相关知识,希望对您有所帮助

今天写了一个插件,用来专门处理wordpress的css和js文件合并问题。在我们的开发中,我们常常会考虑把多个文件合并为一个,用一个URL就可以解决原来需要多个URL才能解决的链入问题。当然,如果了解过类似淘宝css输出的服务端技术,那么无需再为此烦恼。为了和WordPress结合,我专门写了这个插件,虽然在WordPress官方目录中我已经发现有这个插件存在了,但是我仍然把这个插件的名称定为wp-minify。

安装

首先,下载这个插件,我把它托管在我的GitHub上,你可以在这个页面下载。下载好之后,进行解压,解压完直接把解压出来的整个文件夹上传到你的WordPress网站插件目录下。然后去后台启用它。

访问不了的,直接戳这里:分享一个CSS和JS合并的WordPress插件wp-minify.zip

使用

进入后台,在“设置”菜单下有一个子菜单“Minify”,进入后可以对它的各个选项进行设置,而且都有注释,可以了解功能。

使用wp-minify必须修改主题,因为你输出css和js的方式不一样了。 在你的主题中,删除原来的CSS和JS输出,使用如下的方法输出JS:

<?php wp_minfiy_js(array('/wp-content/themes/yourtheme/js/base.js','/wp-content/themes/yourtheme/js/module.js','/wp-content/themes/yourtheme/js/others.js'));

输出css的方法是一样的,只不过要使用另外一个函数wp_minify_css()。函数的参数是一个数组,数组内部的元素是脚本文件的路径,以WordPress安装目录为根目录,写入完整的相对路径。

为什么要相对于WordPress的根目录写脚本呢?而不是相对你当前的主题目录呢?其实道理很简单,因为你所引用的css或者js不一定是主题目录下的,有的时候你会引用其他目录下面的样式或者脚本。当然,这是相对路径,你甚至可以引用WordPress上一级目录的脚本,例如 "/../test.js",但是注意,脚本的开头一定要用/开头,否则可能引起相对路径错误。

另外,我还提供了另外一个类用于通过action挂载到wp_head或wp_footer中。具体用法如下:

<?phpnew wp_minify_css_action(array('/wp-content/themes/yourtheme/css/test.css'));wp_head();

wp_minify_css_action这个类可以直接实现把输出的内容挂载到wp_head处。利用这个特性,你可以使用这个类,做一些其他的深度开发,比如你想在所有的路径中增加base.css这个文件,你并不需要在每一个action中都这么写。我提供一种方法:

// functions.phpfunction add_minify_css($files) {    array_unshift('base.css',$files);    foreach($files as &$file) {        $file = '/wp-content/themes/yourtheme/css/'.$file;    }    new wp_minify_css_action($files);}// single.phpadd_minify_css(array('single.css','comment.css'));wp_head();

就像上面这样,可以让你的程序写的更加简单一些。


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 分享一个CSS和JS合并的WordPress插件

相关文章

  • 搜索引擎营销中作弊的方式—链接作弊
  • PHP怎么使用header()设置页面编码
  • 让dede:flink拥有和dede:arclist一样使用limit标签
  • 使用HTML5开发App有哪些优缺点
  • ThinkPHP6 Workerman 基本使用
  • 网站成立初期创造访问量的技巧
  • Windows/Linux下Composer的安装与使用(详解)
  • 符合W3C标准的网页等于做了百分之五十的SEO工作
  • Illustrator创建立体风格的黑胶唱机图标
  • PHP如何重定向?浅谈跳转页面的3种方法

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 浅谈Bootstrap中如何上传图片
    • Photoshop绘制质感IE图标教程
    • 深入了解Node.js 中的多线程和多进程
    • 详解thinkPHP5模型中的修改器和自动完成
    • WordPress主题给文章增加百度是否已收录的功能
    • AI打造牛仔布料纹理
    • PhotoShop制作逼真的补丁文字效果的教程
    • nodeJS把json数据转成excel(xlsx文件)输出
    • RESETful API接口设计规范
    • 如何开启WordPress调试模式(报错提示)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有