将 CSS 排队到 WordPress 函数中。php 不能完全加载样式

Question

您好，我是 WordPress 主题开发和编码的新手（请与我联系 :)）。我有一个完全可以正常工作的 HTML 模板。尝试加载 style.css 文件时，样式未完全加载。不仅隐藏了顶部导航。

我从 style.css 中删除了 css，并加载了顶部导航（来自 header.php）。只有当我将 CSS 排入队列时，导航栏才会隐藏。 Functions.php代码：

<?php
function load_my_styles()
{
    wp_enqueue_script('popper',get_theme_file_uri('//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', NULL,'1.0', true));
    wp_enqueue_script('main-js',get_theme_file_uri('/js/main.js', NULL,'1.0', true));
    wp_enqueue_script('anime',get_theme_file_uri('//cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js', NULL,'1.0', true));
    wp_enqueue_script('jquery',get_theme_file_uri('/vendor/jquery/jquery.js', NULL,'1.0', true));
    wp_enqueue_script('custom-js',get_theme_file_uri('/vendor/bootstrap/bootstrap.min.js', NULL,'1.0', true));
    wp_enqueue_script('swiper',get_theme_file_uri('/vendor/bootstrap/swiper.min.js', NULL,'1.0', true));
    wp_enqueue_style('custom-css',get_theme_file_uri("/vendor/bootstrap/bootstrap/bootstrap.min.css"));
    wp_enqueue_style('swiper',get_theme_file_uri("/vendor/bootstrap/bootstrap/swiper.min.css"));
    wp_enqueue_style('main-stylesheet',get_stylesheet_uri());
    wp_enqueue_style('font-awesome',get_theme_file_uri("//use.fontawesome.com/releases/v5.6.3/css/all.css"));
    wp_enqueue_style('maincss',get_theme_file_uri("/css/mainstyle.css"));

}
add_action('wp_enqueue_scripts','load_my_styles');
?>

Answer 1

您需要了解依赖关系的概念。当您将script 或stylesheet 排入队列时，可以使用5 个参数。

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

Parameters	Description
$handle	(string) (Required) Name of the script. Should be unique.
$src	(string) (Optional) Full URL of the script, or path of the script relative to the WordPress root directory.
$deps	(string[]) (Optional) An array of registered script handles this script depends on.
$ver	(string/bool/null) (Optional) String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
$in_footer	(bool) (Optional) Whether to enqueue the script before instead of in the .

已注册的脚本数组处理此脚本所依赖的。

现在，您的脚本只是为了成为第一个加载的脚本而互相争斗，因此导致了一些故障排除。

例如，您的main.js 可能需要jquery.js 才能正常工作。如果main.js 在jquery.js 之前加载，则很有可能，什么都不会起作用。其余的文件依此类推。

现在我对你的情况做了一些改变，你应该通过看看它有一个更好的理解。

<?php
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
  if( ! is_admin() ) {
    wp_enqueue_script( 'jquery_js', get_template_directory_uri( '/vendor/jquery/jquery.js', array(), '1.0.0', true ) );
    wp_enqueue_script( 'popper_js', get_template_directory_uri( '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js', array( 'jquery_js' ), '1.14.7', true ) );
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri( '/vendor/bootstrap/bootstrap.min.js', array( 'popper_js' ), '1.0.0', true ) );
    wp_enqueue_script( 'swiper_js', get_template_directory_uri( '/vendor/bootstrap/swiper.min.js', array( 'bootstrap_js' ), '1.0.0', true ) );
    wp_enqueue_script( 'anime_js', get_template_directory_uri( '//cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js', array( 'swiper_js' ),'2.0.2', true ) );
    wp_enqueue_script( 'main_js', get_template_directory_uri( '/js/main.js', array( 'anime_js' ), '1.0.0', true ) );
    wp_enqueue_style( 'bootstrap_css', get_template_directory_uri( '/vendor/bootstrap/bootstrap/bootstrap.min.css' ), array(), '1.0.0', 'all' );
    wp_enqueue_style( 'swiper_css', get_template_directory_uri( '/vendor/bootstrap/bootstrap/swiper.min.css' ), array( 'bootstrap_css' ), '1.0.0', 'all' );
    wp_enqueue_style( 'font_awesome', get_template_directory_uri( '//use.fontawesome.com/releases/v5.6.3/css/all.css' ), array( 'swiper_css' ), '5.6.3', 'all' );
    wp_enqueue_style( 'style_css', get_template_directory_uri(), array( 'bootstrap_css' ), '1.0.0', 'all' );
    wp_enqueue_style( 'main_css', get_template_directory_uri( '/css/mainstyle.css' ), array( 'bootstrap_css' ), '1.0.0', 'all' );
  };
}; ?>

---

了解详情

• 一点阅读@Enqueue, Register & Load CSS and JavaScript with Wordpress