Stellen Sie CSS- und JS-Skripte in WordPress in die Warteschlange, um eine bessere Leistung zu erzielen-PHP-Tutorial-php.cn

Stellen Sie CSS- und JS-Skripte in WordPress in die Warteschlange, um eine bessere Leistung zu erzielen

WBOY

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

Original

301 Leute haben es durchsucht

Enqueue CSS and JS Scripts in WordPress for Better Performance

WordPress ist Open-Source-Software – Benutzer können sie nach Belieben installieren, ändern und verteilen. Da der Quellcode für jedermann zugänglich ist, können Millionen von WordPress-Experten und -Entwicklern Tools und Erweiterungen erstellen und diese mit der Öffentlichkeit teilen.

Sehen wir uns an, wie Sie CSS- und JS-Dateien in Ihr WordPress-Projekt einreihen.

Die meisten neuen Entwickler mögen,

Innerhalb von „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>

Nach dem Login kopieren

Innerhalb von „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>

Nach dem Login kopieren

Dies ist jedoch nicht die richtige Methode, CSS- und JS-Dateien in Ihr WordPress-Projekt einzureihen. Um dies anzudocken, gehen Sie zunächst zu Ihrer Datei „functions.php“ und stellen Sie die Dateien auf diese Weise in die Warteschlange. Sehen wir uns den Sigma-Trick an ….

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

Nach dem Login kopieren

Hinweis: Wordpress bietet eine unkomprimierte Version von jquery. Wir können diese JQuery also einfach in den erforderlichen JS-Dateien verwenden! Dazu übergeben Sie einfach den Parameter array('jquery') in „wp_eneueue_script“. Beachten Sie, dass JQuery zwei Hauptversionen hat: unkomprimiert und komprimiert. In der unkomprimierten Version funktioniert AJAX nicht richtig.

Schritt 2: Jetzt in „header.php“
Jetzt müssen wir wp_head(); Funktion unter

Tags.

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

Nach dem Login kopieren

Schritt 3: Jetzt in „footer.php“
Jetzt müssen wir wp_footer(); unter dem Tag.

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

Nach dem Login kopieren

Das Einfügen von wp_head() und wp_footer() in Ihr WordPress-Theme ist von entscheidender Bedeutung. Diese Funktionen fügen automatisch wichtige Skripte, Stile und Metadaten ein, die für WordPress, Themes und Plugins erforderlich sind und stellen so die ordnungsgemäße Funktionalität, Kompatibilität und Leistung sicher. wp_head() fügt im Abschnitt notwendige Elemente für SEO hinzu, während wp_footer() am Ende Skripte einschließt, um nicht kritisches JavaScript zu verzögern und so die Seitenladegeschwindigkeit zu verbessern. Diese Funktionen sind für die Plugin-Integration und dynamische Theme-Anpassungen sowie die korrekte Platzierung von Analyse- und Tracking-Codes von entscheidender Bedeutung.

Das obige ist der detaillierte Inhalt vonStellen Sie CSS- und JS-Skripte in WordPress in die Warteschlange, um eine bessere Leistung zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!