Skripte und Stile in WordPress aufnehmen

Key Takeaways

• Enqueuching Skripte und Stile in WordPress sind wichtig, um die Leistung aufrechtzuerhalten und Konflikte zwischen verschiedenen Skripten und Stilen zu verhindern. Die empfohlene Möglichkeit zum Hinzufügen von Skripten besteht darin
Es ist möglich, unnötige Skripte zu entfernen, die Fehler oder Konflikte verursachen, indem die Funktion wp_deregister_style verwendet wird. Dies ist im Debug -Modus besonders nützlich, wenn Probleme bei der Fehlerbehebung bilden.
Arbeiten mit Shortcodes müssen häufig Skripte in die Seite eingefügt werden. Dies kann erreicht werden, indem ein Rückruf auf dem Filter des Kontents registriert und getestet wird, wenn er den Shortcode enthält. Diese Lösung kann jedoch Leistungsprobleme auf Websites mit hoher Last haben. Eine ausgefeiltere Lösung besteht
Nachdem Sie eine Weile WordPress -Plugins und Themen entwickelt haben, denken Sie immer mehr über Ihre Themenleistung und welche Probleme für Ihre Kunden nachdenken. Eines dieser Probleme ist, Skripte und Stile zu entsprechen. In diesem Artikel behandeln wir die Grundlagen von Skripten und Best Practices für verschiedene Anwendungsfälle. Sie können diesen Artikel auf einen Anfängerüberblick über die Verwaltung Ihres WordPress -Vermögens überprüfen.

Enqueingum Skripte und Stile

Wenn Sie einige CSS- oder JavaScript -Code in bestimmte Seiten Ihrer Website injiziert werden müssen, neigen wir dazu, sie entweder in derselben Markup -Datei hinzuzufügen oder sie mit einer direkten URL zur Datei hinzuzufügen.

Dies ist jedoch nicht die empfohlene Möglichkeit für das Hinzufügen von Skripten, und Caching -Plugins optimieren und zwischenstrahlen Ihre Assets nicht, um die Leistung der Website zu erhöhen. Wir müssen den Hook admin_enqueue_scripts verwenden.

// ...
<script type="text/javascript">
    // some JS code
</script>

<style type="text/css">
    // some CSS code
</style>
//...

<script type="text/javascript" src="<?=%20plugins_url('assets/js/main.js')%20?>"></script>

Der erste Parameter für die Methode WP_ENQUEUE_Script ist der Skript -Handler -Name. Wir sollten den Handler immer Präfix, um Konflikte zu vermeiden und sicherzustellen, dass unser Skript immer geladen wird.

add_action( 'admin_enqueue_scripts', function($hook) {
    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

Die aktuelle Lösung ist nicht perfekt und unser Skript ist auf jeder Back -End -Seite enthalten. Wir können die an die Rückruffunktion übergebene $ Hook -Variable verwenden, um eine bestimmte Seite zu testen.

Jetzt wird unser Skript nur in die Einstellungen und neue Postseiten enthalten sein. Wir können weiter gehen, um nur unsere Stile aufzunehmen, wenn der Benutzer eine neue Seite erstellt.

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( !in_array($hook, array("options-general.php", "post-new.php")) )
        return;

    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

unnötige Skripte entfernen

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( $hook == "post-new.php" && isset($_GET['post_type']) && $_GET['post_type'] == "page" )
    {
        $pluginPrefix = "my-prefix";
        wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
    }
} );

Die meisten Entwickler kümmern sich nicht darum, ihre Skripte genau bei Bedarf zu erfüllen. Aus diesem Grund werden wir immer unerwartete Fehler und seltsame Probleme mit dem Styling bekommen. Wenn Sie feststellen, dass ein Skript einen Fehler wirft oder Konflikte verursacht, können Sie es entfernen, bevor Sie Ihre eigenen hinzufügen, dies ist häufig im Debug -Modus nützlich.

// ...
<script type="text/javascript">
    // some JS code
</script>

<style type="text/css">
    // some CSS code
</style>
//...

<script type="text/javascript" src="<?=%20plugins_url('assets/js/main.js')%20?>"></script>

Arbeiten mit Shortcodes

Die meisten Plugins und Themen bieten eine Reihe von Shortcodes, um mit der Website zu interagieren. Manchmal müssen sie Skripte in die Seite injizieren. Leider können wir nicht wie bisher für das Back -End auf Front -End -Seiten testen.

Eine einfache Möglichkeit, dies zu erreichen, besteht darin, einen Rückruf auf dem Filter zu registrieren und zu testen, ob es Ihren Shortcode enthält. Wenn es zurückgibt, können Sie Ihre Skripte einsetzen, sonst nichts tun.

add_action( 'admin_enqueue_scripts', function($hook) {
    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

Der obige Code funktioniert hervorragend und enthält nur unsere Skripte für Beiträge, die unseren Shortcode enthalten. Diese Lösung hat jedoch einige ernsthafte Leistungsprobleme auf Websites mit hoher Last. Wir werden eine ausgefeiltere Lösung für dieses Problem erstellen.

Wenn Sie den Komponisten noch nicht verwenden, um Ihre Klassen zu laden, empfehle ich Ihnen, dies zu tun. Unsere Plugin Composer.json -Datei würde wie Folgendes aussehen:

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( !in_array($hook, array("options-general.php", "post-new.php")) )
        return;

    $pluginPrefix = "my-prefix";
    wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
} );

Die SRC/Shortcodes/HelloshortCode.php -Klasse enthält unsere Shortcode -Definition.

add_action( 'admin_enqueue_scripts', function($hook) {
    if ( $hook == "post-new.php" && isset($_GET['post_type']) && $_GET['post_type'] == "page" )
    {
        $pluginPrefix = "my-prefix";
        wp_enqueue_script( "{$pluginPrefix}main-js", plugins_url('assets/js/main.js'), ['jquery'] );
    }
} );

Die Run -Methode gibt das HTML -Markup für unseren Shortcode zurück und setzt das geladene statische Attribut auf True, wenn der Shortcode verwendet wird.

Die EnqueueScript -Methode wird unsere Stile unterliegen, wenn das Plugin geladen wird. Der verbleibende Teil registriert unseren Shortcode, um innerhalb des Post -Inhalts erkannt zu werden.

add_action( 'admin_enqueue_scripts', function($hook) {
    $unautorized_styles = [
        'script1',
        'another-script'
    ];

    foreach ( $unautorized_styles as $handle )
    {
        wp_deregister_style( $handle );
    }

    // enqueue my scripts
} );

Sicherlich können wir es vermeiden, diesen Code in die Haupt -Plugin -Datei zu legen, aber wir werden die Dinge einfach und lesbar halten.

Die Variable $ mortcodes enthält eine Liste der verfügbaren Shortcodes. Die erste Schleife registriert unseren Shortcode und macht die Run -Methode zum Handler. Als nächstes verwenden wir den WP_FOOLER -Hook, um unsere Shortcode -Skripte zu enqueue, bevor wir das Body -Tag schließen.

Sie können jetzt eine neue Seite erstellen, die unseren Shortcode enthält, und überprüfen, ob unser Skript ordnungsgemäß geladen ist.

Schlussfolgerung

Dieser kurze Artikel war eine Zusammenfassung, wie Sie Ihre Plugin- und Themenskripte aufnehmen können, und der beste Weg, um sie zu vermeiden, sie auf jeder Seite auf Ihrer Website zu laden. Wenn Sie Fragen oder Kommentare haben, posten Sie sie unten und ich werde mein Bestes geben, um sie zu beantworten!

häufig gestellte Fragen (FAQs) zu Enqueinging -Skripten und Stilen in WordPress

Was ist der Zweck von Skripten und Stilen in WordPress? Es hilft, Konflikte zwischen verschiedenen Skripten und Stilen zu verhindern, die Ihr Thema oder Ihre Plugins möglicherweise verwenden. Durch Enqueuing sagen Sie WordPress, wann Sie das Skript/Stil laden sollen, wo es geladen werden soll und von welchem ​​anderen Skripte/Stile es abhängt.

Wie befreie ich ein Skript in WordPress? Diese Funktion erfordert mindestens zwei Parameter: den Handle (ein eindeutiger Name für das Skript) und die SRC (die URL des Skripts). Sie können auch zusätzliche Parameter wie Abhängigkeiten, Versionen und das Laden des Skripts in die Fußzeile angeben. Um ein Skript bei WordPress zu registrieren, gibt es jedoch einen wichtigen Unterschied. wp_register_script () registriert nur das Skript und enthält es nicht. Dies bedeutet, dass das Skript nur gedruckt wird, es sei denn, es ist später mit wp_enqueue_script () eingestuft. Auf der anderen Seite registriert und enqueueue wp_enqueue_script () das Skript, was bedeutet, dass es in der HTML gedruckt wird. Verwenden Sie die Funktion wp_enqueue_style (). Diese Funktion funktioniert ähnlich wie wp_enqueue_script (), wird jedoch für Stylesheets anstelle von Skripten verwendet. Ihre Skripte und Stile. Dieser Haken wird aufgerufen, wenn WordPress die Skripte und Stile in der HTML drucken soll. Wenn Sie sich darauf einversetzen, stellen Sie sicher, dass Ihre Skripte und Stile zum richtigen Zeitpunkt auftreten. oder Stile sind in der richtigen Reihenfolge geladen. Wenn Ihr Skript von einem anderen Skript abhängt (wie JQuery), stellt WordPress sicher, dass JQuery vor Ihrem Skript geladen wird. Ein Skript oder Stil in WordPress unter Verwendung der Funktion wp_dequeue_script () oder wp_dequeue_style (). Dies ist nützlich, wenn Sie verhindern möchten, dass ein Skript oder Stil geladen wird. Bereich mit dem Aktionshaken "Admin_enqueue_Scripts". Dies funktioniert ähnlich wie der Haken von 'wp_enqueue_scripts', aber es wird für den Administratorbereich anstelle des Front-Ends verwendet. Hook ist ein älterer Haken, der verwendet wurde, um Skripte zu erlangen. Es wird jedoch nicht mehr empfohlen, diesen Haken zu verwenden, da dies zu Problemen mit der Ladereihenfolge des Skripts führen kann. Sie sollten stattdessen den Haken "WP_ENQUEUE_Scripts" verwenden. Beispielsweise können Sie die Funktion is_page () verwenden, um nur ein Skript oder einen Stil zu erlangen, wenn eine bestimmte Seite angezeigt wird. Dies kann für die Leistung nützlich sein, da sie verhindert, dass unnötige Skripte und Stile geladen werden.

Das obige ist der detaillierte Inhalt vonSkripte und Stile in WordPress aufnehmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!