Home » wordpress » Transformer sa gallerie en slider sans plugin
Transformer sa gallerie en slider sans plugin
Aujourd’hui on va voir comment on peut, grace au fonctions tirées du codex, transformer la gallerie classique de wordpress en slider.
Mon idée de base n’est pas de modifier l’apparence de la gallerie, c’est à dire pour en changer la taille ou y rajouter simplement des titres, des ‘captions’ ou autre, mais simplement, pour une question de gain de place, d’en faire un slider.L’idéal serait de pouvoir transformer automatiquement toutes mes galleries en slider: ce qui me permettrait une grande économie de place sur la page.
Replacer sa gallerie dans le contenu
Ne sachant pas trop au final quelle place je voulais leur donner dans l’article, j’ai testé plusieurs bouts de code, dont ce premier code du codex qui utilise la fonction get_post_gallery_images( $post );
function pw_show_gallery_image_urls( $content ) {
global $post; // Only do this on singular items if( ! is_singular() ) return $content; // Make sure the post has a gallery in it if( ! has_shortcode( $post->post_content, 'gallery' ) ) return $content; // Retrieve the first gallery in the post $gallery = get_post_gallery_images( $post ); $image_list = '<ul>'; // Loop through each image in each gallery foreach( $gallery as $image_url ) { $image_list .= '<li>' . '<img src="' . $image_url . '">' . '</li>'; } $image_list .= '</ul>';
// Append our image list to the content of our post $content .= $image_list; return $content; } add_filter( 'the_content', 'pw_show_gallery_image_urls' );
puis ce deuxième code: qui utilise la version pluriel de la fonction get_post_galleries_images( $post ) , pour plusieurs galleries.
function pw_show_gallery_image_urls( $content ) {
global $post;
// Only do this on singular items if( ! is_singular() ) return $content;
// Make sure the post has a gallery in it if( ! has_shortcode( $post->post_content, 'gallery' ) ) return $content;
// Retrieve all galleries of this post $galleries = get_post_galleries_images( $post );
$image_list = '<ul>';
// Loop through all galleries found foreach( $galleries as $gallery ) {
// Loop through each image in each gallery foreach( $gallery as $image ) {
$image_list .= '<li>' . $image . '</li>';
}
}
$image_list .= '</ul>';
// Append our image list to the content of our post $content .= $image_list;
Ces deux codes pourraient suffire selon les besoins, et permettent, en modifiant l’html, de ressortir les images sous forme de slider, mais les deux à la suite du content, comme ils l’indiquent en préambule : « A simple example of how to append the raw image URLs to the content of any post or page that has at least one gallery. »
La première ne modifie qu’une seule gallerie, la deuxième fonction mélange toutes les galleries d’un article et les deux placent la gallerie fin d’article, après le contenu.
Un filtre pour modifier la gallerie
Le code originel du shortcode se trouve dans wp-include/media. Le codex nous indique qu’un filtre existe pour pouvoir modifier à notre guise le rendu de cette gallerie et plusieurs topics sur stack overflow donnent des exemples plus précis.Ici ou la pour mettre en place ce filtre.
Certains l’utilisent pour modifier l’apprence.Dans mon cas, assez spécifique, le filtre ne donne rien.
Créer son propre shortcode
La solution est donc carrément de supprimer le shortcode natif et d’en recréer un nouveau, avec les seules fonctions qui m’interessent, et ca tombe bien, puisque selon le codex, on peut tout à fait retirer le shortcode par défaut et recréer le sien avec les fonctions:
// remove the WordPress function remove_shortcode('gallery', 'gallery_shortcode'); // add our own replacement function add_shortcode('gallery', 'myown_gallery_shortcode');
Voci le code à insérer dans functions.php
remove_shortcode('gallery'); add_shortcode('gallery', 'my_new_gallery_function'); function my_new_gallery_function($atts) {
Au final, pour chaque gallerie inserée dans mon article, à la place d’un défilement continu d’images, j’ai bien mon slider qui divise drastiquement la longeur de la page, et rend donc la lecture un peu moins pénible.
