Pour des raisons de sécurité, les uti­li­sa­teurs standard ne peuvent nor­ma­le­ment pas ajouter du Ja­vaS­cript dans WordPress. Si vous voulez rendre votre site Web plus in­te­rac­tif, les scripts sont toutefois une solution pratique et rapide. Nous allons vous montrer comment vous pouvez utiliser Ja­vaS­cript dans WordPress.

Nom de domaine
Votre domaine en un clic
  • 1 cer­ti­fi­cat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une con­fi­gu­ra­tion DNS sim­pli­fiée

Quand est-il in­té­res­sant d’ajouter du Ja­vaS­cript dans WordPress ?

WordPress est un système classique de gestion de contenu qui sépare le contenu de la con­cep­tion. Cette stricte sé­pa­ra­tion est autant pratique que rai­son­nable en principe : le personnel d’ad­mi­nis­tra­tion a la capacité de gérer les aspects tech­niques et visuels. L’équipe de rédaction peut alors se con­cen­trer en­tiè­re­ment sur la con­cep­tion du contenu. Bloquer Ja­vaS­cript et d’autres scripts pour les uti­li­sa­teurs du backend normaux dans WordPress est donc gé­né­ra­le­ment une bonne approche, surtout puisque cela minimise le risque de code mal­veil­lant.

Conseil

Tout aussi important que le choix d’un bon système de gestion de contenu, le choix d’une adresse Web ap­pro­priée est également crucial. En­re­gis­trez votre propre domaine pour profiter d’avantages tels qu’un cer­ti­fi­cat SSL Wildcard gratuit ou un ver­rouil­lage du transfert de domaine.

Si le contenu in­te­rac­tif est une partie in­té­grante de la con­cep­tion du contenu, Ja­vaS­cript est in­con­tour­nable : car les dif­fé­rents lecteurs audio et vidéo fonc­tion­nent uni­que­ment avec le script cor­res­pon­dant. Il en va de même pour de nombreux for­mu­laires de four­nis­seurs tiers utilisés par exemple pour la gé­né­ra­tion de leads. Même si vous voulez vous con­cen­trer davantage sur d’autres éléments in­te­rac­tifs tels que les chats, les enquêtes ou les tests de con­nais­sances, vous devriez également rendre l’in­té­gra­tion Ja­vaS­cript possible dans WordPress.

Ajouter du Ja­vaS­cript dans WordPress : ces pos­si­bi­li­tés s’offrent à vous

Il existe plusieurs façons de permettre aux uti­li­sa­teurs de WordPress d’ajouter du Ja­vaS­cript dans WordPress. Les solutions les plus simples et les plus efficaces sont les suivantes :

  1. Dé­sac­ti­ver le filtrage des balises de script.
  2. Inclure Ja­vaS­cript dans l’en-tête des pages WordPress.
  3. Intégrer Ja­vaS­cript dans le pied de page WordPress.
  4. Permettre l’uti­li­sa­tion de Ja­vaS­cript par plugin WordPress.
Conseil

Toujours à la recherche d’un en­vi­ron­ne­ment d’hé­ber­ge­ment approprié pour votre projet WordPress ? Avec l’hé­ber­ge­ment WordPress de IONOS, vous obtenez un accès à du matériel puissant et tolérant aux pannes avec stockage SSD rapide, mise en cache et CDN.

Option 1 : dé­sac­ti­ver le filtrage des balises de script

Vous pouvez dé­sac­ti­ver le blocage par défaut des balises de script pour tous les rôles d’uti­li­sa­teur et l’ensemble du projet WordPress. Toutefois, vous ne devez dé­sac­ti­ver cette fonction de sécurité que si tous les uti­li­sa­teurs autorisés sont ex­pé­ri­men­tés dans l’uti­li­sa­tion de scripts, sinon le risque de code mal­veil­lant dû à des scripts non sérieux est inu­ti­le­ment élevé.

Pour dé­sac­ti­ver le filtrage des balises de script, ajoutez la ligne suivante au fichier de con­fi­gu­ra­tion wp-config.php au cours de la première étape :

define( 'CUSTOM_TAGS', true );

Ajoutez ensuite l’entrée suivante au fichier de thème functions.php :

function add_scriptfilter( $string ) {global $allowedtags;$allowedtags['script'] = array( 'src' => array () );return $string;}add_filter( 'pre_kses', 'add_scriptfilter' );
php

Tous les uti­li­sa­teurs peuvent alors ajouter du Ja­vaS­cript dans WordPress en intégrant les balises de script ap­pro­priées à l’em­pla­ce­ment désiré sur une page.

Option 2 : inclure Ja­vaS­cript dans l’en-tête des pages WordPress

Vous ne voulez pas permettre l’option d’ajouter du Ja­vaS­cript dans WordPress in­dif­fé­rem­ment à tous les uti­li­sa­teurs autorisés ? Dans ce cas, vous pouvez également vous tourner vers l’in­té­gra­tion manuelle de script via l’en-tête. Le code doit être inséré ma­nuel­le­ment dans functions.php suivant cette procédure, afin que l’au­to­ri­sa­tion puisse être définie au cas par cas.

Si vous souhaitez intégrer un script pour l’ensemble du site Web dans l’en-tête (par exemple, le code d’un outil de suivi), ajoutez l’entrée suivante au fichier de con­fi­gu­ra­tion du thème :

function wpb_hook_javascript() {
	?>
		<script>
			// Code JavaScript
		</script>
	<?php
}
add_action('wp_head', 'wpb_hook_javascript');
php

Bien sûr, vous ne pouvez inclure le code Ja­vaS­cript souhaité que dans une seule page. Tout ce dont vous avez besoin à cet effet, c’est l’ID de la page souhaitée, que vous spécifiez dans une simple ins­truc­tion if. Pour la page WordPress avec l’ID « 5 », l’entrée ap­pro­priée dans functions.php ressemble par exemple à ceci :

function wpb_hook_javascript() {
	if (is_page ('10')) { 
		?>
			<script type="text/javascript">
				// Code JavaScript
			</script>
		<?php
	}
}
add_action('wp_head', 'wpb_hook_javascript');
php
Conseil

Avant d’ajouter du code Ja­vaS­cript global à votre projet, veillez à créer une sau­ve­garde WordPress !

Option 3 : ajouter du Ja­vaS­cript dans le pied de page du projet WordPress

Au lieu d’ajouter du Ja­vaS­cript via l’en-tête de votre site Web WordPress, vous pouvez également placer les scripts dans le pied de page. Dans ce cas, il faut remplacer le paramètre « wp_head » par « wp_footer » :

function wpb_hook_javascript() {
	?>
		<script>
			// Code JavaScript
		</script>
	<?php
}
add_action('wp_footer', 'wpb_hook_javascript');
php

Cette variante permet aussi d’intégrer des scripts seulement dans des pages in­di­vi­duelles en ajoutant une ins­truc­tion if et en spé­ci­fiant l’ID :

function wpb_hook_javascript() {
	if (is_page ('10')) { 
		?>
			<script type="text/javascript">
				// Code JavaScript
			</script>
		<?php
	}
}
add_action('wp_footer', 'wpb_hook_javascript');
php
Conseil

Les plugins sont une partie es­sen­tielle de WordPress – mais quelles ex­ten­sions sont réel­le­ment utiles ? Dans le Digital Guide de IONOS, vous trouverez des articles sur diverses ca­té­go­ries de plugin :

Option 4 : intégrer Ja­vaS­cript avec le plugin Wordpress

Si vous n'êtes pas en mesure ou s’il est trop compliqué de per­son­na­li­ser ma­nuel­le­ment le fichier de thème, vous pouvez également utiliser les plugins WordPress pour inclure Ja­vaS­cript dans votre projet. L’une des ex­ten­sions les plus po­pu­laires à cette intention est Scripts n Styles. Pour installer le plugin de script, procédez comme suit :

  1. Connectez-vous au backend WordPress.
  2. Dans le menu de gauche, sé­lec­tion­nez res­pec­ti­ve­ment « Plugins » et « Installer ».
  3. Re­cher­chez « Scripts n Styles » puis appuyez sur « Installer main­te­nant » en regard du résultat de recherche approprié.
  4. Après l’ins­tal­la­tion, appuyez sur « Activer ».
Image: Backend WordPress : installation de « Scripts n Styles »
Backend WordPress : ins­tal­la­tion de « Scripts n Styles ».

Après l’ins­tal­la­tion, vous trouverez le plugin Ja­vaS­cript WordPress dans la rubrique « Outils » du menu de gauche. Quand vous appelez le menu de l’extension, vous pouvez intégrer au choix des snippets en HTML, CSS ou Ja­vaS­cript dans votre projet WordPress. Ces trois options se proposent à vous pour Ja­vaS­cript :

  • Cof­feeS­cript
  • Scripts dans l’en-tête (« for the head element »)
  • Scripts dans le pied de page (« end of the body element »)
Image: WordPress : ajout de code JavaScript avec le plugin « Scripts n Styles »
WordPress : ajout de code Ja­vaS­cript avec le plugin « Scripts n Styles ».
En résumé

Le code Ja­vaS­cript confère à votre projet WordPress plus d’in­te­rac­ti­vité. Si vous voulez offrir à tous les uti­li­sa­teurs la pos­si­bi­lité d’intégrer des scripts, vous pouvez annuler la dé­sac­ti­va­tion des balises de script ou utiliser un plugin. Les uti­li­sa­teurs ayant accès à functions.php ont également la pos­si­bi­lité d’inclure le code dans l’en-tête ou le pied de page.

Aller au menu principal