La méthode la plus efficace pour ajouter des scripts en ligne dans WordPress

Publié: 2022-06-16

Les scripts en ligne sont deux mots simples qui font frissonner les développeurs. Les scripts en ligne sont un moyen simple d'ajouter du JavaScript (JS), du CSS et du HTML dans le texte de votre article WordPress. Bien qu'ils puissent être utilisés à de nombreuses fins, une utilisation générale consiste à apporter des modifications à la volée lorsque vous publiez un nouvel article WordPress. Certains diront que ce n'est pas nécessaire, mais cela garantira le bon fonctionnement et l'efficacité de votre site Web.

Une chose que la plupart des utilisateurs de WordPress négligent est de compléter les scripts sur leurs sites. Que vous souhaitiez implémenter un texte en ligne sur une seule page ou sur l'ensemble de votre site Web, il existe de nombreuses façons de le faire avec WordPress. L'ajout de scripts en ligne à votre site Web WordPress peut être aussi simple une fois que vous avez compris les méthodes appropriées pour le faire correctement. Cet article de blog discutera des moyens les plus efficaces d'ajouter facilement des scripts en ligne dans WordPress. Continuez à lire pour en savoir plus.

Ajout via Wp_print_scripts

Si vous cherchez à ajouter des textes en ligne WordPress, alors la fonction WordPress wp_print_scripts ou/et admin_print_scripts est votre réponse. Les wp_print_scripts de WordPress peuvent afficher des balises de texte dans l'en-tête d'un document, ce qui est généralement fait lors de l'inclusion de fichiers JS ou CSS. Cette fonction WordPress vous permettra de rendre votre site plus interactif ou d'ajouter de nouvelles fonctionnalités. Comme pour toute fonction WordPress, il existe quelques règles simples à suivre avant de l'utiliser sur votre site Web.

Cette fonction établit trois variables basées sur les options du plugin WordPress et les affiche sur le front-end (la section head) à l'aide du crochet admin_print_scripts. Pour ajouter les caractères en ligne à la zone Admin, vous pouvez également remplacer wp_print_scripts par la fonction admin_print_scripts et l'appeler un jour.

Lorsque WordPress est installé pour la première fois, il est livré avec de nombreux textes qui sont automatiquement ajoutés au site. Cela peut entraîner une augmentation du temps de chargement et de l'utilisation du processeur sur votre serveur. Une façon de lutter contre cela consiste à utiliser la fonction wp_print_scripts, de sorte que vous ne chargez les textes que lorsqu'ils sont nécessaires ou souhaités. Cela dit, examinons rapidement quelques avantages et inconvénients de l'utilisation de la fonction wp_print_script pour ajouter des caractères en ligne dans votre article WordPress :

Avantages:

Il est toujours simple d'ajouter du texte en ligne à la « section d'en-tête » des pages de WordPress ;
Le code que vous ajoutez n'aura aucune restriction, ce qui signifie que vous pouvez ajouter des variables JS, des fonctions, des méthodes, des conditions ou tout ce que vous souhaitez ajouter à votre site.

Les inconvénients:

Il n'existe aucun moyen spécifique d'associer votre code ajouté à des scripts enregistrés ;
Dans la plupart des cas, le code de sortie sur divers facteurs peut ne pas être un moyen réel et cohérent de contrôler l'emplacement du code de sortie. Cependant, vous pouvez toujours utiliser le paramètre <priority> sous <add_action> pour contrôler l'emplacement de votre code ajouté.

Utilisez la fonction wp_add_inline_script()

Récemment, WordPress a lancé une nouvelle fonction appliquée pour ajouter du JavaScript en ligne aux publications WordPress. Cependant, cette nouvelle intégration est compatible, à partir de la version 4.5 de WordPress, et c'est un moyen plus important d'ajouter des textes en ligne par rapport aux autres options disponibles. Nous définissons la fonction wp_add_inline_script(), et vous vous attendez à ce qu'elle fasse le travail parfaitement. Même le développeur WordPress le plus expérimenté peut confirmer ce fait.

La fonction wp_add_inline_script() est un moyen d'ajouter des caractères en ligne à votre site sans modifier le code de la page WordPress. Cela vous permet d'apporter des modifications en temps réel sans avoir besoin d'un accès FTP ou d'utiliser un plugin. Cette fonction fait également partie des intégrations essentielles que vous pouvez utiliser pour personnaliser votre site WordPress. La procédure vous permet d'ajouter des textes en ligne dans le code de votre site Web, ce qui signifie qu'ils seront ajoutés directement dans les balises HTML de votre page Web. Cela permet beaucoup plus de personnalisation que l'utilisation de fichiers JS externes ou de liens vers d'autres sites Web.

Avantages:

La fonction wp_add_inline_script() est un moyen précieux d'ajouter des caractères en ligne à votre blog WordPress ;
Cela peut être un moyen simple et pratique pour les développeurs d'ajouter du code JS sans modifier le thème WordPress ou les fichiers de plug-in ni modifier le fichier de modèle header.php ;
Cela peut être utile pour ajouter des scripts comme le code Google Analytics. Cela vous évite de modifier le fichier header.php chaque fois qu'il y a une mise à jour avec les fonctionnalités ou les paramètres de Google Analytics.

Les inconvénients:

Le seul inconvénient de la fonction wp_add_inline_script() est qu'elle n'est disponible qu'à partir de la version 4.5 de WordPress.

Utilisez la fonction wp_localize_script()

La fonction wp_localize_script() est un utilitaire WordPress utile pour ajouter des caractères en ligne à des pages individuelles de votre site Web WordPress. C'est parfait si vous avez besoin d'une fonctionnalité rapide et temporaire sur vos sites, comme un événement ou une promotion. Cette fonction accepte un nombre variable d'arguments et génère une liste de chaînes JS ajoutées à l'en-tête du document. Cela peut être utile si, par exemple, vous utilisez jQuery et souhaitez que le code du script ne soit présent que sur certaines pages.

Wp_localize_script() met en file d'attente votre fichier JS et lui attribue un ID/handle de "shapeSpace_script", qui définit un tableau associatif contenant vos variables. Enfin, ces variables JS sont transmises à wp_localize_script() pour être incluses en ligne avec shapeSpace_script enregistré. En conséquence, il vous permet d'appliquer toutes les variables JS telles que shapeSpace.varl, entre autres. Cette fonction est dédiée à la localisation des variables JS à utiliser avec la traduction de langue et l'internationalisation. Cependant, la plupart des développeurs WordPress l'utilisent comme un moyen courant d'ajouter des caractères en ligne à leurs sites.

Avantages:

Wp_localize_script() active l'association "read:require" avec votre script enregistré existant. Cela signifie qu'il fournit un moyen excellent et cohérent de contrôler l'emplacement relatif de la sortie de texte personnalisée de votre site Web.

Les inconvénients:

Le seul inconvénient est que vous ne pouvez ajouter que des variables JS ( var = 'value' ). Il est donc impossible d'ajouter d'autres scripts en ligne tels que des fonctions, des conditions, des équations, entre autres, en utilisant wp_localize_script().

Utiliser le repli

Comme mentionné précédemment, des méthodes spécifiques telles que wp_add_inline_script() ne sont disponibles qu'à partir de la version WordPress 4.5 ou supérieure. Cependant, en rassemblant tout, vous pouvez créer une méthode infaillible pour ajouter des caractères en ligne à vos fichiers WordPress, quelle que soit la version de WordPress que vous utilisez. Le moyen le plus efficace de le faire consiste à utiliser trois fonctions dans le plug-in de publication de la section principale (frontal).

La première chose essentielle à faire est de mettre en file d'attente votre fichier JS et d'appeler la fonction suivante pour ajouter des lignes en ligne via la fonction wp_add_inline_script(). La troisième fonction est le retour à tout ce qui est plus ancien que la version 4.5. Cela fonctionnera sans aucun doute sur WordPress 4.5 et toute version distincte. C'est là que la vraie magie opère. Vous pouvez continuer avec la méthode de secours qui fera votre travail sur la variante WordPress de votre choix en remontant à 2.1 ou autre.

Avantages:

Vous pouvez avoir plusieurs fichiers JS sur votre site Web sans ajouter de requêtes HTTP supplémentaires pour les charger en même temps. Cela signifie que vous pourrez réduire le temps de chargement des visiteurs de votre site Web.
Si un script échoue, les autres scripts de la même fonctionnalité de secours fonctionneront toujours car ils sont chargés de manière asynchrone à partir de différents threads en raison de leur dépendance les uns par rapport aux autres.

Les inconvénients:

Lorsque le script échoue, l'utilisateur verra un espace vide au lieu du code dans quelques cas. Cela peut sembler n'être pas si grave, mais c'est une chose cruciale à noter en tant que développeur WordPress.

Un récapitulatif sur l'ajout d'un script en ligne dans WordPress

La limitation des techniques alternatives disponibles à votre disposition fait de la fonction wp_add_inline_script() la méthode supérieure pour ajouter des caractères en ligne WordPress. Ceci est considéré comme la solution la plus efficace de nos jours, et contrairement à la croyance populaire, cette fonction peut être utilisée sur n'importe quelle version de WordPress si vous utilisez la technique de secours. Pour votre information, vous trouverez ci-dessous un bref récapitulatif des moyens les plus efficaces d'ajouter des scripts en ligne dans le noyau de WordPress :

wp_add_inline_script() vous permet d'ajouter n'importe quel code JS à n'importe quel script enregistré ;
wp_print_scripts ou admin_print_scripts vous permet d'installer n'importe quel code sur la section frontale ou d'en-tête ;

wp_localize_script() vous permet également d'ajouter des variables JS à n'importe quel script enregistré ;
Fallback vous permet de façonner une technique complète qui fonctionne précisément avec n'importe quelle version de WordPress.

Remarque : Si vous souhaitez ajouter un style/CSS en ligne au lieu de JavaScript, WordPress vous fournit un ensemble de fonctions "ajouter un style" qui ressemblent à celles utilisées pour ajouter des scripts. Par exemple, consultez wp_print_styles et wp_add_inline_styles.

Conclusion

Les scripts en ligne sont un moyen rapide et facile d'ajouter des fonctionnalités à votre site Web WordPress. En écrivant le script en JavaScript, vous pouvez créer un script en ligne qui fait tout ce que vous voulez qu'il fasse sur la page sans nécessiter de plugins ou de code supplémentaires. Ce didacticiel décrit les méthodes les plus efficaces pour ajouter des scripts en ligne dans WordPress.

Êtes-vous un éditeur WordPress avec une certaine expérience dans l'ajout de scripts aux sites WP ? Quelle méthode recommanderiez-vous à un développeur novice cherchant à faire le travail rapidement ? N'hésitez pas à utiliser la section des commentaires pour partager votre opinion et poser des questions troublantes.

Biographie de l'auteur :

Arthur est un spécialiste du marketing numérique et un blogueur d'affaires. Il développe des startups intéressantes à travers divers médias sociaux et partage son expérience avec les clients pour mieux promouvoir leur entreprise. Pendant son temps libre, Arthur étudie le japonais et écrit des articles sur les tendances de la transformation numérique.