• 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插件

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了合并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插件

相关文章

  • 2022-04-29WordPress纯代码实现前端页面HTML完美压缩
  • 2022-04-29关于ThinkPHP6多例Redis类实现
  • 2022-04-29DEDECMS5.7使用kindeditor编辑器栏目内容无法保存
  • 2022-04-29Photoshop设计颗粒质感艺术字教程
  • 2022-04-29使用18小时快速搜索引擎排名的后果
  • 2022-04-29怎么忽略FTP登录来升级WordPress
  • 2022-04-29css3怎么设置元素背面不可见
  • 2022-04-29MySQL主键还需要建立索引吗?
  • 2022-04-29WordPress移除head头部js、css、feed等多余加载项
  • 2022-04-29JavaScript判断一个对象是否为数组的几种方法(总结)

文章分类

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

最近更新的内容

    • vue简单实现转盘抽奖
    • 四种PHP生成唯一订单号的方法
    • Photoshop设计立体效果的网站推荐图标
    • 如何运用layui数据添加页面的前端布局?(附源码)
    • Photoshop设计书法人像前后期创作分享
    • 避坑!Laravel数据库迁移功能的一个坑
    • ThinkPHP6通过Ucenter实现注册登录的示例代码
    • 帝国CMS后台密码忘了怎么办,找回密码的两种方法
    • WordPress控制文章评论最少字数和最大字数
    • Photoshop制作梦幻光影效果的艺术字教程

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

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