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/[email protected]/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: 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.
    <?php echo get_bloginfo(); ?>                

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

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 von WordPress, Themes und Plugins benötigt werden 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 einfügt, um nicht kritisches JavaScript zu verschieben 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.

","image":"http://www.luping.net/uploads/20240929/172757700566f8bbad10cf2.jpg","datePublished":"2024-11-04T20:05:55+08:00","dateModified":"2024-11-04T20:05:55+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Stellen Sie CSS- und JS-Skripte in WordPress in die Warteschlange, um eine bessere Leistung zu erzielen

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

Veröffentlicht am 04.11.2024
Durchsuche:899

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“

    <?php echo get_bloginfo(); ?>

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/[email protected]/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: 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.
    <?php echo get_bloginfo(); ?>

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

Freigabeerklärung Dieser Artikel ist abgedruckt unter: https://dev.to/shimanta_microcodes/enqueue-css-and-js-scripts-in-wordpress-for-better-performance-32ao?1 Bei Verstößen wenden Sie sich bitte an Study_golang@163 .com, um es zu löschen
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3