javascript – Test dev

Il y a plusieurs façon de faire apparaître votre script sur WordPress, et nous allons en voir 3.

Un script dans le Header via le fichier header.php
Un script dans le Header via le functions.php
Un script destiné à être placé dans le header de la page /wp-login de votre site WordPress.

Voici le script que nous voulons rajouter à notre site.

<script>

    window.onload = function (e) {
        console.log( 'Coucou !' );
    }

</script>

Dans le Header via le fichier header.php dans la base de votre thème :

Ajouter votre script entre les balises <head> </head>, et voilà!

Vous avez la possibilité de confirmer cela en vérifiant votre header avec l’inspecteur.

<head>
  <meta charset="toto" >
  <meta name="viewport" >
  <link rel="tata" href="toto" />

  <script>
    window.onload = function (e) {
        console.log( 'Coucou !' );
    }
  </script>
  
  
  <?php wp_head(); ?>
</head>

Dans le Header via le fichier functions.php :

Ajouter ce snippet en dessous, et remplacer le script par le votre.

function header_code() { 
?> 

    <script>
    
        window.onload = function (e) {
            console.log( 'Coucou !' );
        }
    
    </script>
    
<? php }

add_action('wp_head', 'header_code');

Source: wp_head | Hook | WordPress Developer Resources

Dans le Header d’une page ADMIN via le fichier functions.php :

Nous allons pousser un peu plus loin et cibler la page /wp-login

C’est un processus un peu plus compliqué.

Nous allons créer un fichier Javascript et prévenir WordPress qu’il existe et qu’il doit le rajouter au cycle de chargement de WordPress.

Pour commencer, nous allons créer un fichier Javascript et je vais l’appeler « mon-fichier-javascript.js »

Ajouter votre code sans les balises <script></script>, sauvegarder , puis placer le à la base de votre thème ( au même niveau de votre functions.php ).

Pour finir, ajouter ce snippet de code dans votre fichier « functions.php ».

Ligne 4 : Je me sers d’une variable globale pour vérifier qu’on est bien sur la bonne page ( c.a.d wp-login.php ).

Ligne 8 : Ensuite, je préviens WordPress qu’il y aurait un fichier Javascript à ajouter au cycle de chargement.

Si WordPress ne trouve pas votre fichier, modifiez « get_stylesheet_directory_uri(). ‘/mon-fichier-javascript.js' » avec son emplacement.

function my_login_stylesheet() {

// Nous allons cibler la page /wp-login
if ( $GLOBALS['pagenow'] === 'wp-login.php' ) {

// Nous allong maintenant dire a WordPress de trouver et d'ajouter
// le fichier dans la liste d'attente avec les autres fichiers WordPress.
    wp_enqueue_script( 'mon-fichier-javascript',
    get_stylesheet_directory_uri() 
    .'/mon-fichier-javascript.js' );
}
    
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

window.onload = function (e) { // Nous allons chercher l'input en nous servant de l'ID. var element = document.getElementById("Id_de_l_input"); // Nous allons ensuite modifier ou ajouter l'attribut avec fonction // .setAttribute( "KEY" ,"VALEUR"); element.setAttribute("autocomplete","off"); //Pour retirer un attribut element.removeAttribute("autocomplete"); }

$(document).ready(function(){ // Nous allons chercher l'input en nous servant de l'ID, // pour ensuite changer l'attribut. //Pour Ajouter/modifier un attribut $("#Id_de_l_input").attr("autocomplete","off"); //Pour retirer un attribut $("#Id_de_l_input").removeAttr("autocomplete"); });

Étiquette : javascript

3 façons de rajouter des scripts sur WordPress

Modifier l’attribut « autocomplete » sur un input avec Javascript.