Construire un plugin de carrousel WordPress: Partie 3

Les plats clés

• Pour rendre les flèches du carrousel fonctionnel, un fichier JavaScript est créé et lié à WordPress à l'aide de la fonction wp_enqueue_script (), qui est placé dans la condition de fonction display_carel () pour s'assurer qu'elle n'est incluse que lorsque le carrousel est affiché.
• Le bloc UL du carrousel est déplacé horizontalement pour afficher différents éléments en ajustant sa propriété CSS à gauche marge; Une marge gauche négative aligne le côté gauche de l'élément suivant avec le côté gauche du bloc de carrousel.
• Une fonction, carousel_show_another_link (), est créée pour afficher un autre élément basé sur le paramètre de direction (-1 pour l'élément précédent, 1 pour l'élément suivant); Il calcule l'index du nouvel élément à afficher et vérifie s'il existe avant de déplacer le bloc UL.
• Deux fonctions, carousel_previous_link () et carousel_next_link (), sont créées et attachées aux événements de flèche respectifs, et appelez la fonction carrousel_show_another_link () avec le paramètre approprié; Un bogue est évité en initialisant la propriété de marge-gauche du bloc UL à 0 lorsque le document est prêt.

Sans style, le carrousel WordPress que nous avons construit dans la première partie de ce tutoriel n'est qu'une liste d'articles, mais il est au moins utile, dans le sens où ils sont tous visibles. Le CSS que nous avons ajouté dans la deuxième partie de ce tutoriel a amélioré l'affichage du carrousel, mais maintenant le problème est que seul le premier élément est montré à l'utilisateur et qu'il n'y a aucun moyen d'afficher le reste des éléments.

Nous avons ajouté des flèches à notre carrousel, pour permettre à l'utilisateur de naviguer entre les différents éléments, et il est maintenant temps de les rendre utilisables, avec un peu de javascript.

Dans la continuation de ce tutoriel, nous apprendrons à inclure correctement notre script, puis nous écrirons un script qui lancera une fonction qui animera les éléments lorsque l'utilisateur frappe une flèche.

liant un fichier javascript

Ici, nous utiliserons JavaScript pour rendre nos flèches utiles. Quant à la pièce CSS, créez un nouveau fichier. Je l'ai appelé Carousel.js et l'ai placé dans la racine du dossier du plugin.

Nous devons indiquer à WordPress que nous utilisons le fichier JavaScript. Pour ce faire, nous utiliserons la fonction wp_enqueue_script ().

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

Les deux premiers paramètres sont les mêmes que pour wp_enqueue_style (). Ensuite, nous trouvons un tableau. Ce tableau répertorie les dépendances, les scripts nécessaires à notre script pour fonctionner. J'ai choisi d'utiliser jQuery pour contourner les problèmes de compatibilité du navigateur, donc j'indique WordPress que je veux l'utiliser: comme nous l'avons vu dans notre article sur les scripts correctement dans WordPress, `` jQuery '' est une valeur reconnue dans WordPress.

Le quatrième paramètre est le numéro de version du script. Ce n'est pas très important ici (voir l'article précédemment lié pour plus d'informations), mais nous devions utiliser le dernier paramètre et le définir sur True afin que notre script soit inclus dans le pied de page.

L'avantage de choisir le pied de page au lieu de l'en-tête est que nous pouvons utiliser wp_enqueue_script () où nous voulons. Nous n'avons pas la contrainte de l'utiliser avant wp_head () comme avec wp_enqueue_style (). Nous ne pourrons alors inclure notre script uniquement si cela est nécessaire: seulement si nous affichons le carrousel.

Le meilleur endroit pour mettre WP_enqueue_script () est donc dans l'état de notre fonction display_carel (). Nous afficherons le carrousel uniquement s'il y a des éléments à afficher, nous inclurons donc notre script avec la même condition.

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

Maintenant, nous sommes prêts à modifier notre fichier javascript.

que voulons-nous faire?

Nous encapsulons d'abord tout notre code dans une fonction. Pour éviter les collisions avec d'autres bibliothèques, WordPress désactive l'utilisation de $ dans jQuery. Nous pouvons l'activer à nouveau avec cette fonction.

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

Il existe de nombreuses façons de fabriquer un carrousel, même sans modifier notre code HTML. Ici, je vous suggère de déplacer le bloc UL. Il contient tous nos éléments d'affilée afin que nous puissions le déplacer horizontalement pour afficher l'un ou l'autre élément en définissant sa position. Voir le schéma ci-dessous, déjà vu dans la partie précédente de ce tutoriel, pour voir ce que nous voulons faire.

Pour le déplacer, nous jouerons avec sa propriété CSS à gauche. Par défaut, il est défini sur 0 et a donc «afficher» le premier élément. Le premier article est assez grand pour remplir le carrousel et le deuxième élément, qui est à côté, ne peut pas être vu grâce à la propriété Overflow.

Pour afficher le deuxième élément, nous devons déplacer le bloc UL vers la gauche, afin d'aligner le côté gauche du deuxième élément avec le côté gauche du bloc de carrousel. Cela peut être réalisé avec une marge gauche négative. Pour tester la valeur que nous devons utiliser, nous pouvons expérimenter avec un code CSS (que nous supprimons juste après, car nous n'en avons pas besoin).

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

Cette ligne simple mérite une explication. Si vous le testez, vous devriez voir que le premier élément n'est pas affiché, nous voyons à la place le deuxième élément. Vous pouvez tester une autre valeur pour mieux comprendre ce qui s'est passé. Avec -50px, nous déplaçons le bloc UL 50 pixels vers la gauche par exemple. Avec les valeurs que je vous ai montrées dans le CSS ci-dessus, car le carrousel a une largeur de 900 pixels, je peux afficher le deuxième élément d'une valeur de -900px.

Cependant, nous pouvons utiliser des pourcentages à la place. L'avantage est que ce pourcentage est relatif au conteneur. Ici, «100%» est égal à «900 pixels», donc, si nous donnons une valeur de -100%, nous masquons le premier élément et affichons la seconde. L'utilisation de pourcentages vous permet de modifier la largeur du conteneur sans modifier les valeurs de la propriété de marge-gauche.

La fonction pour afficher un autre élément

Tout d'abord, nous rédigerons la fonction qui affichera un autre élément. Celui-ci acceptera un paramètre, la direction. Si nous souhaitons afficher l'élément précédent, cette direction doit être définie sur -1 et, si nous voulons afficher l'élément suivant, il doit être défini sur 1.

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

où allons-nous?

Pour déterminer la valeur à attribuer à la marge-gauche, nous devons savoir où nous en sommes. Il existe un certain nombre de façons possibles d'y parvenir, et j'en ai choisi une qui utilise uniquement la valeur actuelle de la propriété de marge-gauche.

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

La première ligne récupère le bloc UL. Comme nous le réutiliserons plus tard, le stocker dans une variable est une bonne idée. La deuxième ligne peut sembler un peu bizarre. L'objectif est de stocker un entier représentant l'article affiché actuel. Le premier élément sera représenté par 0, le second par 1, etc.

Pour y parvenir, nous obtenons la valeur actuelle de la propriété de marge-gauche. Le problème est que cette valeur est quelque chose comme -200% et que nous voulons un nombre: supprimer le «%», nous utilisons la fonction parseInt () qui transforme la valeur en un entier (par exemple '-200%' devient -200). Comme nous voulons un entier positif, nous ajoutons un signe «moins» (par exemple pour obtenir 200 à partir de -200), et nous divisons par 100 pour obtenir la valeur que nous voulons (par exemple 2, pas 200).

Vous vous demandez peut-être pourquoi nous n'avons pas utilisé ul.css ('marge-gauche') pour obtenir la valeur de la propriété margin-gauche. En fait, .css () est une méthode jQuery et, dans notre contexte, semble être une meilleure idée. Le problème est que cette méthode ne nous donnera pas de pourcentage. En utilisant les mêmes valeurs que ci-dessus, si l'élément actuel est le troisième, la propriété de marge-gauche est définie sur -200% tandis que la méthode .css () retournera -1800px. Pour calculer l'élément actuel en utilisant cette valeur en pixels, nous devons ensuite utiliser la largeur du grand conteneur, et je préfère utiliser uniquement le bloc UL.

Maintenant, nous pouvons calculer l'index de l'élément à afficher, grâce à la direction donnée dans l'argument de notre fonction.

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

Le nouvel élément existe-t-il?

Avant d'afficher le nouvel élément, nous devons tester s'il existe. Si new_link est inférieur ou égal à -1, ou est supérieur ou égal au nombre total d'éléments, il n'existe pas et nous ne pouvons pas l'afficher, donc déplacer le bloc UL n'est pas une bonne idée. Notez que ce test peut sembler redondant car les flèches ne sont pas affichées lorsque nous ne pouvons pas aller plus loin, mais s'assurer que quelque chose peut réellement être fait est toujours une bonne idée.

<span><span>#carousel ul</span> {
</span>	<span>margin-left: -100%;
</span><span>}</span>

Nous obtenons d'abord le nombre total d'éléments, qui est le nombre de balises Li dans notre liste. Ce nombre est utile pour la condition que nous avons décrite ci-dessus car nous voulons un entier positif qui ne doit pas être supérieur ou égal au nombre d'éléments (n'oubliez pas que nous commençons par 0 et non 1).

Affichage du nouvel élément

Enfin, le mouvement du bloc peut être réalisé avec une seule ligne. Nous devons calculer la nouvelle valeur de la marge-gauche. Pour ce faire, réfléchissons-y. Pour chaque article «passé», nous avons une largeur de 100% à voyager. De cette façon, la nouvelle valeur de la marge-gauche est 100 fois la position de la nouvelle élément que nous venons de calculer, avec un signe moins pour aller à gauche.

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

J'ai choisi ici pour utiliser une animation jQuery, mais vous êtes libre de créer le vôtre, ou même de modifier les paramètres de celui-ci.

certains alias pour une utilisation plus pratique

Nous allons maintenant créer les fonctions qui seront appelées chaque fois que l'utilisateur clique sur une flèche. Ces fonctions ne nécessitent pas une énorme quantité de code, car la seule chose qu'ils font est d'appeler la fonction carrousel_show_another_link () avec le bon paramètre. Vous trouverez ci-dessous le code de la fonction qui est appelé lorsque nous cliquons une flèche «précédente».

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

Remarque le retour false; Pour éviter le comportement par défaut de nos flèches (n'oubliez pas que ce sont des liens). De cette façon, l'URL ne changera pas lorsque l'utilisateur clique sur une flèche.

La fonction qui affiche l'élément «suivant» est exactement la même, mais avec 1 comme paramètre pour carousel_show_another_link (). J'ai choisi de l'appeler carousel_next_link ().

attacher les événements

Enfin, nous devons rendre ces fonctions utiles, en attachant les bons événements aux bons éléments. Nous le ferons dans une nouvelle fonction, appelée lorsque nous pouvons être sûrs que nos éléments sont créés: lorsque le document est chargé.

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

Nous voulons attacher la fonction carousel_previous_link () à chaque flèche «précédente». Avec l'arbre Dom de notre carrousel, nous pouvons les récupérer facilement, de la même manière que nous les avons récupérés lorsque nous voulions les styliser dans le CSS.

<span><span>#carousel ul</span> {
</span>	<span>margin-left: -100%;
</span><span>}</span>

Ensuite, nous pouvons attacher la fonction carousel_next_link () aux flèches droites (#carel ul li a.carel-next) de la même manière.

Vous pouvez tester ce code mais un bogue doit apparaître: la première fois que la fonction CARROULSE_SHOW_ANOOTHOTER_LINK () est appelée, la marge de propriété CSS pour notre bloc UL n'existe pas, donc une erreur se produira lorsque nous essayons de récupérer sa valeur.

Pour empêcher ce bogue, nous pouvons initialiser la valeur de cette propriété. Toujours dans la fonction appelée lorsque le document est prêt (avant de joindre les événements par exemple), ajoutez la ligne suivante.

<span>function carousel_show_another_link(direction) {
</span><span>}</span>

Cela définit la propriété de marge-gauche de notre bloc UL à 0 par défaut. Cette propriété existera maintenant, sans déplacer le bloc.

Vous pouvez maintenant cliquer sur les flèches, le carrousel est terminé et cela fonctionne!

en conclusion

Dans ce tutoriel, nous avons traversé la construction d'un plugin de carrousel à l'aide de l'API WordPress Links Manager. C'était un bon exemple d'utilisation de cette API, mais c'était aussi un bon moyen de voir comment combiner PHP, HTML, CSS et JavaScript dans un plugin WordPress.

En terminant, je dirais qu'il existe de nombreuses façons de construire un carrousel, même si nous gardons le code HTML que nous avons généré: nous pourrions choisir différents styles ou différentes façons d'écrire le script. En fait, le script que nous avons écrit ici est juste un exemple et nous pourrions en écrire un totalement différent avec le même résultat.

Vous pouvez décider par vous-même si vous aimez le code que nous avons utilisé ici. Sinon, n'hésitez pas à le modifier!

Même si vous avez aimé ce que nous avons fait ici, vous pouvez toujours améliorer le résultat. Par exemple, les visiteurs doivent frapper les flèches pour voir d'autres éléments: vous pouvez essayer d'animer automatiquement le carrousel avec la fonction setTimeout ().

Si vous souhaitez voir le code fini ou essayez le plugin par vous-même, il est disponible en téléchargement ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!