Enqueue CSS dan Skrip JS dalam WordPress untuk Prestasi Lebih Baik-tutorial php-php.cn

Enqueue CSS dan Skrip JS dalam WordPress untuk Prestasi Lebih Baik

WBOY

Lepaskan： 2024-08-22 06:34:39

asal

326 orang telah melayarinya

Enqueue CSS and JS Scripts in WordPress for Better Performance

WordPress ialah perisian sumber terbuka – pengguna boleh memasang, mengubah suai dan mengedarkannya mengikut kehendak mereka. Memandangkan kod sumber boleh diakses oleh semua orang, berjuta-juta pakar dan pembangun WordPress boleh mencipta alatan dan sambungan serta berkongsinya dengan orang ramai.

Mari lihat cara memasukkan fail CSS dan JS ke dalam projek wordpress anda.

Kebanyakan pembangun yang lebih segar suka,

Dalam “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>

Salin selepas log masuk

Dalam “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>

Salin selepas log masuk

Tetapi, ini bukan cara yang betul untuk memasukkan fail CSS dan JS di dalam projek wordpress anda. Untuk membuat dok itu, mula-mula pergi ke fail "functions.php" anda dan masukkan fail seperti ini. Mari lihat helah sigma….

Langkah 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');

Salin selepas log masuk

Nota: Wordpress menyediakan versi jquery yang tidak dimampatkan. Jadi kita hanya boleh menggunakan jquery itu di dalam fail js yang diperlukan! Untuk itu anda hanya lulus parameter array('jquery') di dalam “wp_eneueue_script” . Satu perkara yang perlu diingat ialah JQuery mempunyai 2 versi utama: tidak dimampatkan dan dimampatkan. Di dalam versi yang tidak dimampatkan, AJAX tidak akan berfungsi dengan betul.

Langkah 2: Sekarang di dalam “header.php”
Sekarang, kita perlu menggunakan wp_head(); berfungsi di bawah tag

<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>

Salin selepas log masuk

Langkah 3: Sekarang di dalam “footer.php”
Sekarang, kita perlu menggunakan wp_footer(); di bawah tag.

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

Salin selepas log masuk

Termasuk wp_head() dan wp_footer() dalam tema WordPress anda adalah penting. Fungsi ini secara automatik memasukkan skrip, gaya dan metadata penting yang diperlukan oleh WordPress, tema dan pemalam, memastikan kefungsian, keserasian dan prestasi yang betul. wp_head() menambah elemen yang diperlukan dalam bahagian untuk SEO, manakala wp_footer() menyertakan skrip pada penghujungnya untuk menangguhkan JavaScript tidak kritikal, meningkatkan kelajuan pemuatan halaman. Fungsi ini penting untuk penyepaduan pemalam dan penyesuaian tema dinamik, serta peletakan analitis dan kod penjejakan yang betul.

Atas ialah kandungan terperinci Enqueue CSS dan Skrip JS dalam WordPress untuk Prestasi Lebih Baik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!