Ajouter du Javascript dans WordPress

Salut, 

Après avoir ajouté un peu de style CSS la semaine dernière, cette fois je te propose de voir comment on peut ajouter du Javascript dans ton projet WordPress. Cela peux être un peu perturbant d’ajouter du JS au milieu des fichiers PHP. Et bien, comme pour le CSS, pas d’inquiétude à avoir, on va continuer de bien organiser nos fichiers et de rester un peu méthodique, et tu vas vite te rendre compte qu’il n’y a pas de quoi s’inquiéter, je sais de quoi je parle…

Pour compléter cet article, je vais te montrer commet ajouter le menu dans notre page, puisque c’est un élément important, mais dont on ne s’est pas occupé du tout jusque là!

On va se servir de ce menu pour faire un petit effet de scroll. On va finaliser notre header, et styliser tout ça  pour terminer.

Ajouter notre fichier JS

Lors du dernier article (Ajouter des fichiers CSS à WordPress), nous avions créé un dossier custom au sein de notre dossier de thème (html5blank). A l’intérieur de celui ci, on avait intégré un dossier CSS dans lequel nous avions mis nos feuilles de style, et bien cette semaine je te propose de créer un fichier JS dans le dossier custom.  Tant qu’on y est on va créer un fichier JS, nav.js et on va simplement écrire une alerte, qui nous permettra de voir tout de suite si notre fichier est bien lié au reste de notre code.

Si tu ne connais pas Javascript pour le moment, voici le code qui devrait s’executer lorsqu’on aura relié notre fichier de script JS et rafraîchit la page dans le navigateur.

alert("Hello !!");

JS et CSS : Même combat!!

Comme nous l’avions vu la semaine dernière pour l’ajout du CSS, nous allons utiliser la fonction wp_enqueue_script() pour ajouter des fichiers JS. En revanche ce code ne va pas être positionné dans la même fonction que la semaine dernière. A la ligne 91 du fichier function.php, il y a une fonction html5blank_header_script() permettant d’ajouter des script JS dans le header comme son nom l’indique.

Alors la position est discutable puisque il est préférable de positionner les fichiers de script JS avant la balise fermante du body, mais bon pour notre exemple, ça ne sera pas très grave. Pour information, si besoin pour un projet plus conséquent, la balise fermante de boy est situé dans le fichier footer.php.

Comme pour les fichiers CSS de la semaine dernière, fat un copié collé des lignes, remplace les noms de fichiers entre parenthèse, et veille au chemin d’accès. Mon fichier s’appelle nav.js, voilà ce que j’obtiens :

// Load HTML5 Blank scripts (header.php)
function html5blank_header_scripts()
{
    if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {

    	wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr
        wp_enqueue_script('conditionizr'); // Enqueue it!

        wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr
        wp_enqueue_script('modernizr'); // Enqueue it!

		
	//AJOUT DE MON FICHIER MAIN.JS
        wp_register_script('nav', get_template_directory_uri() . '/custom/js/nav.js', array(), '1.0.0'); // Custom scripts
        wp_enqueue_script('nav'); // Enqueue it!

		//FICHIER DE BASE DU THEME
        wp_register_script('html5blankscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
        wp_enqueue_script('html5blankscripts'); // Enqueue it!
    }
}

A ce stade ton fichier JS doit être lié aux restes de ton projet, rechargeons la page pour voir si l’alerte s’affiche, si c’est le cas, voici de que ça devrait donner :

L’alerte apparaît bien, et on voit que le texte que j’avais écrit , « Hello !! » est bien inscrit dans le pop-up.

Tu peux maintenant ajouter tout le codes JS que tu veux.

Ajouter une navbar

Avant d’ajouter la navbar, peut être même qu’elle apparaît déjà d’ailleurs mais qu’elle ne ressemble pas à une navbar… mais c’est pas très grave.

Nous allons aller dans la partie administration de notre site WordPress, c’est la partie qui nous permets d’ajouter du contenu. Dans la sidebar de gauche, tu vas cliquer sur Apparence puis Menus. Tu devrais arriver sur cette page :

Il faut commencer par donner un nom au menu, au cas ou tu déciderais d’en créer plusieurs, ça sera plus simple pour t’y retrouver. Je suis toujours autant imaginatif, et je vais l’appeler Menu 1.

Ensuite, à droite il y a un bloc où on retrouve le nom de plusieurs type de contenu disponible avec WordPress:

• Pages,
• Articles,
• Liens personnalisés,
• Catégories.

Dans mon cas, je n’ai pas encore créé de page, donc il n’y a que la page d’exemple qui apparaît. Je vais maintenant créer plusieurs pages, et elles vont s’ajouter à la liste des pages. Dans le même principe, la section « Articles » liste tous les articles, et la section « Catégories »… je pense que tu as compris!

Et voilà, les pages que j’ai créé viennent de s’ajouter dans la liste. Maintenant si je veux toutes les avoir dans mon menu, je n’ai qu’à cocher les cases, pas plus compliqué que ça! Dans mon cas je ne prendrais pas la page d’exemple.

WordPress t’offre la possibilité d’ajouter des liens vers des catégories, des articles ou autre, mais ce n’est pas vraiment conseillé. Les pages sont un contenu fixe dans Worpress, je doute que tu aies envie de supprimer la page « Contact » ou la page d’accueil? En revanche, un article a plus de chance d’être supprimé au bout d’un certain temps, tu peux renommer une catégorie, et dans ce cas, WordPress va la supprimer du menu. Il faudra donc que tu veilles à la remettre avec le nouveau nom si tu veux qu’elle apparaisse. Sur ce blog, par exemple, le lien vers 3WACADEMY est un lien vers une catégorie.

Maintenant que nous avons des liens dans notre menu revenons  à PHP…

Wp_nav_menu

Notre thème blank possède une fonction que tu as peut-être rencontré au fil de tes allers-retours dans le fichier function.php, il s’agit de html5blank_nav. Cette fonction encapsule une fonction WordPress: wp_nav_menu. Cette fonction est documentée dans le codex, la doc de WordPress. Je ne rentre pas dans le détail, la doc est plutôt bien faite, si tu as besoin de précision.

Voyons maintenant ce que fait cette fonction, direction le fichier header.php à la ligne 44, la fonction est appelée au sein d’une balise HTML nav. Si par hasard tu n’aurais pas cela, voici le code:

	<!-- nav -->
					<nav class="nav" role="navigation">
						<?php html5blank_nav(); ?>
					</nav>
					<!-- /nav -->

Là tu dois certainement te dire que pour mettre du style à ta barre de navigation ça va être compliqué, parce que tu n’as pas pas accès au code: FAUX!! Et la console du navigateur?

Après avoir ouvert cette console, tu peux constater que tu as accès à tout le codes HTML de la navigation :

Maintenant pour la suite, l’ajout d’un script JS pour faire un effet de scroll sur la navigation, je te propose d’ajouter une grande bannière (image) dans le header et d’ajouter la nav en dessous de cette image. Tant que tu y es, tu peux ajouter un peu de code CSS pour que la nav soit plus sympa qu’une vulgaire liste de course…

Ajouter une image

Pour ajouter une image depuis notre code, nous n’allons pas le faire depuis la partie administration mais depuis notre dossier thème. Dans notre dossier custom, nous allons créer un dossier image, puis y insérer l’image qui va nous servir de bannière.

Ensuite pour intégrer l’image dans le code c’est comme on le ferait habituellement, sauf pour l’url où il y a une petite particularité. Il faut en effet ajouter une fonction wordpress, qui s’occupe de construire l’url jusqu’au répertoire des thèmes, plutôt pratique. C’est la même fonction qu’on utilise à chaque fois qu’on a besoin d’aller chercher un fichier CSS ou JS dans function .php.

Voici le code  du header complet, regarde bien  comment est construit l’url de l’image:

	<!-- header -->
			<header class="header clear" role="banner">

					<!-- logo -->
					<div class="banner">

							<img class="img_banner" src="<?php echo get_template_directory_uri(); ?>/custom/images/graf-women1-banner.png" alt="banner_street_art" class="banner-img">

					</div>
					<!-- /logo -->

					<!-- nav -->
					<nav class="nav" role="navigation">
						<?php html5blank_nav(); ?>
					</nav>
					<!-- /nav -->

			</header>
			<!-- /header -->

Tant que j’y suis, je te donne mon code pour la mise en forme de la barre de navigation:

/* GENERAL */
ul , li{
  margin: 0;
  padding: 0;
}

li{
  list-style-type: none;
}
/*  */

/* HEADER */
.header .img_banner{
  max-width: 100%;
  display: block;
  margin: 0 auto;
}


.nav ul{
  display: flex;
  justify-content: space-around;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: #FFED65;
}

.nav a{
  text-decoration: none;
  font-size: 2.5rem;
  text-transform: uppercase;
  padding: 0.5rem 50%;
  white-space: nowrap;
}

Cette fois on est prêt à faire un peu de Javascript…

Ajouter un script JS

Pour le moment notre, barre de navigation disparaît lorsqu’on descend trop bas dans la page. Le but de la manoeuvre va consister à la bloquer en haut de page lorsqu’on va scroller, afin quelle ne « sorte pas de la fenêtre. C’est un bout de script que j’avais écrit un soir pendant que j’étais à la 3WAcademy.

Voici donc ci dessous le code Javascript permettant de réaliser ce petit effet de scroll. J’ai ajouté un petit bonus, permettant de changer la couleur du background de la nav une fois qu’elle se bloque en haut.

Le but ici n’est pas de faire un tutoriel Javascript, donc je le commente juste pour que tu comprennes bien comment ça marche, si tu veux t’en servir dans tes projets.

// Je te conseille de commenter ou de supprimer l'alerte, c'est assez pénible quand on rafraîchit souvent la page...
// alert("Hello !!");

// Permet d'attendre que le DOM soit chargé pour que les écouteurs d'évènements soient installés
document.addEventListener("DOMContentLoaded", function(event) {
    // Marqueur facultatif permettant de voir dans la console, si on entre bien dans la fonction
    console.log("READY !");
    //Ecouteur d'évènement permettant de récupérer la valeur du scroll et de modifier les propriétés CSS de la nav bar
    window.addEventListener("scroll", moveNav);

});

// Fonction de rappel de l'évènement scroll
function moveNav(event){
// On cible l'image
  let img = document.querySelector(".img_banner");
// On récupère la hauteur de l'image
  let img_ht = img.height;
// On récupère la classe nav  afin de pouvoir modifier les propriétés CSS de cet élément
  let nav = document.querySelector(".nav");
// On isole le container des liens de la nav pour pouvoir changer la couleur (facultatif, c'est un petit Bonus)
  let linkBox = document.querySelector(".menu ul");
// On récupère la position du scroll dynamiquement.
// Je te conseille de vérifier les valeurs de y dans un console.log par exemple
  var y = window.scrollY;
  // console.log(y);

  if(y >= img_ht){// Si la valeur du scroll est supérieur ou égale à la heuteur de l'image, alors applique ces proprités

      nav.style.position = "fixed";
      nav.style.width = "100%";
      nav.style.top = "0";
      nav.style.zIndex = 10;
      linkBox.style.backgroundColor = "#59FFA0";

  }else{// sinon
    linkBox.style.backgroundColor = "#FFED65";
    nav.style.position = "sticky";
    nav.style.top = "inherit";

  }
};

Voici la position initiale de la nav, avec un background jaune:

Après le scroll, la nav est bloquée en haut de fenêtre, et la couleur du background est devenue verte:

Voilà, pour cette petite série de découverte de la réalisation d’un thème WordPress personnalisé. J’espère que ça t’auras intéressé et que mes explications ont été suffisamment claires. Tu as déjà pas mal de bases pour pouvoir créer un site complet avec WordPress. Si toutefois tu ne connais pas trop bien encore le back-office (l’outil d’administration), je te conseille les cours d’Openclassrooms, ou de te débrouiller seul en créant des pages, en essayant d’ajouter des plugins, etc… J’ai appris comme ça, et ça m’a bien rendu service pour ce blog.

Je suis actuellement dans ma première semaine de stage, les prochains articles seront sur la programmation orientée objet (POO) en PHP, puis sur Symfony, le framework PHP. Je suis en train de découvrir ce framework en stage,  et aussi de mon côté en poursuivant les cours en lignes sur Openclassrooms. De plus je vais apprendre ENFIN à travailler avec GITHUB, donc le programme est hyper intéressant et motivant mais aussi super chargé!

Je ne vais pas publier de nouveaux articles pendant un peu de temps, j’ai des projets en cours plus le stage, donc pas mal de travail à fournir…

A très bientôt,

Guillaume