WordPress plugin for combining CSS and JS

The following column WordPress Tips will introduce to you the WordPress plug-in that combines CSS and JS. I hope it will be helpful to friends in need!

We usually consider merging multiple CSS or JS into one file for output. In order to solve this problem, I wrote this WordPress plug-in to implement this in WordPress. First, the purpose.

Implementation Principle

If you have read my previous "PHP Combined Compressed CSS Output Modular CSS Writing" you can first understand some of my processing methods for cache files. And some ideas for merging files and compressing code. The implementation principle of this plug-in is basically the same as that introduced in the article above.

Installation

First, download the plugin, I host it on my GitHub, you can download it on this page. After downloading, unzip it and directly upload the entire unzipped folder to your WordPress website plug-in directory. Then go to the background to enable it.

Use

to enter the background. There is a submenu "Minify" under the "Settings" menu. After entering, you can set its various options, and there are Comments to understand the functionality.

You must modify the theme to use wp-minify, because the way you output css and js is different. In your theme, delete the original CSS and JS output, and use the following method to output 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;]); ?>

The method of outputting css is the same, but use another function wp_minify_css(). The parameter of the function is an array, and the element inside the array is the path to the script file. Taking the WordPress installation directory as the root directory, write the complete relative path.

Why should we write scripts relative to the root directory of WordPress? Rather than relative to your current theme directory? In fact, the reason is very simple, because the css or js you reference is not necessarily in the theme directory. Sometimes you will reference styles or scripts in other directories. Of course, this is a relative path. You can even reference the script in the upper-level directory of WordPress, such as "/../test.js", but note that the beginning of the script must start with /, otherwise it may cause relative path errors.

Of course, the specific usage methods can be easily modified or used after you understand the principles.

For more WordPress technical articles, please visit the WordPress Website Building Tutorial column!

The above is the detailed content of WordPress plugin for combining CSS and JS. For more information, please follow other related articles on the PHP Chinese website!