Comment modifier correctement les fichiers JavaScript dans un thème parent

J'ai récemment eu besoin de modifier un fichier JavaScript dans un thème parent WordPress. Le script faisait presque ce que je voulais, mais pas tout à fait, je voulais donc apporter des modifications mineures. Dans votre cas, vous souhaiterez peut-être remplacer entièrement un fichier JavaScript de thème parent dans votre thème enfant ou même désactiver tout fichier JavaScript de thème parent.

Ce qu'il ne faut pas faire: Modifier JavaScript du thème parent directement

La bonne façon de modifier un fichier JavaScript de thème parent est la suivante: ne pas pour modifier ce fichier lui-même. La raison est simple: si votre thème parent se met à jour, vous perdrez toutes vos modifications. C’est tout l’intérêt des thèmes enfants de WordPress. C’est aussi vrai pour JavaScript que pour tout le reste.

Tous vos changements devront donc être dans le thème de votre enfant. Si vous apportez des modifications à votre thème parent, vous le faites mal.

Que faire: retirer le script du thème parent, puis placer le script du thème enfant en file d'attente

Vous ne modifiez ni ne remplacez les fichiers JavaScript du thème parent. Toi Arrêtez exécutez les scripts de thème parent et remplacez-les par des scripts similaires dans le thème enfant.

Voici le problème: WordPress n’a pas de «hiérarchie de modèles» pour les fichiers JavaScript, comme c’est le cas pour les fichiers PHP. Dans WordPress, rien ne permet de «remplacer le code JavaScript» dans un thème enfant ou ailleurs.

Au lieu de cela, les fichiers JavaScript sont mis en file d'attente en utilisant wp_enqueue_script (). Tout script en file d'attente sera exécuté, qu'il s'agisse du thème parent ou du thème enfant.

Alors, comment modifier ou remplacer les scripts de thème parent? Vous pas. Toi Arrêtez exécutez les scripts de thème parent, puis remplacez-les par des scripts similaires dans le thème enfant.

En d'autres termes, vous suivez ces étapes:

1. Copiez le fichier JavaScript de votre thème parent dans votre thème enfant et apportez les modifications nécessaires.
2. Supprimez le fichier JavaScript du thème parent.
3. Mettez en file d'attente le fichier JavaScript du thème enfant.

Le guide vidéo ci-dessous vous montre comment suivre ces trois étapes pour modifier les fichiers JavaScript du thème parent dans un thème enfant:

Modification de fichiers JavaScript dans un thème WordPress Parent: Analyse de code

Le code important du guide vidéo est le suivant:

/ * Mettez ceci dans le functions.php de votre thème enfant * /

add_action ('wp_enqueue_scripts', 'wpshout_dequeue_and_then_enqueue', 100);

fonction wpshout_dequeue_and_then_enqueue () 
    // Supprimer le script de thème parent (supprimer)
    wp_dequeue_script ('parent-script à modifier');

    // Script de thème enfant de remplacement en file d'attente
    wp_enqueue_script (
        'modified-child-script',
        get_stylesheet_directory_uri (). '/js/modified-child-script.js',
        tableau ('jquery')
    )

La chose importante à comprendre dans l'appel à wp_dequeue_script () est le manipuler du script original que nous voulons supprimer – dans ce cas, script-parent à modifier.

Vous trouverez très facilement cette poignée dans l’appel à wp_enqueue_script () qui a à l'origine mis ce script en file d'attente. (Alors, quand on a mis 'modified-child-script' comme le premier argument de notre propre wp_enqueue_script (), nous définissons le pseudo de ce script sur script-enfant modifiéet c’est le pseudonyme que nous utiliserions également pour retirer ce script.)

Si vous ne trouvez pas ça wp_enqueue_script () appelez, vous devrez peut-être trouver la poignée de manière plus «dure», ce que je vais décrire dans cet article.

Cela fonctionne aussi sur les scripts de plugin

Ce n'est pas juste pour les thèmes. Le mécanisme de base de wp_dequeue_script () pour le code JS indésirable et intouchable, plus wp_enqueue_script () pour le code que vous voulez, fonctionne également pour la modification de scripts de plug-in. Et vous suivez presque le même processus pour les feuilles de style CSS, sauf avec wp_dequeue_style () et wp_enqueue_style () au lieu de _scénario().

Bonne file d'attente, et si vous voulez mieux comprendre wp_enqueue_script (), wp_dequeue_script (), thèmes pour les parents et les enfants, plugins et bien d’autres encore, consultez notre cours «apprendre le développement WordPress» Opérationnel:

Crédit image: Dmitry Baranovskiy

Apparenté, relié, connexe