it-swarm.com.de

wp_add_inline_script ohne Abhängigkeit

Ich habe ein Javascript-Snippet, das ich in die Fußzeile der Seite einfügen möchte. Es ist ein Tracking-Code, ähnlich wie bei Google Analytics. Es gibt 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 bisschen blöd (dummy.js ist eine leere Datei), funktioniert aber. Gibt es eine Möglichkeit, die Abhängigkeit zu überspringen?

9
jimlongo

wp_add_inline_style() - ohne Abhängigkeit

Die Funktion 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 Aktion wp_enqueue_scripts einbinden würden.

wp_add_inline_script() - ohne Abhängigkeit

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

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

das wird das folgende in der Kopfzeile anzeigen, d.h. zwischen den <head>...</head> Tags:

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

Um es in der Fußzeile anzuzeigen :

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 $position-Eingabeargument in wp_add_inline_script() ist 'after'. Der Wert 'before' gibt ihn über 'after' aus.

7
birgire

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 @ birgires Antwort für Implementierungen.

Bei Verwendung von wp_add_inline_script() wird WP_Scripts::print_inline_script() letztendlich zur Ausgabe von Inline-Skripten verwendet. Standardmäßig erfordert print_inline_script() eine gültige Abhängigkeit, $handle.

Da in diesem Fall keine Abhängigkeit besteht, ist wp_add_inline_script() nicht das richtige Werkzeug für den Job. Anstatt eine gefälschte Abhängigkeitsdatei (und eine unerwünschte zusätzliche HTTP-Anforderung) zu erstellen, verwenden Sie wp_head oder wp_footer, um das Inline-Skript auszugeben:

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 .js-Datei hinzugefügt und mit wp_enqueue_script() am wp_enqueue_scripts-Hook in die Warteschlange gestellt werden. Daten können dem Skript mit wp_localize_script() zur Verfügung gestellt werden. Manchmal kann es dennoch erforderlich sein, ein Inline-Skript hinzuzufügen.

5
Dave Romsey

Eine Möglichkeit, dies zu tun, besteht darin, eine Funktion zu erstellen, die Ihr Skript in einem <script> -Tag wiedergibt, und es mit der Aktion wp_print_footer_scripts zu verknüpfen. Sie sollten darauf achten, alles zu vermeiden, was Sie nicht genau kontrollieren. Dies ist jedoch eine im Allgemeinen sichere und einfache Methode.

Zum Beispiel:

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