[Résolu] Articles copié à l’identique et espace en trop (Créer un compte)

  • WordPress :5.7
  • Statut : résolu
7 sujets de 1 à 7 (sur un total de 7)
  • Auteur
    Messages
  • #2372440
    guillermo_ankh
    Participant
    Initié WordPress
    4 contributions

    Bonjour à tous, j’ai besoin d’un peu d’aide et de lumière pour comprendre le problème de mise en page suivant :

    Ma configuration WP actuelle

    • WordPress : 5.7
    • Version de PHP/MySQL : PHP 7.3.27-9+0 / Maria DB 10.3.27
    • Thème utilisé : Book Landing Page Pro V2.1.5
    • Extensions en place : WooCommerce, Yaost
    • Nom de l’hébergeur : Auto-hébergé
    • Adresse du site : https://guillermo-ankh.fr

    Problème(s) rencontré(s) : J’ai quatre articles qui sont en tête de site accessible via des onglets. Sur ces quatre articles j’ai copier-coller le code source du premier de manière à avoir la même mise en page et pourtant je me retrouve avec un décalage comme si j’avais sauté des espaces à plusieurs endroits de l’article en question.
    Même en utilisant la fonction dupliquer j’obtiens des articles qui ne sont pas identique avec ces fameux espaces en trop.
    En exemple à gauche mon premier article. A droit le deuxième article avec la fonction copier.

    Pourtant lorsque je les édit, ils ont la même mise en page et je n’aperçois rien qui justifie cet étalement. Et je précise qu’il y a trois mois j’avais réalisé la même mise en page, et cela fonctionnait parfaitement donc je ne comprends pas.

    Merci beaucoup pour votre aide.

     

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

    Bonjour,

    Même en utilisant la fonction dupliquer

    Quelle fonction « dupliquer » ? Ça n’existe pas nativement. Vous utilisez donc une extension, mais comme vous n’avez pas donné le nom de toutes vos extensions …

    Bref, adressez-vous au support de cette extension de duplication.

    Et pour créer/modifier vos articles, vous utilisez l’éditeur Gutenberg, ou l’ancien éditeur avec « Classic editor » ? Dans le 2ème cas, il suffirait re copier-coller le HTML pour reproduire vos articles à l’identique.

    #2372540
    guillermo_ankh
    Participant
    Initié WordPress
    4 contributions

    Bonjour,

    Pardon j’aurais dû préciser. J’ai désinstallé justement les extensions en trop pour conserver celle citées en pensant que le bug pouvait venir de l’extension.

    J’ai donc effacer les articles et recommencer en essayant :

    • Un à un les mêmes manip : idem.
    • Menu – copier le contenu : idem
    • Via html et copier coller : idem.

    Et pourtant en regardant les articles directement sur le blog la mise en page est nickel. J’ai envoyé un email au concepteur du thème du coup.

    #2372544
    Loraga
    Participant
    Chevalier WordPress
    120 contributions

    Bonjour,

    Je ne sais pas si je vais être d’une grande aide, mais en regardant le code source de votre page, et en comparant les deux articles, on remarque que le problème de mise en page est dû à des balises <p> (paragraphes) vides. L’article avec la bonne mise en page n’en a pas.

    Êtes-vous sûr que du côté de l’éditeur vous n’avez pas laissé quelques blocs paragraphes sans texte ?

    Ce qui met le bazar en fait, c’est cette règle CSS (qui provient du CSS du cœur de WordPress et non pas du thème) :

    p:empty::before {
      content: "";
    }

    Peut-être que la règle suivante, dans les CSS additionnels, réglerait votre problème, cependant, ce n’est sûrement pas la solution idéale :

    p:empty::before {
      content: none !important;
    }

    Comme l’indique @Flobogo, si vous utilisez l’éditeur classique, vous avez la possibilité d’éditer le code HTML ; il serait certainement plus propre d’enlever les <p></p> vides directement dans le HTML plutôt que d’agir sur le CSS de WordPress…

    Je vous joins une capture d’écran sur laquelle vous verrez l’espace utilisé par ces paragraphes vides. Je leur ai ajouté une bordure rouge pour que vous vous en rendiez compte 🙂

    Bonne journée 🙂

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2372617
    guillermo_ankh
    Participant
    Initié WordPress
    4 contributions

    Bonjour,

    Merci d’avoir regarder mon problème, mais pourtant j’ai pas de balise.

    J’ai tout réinstallé de zéro et lors que je configure mon premier article cela se passe bien. Ensuite lorsque j’édite pour remplacer le texte, c’est le KO total.
    Voici pourtant le code qui est dans l’article en question :

    <!-- wp:group -->
    <div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:image {"align":"center","id":584,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
    <div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large"><img src="https://guillermo-ankh.fr/wp-content/uploads/2021/03/Vignette-Romans.png" alt="" class="wp-image-584"/></figure></div>
    <!-- /wp:image -->
    
    <!-- wp:quote {"align":"center","className":"is-style-default"} -->
    <blockquote class="wp-block-quote has-text-align-center is-style-default">Vous pouvez retrouver sur ce site les informations concernant mes romans en cours et à venir. Je vous partage mon quotidien d’auteur indépendant autour de la création et de l’imaginaire, mais aussi de la promotion et des articles de développement personnel autour du statut d’indépendant.</blockquote>
    <!-- /wp:quote --></div></div>
    <!-- /wp:group -->

    Je ne vois pas de balise p j’avais aussi chercher des br mais je n’en trouve pas de trace.
    Mais du coup votre idée de CSS additionnel corrige parfaitement le problème. Concrètement il fait quoi ?

    Merci beaucoup pour l’aide en tout cas j’espère que sa tiendra 🙂

    #2372644
    Loraga
    Participant
    Chevalier WordPress
    120 contributions

    C’est étrange, côté éditeur tout semble ok, mais côté code source de la page, voilà ce qu’on a :

    <div class="tabs-content tab-81-content active">
      <p><!-- wp:group --></p>
      <div class="wp-block-group">
        <div class="wp-block-group__inner-container">
          <!-- wp:image {"align":"center","id":584,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
          <p></p>
          <div class="wp-block-image is-style-rounded">
            <figure class="aligncenter size-large">
              <img src="https://guillermo-ankh.fr/wp-content/uploads/2021/03/Vignette-Romans.png" alt="" class="wp-image-584">
            </figure>
          </div>
          <p><!-- /wp:image --></p>
          <p><!-- wp:quote {"align":"center","className":"is-style-default"} --></p>
          <blockquote class="wp-block-quote has-text-align-center is-style-default">
            <p>Vous pouvez retrouver sur ce site les informations concernant mes romans en cours et à venir. Je vous partage mon quotidien d’auteur indépendant autour de la création et de l’imaginaire, mais aussi de la promotion et des articles de développement personnel autour du statut d’indépendant.</p>
          </blockquote>
          <p><!-- /wp:quote --></p>
        </div>
      </div>
      <p><!-- /wp:group --></p>
    </div>

    La plupart des balises <p> vide qu’on voit contiennent des commentaires comme ceci : ‘<p><!– wp:group –></p>’. Ce sont en fait des infos qui ne s’affichent pas à l’écran, mais qui permettent à l’éditeur Gutenberg de savoir qu’ici on a groupé plusieurs blocs par exemple. Généralement, ces blocs ‘<p>’ ne devraient pas être embêtants (je n’ai jamais eu votre souci avec mes thèmes…) et ne devraient encore moins prendre de la place visible, comme ici.

    La règle CSS vue plus haut insérait en fait dans tous ces <p> vide du contenu (content : «  »;), les doubles guillemets signifiant… insère « rien » ! Mais j’ai l’impression qu’en insérant du « rien » dans ces ‘<p>’, l’interprétation du code change et cela forçait leur affichage.

    Du coup, la règle CSS que je vous ai donné cible ces <p> et annule l’insertion de contenu par le biais de ‘content : none ;’. Le mot clé ‘!important’ (à toujours utiliser avec parcimonie…) permet de prendre la priorité sur toutes les règles CSS similaires.

    Je n’ai aucun recul sur cette solution, je ne sais ni pourquoi ni comment votre problème est apparu, et je ne sais pas non plus si c’est une méthode acceptable pour régler proprement votre problème, mais en tout cas, tant mieux si ça fonctionne dans l’immédiat et si ça n’a pas mis le bazar sur votre site web 🙂

    #2372810
    guillermo_ankh
    Participant
    Initié WordPress
    4 contributions

    @Loraga chez moi sa marche et c’est ce qui me fallait donc nickel merci beaucoup d’avoir pris le temps de regarder et surtout de m’expliquer.

    Merci beaucoup pour votre aide 🙂

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