Les auteurs d’articles dans wordPress ne pensent pas toujours à mettre une image à la une. On peut donc vouloir définir une image à la une par défaut lorsqu’un article n’en a pas.
Côté admin, on crée une option qui aura l’id de l’image dans la bibliothèque de media, et on utilisera le filtre post_thumbnail_html pour afficher cette image s’il n’y en a pas.
Création de l’option
On suppose qu’il existe une page d’options dans un formulaire côté admin. Notre option est stockée dans un tableau à la clé id_featured_image . Par exemple ici, on a 2 options dans le tableau : id_revue , et id_featured_image . Celle qui nous intéresse est id_featured_image .
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
private function options() { $option = get_option( $this->option ); if( false == $option ) { $option = $this->default_option; add_option( $this->option, $option ); } $option = wp_parse_args( $option, $this->default_option ); // Default featured image $default_url = Galaxies_SF::url( 'assets/images/default-featured-150.png' ); if( $option['id_featured_image'] == 0 ) { $featured_img = "<img id=\"featured-img\" src=\"{$default_url}\">"; $featured_button_text = __( 'Set', $this->textdomain ); $featured_toogle_text = __( 'unset', $this->textdomain ); } else { $featured_img = wp_get_attachment_image( $option['id_featured_image'], 'thumbnail', false, ['id' => 'featured-img'] ); $featured_button_text = __( 'Unset', $this->textdomain ); $featured_toogle_text = __( 'Set', $this->textdomain ); } ob_start(); ?> <form id="gal-option" action="" method="POST"> <div class="postbox"> <h3 class="title"><?php _e( 'Galaxies store options' ); ?></h3> <div class="inside"> <table class="form-table"> <tbody> <tr> <th scope="row"><?php _e( 'Revue id for background', $this->textdomain ); ?></th> <td> <input type="number" name="option[id_revue]" value="<?php echo $option['id_revue']; ?>"> <p class="description"><?php _e( 'Revue <strong>id</strong> in the table <code>gal_revue</code>. May be <strong>0</strong> for the most recent revue.', $this->textdomain ); ?></p> </td> </tr> <tr> <th scope="row"><?php _e( 'Default featured image', $this->textdomain ); ?></th> <td class="flex"> <input type="hidden" id="featured-image-id" name="option[id_featured_image]" value="<?php echo $option['id_featured_image'] ?>" default="<?php echo $option['id_featured_image'] ?>" /> <?php echo $featured_img; ?> <button class="button" id="set-default-featured-image" data-default="<?php echo $default_url; ?>" data-toggle-text="<?php echo $featured_toogle_text; ?>"><?php echo $featured_button_text; ?></button> </td> </tr> </tbody> </table> </div> </div> <button type="submit" class="button-primary"><?php _e( 'Save settings' ); ?></button> </form> <?php echo ob_get_clean(); } |
assets/images/default-featured-150.png est le placeholder de l’image.
On obtient la page d’options suivante :
Maintenant il faut aller chercher ou uploader une image en cliquant sur Set. Pour cela, on écrit un script chargé dans la page d’options.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
/** * Default featured image */ const $featured_button = $( '#set-default-featured-image' ), $featured_input_id = $( '#featured-image-id' ), $featured_img = $( '#featured-img' ); var featuredFrame, featuredImageId; var toggle_featured = (id) => { let temp = $featured_button.data( 'toggle-text' ); $featured_button .data( 'toggle-text', $featured_button.text() ) .text( temp ); $featured_input_id.val( id ); return; } $featured_button.on( 'click', (e) => { e.preventDefault(); if( $featured_input_id.val() != 0 ) { $featured_img.attr({ src: $featured_button.data( 'default' ), srcset: '', }); toggle_featured( 0 ); return; } if( undefined != featuredFrame ) { featuredFrame.open(); return; } // Create the media frame featuredFrame = wp.media({ title: ucfirst(GAL_OPTION.default_featured_image), library: { type: 'image' }, button: { text: ucfirst(GAL_OPTION.default_featured_image) }, multiple: false, }); // When an image is selected featuredFrame.on( 'select', () => { let attachment = featuredFrame.state().get('selection').first().toJSON(); $featured_img.attr({ src: attachment.sizes.thumbnail.url, srcset: '', }); toggle_featured( attachment.id ); }); featuredFrame.open(); }); |
Lorsque l’on clique sur Set, la fenêtre media s’ouvre et l’on peut aller chercher ou uploader une image dans la bibliothèque. Il ne reste plus qu’à sauvegarder l’option pour pouvoir utiliser l’image avec la fonction get_the_post_thumbnail() . La sauvegarde n’est pas décrite dans cet article. On suppose que l’option est disponible dans un tableau d’option à la clé id_featured_image .
On écrit dans fonctions.php :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * post_thumbnail_html * return default post_thumbnail if featured image does not exist */ add_filter( 'post_thumbnail_html', 'galaxies_post_thumbnail_url', 20, 5 ); function galaxies_post_thumbnail_url( $html, $post_id, $post_thumbnail_id, $size, $attr ) { if( $html ) return $html; $option = get_option( 'gal_option' ); if( ! empty( $option['id_featured_image'] ) ) { $html = wp_get_attachment_image( $option['id_featured_image'], $size, false, $attr ); } return $html; } |
Et hop, bien que les étapes de mise en place et de la sauvegarde de la page d’options ne sont pas décrites, on obtient une image à la une par défaut si aucune n’est renseignée par l’auteur d’un article.
