|     |   06 69 54 64 66   |   09 72 54 69 88   |   du lundi au vendredi de 9h à 18h

Customiser l’affichage de galeries dans WordPress

Ma galerie custom dans Wordpress

Dernière mise à jour août 8th, 2016 à 19:55

Ce que je propose ici n'est pas d'utiliser les shortcodes de gallery par défaut de wordpress du genre  "gallery id=128 columns=2 "  mais de créer une fonction qui ira chercher toutes les images associées à un post. Le principe utilise les appels par défaut de wordpress concernant les images associées, mais les modifications permettent d'arriver à une degré de liberté non négligeable : on peut ainsi appeler des images dans des listes, dans des tables, dans des div, en utilisant un loop propre au shortcode, et y associer la lightbox de son choix, par exemple, utiliser la balise alt ou title pour créer une url, ou autre chose... Bref, une fois le principe posé libre à vous d'envisager tous les possibles dont vous avez besoin.
Tout se passe dans le functions.php.

On ajoute le shortcode "slider-post"

 add_shortcode( 'slider-post', 'slider_post_shortcode' );

On instancie la fonction, on définit les attributs du shortcode

 function slider_post_shortcode( $attr ) {

// On valide la déclaration orderby pour pouvoir l'utiliser dans le shortcode
 if ( isset( $attr['orderby'] ) ) {
 $attr['orderby'] = sanitize_sql_orderby( $attr['orderby'] );
 if ( !$attr['orderby'] )
 unset( $attr['orderby'] );
 }

// On définit les attributs du shortcode
 extract( shortcode_atts( array(
 'order' => 'ASC',
 'orderby' => 'menu_order ID', //permet de modifier l'ordre désiré dans le gestionnaire des médias
 'id' => get_the_ID(),
 'size' => 'slider-post', // taille définit au départ les tailles personnalisées que vous avez mises en place avec la fonction add_image_size
 'itemtag' => 'li', // on travaille en ul dans ce cas
 'include' => '',
 'exclude' => get_post_thumbnail_id() //commenter cette ligne (attention à la virgule finale) si vous désirez exclure l'image à la une de la galerie
 ), $attr ) );

$id = (int) $id;
 $orderby = ( 'RAND' == $order ) ? 'none' : $orderby;

On va chercher les fichiers attachés au post

NB : Pour attacher un fichier à un post sans le faire apparaître physiquement dans le post, au moment de l'édition d'un post, il suffit de charger les images que l'on souhaite et quitter l'éditeur d'images sans utiliser "insérer dans l'article".

if ( ! empty( $include ) ) {
 $include = preg_replace( '/[^0-9,]+/', '', $include );
 $_attachments = get_posts( array( 'include' => $include, 'post_status' => '', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby ) );
 $attachments = array();
 foreach ( $_attachments as $key => $val ) {
 $attachments[$val->ID] = $_attachments[$key];
 }
 } elseif ( ! empty( $exclude ) ) {
 $exclude = preg_replace( '/[^0-9,]+/', '', $exclude );
 $attachments = get_children( array( 'post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby ) );
 } else {
 $attachments = get_children( array( 'post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby ) );
 }
 if ( empty( $attachments ) )
 return '';
 if ( is_feed() ) {
 $output = "\n";
 foreach ( $attachments as $att_id => $attachment )
 $output .= wp_get_attachment_link( $att_id, 'thumbnail', true ) . "\n";
 return $output;
 }

On formate la sortie html

Ensuite on crée l'output (ce qui sera généré comme code à l'affichage du post contenant le shortcode) et on ferme la fonction. Ici, il s'agit d'un slider (basé sur flexslider) qui va chercher chaque image associée au post affiché et qui boucle chacune d'elles dans le loop matérialisé par le foreach() qui contient les lignes <li> qui vont se répéter autant de fois qu'il y aura d'images associées. La class "lightbox" appelle la lightbox.

$i = 1;
 $output = '<div class="flexslider sliderpost"><ul class="slides">';
 foreach ( $attachments as $id => $attachment ) {
 $full_image_src = wp_get_attachment_image_src( $id, 'full' );
 $image_src = wp_get_attachment_image_src( $id, 'postlist' );
 $alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
 $image_title = $attachment->post_title;
 $post_id = get_the_ID();

$output .= '<li>';
 $output .= '<a href="' . esc_url( $full_image_src[0] ) . '" class="lightbox" rel="lightbox'.$post_id.'"  title="'. $image_title .'"><img class="img-' . $i . '" src="' . esc_url( $image_src[0] ) . '" alt="'. $image_title .'" /></a>';
 $output .= '<div class="texte"><span>' .$image_title.'</span></div>';
 $output .= '</li>';
 $i++;
 }

$output .= '</ul></div>';
 return $output;
 }

Voilà. Il vous suffit de définir le nom du shortcode, de modifier les attributs du shortcode, et d'adapter les éléments du foreach().

 

 

 Blog     dimanche 08 juin 2014     Patrice Romevo

 

6 commentaires sur “Customiser l’affichage de galeries dans WordPress”

  1. I love yоur blog.. ѵery nice colors & theme. DiԀ
    you design this website yⲟurself ⲟr did you hire ѕomeone tо dߋ it for
    үou? Plz respond aѕ I’m ⅼooking to construct my own blog and woսld ⅼike to
    find ⲟut ᴡhere u got thiѕ from. kudos

  2. Wonderful blog! Do you have any suggestions for aspiring writers?
    I’m hoping to start my own blog soon but I’m a little lost on everything.
    Would you suggest starting with a free platform like WordPress
    or go for a paid option? There are so many choices out there that I’m completely confused
    .. Any recommendations? Bless you!

  3. Thank you for the good writeup. It in fact was a amusement account it.
    Look advanced to far added agreeable from you! However, how can we communicate?

  4. Great site you have here but I was curious if you knew of any message
    boards that cover the same topics discussed here? I’d really like to be a part of group where I can get comments from other knowledgeable people that share the
    same interest. If you have any recommendations,
    please let me know. Cheers!

  5. Thank you for another informative web site. Where else may I get that type
    of info written in such a perfect means?
    I have a undertaking that I’m simply now operating
    on, and I’ve been on the look out for such information.

  6. I’m truly enjoying the design and layout of your blog.
    It’s a very easy on the eyes which makes it much more enjoyable for me to come here and visit more often. Did
    you hire out a designer to create your theme? Fantastic work!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *