[Résolu] Changer l’image du header à chaque page (Créer un compte)

  • WordPress :5.8
  • Statut : résolu
10 sujets de 16 à 25 (sur un total de 25)
  • Auteur
    Messages
  • #2392983
    Flobogo
    Modérateur
    Maître WordPress
    18513 contributions

    Bonjour,

    La solution de @ferman fonctionne certainement … mais ( il y a un « mais ») … au-delà de 2-3 pages avec image en vedette à utiliser, ça va devenir usine à gaz , et ajouter une extension qui permet d’accéder aux functions.php depuis le tableau de bord ne fait qu’alourdir, et c’est une mauvaise idée car en cas d’erreur, le site plante, et on doit passer par FTP pour récupérer le fichier modifié, sans pouvoir récupérer la version précédente.

    Au final, je ne comprends pas pourquoi vous avez absolument modifier mon code, alors qu’il y avait juste un souci de CSS à adapter.
    Il fallait évidemment remplacer <div id="custom-header"> par l’id ou class de votre thème, soit <div class="site-header"> comme l’indique @ferman qui a vérifié en direct sur le thème, alors que moi, je vous précisais que ça venait d’un ancien thème et qu’il fallait adapter.

    #2392992
    PhiLyon
    Modérateur
    Maître WordPress
    28278 contributions

    Bonjour.

    Pour faire plus simple et pour mettre mon grain de sel, dans le style.css de ton thème enfant, en changeant l’id des pages et l’url des images (mises à l’échelle comme le stipule @ferman), colles ce code

    .page-id-29 .site-header {background-image:url('http://wpfr.local/wp-content/uploads/2021/01/P1050242-scaled.jpg')}
    
    .page-id-30 .site-header {background-image:url('http://wpfr.local/wp-content/uploads/2020/10/3744-3-scaled.jpg')}

    🙂

    #2392995
    Flobogo
    Modérateur
    Maître WordPress
    18513 contributions

    Salut @philyon,

    Ton grain de sel est valable aussi … mais comme @ferman, tu proposes une solution pour 2 pages, qu’il faut modifier et adapter à chaque page ajoutée.
    L’avantage de ta solution, c’est qu’elle est moins lourde, puisque ce ne sont pas des requêtes PHP.
    Quoique, charger des images inutiles dans le CSS, c’est peut-être pas indispensable non plus 😉

    Bref, voici ma solution non testée, avec deux requêtes en tout et pour tout. J’ai mis un peu au pif pour les dimensions d’image, pas sûre d’avoir trouvé celle de l’image par défaut du header.
    Dans le fichier header-recette.php * , remplacez la ligne 43 du header.php normal par le code ci-dessous :

    <!-- MODIF -->
    		<?php // Check if page is displayed and featured header image is used
    		if( is_page() && has_post_thumbnail() ) :
    		?>
    		
    		<header id="masthead" class="site-header" role="banner" data-parallax="scroll" data-image-src="<?php the_post_thumbnail('fooding-homepage-1', 1500, 600) ; ?>">
    		
    		<?php 
    		// Check if there is a custom header image
    		elseif( get_header_image() ) :
    		?>
    			<header id="masthead" class="site-header" role="banner" data-parallax="scroll" data-image-src="<?php header_image() ; ?>">
    			
    		<?php 
    		endif;
    		?>
    	<!-- END MODIF -->
    code pour remplacer la ligne 43 du header.php

     

    * il faut évidemment appeler le header-recette.php dans page-recette.php, sinon, ça ne marche pas 😉 mais si besoin, commencez par tester sur les pages « normales » qui ont une image mise en avant, en modifiant simplement le fichier header.php « normal » (à copier quand même dans le thème-enfant, une fois qu’il est créé)

    Merci de me dire si ça passe ou si ça buggue, j’essaierai de tester ce WE, mais pas avant. Si besoin, essayez sans indiquer les dimensions de ‘fooding-homepage-1’ dans les parenthèses d’appel à l’image en avant, ou même carrément sans rien dans les paranthèses, juste the_post_thumbnail.

    #2393010
    MMartine
    Participant
    Initié WordPress
    43 contributions

    Bonjour,

    merci à vous tous. Je teste ça ce week-end !

    Bonne journée

    Cordialement

    #2393042
    ferman
    Participant
    Maître WordPress
    5255 contributions

    Bonjour,

    Donc j’ai testé en utilisant des pages normales (je n’ai pas créé de modèle de page « spécial recette ») et le header « normal » dans le thème enfant modifié avec le code proposé par @flobogo.  Ça marche très bien à condition d’apporter une petite modif  à la ligne 6:

    (Édit modération : la ligne rectifiée se trouve au message suivant de @ferman, qui était sûrement fatigué par son travail de test)

    //Remplacer:
    
    <header id="masthead" class="site-header" role="banner" data-parallax="scroll" data-image-src="<?php the_post_thumbnail('fooding-homepage-1', 1500, 600) ; ?>">
    
    //Par:
    
    <header id="masthead" class="site-header" role="banner" data-parallax="scroll" data-image-src="<?php the_post_thumbnail('fooding-homepage-1', 1500, 600) ; ?>">

    Le code CSS de @PhiLyon marche aussi très bien avec la petite limitation de devoir mettre une ligne CSS pour chaque page.

    Le code de @ferman fonctionne également avec la limitation de devoir mettre une ligne de code PHP pour chaque page

    _____________________________________________________________________________________

    En conclusion:

    Après évaluation comparative de trois propositions en vue d’afficher un header différent suivant les pages  les résultats sont les suivants:

    Pour sa méthode flexible et élégante, le jury décerne le premier prix médaille_orà @flobogo qui en cette occasion a réussi à surpasser son complexe d’infériorité et vaincre sa timidité.

    « Je ne vais pas savoir vous aider plus, je ne suis pas codeuse ni développeuse, simple bidouilleuse. »

    Le deuxième prix médaille_argentva à @PhiLyon qui a proposé une approche astucieuse basée sur les CSS, dont la simplicité de mise en oeuvre compense en grande partie une flexibilité moindre par rapport à la méthode de @flobogo.

    Enfin, sur la troisième marche du podium on trouve @ferman médaille_bronzedont la méthode ne manque pas non plus de mérite. Le jury tient à louer le  fair play de @ferman, évaluateur de ces méthodes donc juge et partie qui a su résister à la tentation de favoriser son approche  au détriment des deux autres.

     

    • Cette réponse a été modifiée le il y a 6 mois et 4 semaines par ferman.
    • Cette réponse a été modifiée le il y a 6 mois et 4 semaines par Flobogo. Raison: édit modération
    #2393051
    Flobogo
    Modérateur
    Maître WordPress
    18513 contributions

    En qualité de modératrice, et je suis sûre que @philyon approuvera, je décerne @ferman le 1er prix 🥇 de camaraderie, doublé du 1er prix de « grand testeur en chef » spécialement créé pour l’occasion. 🏆

    Euh, par contre, je ne vois pas de différence entre les 2 lignes de code 3 et 7 ci-dessus, mais je pense qu’on aura vite un rectificatif, à moins que ce soit une petite virgule ou point-virgule qui échappe à mes yeux usés 🔍

    #2393052
    ferman
    Participant
    Maître WordPress
    5255 contributions

    doublé du 1er prix de « grand testeur en chef

    Mais un peu étourdi. Ci-dessous la ligne correcte:

    <header id="masthead" class="site-header" role="banner" data-parallax="scroll" data-image-src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>">

    #2393053
    Flobogo
    Modérateur
    Maître WordPress
    18513 contributions

    Tous les savants sont des étourdis, c’est bien connu. 😉

    #2393080
    PhiLyon
    Modérateur
    Maître WordPress
    28278 contributions

    Tous les savants sont des étourdis

    Ils en oublient qu’ils sont savants.

    🙂

    #2393263
    MMartine
    Participant
    Initié WordPress
    43 contributions

    Bonjour

    C’est super ! Je vous décerne tous les 1ers prix, à vous tous, que vous soyez savant ou yeux usés. Il faudra juste vous serrer un peu sur la plus haute marche du podium.

    Plein de merci, vraiment.

    Bon week end

10 sujets de 16 à 25 (sur un total de 25)
  • Vous devez être connecté pour répondre à ce sujet.