Le shortcode de la galerie WordPress un aperçu complet

Si vous n’avez pas eu l’occasion d’utiliser le Shortcode de WordPress Gallery par le passé, ce sera un excellent point de départ pour vous. Pour les autres qui l'ont utilisé, nous allons couvrir certaines fonctionnalités du shortcode que vous n'avez peut-être pas encore envisagées. Dans ce tutoriel, nous allons couvrir un shortcode WordPress spécifique, [galerie] et les différentes manières de l’utiliser..

---

introduction

WordPress a de petits extraits de code, appelés codes courts, qui peut être utilisé dans les publications, les pages et les types de publication. WordPress possède de nombreux codes de fonction pouvant être ajoutés à l’API de traitement de code, décrits ici. Ces codes abrégés, placés dans la zone de l'éditeur de contenu ou dans un fichier de thème, sont liés aux fonctions qui s'exécutent lorsque le contenu ou la publication est chargé. Les shortcodes WordPress sont flexibles, vous permettant souvent de spécifier des options qui personnalisent le fonctionnement du shortcode.

Aujourd'hui, nous allons passer en revue le shortcode [gallery] en particulier, mais vous pouvez également lire nos autres publications d'introduction sur l'utilisation du shortcode dans WordPress:

• Commencer avec WordPress Shortcodes
• Petite astuce: Utilisation de codes courts dans le développement de thèmes
• Astuce: Améliorer les codes courts avec la fonction has_shortcode ()
• Utilisation de codes abrégés pour accélérer la publication avec des services populaires

---

Usage basique

Pour commencer avec le shortcode [gallery], allez à la section Posts et ajoutez un nouveau post que nous appellerons "Gallery Post". Dans la zone d'édition, placez le shortcode [gallery] (dans la vue Visual / HTML). Après cela, appuyez sur Publier / Mettre à jour.

La page sera rafraîchie et si vous accédez à l'éditeur visuel, vous verrez maintenant une boîte en pointillés avec une icône de photo au milieu. Si vous cliquez sur la case, une autre icône représentant une image apparaît dans le coin supérieur gauche. Cliquez sur cette icône et une fenêtre de dialogue apparaîtra. Cette fenêtre de dialogue vous permettra de télécharger et de joindre des images à la publication. Continuez et faites glisser vos photos dans la zone de dépôt ou appuyez sur Sélectionner les fichiers et choisissez les photos que vous souhaitez télécharger..

Après avoir téléchargé les images, vous devrez appuyer sur "Enregistrer tous les changements". Cela vous mènera à l'onglet "Galerie" dans cette même fenêtre de dialogue. Vous verrez les vignettes de toutes les images que vous venez de télécharger, ainsi que certains paramètres. Regardez autour de vous, modifiez certains paramètres pour voir les différentes options. Maintenant, ajustez les colonnes de la Galerie à 5, puis cliquez sur "Mettre à jour les paramètres de la galerie".

Maintenant, allez-y et appuyez sur View Post. Vous verrez le message avec une grille d'images de la galerie, avec 5 colonnes. Si vous cliquez sur une image, cela vous mènera au message en pièce jointe.

---

Galerie Shortcode Output

Maintenant que nous voyons que le shortcode [gallery] fonctionne, allons de l'avant et vérifions le code source et voyons ce qui est généré.

Ce que vous voyez ci-dessus est la première partie du code que WordPress génère automatiquement pour chaque shortcode [gallery]. Le code CSS est automatiquement généré pour chaque shortcode [gallery] utilisé. Il existe des éléments et des classes par défaut pour chaque galerie et chaque élément enveloppant une image. Si vous aviez une deuxième galerie sur la page, cela aurait pour résultat # galerie-2…

Ci-dessous se trouve le reste du code, le code HTML généré par la galerie. Vous pouvez voir que la galerie est enveloppée dans un div et chaque image et légende est entourée d'éléments ainsi.

 
 
 
  
 
 Joli texte 
 
  
 
 Baies! 
 
  
 
 Quad in River 
 
  
 
 le magasin 
 
 
 

---

Options de code court

Maintenant que nous avons eu un aperçu de l’utilisation de base du shortcode de la galerie, voyons toutes les options permettant de personnaliser la sortie de la [galerie]. Les options de shortcode [gallery] incluent des colonnes, identifiant, Taille, lien, comprendre, exclure, commandé par, ordre, itemtag, icontag, et légende.

des colonnes

[gallery columns = "2"]

Si vous revenez à l'onglet HTML dans l'éditeur de publication, vous verrez que le shortcode dit [gallery columns = "5"]. Lorsque nous avons ajusté les paramètres de colonne dans l'interface de la galerie, ces paramètres ont été transmis au shortcode. Maintenant, au lieu d'utiliser l'interface graphique, spécifions manuellement les paramètres via le shortcode. Changeons les colonnes = "5" en colonnes = "2". Maintenant, allez à View Post - vous pouvez voir qu'il y a une grille des images de la galerie et qu'au lieu de 5 images par colonne, il y en a 2. Voyons à nouveau la source sur "Gallery Post" et voyons ce que WordPress génère. Juste avant la galerie dans la source, nous pouvons voir le CSS - remarquez-vous la différence par rapport à la sortie CSS précédente? Ce CSS est généré automatiquement par le shortcode [gallery]. Si vous changez les colonnes, vous remarquerez comment le CSS change.

 # gallery-1 .gallery-item float: left; marge supérieure: 10 px; text-align: center; largeur: 50%; 

Le CSS ajuste essentiellement la largeur à 100 / $ colonnes, $ colonnes étant soit 3 par défaut ou un nombre spécifié dans le shortcode .

identifiant

[Galerie]

Par défaut, le shortcode de galerie extrait la galerie associée à l'identifiant de publication actuel. Toutefois, si vous spécifiez un ID, vous pouvez extraire des images d'un autre message. Pour tester cela, ajoutons un nouveau message et appelons-le Autre page. Allez-y et téléchargez des images différentes sur la page Autre et appuyez sur Publier. Ensuite, dans l’adresse URL du navigateur, recherchez post =.

Rappelez-vous ce numéro, puis retournez à Gallery Shortcode post, puis ajoutez la galerie shortcode [gallery] (utilisez le numéro id de l'autre poste à la place de 99). Mettez à jour le message Shortcode de la galerie, puis sélectionnez Afficher le message. Remarquez comment il y a maintenant deux galeries, l’une avec des images de la publication "Gallery Shortcode" et les autres images de la "Autre page". Vous pouvez également ajuster les options sur le shortcode, changer les colonnes, commander, etc..

Taille

[taille de la galerie = "grand"]

La taille par défaut des images de la galerie est une vignette. Les autres options incluent "vignette", "moyenne", "grande" et "complète". "vignette", "moyen", "les grandes tailles sont spécifiées dans Paramètres WordPress> Médias. La taille maximale correspond simplement à la taille de l'image. Si nous modifions les paramètres en taille =" grand ", WordPress génère l'image et le rognage / Adaptez-le aux dimensions associées. La taille "grande" par défaut de WordPress est Largeur maximale 1024 et Hauteur maximale 1024. Les images seront donc redimensionnées et rognées pour correspondre à cette taille. vouloir.)

* Remarque: vos images seront biaisées si elles sont beaucoup plus grandes que la taille spécifiée..

commandé par

[gallery orderby = "menu_order"]

Par défaut, les images sont classées par 'menu_order' (ce que je vous recommande vivement de laisser). Les autres options incluent 'ID', 'titre' - ordre par titre. , 'date' - l'image de commande par date a été téléchargée, 'modifiée' - la dernière commande a été mise à jour ou modifiée et 'RAND' - commande les éléments au hasard.

ordre

[ordre de la galerie = "ASC"]

Une fois que vous avez défini "orderby", vous pouvez définir "ASC" ou "DESC" (ne l'utilisez pas si "orderby" n'est pas défini ou défini sur "menu_order"). Ainsi, par exemple, si vous souhaitez que les images soient répertoriées par ordre alphabétique vers l’arrière (Z-A) par titre d’image, assurez-vous que orderby = "title" et spécifiez également order = "DESC" (par défaut, ASC).. [gallery orderby = "title" order = "DESC"]

lien

[galerie lien = "fichier"]

Par défaut, la galerie affiche chaque lien vers la page de pièce jointe de chaque image. En d'autres termes, chaque image correspond essentiellement à un seul article, avec l'image. Si vous souhaitez créer un lien vers la source de l'image (my-image-name.jpg), vous pouvez passer [galerie lien = "fichier"].

comprendre

[galerie include = "23,39,45"]

Parfois, vous voudrez peut-être inclure uniquement des images très spécifiques. Vous pouvez le faire en utilisant l'option include, [galerie include = "23,39,45"] (23,39,45, par exemple, utilisez des identifiants correspondant à vos images). Vous communiquez l'identifiant de chaque image à associer. Pour trouver les identifiants des images, allez dans Média> Bibliothèque puis cliquez sur chacune des images souhaitées..

Dans la barre d'URL du navigateur, recherchez wp-admin / media.php? Attachment_id =, puis notez-le et utilisez ce numéro dans le shortcode de la galerie en respectant le format indiqué ci-dessus..

exclure

[gallery exclude = "21,32,43"]

Cette option est à peu près exactement ce que ça sonne. Si vous suivez les instructions pour comprendre, trouver les identifiants des images que vous avez Ne pas veux dans la galerie. Une fois que vous avez trouvé les images que vous ne voulez pas inclure (recherchez uniquement les images que vous ne voulez pas qui sont jointes au message) [gallery exclude = "21,32,43"]. S'il vous plaît noter que si vous utilisez inclure et exclure l'internet va casser! Ok pas vraiment, mais ça ne marchera pas! Il ignorera l'exclusion et utilisera uniquement l'inclusion.

itemtag, icontag, captiontag

[gallery itemtag = "section" icontag = "div" captiontag = "figure"]

Ces options peuvent en réalité changer les éléments HTML que WordPress génère avec le shortcode de la galerie. Les balises d’option par défaut sont les suivantes: dl ", icontag =" dt ", captiontag =" dd ". Le code court de la galerie par défaut pour ces options est [gallery itemtag = "dl" icontag = "dt" captiontag = "dd"]. Supposons que nous voulions changer les balises HTML, nous pourrions facilement passer l'élément que nous préférerions utiliser, afin que nous puissions utiliser quelque chose comme: [gallery itemtag = "section" icontag = "div" captiontag = "figure"]. Essayez ces options et vous pouvez voir la différence en sortie.

 
 
  
 
 Joli texte 
 
  
 
 Baies! 

 
  
 
 Quad in River 
 
  
 
 le magasin 

 
 

---

Theming la galerie

Si vous créez ou personnalisez un thème, vous devez rechercher certaines classes principales. Ce sont des classes que la galerie affiche dans le HTML, chaque fois qu'un shortcode [gallery] est utilisé.

Galerie Wrap

Le "Gallery Wrap" enveloppe chaque instance du shortcode [gallery]. Cela signifie que si vous utilisez le shortcode [gallery] trois fois, cet encapsulation existera trois fois dans le code source. Chaque fois que la [galerie] est utilisée dans une publication, l'id de sortie est incrémenté.