WordPress 主题 wp_enqueue_style() 上传后不起作用

Question

我为 WordPress 网站制作了一个新主题。我使用is_page(array('')) 为我的子站点加载某些样式表。当我尝试上传它时，我的function.php 只加载了我添加到我所有网站的文件（如style.css、header.css 等） 这是我的全部function.php，你觉得问题出在哪里？

<?php

function load_main_stylesheet() {

    wp_register_style('style', get_template_directory_uri() . '/style.css', array(), 12, false, 'all');
    wp_enqueue_style('style');

    wp_register_style('stylesheet', get_template_directory_uri() . '/assets/css/header.css', array(), 11, false, 'all');
    wp_enqueue_style('stylesheet');
}
add_action('wp_enqueue_scripts', 'load_main_stylesheet');


function load_certain_stylesheet() {
    wp_register_style('page', get_template_directory_uri() . '/assets/css/page.css', array(), 2, false, 'all');

    wp_register_style('product_css', get_template_directory_uri() . '/assets/css/product.css', array(), 8, false, 'all');

    wp_register_style('sub-category_css', get_template_directory_uri() . '/assets/css/sub-category.css', array(), 5, false, 'all');

    wp_register_style('main-category_css', get_template_directory_uri() . '/assets/css/main-category.css', array(), 9, false, 'all');

    wp_register_style('front-page_css', get_template_directory_uri() . '/assets/css/front-page.css', array(), 11, false, 'all');
}
add_action('init', 'load_certain_stylesheet');


function enque_certain_stylesheet() {

    if (is_page(array('who-we-are'))) {
        wp_enqueue_style('page');
    }

    if (is_page(array('product'))) {
        wp_enqueue_style('product_css');
    }

    if (is_page(array('sub-category'))) {
        wp_enqueue_style('sub-category_css');
    }

    if (is_page(array('main-category'))) {
        wp_enqueue_style('main-category_css');
    }

    if (is_page(array('home'))) {
        wp_enqueue_style('front-page_css');
    }
}
add_action('wp_enqueue_scripts', 'enque_certain_stylesheet');


function inclue_font() {

    wp_register_style('montserrat', '<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">', array(), false, 'all');
    wp_enqueue_style('montserrat');
}
add_action('wp_enqueue_scripts', 'inclue_font');


function inclue_jquery() {

    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', get_template_directory_uri() . '/assets/js/jquery-3.5.1.min.js', '', 1, true);
    add_action('wp_enqueue_scripts', 'jquery');
}
add_action('wp_enqueue_scripts', 'inclue_jquery');



function load_js() {

    wp_register_script('script', get_template_directory_uri() . '/assets/js/script.js', '', 8, true);
    wp_enqueue_script('script');

    wp_register_script('header', get_template_directory_uri() . '/assets/js/header.js', '', 1, true);
    wp_enqueue_script('header');
}
add_action('wp_enqueue_scripts', 'load_js');



function load_certain_js() {

    wp_register_script('product_js', get_template_directory_uri() . '/assets/js/product.js', '', 9, true);

    wp_register_script('sub-category_js', get_template_directory_uri() . '/assets/js/sub-category.js', '', 9, true);

    wp_register_script('main-category_js', get_template_directory_uri() . '/assets/js/main-category.js', '', 10, true);

    wp_register_script('autocomplete_js', get_template_directory_uri() . '/assets/js/autocomplete.js', '', 11, true);
}
add_action('init', 'load_certain_js');


function enque_certain_js() {

    if (is_page(array('product'))) {
        wp_enqueue_script('product_js');
    }

    if (is_page(array('sub-category'))) {
        wp_enqueue_script('sub-category_js');
    }

    if (is_page(array('main-category'))) {
        wp_enqueue_script('main-category_js');
    }

    if (is_page(array('home'))) {
        wp_enqueue_script('autocomplete_js');
    }
}
add_action('wp_enqueue_scripts', 'enque_certain_js');




add_theme_support('menus');

add_theme_support('post-thumbnails');

function load_menus() {

    $locations = array(
        'header'  => __( 'Header Menu', 'theme' ),
        'sidenav' => __( 'Sidenav Menu', 'theme' ),
        'mobile'   => __( 'Mobile Menu', 'theme' ),
        'footer'   => __( 'Footer Menu', 'theme' )
    );

    register_nav_menus( $locations );
}

add_action( 'init', 'load_menus' );


function custom_logo_setup() {
    $defaults = array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
    'header-text' => array( 'site-title', 'site-description' ),
    );
    add_theme_support( 'custom-logo', $defaults );
   }
   add_action( 'after_setup_theme', 'custom_logo_setup' );


add_image_size('smallest', 300, 300, true);
add_image_size('largest', 800, 800, true);

?>

页面名称是准确的，我重新检查了它们。

Answer 1

注册和入队文件时，这两个操作需要从同一个函数中执行。

/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if ( ! is_admin() ) {

    /**
    * Register then enqueue jquery js
    *
    * Check if CDN's url is valid, if not return fallback
    */
    $test_jquery_js = @fopen( 'https://code.jquery.com/jquery-3.5.1.min.js', 'r' );
    if ( $test_jquery_js !== false ) {
      wp_register_script( 'jquery_js', '//code.jquery.com/jquery-3.5.1.min.js' );
    } else {
      wp_register_script( 'jquery_js', get_template_directory_uri() . '/assets/js/jquery-3.5.1.min.js', array( 'bootstrap_bundle_js' ) );
    };
    if ( is_page( array( 'who-we-are' ) ) ) {
      wp_enqueue_script( 'jquery_js' );
    };
  };
};

更多关于wp_enqueue_scripts();@@https://developer.wordpress.org/reference/hooks/wp_enqueue_scripts/
更多关于wp_register_script();@https://developer.wordpress.org/reference/hooks/wp_register_script/

Answer 2

样式表和脚本必须使用 wp_enqueue_scripts 钩子注册和/或入队，但您尝试使用 init 钩子加载它们，这在 WP 操作的顺序中为时过早。

因此更改您的代码以确保使用add_action('wp_enqueue_scripts'...) 完成条件入队

有几种方法可以改变这一点：

1.在同一个函数中注册并有条件地将样式/脚本排入队列 - 因为您似乎同时调用了load_certain_stylesheet 和enque_certain_stylesheet，您可以简单地将条件入队添加到load_certain_stylesheet 函数中（对于JS 函数），例如

function load_certain_stylesheet() {

    /* register all your stylesheets, e.g.*/
    wp_register_style('page', get_template_directory_uri() . '/assets/css/page.css', array(), 2, false, 'all'); 

    /* Now conditionally load your stylesheets after they are registered, e.g.: */
    if (is_page(array('who-we-are'))) {
        wp_enqueue_style('page');
    }
}
add_action('wp_enqueue_scripts', 'load_certain_stylesheet');

---

2。在 wp_enqueue_scripts 钩子中调用单独的函数，并设置执行它们的顺序 - 如果有原因要注册并将它们排入单独的函数中，那么您可以将 add_action 更改为 load_certain_stylesheet 和load_certain_js来自此：

add_action('init', 'load_certain_stylesheet');
add_action('init', 'load_certain_js');

到这里：

add_action('wp_enqueue_scripts', 'load_certain_stylesheet');
add_action('wp_enqueue_scripts', 'load_certain_js');

这可能会导致wp_enqueue_scripts 钩子中函数被调用的顺序出现问题，例如我们需要确保 load_certain_stylesheetis executed beforeenque_certain_stylesheet`。

我们可以通过使用priority 参数到add_action function 来做到这一点。这决定了对add_action 的不同调用的执行顺序，数字越大优先级越低，所以调用越晚。

这意味着您可以保持函数原样，您只需将调用更改为add_action，如下所示：

add_action('wp_enqueue_scripts', 'load_main_stylesheet'); // default priority is 10

// Use a lower priority (i.e. a higher number) than the default which is 10, e.g.
add_action('wp_enqueue_scripts', 'load_certain_stylesheet', 15);  

// Use a lower priority (a higher number) than load_certain_stylesheet to call this after, e.g.
add_action('wp_enqueue_scripts', 'enque_certain_stylesheet', 20);

对于 JS 脚本也是如此

// Use a lower priority (i.e. a higher number) than the default which is 10, e.g.
add_action('wp_enqueue_scripts', 'load_certain_js');

// Use a lower priority (a higher number) than load_certain_js to call this after it, e.g.
add_action('wp_enqueue_scripts', 'enque_certain_js');

---

3.调用 wp_enqueue_scripts 钩子中的单独函数并在注册/排队脚本和样式时使用 dependencies 参数 - 这可以确保样式/脚本在依赖项之后才被加载。

例如，如果我们以下面的 2 个样式表为例（它们在不同的函数中并不重要，我只是将它们放在一起，以便于解释）

//We register & enqueue your main stylesheet using the handle "style"
wp_register_style('style', get_template_directory_uri() . '/style.css', array(), 12, false, 'all');

// Now we can use that handle as a dependency when registering pages.css, 
//which tells WP to only load this css AFTER loading style.css
wp_register_style('page', get_template_directory_uri() . '/assets/css/page.css', array('style'), 2, false, 'all');

如果样式/脚本无法在另一个之前加载，您必须将依赖项（或依赖项列表）添加到对 wp_register_style、wp_enqueue_style、wp_register_script 和 wp_enqueue_script 的每个单独调用中。

我不确定这在您的情况下是否必要 - 上述任何一个选项都应该有效 - 但您可以在此答案中找到有关使用依赖项的更多信息： Should you specify dependencies in both wp_register_script/style and wp_enqueue_script/style?