Arrière plan personnalisé dans le Customizer de WordPress

Arrière plan personnalisé dans le Customizer de WordPress

Depuis la version 3.4 de WordPress, nous pouvons ajouter un fond (arrière plan) personnalisé pour notre thème. Le but de l’article est d’améliorer le fonctionnement actuel en ajoutant le côté responsive.

Vous pouvez voir la documentation sur le codex qui décrit comment le mettre en place sur son thème : https://codex.wordpress.org/Custom_Backgrounds

Qu’est ce que le Custom_Backgrounds ?

Cette fonctionnalité est très sympa car elle permet de facilement configurer son image d’illustration comme vous pouvez le voir sur le thème seasonal :

Mais voilà, ils n’ont pas été au bout car l’image reste la même en fonction des écran. Le responsive n’est pas géré dans cette option de WordPress.

Correction sur le thème Seasonal

Pour y remédier nous allons prendre l’exemple de ce thème et y appliquer une modification afin de pouvoir gérer les différentes tailles d’images.

Dans le fichier function.php, nous avons la déclaration pour utiliser l’option avec la couleur, l’image par défaut et la fonction a appeler pour gérer l’affichage du css personalisé:

<?php

	/*
	* Set up the WordPress core custom background feature.
	* See https://codex.wordpress.org/Custom_Backgrounds
	*/
	add_theme_support( 'custom-background', array( 
		'default-color'		=> '59626d',
		'default-image'		=> get_template_directory_uri() .'/images/background.jpg',
		'wp-head-callback'	=> 'seasonal_custom_background',
	) );

?>

 

Ligne 8, dans la fonction seasonal_custom_background(), nous retrouvons pratiquement le même code que dans la fonction par défaut _custom_background_cb() indiqué dans le codex.

Dans cette fonction on appel la fonction get_background_image() qui nous donne l’URL de l’image a mettre en fond. Seulement voilà, seulement l’URL est stockée dans les paramètre du thème et non l’identifiant, donc il va être plus difficile de trouver les différentes taille d’image.

Voici donc l’adaptation pour le thème Seasonal du fichier custom-background.php :

<?php

/**
 * Retrieves the id of the background image
 * @source https://wordpress.stackexchange.com/questions/98166/how-to-get-attachment-id-of-background-image
 * @return int post_id
 */
function seasonal_get_background_image_id() {

    $bg_id = get_theme_mod('background_image_id', null );

    if( ! $bg_id ) {

      if ( ! $bg_img = get_background_image() )
          return FALSE;

      $query = array(
          'post_type'  => 'attachment',
          'fields'     => 'ids',
          'meta_query' => array (
              array (
                  'key' => '_wp_attachment_is_custom_background',
                  'value'   => get_option( 'stylesheet' ),
                  'compare' => '==',
              ),
              array (
                  'key' => '_wp_attachment_metadata',
                  'value'   => basename( $bg_img ),
                  'compare' => 'LIKE',
              )
          )
      );

      if ( array () === $bg_post = get_posts( $query ) )
          return FALSE;

      $bg_id = $bg_post[0];

      set_theme_mod('background_image_id', $bg_id );
    }
    return $bg_id;
}

/**
 * Default custom background callback.
 *
 * @since WordPress 3.0.0
 */
 function seasonal_custom_background() {
    // $background is the saved custom image, or the default image.
    $background = set_url_scheme( get_background_image() );
    $background_large = $background_mediumlarge = $background;

    $custom_post_background = false;

    if( is_singular() ) {
      global $post;
      $background_image_id = get_post_meta( $post->ID, 'sidebar_background_image_id', true );
    }

    if( !is_int($background_image_id) ){
      $background_image_id = seasonal_get_background_image_id();
    }
	else{
      $post_background_image = wp_get_attachment_image_src( $background_image_id, 'full' );
      $post_background_image_large = wp_get_attachment_image_src( $background_image_id, 'large' );
      $post_background_image_mediumlarge = wp_get_attachment_image_src( $background_image_id, 'medium_large' );
      
      if( $post_background_image ) {
        $custom_post_background = true;
        $background = esc_url( $post_background_image[0] );
        $background_large = esc_url( $post_background_image_large[0] );
        $background_mediumlarge = esc_url( $post_background_image_mediumlarge[0] );
      }
    }
    // $color is the saved custom color.
    // A default has to be specified in style.css. It will not be printed here.
    $color = get_background_color();

    if ( $color === get_theme_support( 'custom-background', 'default-color' ) ) {
      $color = false;
    }

    if ( ! $background && ! $color )
      return;

    $style = $color ? "background-color: $color;" : '';
    $mediaq = $sidebar_before_opacity = '';

    if ( $background ) {
      $image = " background-image: url('".$background."');";
      $image_large = " background-image: url('".$background_large."');";
      $image_mediumlarge = " background-image: url('".$background_mediumlarge."');";

      $repeat = esc_html(get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) );
      if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
        $repeat = 'repeat';
      $repeat = " background-repeat: $repeat;";

      $position = esc_html(get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) );
      if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
        $position = 'left';
      $position = " background-position: top $position;";

      $attachment = esc_html(get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) );
      if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
        $attachment = 'scroll';
      $attachment = " background-attachment: $attachment;";

      $size = esc_html(get_theme_mod( 'background_image_size', 'cover' ) );
      if ( ! in_array( $size, array( 'auto', 'cover', 'contain' ) ) || $custom_post_background )
        $size = 'cover';
      $size = " background-size: $size;";

      $opacity = esc_attr(get_theme_mod( 'background_overlay_opacity', 0.5 ) );
      if( $opacity && is_numeric( $opacity ) && $opacity >= 0 && $opacity <= 1 )
        $sidebar_before_opacity = " opacity: $opacity;";      
	
    $style .= $image . $repeat . $position . $attachment . $size; 

    // Media Queries
    if($image_mediumlarge)
      $mediaq .= PHP_EOL."@media (min-width: 1px){.sidebar { " . $image_mediumlarge . "}}";
    if($image_large)
      $mediaq .= PHP_EOL."@media (min-width: 769px){.sidebar { " . $image_large . "}}"; // image is at 33% but not the height.
    if($image)
      $mediaq .= PHP_EOL."@media (min-width: 1025px){.sidebar { " . $image . "}}";
	}
	
?>
<style type="text/css" id="custom-background-css">
.sidebar { <?php echo trim( $style ); ?> }
<?php echo $mediaq; ?>
.sidebar:before {<?php echo trim( $sidebar_before_opacity ); ?>}
</style>
<?php
}
?>
  1. Ligne 49 : Nous avons donc ajouté une fonction seasonal_get_background_image_id() qui permet de récupérer l’identifiant du fichier à partir de l’URL et nous la stockons ensuite via set_theme_mod('background_image_id', $bg_id ); pour pouvoir la récupérer facilement lors des prochains appels.
  2. Nous ajoutons du code pour récupérer les différent formats d’images (Ligne 6, 92 et 121) et appliquer le CSS qui va bien.
  3. Ensuite, ligne 133, il suffit de mettre en place les media-query en CSS pour appliquer les images récupérés.

Laisser un commentaire

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