在 WordPress 中排隊 CSS 和 JS 腳本以獲得更好的效能

但是，這不是在 WordPress 專案中對 CSS 和 JS 檔案進行排隊的正確方法。為了對接它，首先轉到“functions.php”檔案並像這樣將檔案排入佇列。讓我們看看西格瑪技巧......

注意：Wordpress提供了未壓縮版本的jquery。所以我們可以簡單地在所需的 js 檔案中使用該 jquery ！為此，您只需在“wp_eneueue_script”中傳遞 array('jquery') 參數。要記住的一件事是 JQuery 有 2 個主要版本：未壓縮和壓縮。在未壓縮版本中，AJAX 將無法正常運作。

第3步：現在進入「footer.php」
現在，我們需要使用 wp_footer();在標籤下。

在 WordPress 主題中包含 wp_head() 和 wp_footer() 至關重要。這些功能會自動插入WordPress、主題和外掛所需的基本腳本、樣式和元資料，確保適當的功能、相容性和效能。 wp_head() 在部分中添加必要的元素以實現 SEO，而 wp_footer() 在末尾包含腳本以推遲非關鍵 JavaScript，從而提高頁面載入速度。這些功能對於外掛程式整合和動態主題自訂以及分析和追蹤程式碼的正確放置至關重要。

首頁 > 程式設計 > 在 WordPress 中排隊 CSS 和 JS 腳本以獲得更好的效能

在 WordPress 中排隊 CSS 和 JS 腳本以獲得更好的效能

發佈於2024-11-04

Enqueue CSS and JS Scripts in WordPress for Better Performance

WordPress是開源軟體－使用者可以按照自己的意願安裝、修改和分發它。由於每個人都可以存取原始程式碼，因此數百萬 WordPress 專家和開發人員可以創建工具和擴充功能並與公眾分享。

讓我們看看如何將 CSS 和 JS 檔案加入您的 wordpress 專案中。

大多數新開發人員都喜歡，

裡面「header.php」

    <?php echo get_bloginfo(); ?>

裡面「footer.php」

第1步：functions.php

function 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/[email protected]/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');

第2步：現在在「header.php」
現在，我們需要使用 wp_head();

標籤下的函數。