Construire un plugin de carrousel WordPress: Partie 2

Un carrousel n'est pas seulement une liste de liens, il existe pour afficher les liens comme des éléments d'une manière qui les rend plus attrayants. Dans notre article précédent, nous avons vu comment créer un carrousel et comment afficher les éléments HTML dont nous avons besoin. Il est maintenant temps de construire et de coiffer notre plugin de carrousel WordPress.

Notre carrousel est actuellement une liste simple de liens, à la fin de cet article, nous aurons un carrousel correctement formaté. Nous verrons comment appliquer les styles dont nous avons besoin pour avoir le résultat que je vous ai montré dans l'échantillon d'image de la partie 1. Bien sûr, il existe de nombreuses propriétés que vous pouvez personnaliser, les sites Web ne doivent pas être les mêmes dans le monde!

Tout d'abord, nous examinerons comment nous pouvons lier correctement un fichier CSS à une page Web dans WordPress. Ensuite, nous allons styliser nos éléments, qui démontreront certaines astuces CSS qui peuvent être utiles dans de nombreuses situations différentes.

Les plats clés

• Le plugin de carrousel WordPress est amélioré en liant un fichier CSS externe, ce qui permet un style plus facile et plus flexible. Cela inclut la fonction wp_enqueue_style () pour l'inclusion du fichier.
• La taille du carrousel est définie dans le fichier CSS, chaque élément remplissant le bloc entier créé. Le positionnement des liens et la taille du conteneur sont également établis.
• Le style du nom, de la description et des flèches de l'élément est personnalisé à l'aide de propriétés CSS telles que l'affichage, le rembourrage, la couleur, la couleur d'arrière-plan, le texte-alignement et le text-shadow.
• Le plugin de carrousel est terminé en ajoutant JavaScript pour rendre les flèches fonctionnelles, permettant de faire défiler lorsque les flèches sont cliquées. Cela sera couvert dans la prochaine partie du tutoriel.

liant un fichier CSS externe

Pour rendre le style de notre carrousel aussi flexible et facile que possible, nous avons limité l'utilisation de styles en ligne à un seul attribut, l'arrière-plan de chaque élément. Pour tous les autres styles, nous utiliserons un fichier CSS externe (Stylesheet). Vous pouvez choisir votre propre nom pour le fichier (tel que Carousel.css) et le placer dans le dossier de votre plugin (ou dans un sous-répertoire).

Pour inclure le fichier, nous utiliserons la fonction wp_enqueue_style () comme décrit dans notre article sur la bonne façon d'inclure un script.

Nous ne pouvons pas appeler cette fonction n'importe où, elle doit être appelée avant l'appel de wp_head () (contrairement à un script, nous ne pouvons pas inclure un fichier CSS dans le pied de page!). Nous pouvons utiliser wp_enqueue_scripts, qui est appelé lorsque WordPress comprend les scripts et les styles de la page actuelle (dans le front-end), donc il est parfait pour cette application.

Le code ci-dessous doit apparaître dans le fichier principal de votre plugin.

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

La fonction wp_enqueue_style () accepte (au moins) deux paramètres, le nom du style et l'URI vers le fichier correspondant. La fonction plugin_dir_url () nous donnera l'URL au dossier de notre plugin, car mon fichier carrousel.css est situé dans la racine de ce dossier, je n'ai pas de sous-répertoire à ajouter ici, mais vous devez le concaténer si vous en utilisez un.

Notez que nous ne testons rien dans notre fonction. WordPress inclura notre fichier CSS dans chaque page. Ce n'est pas un problème si vous affichez votre carrousel sur toutes les pages. Cependant, si vous affichez votre carrousel uniquement sur certaines pages (par exemple uniquement sur la page d'accueil), vous devez tester si le visiteur est sur la bonne page avant d'inclure le fichier CSS (par exemple avec is_home ()).

Il est maintenant temps de modifier notre fichier CSS.

Style notre carrousel!

La taille du carrousel

Nous commençons par la taille du récipient principal, le div identifié par #carel. Ici, vous pouvez définir la taille que vous souhaitez. Comme nous utilisons des images que nous ne redimensions pas, une taille fixe est une bonne idée.

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

Plus tard, nous ajouterons une troisième propriété à ce conteneur, débordera. Pour le moment, nous ne l'utiliserons pas, de cette façon, nous pouvons voir comment nos articles sont disposés à travers la page.

Chaque élément remplira tout le bloc que nous venons de créer. La règle suivante s'applique à l'élément lui-même (la balise avec le nom de carrousel-link) ainsi qu'à ses parents.

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

Positionner les liens

Que se passe-t-il lorsque nous allons à droite?

Maintenant, nous devons réfléchir à ce que nous voulons faire. Il existe de nombreuses possibilités lorsque nous voulons construire un carrousel. Je suggère de positionner nos articles les uns des autres avec une propriété flottante dans un grand conteneur: il doit être assez grand pour contenir tous nos articles en une seule ligne.

Lorsque l'utilisateur veut voir une autre image, nous déplacons ce conteneur pour aligner l'élément suivant avec le #CaRousel Div. Cette div aura le débordement de la propriété sur Hidden, de cette façon, nous ne verrons pas les autres liens.

Vous trouverez ci-dessous un schéma de ce que nous voulons faire. En vert, vous pouvez voir le grand conteneur avec tous nos liens en une seule ligne. Pour voir le lien à droite, le conteneur va à gauche, et vice versa. Le cadre noir représente la div #carel: en dehors de ce cadre, tout est invisible.

la taille du conteneur

Tout d'abord, le conteneur: nous ne créerons pas un autre élément HTML, car le UL est parfait pour nos fins. Nous avons vu que ce conteneur doit être assez grand pour contenir tous nos liens en une seule ligne. Actuellement, ce n'est pas le cas, nos articles et notre conteneur ont tous deux une largeur de 900 pixels.

Pour changer cela, nous augmenterons la largeur du conteneur à 500%. La div identifiée par #carel a une largeur de 900 pixels, donc une largeur de 500% nous permettra d'afficher cinq liens d'affilée.

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

Un problème potentiel peut vous arriver ici: le nombre d'éléments peut être variable, car notre script ne peut en fait afficher que trois éléments par exemple. Ce n'est pas vraiment un problème car nous avons limité le nombre d'articles à un maximum de cinq, donc même s'il n'y en a que trois, ils s'adapteront tous et l'espace vierge n'interférera pas avec le fonctionnement du carrousel.

Si vous choisissez une autre limite, vous devez modifier cette largeur (par exemple à 1000% si vous souhaitez afficher 10). Des problèmes apparaissent lorsque vous ne voulez aucune limite. Dans ce cas, vous devrez définir la largeur dans l'attribut de style de la balise UL, en fonction de notre variable $ n qui contient le nombre d'éléments à afficher.

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

Positionner les liens

Maintenant, nous devons corriger la largeur des étiquettes Li. Actuellement, ils sont réglés à 100% afin qu'ils prennent toute la largeur de notre conteneur qui est cinq fois trop long.

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

Les balises Li ont désormais la bonne largeur et flottent. Si vous testez notre carrousel maintenant, vous verrez le bon résultat, cinq éléments les uns à côté des autres. Vous pouvez maintenant ajouter la propriété Overflow à #CaRousel pour masquer les éléments qui ne doivent pas être visibles.

<span>#carousel ul {
</span><span>    <span><span>width: <span>500%</span></span>;
</span></span><span><span>}</span></span>

Le nom et la description de l'élément

Le nom des articles peut être stylisé comme vous le souhaitez. Ici, je vais décrire comment j'ai créé le style que vous avez vu dans la partie précédente de ce tutoriel.

En tant que rappel, le nom de l'élément s'affiche dans une balise solide dans l'élément A.Carel-Link. La bande peut être obtenue avec une couleur d'arrière-plan, mais nous voulons que cette bande occupe toute la largeur. Pour ce faire, nous pouvons définir l'affichage sur bloquer. Les propriétés de rembourrage et de couleur complètent le style.

<span><span><span><ul style="width: <?php echo $n * 100; ?></span>%;"></span></span>

Comme avec le nom, vous pouvez personnaliser la description de l'article. Ici, j'ai choisi de l'afficher à droite, en dessous du nom, en utilisant le CSS ci-dessous.

<span>#carousel ul li {
</span><span>    <span><span>float: left</span>;
</span></span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span><span>}</span></span>

La valeur de bloc pour la propriété d'affichage permet à la balise EM d'utiliser toute la largeur disponible. Nous alignons ensuite le texte à droite, avec un peu de rembourrage afin que le texte ne soit pas dur contre le bord. J'ai choisi ici un gris foncé pour la couleur du texte. Pour être sûr que le texte sera toujours lisible, même sur des images sombres, j'ai ajouté une ombre de texte blanc.

Styler les flèches

L'étape finale est afficher correctement les flèches. Vous avez plusieurs choix ici, selon l'endroit où vous souhaitez afficher ces flèches.

J'ai utilisé les propriétés énumérées ci-dessous pour réaliser l'effet sur l'élément de l'échantillon. Nous transformons les flèches en blocs pour pouvoir modifier leurs tailles, nous fixons ensuite cette taille, et nous stylisons les flèches. Nous utilisons également une astuce utile pour aligner verticalement le texte (la flèche), nous définissons la propriété de hauteur de ligne sur la même valeur que nous avons donnée à la hauteur, le texte sera alors centré verticalement.

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

Pour reproduire les coins arrondis, nous utiliserons le radius frontalier, mais pas dans tous les coins, ceux qui sont sur les côtés du carrousel ne devraient pas être arrondis. C’est pourquoi nous utiliserons les «sous-propriétés» de la radius frontalière qui nous permettent de sélectionner les coins à arrondir.

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

Enfin, j'aime personnellement les boutons et les liens pour avoir un effet de survol. Ici, j'ai choisi de ne modifier que la couleur de la flèche.

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

Comme CSS3 nous permet d'avoir facilement une transition douce, pourquoi ne pas les utiliser?

<span>#carousel ul {
</span><span>    <span><span>width: <span>500%</span></span>;
</span></span><span><span>}</span></span>

Positionner les flèches

C'est tout pour le style des flèches. Maintenant, nous devons les placer là où nous les voulons. Nous utiliserons le positionnement absolu, avec un petit truc: nous ne connaissons pas la position du carrousel lui-même afin que nous ne puissions pas positionner les flèches des coins d'écran. Au lieu de cela, nous utiliserons les coins du carrousel et, plus précisément, les coins Li Li.

Positionnons nos flèches avec une position définie sur Absolute.

<span><span><span><ul style="width: <?php echo $n * 100; ?></span>%;"></span></span>

Si vous essayez ceci, les flèches seront positionnées sur les côtés de l'écran. Nous devons utiliser une option moins connue de positionnement absolu. L'élément flèche est positionné par rapport à son parent positionné le plus proche. Ici, nos flèches n'ont pas de parent positionné afin qu'ils soient positionnés par rapport à l'écran.

Le problème est que les flèches que les parents sont aux bons endroits: nous ne voulons en déplacer aucun. L'astuce consiste à utiliser un positionnement relatif, sans rien changer d'autre. Nous appliquerons le positionnement relatif aux étiquettes Li qui est le parent le plus proche de nos flèches.

<span>#carousel ul li {
</span><span>    <span><span>float: left</span>;
</span></span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span><span>}</span></span>

Ensuite, les flèches sont positionnées sur le côté de leur parent positionné le plus proche, les étiquettes Li, ce que nous voulions.

Quelle est la prochaine étape?

Les éléments HTML nécessaires à notre carrousel sont affichés et, maintenant, ils sont également stylisés. Le problème est que notre carrousel est totalement inutile, car il montre juste le premier élément (il était plus utile sans CSS!).

C'est pourquoi nous devons ajouter une dernière chose: JavaScript. Dans la partie suivante (et dernière) de ce tutoriel, nous ferons fonctionner nos flèches comme prévu, les liens défilent lorsque les flèches seront cliquées. C'est une bonne chose, non?

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!