Heim Backend-Entwicklung PHP-Tutorial 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

Aug 22, 2024 am 06:34 AM

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

11 beste PHP -URL -Shortener -Skripte (kostenlos und Premium) 11 beste PHP -URL -Shortener -Skripte (kostenlos und Premium) Mar 03, 2025 am 10:49 AM

11 beste PHP -URL -Shortener -Skripte (kostenlos und Premium)

Arbeiten mit Flash -Sitzungsdaten in Laravel Arbeiten mit Flash -Sitzungsdaten in Laravel Mar 12, 2025 pm 05:08 PM

Arbeiten mit Flash -Sitzungsdaten in Laravel

Vereinfachte HTTP -Reaktion verspottet in Laravel -Tests Vereinfachte HTTP -Reaktion verspottet in Laravel -Tests Mar 12, 2025 pm 05:09 PM

Vereinfachte HTTP -Reaktion verspottet in Laravel -Tests

Einführung in die Instagram -API Einführung in die Instagram -API Mar 02, 2025 am 09:32 AM

Einführung in die Instagram -API

Erstellen Sie eine React -App mit einem Laravel -Back -Ende: Teil 2, reagieren Erstellen Sie eine React -App mit einem Laravel -Back -Ende: Teil 2, reagieren Mar 04, 2025 am 09:33 AM

Erstellen Sie eine React -App mit einem Laravel -Back -Ende: Teil 2, reagieren

Curl in PHP: So verwenden Sie die PHP -Curl -Erweiterung in REST -APIs Curl in PHP: So verwenden Sie die PHP -Curl -Erweiterung in REST -APIs Mar 14, 2025 am 11:42 AM

Curl in PHP: So verwenden Sie die PHP -Curl -Erweiterung in REST -APIs

12 Beste PHP -Chat -Skripte auf Codecanyon 12 Beste PHP -Chat -Skripte auf Codecanyon Mar 13, 2025 pm 12:08 PM

12 Beste PHP -Chat -Skripte auf Codecanyon

Benachrichtigungen in Laravel Benachrichtigungen in Laravel Mar 04, 2025 am 09:22 AM

Benachrichtigungen in Laravel

See all articles