在 WordPress 中排隊 CSS 和 JS 指令碼以獲得更好的效能

wordpress 是開源軟體 – 使用者可以按照自己的意願安裝、修改和分發它。由於每個人都可以訪問原始碼，數百萬 wordpress 專家和開發人員可以建立工具和擴充套件並與公眾分享。讓我們看看如何將 css 和 js 檔案加入到你的wordpress專案中。 大多數新開發者都喜歡，裡面“header.php” <title><?php echo get_bloginfo(); ?></title><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="&lt;?php%20echo%20get_template_directory_uri();%20?&gt;/assets/css/bootstrap.min.css" rel="stylesheet"><link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"><link href="&lt;?php%20echo%20get_template_directory_uri();%20?&gt;/assets/css/custom.css" rel="stylesheet" type="text/css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="&lt;?php%20echo%20get_template_directory_uri();%20?&gt;/assets/js/bootstrap.bundle.min.js"></script><script src="&lt;?php%20echo%20get_template_directory_uri();%20?&gt;/assets/js/font-awesome-all.min.js"></script><script src="&lt;?php%20echo%20get_template_directory_uri();%20?&gt;/assets/js/custom.js"></script>登入後複製內部“footer.php”<footer><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="&lt;?php%20echo%20get_template_directory_uri();%20?&gt;/assets/js/bootstrap.bundle.min.js"></script><script src="&lt;?php%20echo%20get_template_directory_uri();%20?&gt;/assets/js/font-awesome-all.min.js"></script><script src="&lt;?php%20echo%20get_template_directory_uri();%20?&gt;/assets/js/custom.js"></script></footer>登入後複製但是，這不是在 wordpress 專案中對 css 和 js 檔案進行排隊的正確方法。為了對接它，首先轉到“functions.php”檔案並像這樣將檔案排入佇列。讓我們看看西格瑪技巧......立即學習“前端免費學習筆記（深入）”；第1步：functions.phpfunction my_theme_enqueue_styles_scripts() { // enqueue css files wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/assets/css/bootstrap.min.css'); wp_enqueue_style('aos-css', 'https://unpkg.com/aos@2.3.1/dist/aos.css'); wp_enqueue_style('custom-css', get_template_directory_uri() . '/assets/css/custom.css'); // enqueue default jquery in wordpress. wp_enqueue_script('jquery'); wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js', array('jquery'), null, true); wp_enqueue_script('font-awesome-js', get_template_directory_uri() . '/assets/js/font-awesome-all.min.js', array(), null, true); wp_enqueue_script('custom-js', get_template_directory_uri() . '/assets/js/custom.js', array('jquery'), null, true);}add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles_scripts');登入後複製注意：wordpress提供了未壓縮版本的jquery。所以我們可以簡單地在所需的 js 檔案中使用該 jquery ！為此，您只需在“wp_eneueue_script”中傳遞array('jquery')引數即可。要記住的一件事是 jquery 有 2 個主要版本：未壓縮和壓縮。在未壓縮版本中，ajax 將無法正常工作。 第2步：現在在“header.php”中現在，我們需要使用 wp_head();在標籤下執行。 <title><?php echo get_bloginfo(); ?></title><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><?php wp_head(); ?>登入後複製第3步：現在進入“footer.php”現在，我們需要使用 wp_footer();在標籤下<?php wp_footer(); ?>登入後複製以上就是在 WordPress 中排隊 CSS 和 JS 指令碼以獲得更好的效能的詳細內容，更多請關注我的其它相關文章！