CSS和JS合併的WordPress插件

時間 2019-11-16

標籤 css 合併 wordpress 插件欄目 CSS 简体版

原文原文鏈接

咱們平時會考慮把多個CSS或JS合併爲一個文件輸出，爲了解決這個問題，我寫了這個WordPress插件，用來實現WordPress中的這一目的。php

實現原理css

若是你讀過我以前的《PHP合併壓縮css輸出模塊化css撰寫》能夠先了解我對緩存文件的一些處理方式，以及合併文件、壓縮代碼的一些想法。而本插件的實現原理則基本上和上面的這篇文章裏介紹的差很少。html

安裝git

首先，下載這個插件，我把它託管在個人GitHub上，你能夠在這個頁面下載。下載好以後，進行解壓，解壓完直接把解壓出來的整個文件夾上傳到你的WordPress網站插件目錄下。而後去後臺啓用它。github

使用數組

進入後臺，在「設置」菜單下有一個子菜單「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的方法是同樣的，只不過要使用另一個函數wp_minify_css()。函數的參數是一個數組，數組內部的元素是腳本文件的路徑，以WordPress安裝目錄爲根目錄，寫入完整的相對路徑。函數

爲何要相對於WordPress的根目錄寫腳本呢？而不是相對你當前的主題目錄呢？其實道理很簡單，由於你所引用的css或者js不必定是主題目錄下的，有的時候你會引用其餘目錄下面的樣式或者腳本。固然，這是相對路徑，你甚至能夠引用WordPress上一級目錄的腳本，例如 "/../test.js"，可是注意，腳本的開頭必定要用/開頭，不然可能引發相對路徑錯誤。網站

固然了，具體的使用方法在你瞭解了原理以後就能夠很是容易的去本身修改或發揮。更多請閱讀個人博客：http://www.tangshuang.net/2432.html