首頁 CMS教程 &#&按 分享一個CSS和JS合併的WordPress插件

分享一個CSS和JS合併的WordPress插件

Apr 25, 2021 pm 05:42 PM
wordpress插件

下面由WordPress教學欄位介紹一個CSS和JS合併的WordPress插件,希望對需要的朋友有幫助!

我們平常會考慮把多個CSS或JS合併為一個檔案輸出,為了解決這個問題,我寫了這個WordPress插件,用來實現WordPress中的這一目的。

實作原理

如果你讀過我之前的《PHP合併壓縮css輸出模組化css撰寫》可以先了解我對快取檔案的一些處理方式,以及合併檔案、壓縮程式碼的一些想法。而本插件的實作原理基本上和上面的這篇文章裡介紹的差不多。

安裝

首先,下載這個插件,我把它託管在我的GitHub上,你可以在這個頁面下載。下載好之後,進行解壓,解壓縮完直接把解壓縮出來的整個資料夾上傳到你的WordPress網站外掛目錄下。然後去後台啟用它。

使用

進入後台,在“設定”選單下有一個子選單“Minify”,進入後可以對它的各個選項進行設置,而且都有註釋,可以了解功能。

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

<?php wp_minfiy_js([&#39;/wp-content/themes/yourtheme/js/base.js&#39;,&#39;/wp-content/themes/yourtheme/js/module.js&#39;,&#39;/wp-content/themes/yourtheme/js/others.js&#39;]); ?>
登入後複製

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

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

當然了,具體的使用方法在你了解了原理之後就可以非常容易的去自己修改或發揮。更多請閱讀我的部落格:http://www.tangshuang.net/2432.html

#

以上是分享一個CSS和JS合併的WordPress插件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何為WordPress外掛程式新增線上支付功能 如何為WordPress外掛程式新增線上支付功能 Sep 05, 2023 pm 04:19 PM

如何為WordPress外掛程式添加線上支付功能隨著電子商務產業的快速發展,為網站添加線上支付功能已成為關鍵的需求。對於使用WordPress作為網站開發平台的用戶來說,有許多現成的外掛可以幫助他們實現這一目標。本文將介紹如何為WordPress外掛程式新增線上支付功能,並提供程式碼範例供參考。確定支付介面在新增線上支付功能之前,首先要確定使用的支付介面。目前市

如何開發一個自動更新WordPress外掛的功能 如何開發一個自動更新WordPress外掛的功能 Sep 05, 2023 am 10:40 AM

如何開發一個自動更新WordPress外掛的功能WordPress是一個非常受歡迎的開源內容管理系統(CMS),擁有豐富的外掛程式市場來擴展其功能。為了確保外掛程式始終保持最新和安全,開發者需要實現自動更新功能。在本文中,我們將介紹如何開發一個自動更新WordPress外掛的功能,並提供程式碼範例來幫助您快速上手。準備工作在開始開發之前,您需要準備以下幾個關鍵的步驟:創

如何使用WordPress外掛實現郵件訂閱功能 如何使用WordPress外掛實現郵件訂閱功能 Sep 05, 2023 pm 06:37 PM

如何使用WordPress外掛程式實現郵件訂閱功能在現今的網路時代,郵件訂閱功能成為了網站營運中不可或缺的一部分。透過郵件訂閱功能,我們可以及時向用戶推送最新的資訊、活動和優惠等訊息,增強用戶黏著度和互動性。而在WordPress網站中,我們可以透過使用外掛程式來實現郵件訂閱功能,以下將為大家介紹如何使用WordPress外掛程式來實現郵件訂閱功能。步驟一:選擇合適的插件

如何開發一個自動產生專案進度的WordPress插件 如何開發一個自動產生專案進度的WordPress插件 Sep 05, 2023 am 08:48 AM

如何開發一個自動產生專案進度的WordPress外掛在專案管理的過程中,了解專案進度是非常重要的。而對於使用WordPress來建立網站的使用者來說,能夠在WordPress後台直接查看專案進度將會大大提高工作效率。因此,開發一個自動產生專案進度的WordPress外掛是非常有益的。本文將介紹如何開發這樣一個插件,並提供程式碼範例。插件概述這個插件的主要功能是

如何使用WordPress外掛實現即時查詢功能 如何使用WordPress外掛實現即時查詢功能 Sep 06, 2023 pm 12:39 PM

如何使用WordPress外掛實現即時查詢功能WordPress是一款功能強大的部落格和網站建立平台,使用WordPress外掛程式可以進一步擴展網站的功能。在很多情況下,用戶需要進行即時查詢來取得最新的資料。接下來,我們將介紹如何使用WordPress外掛程式實現即時查詢功能,並提供一些程式碼範例供參考。首先,我們需要選擇一個適合的WordPress外掛來實現即時查詢

如何避免WordPress中文亂碼現象 如何避免WordPress中文亂碼現象 Mar 05, 2024 pm 09:36 PM

如何避免WordPress中文亂碼現象,需要具體程式碼範例在使用WordPress網站的過程中,許多用戶都會遇到中文亂碼的問題。中文亂碼會為使用者閱讀和瀏覽網站帶來困擾,也可能影響網站的使用者體驗和搜尋引擎優化。在本篇文章中,我們將介紹一些解決WordPress中文亂碼問題的方法,並提供具體的程式碼範例。設定資料庫字元集:首先,要確保資料庫字元集設定正確,以便支援中

如何為WordPress外掛新增線上投票功能 如何為WordPress外掛新增線上投票功能 Sep 05, 2023 am 11:09 AM

如何為WordPress外掛程式添加線上投票功能作為最受歡迎的內容管理系統之一,WordPress提供了豐富的外掛程式生態系統,可以輕鬆擴展網站的功能。在這篇文章中,我們將探討如何為WordPress外掛新增線上投票功能。為了實現這個目標,我們將使用WordPress的核心功能和一個名為"WP-Polls"的開源外掛程式。 1.下載並安裝"WP-Polls"外掛程式首先,我們

如何開發一個自動產生電子書的WordPress插件 如何開發一個自動產生電子書的WordPress插件 Sep 05, 2023 am 08:01 AM

如何開發一個自動產生電子書的WordPress外掛隨著社群媒體和電子閱讀器的流行,電子書已成為人們獲取和分享知識的重要途徑之一。身為WordPress開發者,你可能會面臨創作和發布電子書的需求。為了簡化這個過程,我們可以開發一個自動產生電子書的WordPress外掛。本文將教你如何開發這樣一個插件,並提供程式碼範例供參考。步驟1:建立外掛程式的基本文件結構首先

See all articles