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.
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 :
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:
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:
Tant que j’y suis, je te donne mon code pour la mise en forme de la barre de navigation:
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.
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
5 janvier 2019 at 10 h 28 min
Bonjour,
Je n’arrive pas a faire fonctionner mon javascript. Mon code a ete teste sur codepen.io avec succes mais c’est la connexion a celui-ci qui semble ne pas etre correcte.
J’obtiens un message d’erreur dans la console.
Pouvez-vous m’aider a resoudre ce probleme qui m’occupe depuis quelques jours svp ?
6 janvier 2019 at 15 h 34 min
Bonjour,
Je peux essayer de vous aider avec plaisir. Pouvez-vous m’indiquer quelle est l’erreur que vous avez dans la console? D’autre part est-ce que le chemin d’accès (arborescence des dossiers) entre votre fichier html et votre fichier JS est correct? Regarder dans la balise script qui doit figurer dans votre .html, le contenu de la balise src= »ici/votre/chemin/vers/votre/fichier.js »?
Tenez moi informé!
Bon courage, et bonne journée.
Guillaume
6 janvier 2019 at 16 h 46 min
Bonjour et merci pour votre offre.
Entre-temps j’ai trouve, l’appel par ma fonction dans le fichier functions.php de mon theme enfant point sur le theme parent. En ajoutant « -child » devant /js/monfichier.js (voir ci-dessous) tout est rentre dans l’ordre. Je ne m’attendais pas a ca, j’ai cherche partout sauf la :-/
function carousel_scripts() {
wp_enqueue_script(‘carousel_scripts’, get_template_directory_uri(). ‘-child/js/mon_script_carousel.js’, array(), », true );
} // fin de la fonction carousel_scripts
add_action(‘wp_enqueue_scripts’, ‘carousel_scripts’);
Merci encore et meilleurs voeux pour cette nouvelle annee.