wp_add_inline_script ohne Abhängigkeit

11

Ich habe ein Javascript-Snippet, das ich in die Fußzeile der Seite einfügen möchte. Es handelt sich um einen Tracking-Code, ähnlich wie bei Google Analytics. Es hat keine Abhängigkeiten, es ist ein eigenständiges Snippet.

Ich kann so etwas machen

function render_tracking_code(){
    wp_enqueue_script( 'depends-js', 'https://rdiv.com/dummy.js', array(), '0.01', true );
    wp_add_inline_script( 'depends-js', 'aWholeBunchOfJavascriptCode' );
}
add_action( 'wp_enqueue_scripts', 'render_tracking_code' );

Scheint ein wenig dumm (dummy.js ist eine leere Datei), funktioniert aber. Gibt es eine Möglichkeit, die Abhängigkeit zu überspringen?

javascript wp-enqueue-script Jimlongo
quelle

Antworten:

13

wp_add_inline_style() - ohne Abhängigkeit

Das wp_add_inline_style()kann ohne Abhängigkeit von der Quelldatei verwendet werden.

Hier ist ein Beispiel von @Flix:

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );
wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

wo wir dies in die wp_enqueue_scriptsAktion einbinden würden .

wp_add_inline_script() - ohne Abhängigkeit

Laut Ticket Nr. 43565 wird Ähnliches wp_add_inline_script()in der Version unterstützt (danke an @MarcioDuarte, @ dev101 und @DaveRomsey für die Überprüfung in den Kommentaren):4.9.9 5.0

wp_register_script( 'dummy-handle-header', '' );
wp_enqueue_script( 'dummy-handle-header' );
wp_add_inline_script( 'dummy-handle-header', 'console.log( "header" );' );

Dadurch wird in der Kopfzeile zwischen den <head>...</head>Tags Folgendes angezeigt :

<script type='text/javascript'>
console.log( "header" );
</script>

So zeigen Sie es in der Fußzeile an :

wp_register_script( 'dummy-handle-footer', '', [], '', true );
wp_enqueue_script( 'dummy-handle-footer'  );
wp_add_inline_script( 'dummy-handle-footer', 'console.log( "footer" );' );

Der Standardwert für das $positionEingabeargument in wp_add_inline_script()ist 'after'. Der 'before'Wert gibt es oben aus 'after'.

Birgire
quelle
Das wp_add_inline_script()ohne Abhängigkeit wird für 4.9.9 immer noch berücksichtigt, es bedeutet nicht unbedingt, dass es hinzugefügt wird. Es ist daher ratsam, auf die Bestätigung zu warten, bevor Sie diese Funktion verwenden.
Marcio Duarte
1
Ab WP 5.0 können wir loslegen .
Dave Romsey
Jemand hat meinen Kommentar von hier gelöscht (ich habe Birgires Antwort bestätigt, dass er tatsächlich in WP 5.0+ funktioniert), und einen Monat später brauchte ich diesen Code tatsächlich wieder, googelte, fand diese Antwort, fegte auf einen Blick, fand meinen Kommentar nicht und bewegte mich weiter zu anderen Ergebnissen. Kurz nach einer Stunde kam ich hierher zurück und erkannte, dass dies die Antwort war, nach der ich suchte! An den Moderator: Bitte löschen Sie NICHT meine nützlichen Kommentare, sie dienen mir sowie zukünftigen Referenzen und Erinnerungen, nicht nur für andere. Vielen Dank.
dev101
Leider muss ich mich an Version 4.9.x halten.
Lucas Vendramini
5

Update: WordPress hat Unterstützung für das Hinzufügen von Inline-Skripten und -Stilen ohne Abhängigkeit in Version 5.0 hinzugefügt. Siehe @ Antwort des birgire für Implementierungen.

Bei der Verwendung wp_add_inline_script(), WP_Scripts::print_inline_script()wird letztlich zur Ausgabe von Inline - Scripts verwendet werden. Mit dem Design, print_inline_script()erfordert eine gültige Abhängigkeit $handle.

Da es in diesem Fall keine Abhängigkeit gibt, wp_add_inline_script()ist es nicht das richtige Werkzeug für den Job. Verwenden Sie wp_headoder wp_footerzum Ausgeben des Inline-Skripts, anstatt eine gefälschte Abhängigkeitsdatei (und eine unerwünschte zusätzliche HTTP-Anforderung) zu erstellen :

add_action( 'wp_head', 'wpse_add_inline_script' );
function wpse_add_inline_script() {
  echo '<script>' . PHP_EOL;

  // aWholeBunchOfJavascriptCode

  echo '</script>' . PHP_EOL;
}

Im Allgemeinen sollte JavaScript zu einer .jsDatei hinzugefügt und mit wp_enqueue_script()dem wp_enqueue_scriptsHook in die Warteschlange gestellt werden . Daten können dem Skript mit zur Verfügung gestellt werden wp_localize_script(). Manchmal kann es dennoch erforderlich sein, ein Skript inline hinzuzufügen.

Dave Romsey
quelle
0

Eine Möglichkeit, dies zu tun, besteht darin, eine Funktion zu erstellen, die Ihr Skript in einem <script>Tag wiedergibt, und es mit der wp_print_footer_scriptsAktion zu verknüpfen. Sie sollten darauf achten, alles zu vermeiden, was Sie nicht streng kontrollieren. Andernfalls ist dies eine allgemein sichere und einfache Methode.

Beispielsweise:

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        (function myFunction() { 
            /* your code here */
        })();
    </script>
<?php 
} );
Morgan Estes
quelle