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

WordPressist 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 IhrWordPress-Projekt einreihen.

Die meisten neuen Entwickler mögen,

Innerhalb von„header.php“

Innerhalb von„footer.php“

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

Hinweis:Wordpressbietet eineunkomprimierte Version von jquery. Wir können diese JQuery also einfach in den erforderlichen JS-Dateien verwenden! Dazu übergeben Sie einfach den Parameterarray('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

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

Das Einfügen vonwp_head()undwp_footer()in Ihr WordPress-Theme ist von entscheidender Bedeutung. DieseFunktionen fügen automatisch wichtige Skripte, Stile und Metadaten ein, die für WordPress, Themes und Plugins erforderlich sindund stellen so die ordnungsgemäße Funktionalität, Kompatibilität und Leistung sicher. wp_head() fügt im Abschnittnotwendige Elemente fürSEOhinzu, 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!