Customisez votre galerie WordPress
Artisteer a un défaut, un manque qui n’a pas encore été comblé : les galeries WordPress ne sont pas encore stylisables. Je dis « encore », car il a quelques mois, j’avais passé un petit moment dans le css de mon thème pour définir le style de mes commentaires, et cette fonctionnalité a été ajoutée dans la nouvelle version d’Artisteer tout récemment. Ce sera donc peut-être le cas prochainement pour les galeries. En attendant, voici les morceaux de code que j’utilise.
Dans le fichier functions.php
Ajoutez cette ligne de code
Elle vous permettra de ne plus utiliser le style par défaut de WordPress.
add_filter( 'use_default_gallery_style', '__return_false' );
Dans votre CSS
Modifiez le code « .gallery img » selon ce que vous souhaitez
Ce code est celui que j’utilise sur ce site. Il est assez simple donc n’hésitez pas à le modifier pour qu’il corresponde à vos attentes.
.gallery img { padding:5px; background:#fff; border:1px solid #cfcfcf; }
Supprimez la ligne de code rayée
Seulement pour la version 4.2 d’Artisteer (et sûrement celles qui suivront). Cette ligne définit la taille des images dans votre galerie et est intégrée automatiquement. Elle devra être supprimée pour vous permettre de choisir de mettre plus de trois colonnes dans votre galerie.
.gallery .gallery-item { float: left; margin-top: 0; text-align: center;width: 33%;}
Ajoutez ces lignes
Elles permettront à vos galeries d’apparaître proprement quelque soit le nombre de colonnes que vous souhaitez.
.gallery-columns-0 .gallery-item { width: 100%; } .gallery-columns-1 .gallery-item { width: 100%; } .gallery-columns-2 .gallery-item { width: 50%; } .gallery-columns-3 .gallery-item { width: 33.33%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery-columns-5 .gallery-item { width: 20%; } .gallery-columns-6 .gallery-item { width: 16.66%; } .gallery-columns-7 .gallery-item { width: 14.28%; } .gallery-columns-8 .gallery-item { width: 12.5%; } .gallery-columns-9 .gallery-item { width: 11.11%; } .gallery-columns-10 .gallery-item { width: 10%; } .gallery-columns-11 .gallery-item { width: 9.09%; } .gallery-columns-12 .gallery-item { width: 8.33%; } .gallery-columns-13 .gallery-item { width: 7.69%; } .gallery-columns-14 .gallery-item { width: 7.14%; } .gallery-columns-15 .gallery-item { width: 6.66%; } .gallery-columns-16 .gallery-item { width: 6.25%; } .gallery-columns-17 .gallery-item { width: 5.88%; } .gallery-columns-18 .gallery-item { width: 5.55%; } .gallery-columns-19 .gallery-item { width: 5.26%; } .gallery-columns-20 .gallery-item { width: 5%; } .gallery-columns-21 .gallery-item { width: 4.76%; } .gallery-columns-22 .gallery-item { width: 4.54%; } .gallery-columns-23 .gallery-item { width: 4.34%; } .gallery-columns-24 .gallery-item { width: 4.16%; } .gallery-columns-25 .gallery-item { width: 4%; } .gallery-columns-26 .gallery-item { width: 3.84%; } .gallery-columns-27 .gallery-item { width: 3.7%; } .gallery-columns-28 .gallery-item { width: 3.57%; } .gallery-columns-29 .gallery-item { width: 3.44%; } .gallery-columns-30 .gallery-item { width: 3.33%; }
Photographie de Sifter (CC BY-NC 2.0)