webentwicklung-frage-antwort-db.com.de

Wie reihen Sie Skript-Tags für ReactDOM in die Datei functions.php von WordPress ein?

Ich bin hin und her gerissen, wo die beste Stelle für diese Frage ist, aber als ich den Zweck von React crossorigin untersuchte, fand ich die Antwort auf MDN:

crossorigin
Normale Skriptelemente übergeben minimale Informationen an window.onerror für Skripte, die die Standard-CORS-Prüfungen nicht bestehen. Verwenden Sie dieses Attribut, um die Fehlerprotokollierung für Sites zuzulassen, die eine separate Domäne für statische Medien verwenden. Eine ausführlichere Erläuterung der gültigen Argumente finden Sie unter CORS-Einstellungsattribute.

- MDN

und beim Betrachten der Verwendung von ReactDOM habe ich die Skript-Tags am Ende von gesehen:

<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script>window.ReactDOM || document.write('<script crossorigin src="path/to/react-dom.development.js"><\/script>')</script>

In WordPress kenne ich eine grundlegende Enqueue:

function theme_js() {
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_js' );

und mit WordPress habe ich Skripte an die Fußzeile angehängt mit:

function inline_script() {
    ?>
    <script type="text/javascript">
    // js code goes here
    </script>
    <?php
}
add_action( 'wp_footer', 'inline_script' );

Beim Ausführen einer Abfrage durch vorherige Fragen mit den Parametern von [wordpress] crossorigin wurde diese Frage nicht gestellt. Gibt es eine Möglichkeit, ReactDOM in einem WordPress-Theme zu codieren, außer es in der Fußzeile mit so etwas wie:

function react_dom() {
    ?>
        <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
        <script>window.ReactDOM || document.write('<script crossorigin src=" <?php get_template_directory_uri() ?>/react-dom.development.js"><\/script>')</script>
    <?php
}
add_action( 'wp_footer', 'react_dom' );

Wie soll ReactDOM wp_enqueue_scripts sein oder in die Fußzeile eingefügt werden?


Als Referenz wurde dies im Chat erwähnt: Wie füge ich das defer = "defer" -Tag in die Java-Skripte des Plugins ein?

Ich denke also, Sie können den script_loader_tag-Filter verwenden, um HTML zu ersetzen, während das Skript geladen wird. Auf diese Weise können Sie steuern, wo Sie das Skript wie gewohnt über den wp_enqueue_scripts-Hook in die Warteschlange stellen, während Sie weiterhin Skriptattribute hinzufügen können .

Die Enqueue

/**
 * Enqueue whatever script we may need
 *
 * @return void
 */
function wpse302526_enqueue_react() {

    wp_enqueue_script(
        'react',    // File handle/slug
        $file_url,      // URL to file
        array(),        // Dependencies
        false,          // Version
        true            // Add to Header ( false ) or Footer ( true )
    );

}
add_action( 'wp_enqueue_scripts', 'wpse302526_enqueue_react' );

Wir werden das Skript speziell nach dem Handle/Script Slug ausrichten.

Das Suchen/Ersetzen

/**
 * Modify the enqueue script tag
 *
 * @param String $html      - Generated script HTML
 * @param String $handle    - Script slug/handle
 *
 * @return $html
 */
function wpse302526_modify_script_tags( $html, $handle ) {

    /** Add script attribute **/
    if( 'react' === $handle ) {

        /* Add `crossorigin` attribute */
        $html = str_replace(
            '<script',
            '<script crossorigin',
            $html
        );

        /* Initialize ReactDOM */
        $html = str_replace(
            '</script>',
            'window.ReactDOM</script>',
            $html
        );

    }

    return $html;

}
add_filter( 'script_loader_tag', 'wpse302526_modify_script_tags', 10, 2 );

Ich denke, wenn Sie können, sollten Sie diesen Teil außerhalb Ihrer Warteschlange vermeiden, da er für Entwickler, die darauf stoßen, verwirrend sein könnte. Wenn Sie alle Ihre Warteschlangen und Skript-URLs an einem Ort aufbewahren (anstatt zwischen den beiden Filtern hin- und hergerissen zu werden), ist dies das Beste. Wenn Sie es nicht vermeiden können, können Sie es hinzufügen.

document.write('<script crossorigin src=" <?php get_template_directory_uri() ?>/react-dom.development.js"><\/script>')

Wenn Sie die obige Zeile unbedingt benötigen, würde ich mich für den wp_footer-Ansatz entscheiden, um alles an einem Ort zu halten.

2
Howdy_McGee