php - How to: Conditionally Enqueue JS and Stylesheets, for Custom Post Type (Single and Archive Templates)

admin管理员组

文章数量:1302329

I’ve created a plugin for my child theme, in which custom functions are stored. Additionally, within the plugin, I'm also enqueueing stylesheets and .js which control the output of two templates, for a custom post type named workshops. (The only place on the site where the enqueued styles and .js are needed.)

With that in mind, when the active template is either single-workshop.php and archive-workshop.php, I want to call the following .js and stylesheets:

• Bootstrap 4 to structure the pages,
• Google Maps API to display map and location pin
• Owl carousel and Chocolat.js to display images in a modal popup
• A combined .js file to initialise some of the above

The code I’m using below doesn’t work with the if statements in place but does in a non-conditional state:

function renchlist_enqueue_styles() {
  if ( is_page_template( array( 'archive-workshop.php', 'single-workshop.php' ) ) ) {
   wp_enqueue_style('bootstrap-grid-nk', get_stylesheet_directory_uri() .'/library/bootstrap/css/bootstrap-grid.min.css');
    wp_enqueue_style ( 'nk-owl-style', get_stylesheet_directory_uri () . '/library/owl/css/owl.carousel.css', array (), '1.3.3' );
    wp_enqueue_style ( 'owl-style', get_stylesheet_directory_uri () . '/library/owl/css/owl.theme.default.min.css');
    wp_enqueue_style('nk-chocolat-style', get_stylesheet_directory_uri() .'/library/chocolat/css/chocolat.css');
  }
}
add_action('wp_enqueue_scripts', 'renchlist_enqueue_styles');



function renchlist_add_scripts() {
  if ( is_page_template( array( 'archive-workshop.php', 'single-workshop.php' ) ) ) {

     wp_enqueue_script( 'nk-combined-js', get_stylesheet_directory_uri() . '/library/renchlist-combined.js', array('jquery'), null, true );
     wp_enqueue_script( 'google-map', '', array(), '3', true );
     wp_enqueue_script( 'google-map-init', get_stylesheet_directory_uri() . '/library/js/google_maps.js', array('google-map'), '0.1', true );
   
  }

I'm flummoxed as the source of my error - grateful for any help.

I’ve created a plugin for my child theme, in which custom functions are stored. Additionally, within the plugin, I'm also enqueueing stylesheets and .js which control the output of two templates, for a custom post type named workshops. (The only place on the site where the enqueued styles and .js are needed.)

With that in mind, when the active template is either single-workshop.php and archive-workshop.php, I want to call the following .js and stylesheets:

• Bootstrap 4 to structure the pages,
• Google Maps API to display map and location pin
• Owl carousel and Chocolat.js to display images in a modal popup
• A combined .js file to initialise some of the above

The code I’m using below doesn’t work with the if statements in place but does in a non-conditional state:

function renchlist_enqueue_styles() {
  if ( is_page_template( array( 'archive-workshop.php', 'single-workshop.php' ) ) ) {
   wp_enqueue_style('bootstrap-grid-nk', get_stylesheet_directory_uri() .'/library/bootstrap/css/bootstrap-grid.min.css');
    wp_enqueue_style ( 'nk-owl-style', get_stylesheet_directory_uri () . '/library/owl/css/owl.carousel.css', array (), '1.3.3' );
    wp_enqueue_style ( 'owl-style', get_stylesheet_directory_uri () . '/library/owl/css/owl.theme.default.min.css');
    wp_enqueue_style('nk-chocolat-style', get_stylesheet_directory_uri() .'/library/chocolat/css/chocolat.css');
  }
}
add_action('wp_enqueue_scripts', 'renchlist_enqueue_styles');



function renchlist_add_scripts() {
  if ( is_page_template( array( 'archive-workshop.php', 'single-workshop.php' ) ) ) {

     wp_enqueue_script( 'nk-combined-js', get_stylesheet_directory_uri() . '/library/renchlist-combined.js', array('jquery'), null, true );
     wp_enqueue_script( 'google-map', 'https://maps.googleapis/maps/api/js?key=XXXXXXXXXXXX', array(), '3', true );
     wp_enqueue_script( 'google-map-init', get_stylesheet_directory_uri() . '/library/js/google_maps.js', array('google-map'), '0.1', true );
   
  }

I'm flummoxed as the source of my error - grateful for any help.

• php
• functions
• wp-enqueue-script
• wp-enqueue-style
• conditional-tags

Share Improve this question asked Mar 17, 2021 at 15:41 NateNate 1555 bronze badges 2

• If renchlist_add_scripts and renchlist_enqueue_styles functions are stored in a file located in the plugin directory, are both of the page templates also in the same plugin directory as well? Right now, according to your code, the workshop.php files are also located in that plugin directory, but do you have them in there or in your theme? – Will Commented Mar 17, 2021 at 15:58
• The enqueue script and style functions are stored in the only file in the plugin directory [renchlist-custom-functions.php]. The page templates are stored in my child theme directory. – Nate Commented Mar 17, 2021 at 16:03

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Try using is_post_type_archive() and is_singular():

// ...
if ( is_post_type_archive( 'my-post-type' ) || is_singular( 'my-post-type' ) ) {
    // your enqueue code goes here
}
// ...

These functions will check to see if you're on, respectively, an archive page for the post type my-post-type or a single my-post-type post. (Change the my-post-type to what you've named your custom post type when you registered it, of course.)

本文标签：