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 挂钩注册 and/or 入队，但您正尝试使用 init 挂钩加载它们，这在WP 操作。

因此更改您的代码以确保使用 add_action('wp_enqueue_scripts'...)

完成条件排队

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

1.在同一个函数中注册并有条件地将 styles/scripts 入队 - 因为你似乎同时调用了 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`.

我们可以使用 add_action function 的 priority 参数来做到这一点。这决定了对 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 挂钩中调用单独的函数并在 registering/enqueueing 脚本和样式 时使用 dependencies 参数 - 这确保 style/script 不会得到加载到依赖项之后。

例如我们以下面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');

如果 [=81]，您必须将依赖项（或依赖项列表）添加到对 wp_register_style、wp_enqueue_style、wp_register_script 和 wp_enqueue_script 的每个单独调用=] 不能在另一个之前加载。

我不确定这在您的情况下是否必要 - 以上任一选项都应该有效 - 但您可以在此处的此答案中找到有关使用依赖项的更多信息：

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

WordPress theme wp_enqueue_style() doesn't work after uploading it

php

css

wordpress

load

enqueue