Rumah >pembangunan bahagian belakang >tutorial php >Enqueue CSS dan Skrip JS dalam WordPress untuk Prestasi Lebih Baik

Enqueue CSS dan Skrip JS dalam WordPress untuk Prestasi Lebih Baik

WBOYasal: 2024-08-22 06:34:39320semak imbas

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>

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>

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

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>

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

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

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!

php JavaScript jquery css ajax Array for while public JS function this WordPress SEO

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara Menghantar Data Dari Laluan ke Pengawal dan Lihat dalam Laravel 11Artikel seterusnya：Cara Menghantar Data Dari Laluan ke Pengawal dan Lihat dalam Laravel 11

Artikel berkaitan

Lihat lagi