CSS和JS合并的WordPress插件怎么用

小編給大家分享一下CSS和JS合并的WordPress插件怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

我們平時會考慮把多個CSS或JS合并為一個文件輸出，為了解決這個問題，我寫了這個WordPress插件，用來實現(xiàn)WordPress中的這一目的。

實現(xiàn)原理

如果你讀過我之前的《PHP合并壓縮css輸出 模塊化css撰寫》可以先了解我對緩存文件的一些處理方式，以及合并文件、壓縮代碼的一些想法。而本插件的實現(xiàn)原理則基本上和上面的這篇文章里介紹的差不多。

安裝

首先，下載這個插件，我把它托管在我的GitHub上，你可以在這個頁面下載。下載好之后，進行解壓，解壓完直接把解壓出來的整個文件夾上傳到你的WordPress網(wǎng)站插件目錄下。然后去后臺啟用它。

使用

進入后臺，在“設置”菜單下有一個子菜單“Minify”，進入后可以對它的各個選項進行設置，而且都有注釋，可以了解功能。

使用wp-minify必須修改主題，因為你輸出css和js的方式不一樣了。 在你的主題中，刪除原來的CSS和JS輸出，使用如下的方法輸出JS：

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

輸出css的方法是一樣的，只不過要使用另外一個函數(shù)wp_minify_css()。函數(shù)的參數(shù)是一個數(shù)組，數(shù)組內部的元素是腳本文件的路徑，以WordPress安裝目錄為根目錄，寫入完整的相對路徑。

為什么要相對于WordPress的根目錄寫腳本呢？而不是相對你當前的主題目錄呢？其實道理很簡單，因為你所引用的css或者js不一定是主題目錄下的，有的時候你會引用其他目錄下面的樣式或者腳本。當然，這是相對路徑，你甚至可以引用WordPress上一級目錄的腳本，例如 "/../test.js"，但是注意，腳本的開頭一定要用/開頭，否則可能引起相對路徑錯誤。

看完了這篇文章，相信你對“CSS和JS合并的WordPress插件怎么用”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！