將 CSS 排隊到 WordPress 函數中。php 未完全加載 ZBC4150D023D6255132ZAC71

Question

嗨，我是 WordPress 主題開發和編碼的新手（請跟我一起裸露：））。 我有一個 HTML 模板，它工作得很好。 嘗試加載 style.css 文件時，styles 未完全加載。 不僅如此，它還隱藏了頂部導航。

我從 style.css 和頂部導航（來自 header.php）加載中刪除了 css。 只有當我將 css 排入隊列時，導航欄才會隱藏。 功能。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 )

參數	描述
$handle	（字符串）（必需）腳本的名稱。 應該是獨一無二的。
$src	（字符串）（可選）腳本的完整 URL，或腳本相對於 WordPress 根目錄的路徑。
$deps	(string[]) （可選）注冊腳本的數組句柄這個腳本依賴。
$ver	(string/bool/null) (可選) 指定腳本版本號的字符串，如果有的話，它作為查詢字符串添加到 URL 中，用於緩存清除目的。 如果 version 設置為 false，則會自動添加與當前安裝的 WordPress 版本相等的版本號。 如果設置為 null，則不添加任何版本。
$in_footer	(bool) （可選）是否將腳本排入隊列之前而不是在。

已注冊腳本的數組處理此腳本所依賴的。

現在，您的腳本只是為了第一個加載而互相爭斗，因此導致了一些故障排除。

例如，您的main.js可能需要jquery.js才能正常工作。 如果 main.js 在main.js之前jquery.js ，那么很可能沒有任何效果。 依此類推等用rest的文件。

現在我對您的情況進行了一些更改，您應該通過查看它來更好地理解。

<?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' );
  };
}; ?>

---

學到更多

• 使用Wordpress 對入隊、注冊和加載 CSS 和 JavaScript 進行一點閱讀