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

  • WordPress :5.8
  • Statut : résolu
15 sujets de 1 à 15 (sur un total de 25)
  • Auteur
    Messages
  • #2392505
    MMartine
    Participant
    Initié WordPress
    45 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : je ne sais pas
    • Thème utilisé : Fooding
    • Extensions en place : unserconstruction
    • Nom de l’hébergeur : privé
    • Adresse du site : pas encore en ligne

    Problème(s) rencontré(s) :

    Bonjour,

    j’utilise le thème fooding qui correspond bien à la mise en page que je veux pour un site de recettes de cuisine : une grande image en haut, avec le titre de la  recette et les explications en-dessous.

    Pour l’instant, l’image du header se retrouve à l’identique sur toutes les nouvelles pages. Moi je voudrais pouvoir changer cette image à chaque nouvelle page, pour qu’elle illustre la recette de la page.

    Voilà ce que j’ai fait :

    – J’ai créé un nouveau modèle de page que je nomme page de recette.

    – Partant du principe que ma page pouvait commencer directement par une bannière en haut de page, j’ai supprimé le <?php get_header() ; ?> et là, toute la structure s’est effondrée, je m’y attendais 🙂

    Donc je pense qu’il faut que je duplique header.php, que je le renomme en header2.php, et que ma page de recette contienne  <?php get_header2() ; ?>.

    Mais je ne sais pas du tout ce qu’il faudrait que je modifie ou rajoute pour que ce header2 aille chercher une image de ma médiathèque.

    Alors je viens demander votre aide !

    Merci d’avance, bien cordialement.

     

    #2392507
    PhiLyon
    Modérateur
    Maître WordPress
    28273 contributions

    Bonjour.

    Tes recettes sont des articles ou des pages ?

    Sinon tu peux mettre une image en avant pour chaque page/article.

    🙂

    #2392510
    MMartine
    Participant
    Initié WordPress
    45 contributions

    Bonsoir, je partais plutôt pour des pages avec photo en haut, explications en milieu-bas et sur le côté, un diaporama vertical qui défile avec d’autres recettes du même genre.

    J’ai tenté un article, mais c’est pareil

    J’ai essayé de mettre une image en avant, mais elle apparait dans le bloc sous la fameuse image de header, qui me colle à la peau !

    Merci de cette réponse rapide, ça me redonne espoir 🙂

    #2392511
    Flobogo
    Modérateur
    Maître WordPress
    19575 contributions

    Bonjour,

    Vous êtes sur la bonne voie, mais pour appeler le header 2, ce sera <?php get_header(2) ; ?>
    Si vous l’appelez header-recette.php, ce sera <?php get_header(recette) ; ?>

    Ensuite, il faudra trouver à quel endroit ajouter ce genre de code :

    		// Check if page is displayed and featured header image is used
    if( is_page() && has_post_thumbnail() ) :
    ?>
    <div id="custom-header">
    <?php the_post_thumbnail('frontpage_image'); ?>
    </div>
    <?php
    // Check if there is a custom header image
    elseif( get_header_image() ) :
    ?>
    <div id="custom-header">
    <img src="<?php echo get_header_image(); ?>" />
    </div>
    <?php
    endif;

    Je n’ai pas retesté, mais cette fonction était utilisée sur mon ancien thème.

    A la ligne <?php the_post_thumbnail('frontpage_image'); ?> , il faudra remplacer ‘frontpage_image’ par le nom de taille d’image utilisée pour votre header. (et si elle n’existe pas, il faut la définir dans le fichier functions de votre thème-enfant)

    Bon, c’est un premier jet, à vous d’adapter.

    #2392512
    MMartine
    Participant
    Initié WordPress
    45 contributions

    Bonsoir,

    je crois comprendre le principe, je vais creuser ça demain.

    Merci beaucoup.

    Bonne soirée à vous, cordialement.

    #2392614
    MMartine
    Participant
    Initié WordPress
    45 contributions

    Bonsoir,

    je suis en échec 🙂

    Voilà ce que j’ai fait :

    • dans le fichier functions.php, il y a bien :

    add_theme_support( ‘post-thumbnails’ );

    add_image_size( ‘fooding-default’, 338, 210, true ); et 2 autres lignes du genre;

    • dans le fichier WP-includes/theme.php, je crois avoir trouvé la fonction header-image où je pense qu’il faut écrire les lignes que vous m’avez données. Mais est-ce bien là qu’il faut les placer?
    • je joins une copie d’écran, il est clair que j’ai des fautes (j’ai 2 messages de syntaxe error, unexpected'<‘ ), mais je ne vois pas ces erreurs. Pourtant toute la suite du fichier est passée en blanc.. mauvais signe !

    Serait-ce les lignes en php ? c’est vrai qu’il n’y en a aucune dans ce fichier.

    Merci si vous pouvez m’éclairer.

    Bonne soirée, cordialement.

     

     

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2392619
    MMartine
    Participant
    Initié WordPress
    45 contributions

    J’annule mon message précédent, je crois que je viens de comprendre un truc important ! Désolée d’avoir encombré cette page.

    #2392622
    ferman
    Participant
    Maître WordPress
    6334 contributions

    Bonjour,

    Vous avez trouvé vos erreurs?

    1. l 1363 enlever <?php
    2. l 1366 remplacer le > bleu par ?>
    #2392627
    Flobogo
    Modérateur
    Maître WordPress
    19575 contributions

    dans le fichier functions.php, il y a bien :

    add_theme_support( ‘post-thumbnails’ );
    add_image_size( ‘fooding-default’, 338, 210, true ); et 2 autres lignes du genre;

    Ça, c’est OK. Juste pour savoir : c’est dans le functions.php du thème-parent ou du hème-enfant ? (mais a priori, ça ne change rien, il faut que la taille d’image soit définie dans l’un des deux)

    dans le fichier WP-includes/theme.php, je crois avoir trouvé la fonction header-image où je pense qu’il faut écrire les lignes que vous m’avez données. Mais est-ce bien là qu’il faut les placer?

    Non, pas du tout. La fonction est à placer dans le fichier header.php du thème-enfant ou dans header-recette.php

    je joins une copie d’écran, il est clair que j’ai des fautes (j’ai 2 messages de syntaxe error, unexpected'<‘ ), mais je ne vois pas ces erreurs. Pourtant toute la suite du fichier est passée en blanc.. mauvais signe !

    Les indications de @ferman sont fiables. 🙂

    En fait, au vu de votre post initial, si cette fonction est utilisée uniquement sur le modèle page-recette, elle peut être totalement simplifiée en enlevant déjà toute la partie elseif (lignes 1369 à 1372 incluses)

    Par ailleurs, j’avais oublié de préciser hier que l’id « custom-header » est à adapter selon votre CSS, ça peut être autre chose. Ou alors il faudra définir ce #custom-header dans le CSS du thème-enfant

    #2392833
    MMartine
    Participant
    Initié WordPress
    45 contributions

    Bonsoir,

    Et je rame, je rame …

    ce que j’ai fait : dans le header-recette.php, j’ai intégré les lignes que vous m’aviez données, en tâtonnant pour trouver dans quelle div déjà existante les placer. Ensuite je n’arrive pas à paramétrer la div (id custom header par ex), pour qu’elle s’intègre bien dans le header existant, quelle que soit la  taille de l’écran. Mon image perso  se superpose bien à celle par défaut, mais dès que je rétrécis l’écran, c’est fichu. J’ai beau jouer du min-height, du @media etc, Il y a beaucoup de paramètres et de classes css concernant ce header, je ne maîtrise pas du tout, je jette l’éponge.

    Je me suis donc dit que le mieux serait tout-de-même que l’image chargée par la fonction header_image soit la « thumbnail » si la page en a une, et l’image par défaut sinon. Au moins je garderais toutes les fonctions responsives et de mise en page, inhérentes au thème.

    Je vous joins ce que j’ai tapé dans WP-includes/theme.php. J’ai l’impression que je ne suis pas loin car :

    le if et le else sont bien compris : ma page sans vignette affiche bien l’image par défaut, mes pages avec vignette n’affichent pas cette image,  mais n’en affichent, hélas, aucune autre ! 🙂  le ‘fooding-recette’ n’est pas à mettre en cause. Je pense que la commande get_the_post_thumbnail n’est pas bonne, mais je n’en trouve pas d’autre et elle ressemble pourtant bien au get_header_image d’origine…, mes 2 lignes $image = ont belle allure !

    Donc je lance à nouveau un sos. Merci d’avance si vous pouvez m’aider.

    Cordialement.

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2392838
    Flobogo
    Modérateur
    Maître WordPress
    19575 contributions

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

    Par contre, je me répète : il ne faut pas modifier wp-includes/theme.php ! Il faut uniquement modifier le fichier header.php (du thème-parent, à copier dans le thème-enfant) ou votre fichier header-recette.php (pas header2).

    #2392840
    MMartine
    Participant
    Initié WordPress
    45 contributions

    ah mince alors !

    Je pense que je vais devoir changer de thème parce que je ne m’en sors pas. Dommage, celui-là me plaisait bien.

    Merci beaucoup en attendant !

    Bonne soirée, cordialement.

    #2392871
    ferman
    Participant
    Maître WordPress
    6334 contributions

    Bonjour,

    Il y a peut-être une solution avec ce thème mais il faudrait créer un thème enfant, ce qui est facile avec child-theme configurator.  Si vous voulez essayer ?(ce n’est pas garanti à 100% mais ça ne cassera rien). Testé sur mon site: ça fonctionne.

    #2392943
    MMartine
    Participant
    Initié WordPress
    45 contributions

    Bonjour,

    je ne connaissais pas cet outil, j’ai découvert plein de choses !

    Merci, bonne journée.

    Cordialement

    #2392957
    ferman
    Participant
    Maître WordPress
    6334 contributions

    Bonjour,

    je ne connaissais pas cet outil, j’ai découvert plein de choses !

    Comme ça vous pouvez faire tout ce que vous voulez sans que le thème parent soit affecté.

    Essayez  cette procédure qui devrait permettre de  changer l’image du header à chaque page:

    1. Copiez le fichier header.php dans votre thème enfant au même niveau que functions.php et style.css (vous gardez le même nom) . Voir pj
    2. Modifiez la ligne 43 (ou ligne voisine) comme indiqué ci-dessous.
      	// ligne 43 Code existant:
      <header id="masthead" class="site-header" role="banner" data-parallax="scroll" data-image-src="<?php header_image(); ?>">
      // ligne modifiee dans le theme enfant:
      <header id="masthead" class="site-header">
      ligne modifiee dans header.php

       

    3. Copiez collez le code suivant dans functions.php du thème enfant à la suite de //END ENQUEUE PARENT ACTION en modifiant bien sûr pour que ça corresponde à votre cas.
      function image_header(){

      if (is_page ("page-test2")) $image = "/nom_du_site/wp-content/uploads/2021/03/image_2.jpg";
      elseif (is_page ("page-test1")) $image = "/nom_du_site/wp-content/uploads/2021/03/image_1.jpg";
      /*répéter la ligne ci-dessus pour chaque page en changeant le nom de la page et l'adresse de l'image. Par exemple:
      elseif (is_page ("page-test3")) $image = "/nom_du_site/wp-content/uploads/2021/03/image_3.jpg";
      etc.
      Pour la ligne ci-dessous, sélectionnez une image de votre choix qui sera affichée par défaut sur les pages où aucune autre image n'est en place; ça évite d'avoir un fond gris.
      */
      else $image = "/nom_du_site/wp-content/uploads/2021/03/image_default.jpg";

      ?>
      <header id="masthead" class="site-header" role="banner" data-parallax="scroll" data-image-src = <?php echo $image; ?>>
      <?php
      }
      add_filter('wp_head','image_header');

    Si vous avez à souvent ajouter des pages ou changer les images, il serait sans doute préférable d’utiliser l’extension  » my custom functions« . Ç’est pareil que functions.php mais vous y avez accès depuis votre tableau de bord.

    Pour les images, il est mieux de les recadrer  pour qu’elles aient les mêmes dimensions que l’image fournie par défaut avec le thème (1500px x 600px)

    • Cette réponse a été modifiée le il y a 1 année et 8 mois par ferman.
    • Cette réponse a été modifiée le il y a 1 année et 8 mois par ferman.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
15 sujets de 1 à 15 (sur un total de 25)
  • Vous devez être connecté pour répondre à ce sujet.