wp enqueue style - Creating Small Components in a Theme and Loading CSS for Each Part

admin管理员组

文章数量:1122832

I'm working on small component parts for a WordPress theme. I've placed several small template parts under template-parts/components/. Correspondingly, I've placed the CSS for each part under /assets/css/template-parts/components/.

First, is it common practice in WordPress theme development to create multiple small components? (I'm approaching this with a mindset similar to React components.) Additionally, in this scenario, what would be the best practice for loading the CSS for each part as it's loaded?

I'm working on small component parts for a WordPress theme. I've placed several small template parts under template-parts/components/. Correspondingly, I've placed the CSS for each part under /assets/css/template-parts/components/.

First, is it common practice in WordPress theme development to create multiple small components? (I'm approaching this with a mindset similar to React components.) Additionally, in this scenario, what would be the best practice for loading the CSS for each part as it's loaded?

• wp-enqueue-style

Share Improve this question asked Aug 27, 2024 at 14:01 ChloeChloe 2522 bronze badges 2

• 1 to one side, I think that putting all the css code in one file is not a good idea if there is a big part that is not used on every pages. but to the other side, having lots of files can slow a litle bit the page loading time. I think that you have to find the middle way in analysing which pages are the more visited on your site. – mmm Commented Aug 27, 2024 at 14:22
• note that in a modern block theme WordPress will already conditionally load the assets for that block based on wether it appears on the page or not without any additional effort on your part. I'm mindful though that you should avoid this becoming a discussion which would get it closed as offtopic, you need a single specific question that can be answered factually and that you can mark an answer as the "correct" answer by accepting – Tom J Nowell ♦ Commented Aug 27, 2024 at 14:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I routinely build reusable components for WordPress plugins and then run a series of conditional checks on whether or not to load the components, so it's common practice for me and I've learned it over the years by looking at other plugins, so I'd say yes.

As for the CSS I'll register all of the CSS files but not actually enqueue them until they're needed.

wp_register_style( 'style-handle' ) is what I use to register them all in an enqueueing component, but then, within the component that requires one of the specialized/specific stylesheets, I run a conditional check to make sure it hasn't already been loaded, in case a component fires twice on a page, I only want the CSS loading once:

if( !wp_style_is( 'style-handle' ) ) :
    wp_enqueue_style( 'style-handle' );
endif;

This seems to work for me, keep things nice and origanized and only loading what's needed at any given time.

You can do the exact same with scripts using wp_script_is().

本文标签： wp enqueue styleCreating Small Components in a Theme and Loading CSS for Each Part