web-dev-qa-db-fra.com

Comment mettre en file d'attente les balises de script pour ReactDOM dans le fichier functions.php de WordPress?

Je suis déchirée. C’est le meilleur endroit pour répondre à cette question, mais lorsqu’on a recherché le but de React crossorigin, j’ai trouvé la réponse sur MDN:

origines croisées
Les éléments de script normaux transmettent un minimum d’informations à window.onerror pour les scripts qui ne passent pas les vérifications standard CORS. Pour permettre la journalisation des erreurs pour les sites utilisant un domaine distinct pour les supports statiques, utilisez cet attribut. Voir Attributs des paramètres CORS pour une explication plus descriptive des arguments valides.

- MDN

et en regardant en utilisant ReactDOM, j'ai vu les balises de script au bas de:

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

Dans WordPress, je connais une mise en file d'attente de base:

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' );

et avec WordPress, j'ai joint des scripts au pied de page avec:

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

Lors de l'exécution d'une requête à travers les questions précédentes avec les paramètres de [wordpress] crossorigin, je n'ai pas vu cette question posée. Existe-t-il un moyen approprié de coder pour ReactDOM dans un thème WordPress en plus de l’appeler dans le pied de page avec quelque chose comme:

function react_dom() {
    ?>
        <script crossorigin src="https://unpkg.com/react-dom@16/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' );

Comment ReactDOM doit-il être wp_enqueue_scripts ou doit-il être ajouté au pied de page?

Pour référence, cela a été mentionné dans le chat: Comment ajouter la balise defer = “defer” dans les plugins javascripts?

theme-developmentwp-enqueue-script
3
DᴀʀᴛʜVᴀᴅᴇʀ

Je pense donc que vous pouvez utiliser le filtre script_loader_tag pour remplacer le code HTML lors du chargement du script. Cela vous permettra de contrôler où vous mettez le script en file d'attente comme d'habitude via le hook wp_enqueue_scripts tout en vous permettant d'ajouter des attributs de script. .

L'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' );

Nous allons cibler le script spécifiquement par le slug handle/script.

La recherche/remplacement 

/**
 * 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 );

Je pense que si vous le pouviez, vous devriez éviter de faire cette partie en dehors de votre file d'attente, car cela pourrait prêter à confusion pour les développeurs qui la rencontrent. Garder toutes vos entrées de file d'attente et les URL de script au même endroit (au lieu d'être déchirées entre les deux filtres) semble préférable. Si vous ne pouvez pas l'éviter, n'hésitez pas à l'ajouter.

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

Si vous avez absolument besoin de la ligne ci-dessus, j'utiliserais l'approche wp_footer pour tout conserver au même endroit.

2
Howdy_McGee