|     |   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

 

Répondre à Anonyme Annuler la réponse

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