在 WordPress 中排隊 CSS 和 JS 腳本以獲得更好的效能-php教程-PHP中文網

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

WBOY

發布： 2024-08-22 06:34:39

原創

311 人瀏覽過

Enqueue CSS and JS Scripts in WordPress for Better Performance

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

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

大多數新開發者都喜歡，

裡面「header.php」

<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">
    <link href="<?php echo get_template_directory_uri(); ?>/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link href="<?php echo get_template_directory_uri(); ?>/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="<?php echo get_template_directory_uri(); ?>/assets/js/bootstrap.bundle.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/font-awesome-all.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>
</head>

登入後複製

裡面「footer.php」

<footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/bootstrap.bundle.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/font-awesome-all.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/custom.js"></script>
</footer>

登入後複製

但是，這不是在 WordPress 專案中對 CSS 和 JS 檔案進行排隊的正確方法。為了對接它，首先轉到“functions.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/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();在

標籤下運行。

<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(); ?>
</head>

登入後複製

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

<?php wp_footer(); ?>
</body>

登入後複製

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

以上是在 WordPress 中排隊 CSS 和 JS 腳本以獲得更好的效能的詳細內容。更多資訊請關注PHP中文網其他相關文章！