To properly introduce style files in WordPress themes or plugins, you should use the wp_enqueue_style() function. 1. Use wp_enqueue_style() to register and load the CSS file. The basic structure is wp_enqueue_style($handle, $src, $deps, $ver, $media), where $handle is a unique identifier, $src is the CSS file URL, $deps is a dependency style, $ver is the version number, and $media is the media type; 2. Use enqueue operations to place the functions.php file and execute it with the wp_enqueue_scripts hook to ensure correct loading; 3. Use conditions to judge such as is_front_page(), is_single() or is_page_template() to control the loading of specific pages for specific styles; 4. To avoid conflicts, each handle should be unique. It is recommended to be named with a prefix, and you can check whether it is registered through wp_style_is(); 5. The parent theme style should be loaded first in the child theme, then the child theme style should be loaded, and the dependencies should be set to ensure the correct order.
Properly introducing style files in WordPress themes or plugins is not as rough as simply echo '<link>'
. The correct way is to use the wp_enqueue_style()
function, which can avoid conflicts, improve performance, and better manage dependencies.
The basic structure using wp_enqueue_style
wp_enqueue_style()
is an official function provided by WordPress, used to register and load CSS files. Its basic usage is as follows:
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
-
$handle
: a unique identifier (ID) of the style, such as'my-style'
-
$src
: The URL address of the CSS file -
$deps
: Other styles that this style depends on, such as'main-style'
-
$ver
: version number, used for cache control, can be setfilemtime(get_stylesheet_directory() . '/style.css')
to automatically obtain the modification time -
$media
: media types, such as'all'
,'screen'
,'print'
, etc., default is'all'
Generally, we will place the enqueue operation in the functions.php
file of the topic and execute it through the wp_enqueue_scripts
hook.
Load specific styles only when needed
Sometimes we just want to load specific CSS files in a certain page or template, such as home page, article details page, or custom template page. At this time, you can use the condition to determine whether the enqueue is controlled.
Common ways of judgment are:
-
is_front_page()
: determines whether it is the home page -
is_single()
: determines whether it is a single article page -
is_page_template('template-name.php')
: determines whether a page template is used
For example:
add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles' ); function enqueue_custom_styles() { if ( is_page_template( 'template-landing.php' ) ) { wp_enqueue_style( 'landing-style', get_template_directory_uri() . '/css/landing.css' ); } }
Doing so can reduce unnecessary resource loading, speed up page speed, and avoid style conflicts.
Pay attention to the naming and deduplication of handles
Each style file must have a unique handle
name. If you accidentally register an existing handle repeatedly, the style may not be loaded or overwritten.
For example, if you use 'main-style'
and a plugin also uses the same name, there may be problems. Therefore, it is recommended to give your style a prefixed name, such as 'yourtheme-main-style'
or 'yourplugin-style'
.
If you want to confirm whether a style has been registered, you can use wp_style_is( $handle, 'registered' )
to check it.
Handle style loading in child themes
If you are developing a child theme, you usually want to load the style of the parent theme first and then the style of the child theme. At this time, pay attention to order and dependencies.
Recommended writing method:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_and_child_styles' ); function enqueue_parent_and_child_styles() { // Register the parent theme style wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); //Register child theme styles again, relying on parent style wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) ); }
Note get_template_directory_uri()
is used here to point to the parent theme directory, and get_stylesheet_directory_uri()
is used to point to the current child theme directory.
Basically that's it. As long as you remember to use hooks, set handles and dependencies reasonably, and load on demand, you can avoid the problem of loading most styles.
The above is the detailed content of How to enqueue styles correctly in WordPress. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

To roll back the WordPress version, you can use the plug-in or manually replace the core file and disable automatic updates. 1. Use WPDowngrade and other plug-ins to enter the target version number to automatically download and replace; 2. Manually download the old version of WordPress and replace wp-includes, wp-admin and other files through FTP, but retain wp-config.php and wp-content; 3. Add code in wp-config.php or use filters to disable core automatic updates to prevent further upgrades. Be sure to back up the website and database before operation to ensure safety and reliability. It is recommended to keep the latest version for security and functional support in the long term.

The steps to create a custom shortcode in WordPress are as follows: 1. Write a PHP function through functions.php file or custom plug-in; 2. Use add_shortcode() to bind the function to the shortcode tag; 3. Process parameters in the function and return the output content. For example, when creating button shortcodes, you can define color and link parameters for flexible configuration. When using it, you can insert a tag like [buttoncolor="red"url="https://example.com"] in the editor, and you can use do_shortcode() to model it

The main reasons why WordPress causes the surge in server CPU usage include plug-in problems, inefficient database query, poor quality of theme code, or surge in traffic. 1. First, confirm whether it is a high load caused by WordPress through top, htop or control panel tools; 2. Enter troubleshooting mode to gradually enable plug-ins to troubleshoot performance bottlenecks, use QueryMonitor to analyze the plug-in execution and delete or replace inefficient plug-ins; 3. Install cache plug-ins, clean up redundant data, analyze slow query logs to optimize the database; 4. Check whether the topic has problems such as overloading content, complex queries, or lack of caching mechanisms. It is recommended to use standard topic tests to compare and optimize the code logic. Follow the above steps to check and solve the location and solve the problem one by one.

Methods to optimize WordPress sites that do not rely on plug-ins include: 1. Use lightweight themes, such as Astra or GeneratePress, to avoid pile-up themes; 2. Manually compress and merge CSS and JS files to reduce HTTP requests; 3. Optimize images before uploading, use WebP format and control file size; 4. Configure.htaccess to enable browser cache, and connect to CDN to improve static resource loading speed; 5. Limit article revisions and regularly clean database redundant data.

Miniving JavaScript files can improve WordPress website loading speed by removing blanks, comments, and useless code. 1. Use cache plug-ins that support merge compression, such as W3TotalCache, enable and select compression mode in the "Minify" option; 2. Use a dedicated compression plug-in such as FastVelocityMinify to provide more granular control; 3. Manually compress JS files and upload them through FTP, suitable for users familiar with development tools. Note that some themes or plug-in scripts may conflict with the compression function, and you need to thoroughly test the website functions after activation.

TransientsAPI is a built-in tool in WordPress for temporarily storing automatic expiration data. Its core functions are set_transient, get_transient and delete_transient. Compared with OptionsAPI, transients supports setting time of survival (TTL), which is suitable for scenarios such as cache API request results and complex computing data. When using it, you need to pay attention to the uniqueness of key naming and namespace, cache "lazy deletion" mechanism, and the issue that may not last in the object cache environment. Typical application scenarios include reducing external request frequency, controlling code execution rhythm, and improving page loading performance.

Object cache assists persistent storage, suitable for high access and low updates, tolerating short-term lost data. 1. Data suitable for "persistence" in cache includes user configuration, popular product information, etc., which can be restored from the database but can be accelerated by using cache. 2. Select a cache backend that supports persistence such as Redis, enable RDB or AOF mode, and configure a reasonable expiration policy, but it cannot replace the main database. 3. Set long TTL or never expired keys, adopt clear key name structure such as user:1001:profile, and update the cache synchronously when modifying data. 4. It can combine local and distributed caches to store small data locally and big data Redis to store big data and use it for recovery after restart, while paying attention to consistency and resource usage issues.

The most effective way to prevent comment spam is to automatically identify and intercept it through programmatic means. 1. Use verification code mechanisms (such as Googler CAPTCHA or hCaptcha) to effectively distinguish between humans and robots, especially suitable for public websites; 2. Set hidden fields (Honeypot technology), and use robots to automatically fill in features to identify spam comments without affecting user experience; 3. Check the blacklist of comment content keywords, filter spam information through sensitive word matching, and pay attention to avoid misjudgment; 4. Judge the frequency and source IP of comments, limit the number of submissions per unit time and establish a blacklist; 5. Use third-party anti-spam services (such as Akismet, Cloudflare) to improve identification accuracy. Can be based on the website
