0

嗨，我是 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');
?>
4

1 回答 1

0

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

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
参数 描述
$handle （字符串）（必需）脚本的名称。应该是独一无二的。
$src （字符串）（可选）脚本的完整 URL，或脚本相对于 WordPress 根目录的路径。
$deps (string[]) （可选）注册脚本的数组句柄这个脚本依赖。
$ver (string/bool/null) (可选) 指定脚本版本号的字符串，如果有的话，它作为查询字符串添加到 URL 中，用于缓存清除目的。如果 version 设置为 false，则会自动添加与当前安装的 WordPress 版本相等的版本号。如果设置为 null，则不添加任何版本。
$in_footer (bool) (可选) 是否在之前而不是在 .

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

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

例如，您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' );
  };
}; ?>

学到更多

于 2021-01-09T02:32:01.360 回答