[Résolu] Modifier balises Hn page d'accueil presta 1.6.4.1

[lechapelier]

Bonjour à tous, 

 

Je suis en train de checker les balises Hn de la page d'accueil sur presta 1.6.4.1 et là c'est pas terrible, positionnement totalement anarchique des balises de plus avec de choses inutiles balisées.

 

Un petit check up avec l'outil wri pour scanner les balises Hn:

 

H1: 1

H2: 1

H3: 0

H4: 5

H5: 15

H6: 0

 

Bon, il y a un sauts de balises et des balises inutiles, les H4 et H5

 

Voici l'arborescences des balises de l'accueil comme me l'indique l'outil de scan Hn wri, si google le voit de cette façon c'est loin d'être terrible, on commence par 15 balises H5 etc... la suite parle d'elle même, j'ai modifié les noms des produits de la balise h5 pour que vous puissiez identifier l'emplacement.

 

 

            <h5> NOUVEAUTES

           <h5> NOUVEAUTES

            <h5> NOUVEAUTES

            <h5> NOUVEAUTES

            <h5> POPULAIRE

            <h5> POPULAIRE

            <h5> POPULAIRE

            <h5> POPULAIRE

            <h5> MEILLEURES VENTES

            <h5> MEILLEURES VENTES

            <h5> MEILLEURES VENTES

            <h5> MEILLEURES VENTES

            <h5> PROMOTIONS

            <h5> PROMOTIONS

            <h5> PROMOTIONS

            <h5> PROMOTIONS

  <h1> ok

    <h2> ok

          <h4> Lettre d'informations

          <h4> Nous suivre

          <h4> Catégories

          <h4> Mon compte

          <h4> Informations boutique

 

Je souhaites simplement virer les balises H5 et H4 de la page d'accueil et ne garder que la H1 et H2.

 

J'ai lu ce topic:

 

https://www.prestashop.com/forums/topic/481302-balises-hn-page-daccueil/

 

et celui-ci:

 

https://www.prestashop.com/forums/topic/508748-balises-h4-home-page-css/

 

Mais je ne saisi pas la subtilité de remplacer les h4 avec la création d'une nouvelle class css a créer dans le global.css pour garder la mise en page mais en supprimant la balise, quelque chose de ce genre, ou le placer, comment le créer...

 

J'ai bien compris q'il faut modifier les balises Hn en se rendant dans les tpl des modules du thème mais c'est liée avec le glogal css et je ne sais pas par quoi remplacer les balises Hn:

 

Malheureusement mes connaissances se limitent à de l’édition de css donc je suis quelque peu bloqué...

 

Si vous avez une méthode pour nettoyer tout ça je suis preneur, ça devrait en aider plus d'un.

 

Merci beaucoup

Edited April 1, 2016 by lechapelier (see edit history)

[Mediacom87]

Bonjour,

 

gros travaux de faire cela, surtout si vous bloquez déjà dans le concept même du css d'un élément.

 

en gros, prenon lke cas d'un H4. Cette balise a des style css appliqués. Dans l'idée c'est de changer un <h4> par un <div class="toto"> et d'appliquer à .toto le mêeml style que ce qui est appliqué à H4.

[lechapelier]

Bonjour,

 

Oui en effet je bloque sur du simplissime, carence de connaissance...

 

J'ai compris le concept, on fait un copier coller du style css de la balise <h4>, on créé un nouveau "bloc de style CSS" si on peut vulgariser ainsi, on appel comme tu dis "toto" et dans le tpl on remplace le <h4> par <toto> qui dirige vers la règle de style.

 

Le tout étant de savoir ou je met toto, je suppose que tous les styles de la page d'accueil font appel au global.css du thème donc je dois l'intégrer dans ce fichier.

 

merci pour ta réponse je vais retourner trifouiller tout cas.

[Mediacom87]

Ah non on remplace pas <h4> par <toto> car <toto> c'est pas du html.

[lechapelier]

Re,

 

J'aurais besoin de votre validation pour m'indiquer si c'est fait relativement proprement.

 

J'ai travaillé dans la page d'accueil sur la partie "NOUVEAUTES"

 

J'ai édité les fichiers suivant dans le thème default bootstrap:

 

global.css:

.block .products-block li .product-content {
    overflow: hidden; }
    .block .products-block li .product-content h5 {
      position: relative;
      top: -11px; }

h5 remplacé par span

 

le product-list.tpl (default-bootstrap/product-list.tpl)

 

<div class="right-block">
					<h5 itemprop="name">
						{if isset($product.pack_quantity) && $product.pack_quantity}{$product.pack_quantity|intval|cat:' x '}{/if}
						<a class="product-name" href="{$product.link|escape:'html':'UTF-8'}" title="{$product.name|escape:'html':'UTF-8'}" itemprop="url" >
							{$product.name|truncate:45:'...'|escape:'html':'UTF-8'}
						</a>
					</h5>

remplacement balises h5 par span

 

Et enfin dans les modules du thème, blocknewproducts.tpl

<div class="block_content products-block">
        {if $new_products !== false}
            <ul class="products">
                {foreach from=$new_products item=newproduct name=myLoop}
                    <li class="clearfix">
                        <a class="products-block-image" href="{$newproduct.link|escape:'html'}" title="{$newproduct.legend|escape:html:'UTF-8'}"><img class="replace-2x img-responsive" src="{$link->getImageLink($newproduct.link_rewrite, $newproduct.id_image, 'small_default')|escape:'html'}" alt="{$newproduct.name|escape:html:'UTF-8'}" /></a>
                        <div class="product-content">
                        	<h5>
                            	<a class="product-name" href="{$newproduct.link|escape:'html'}" title="{$newproduct.name|escape:html:'UTF-8'}">{$newproduct.name|strip_tags|escape:html:'UTF-8'}</a>
                            </h5>

h5 remplacé par span

 

Résultat plus de h5 en page d'accueil, la modification semble fonctionner en cascade sur populaire, meilleur vente, promotions.

 

Ma manipulation est-elle bonne ?

 

merci d'avance

 

Poursuite avec les balises h4:

 

- Lettre d'information (blocknewsletter):

 

Même manipulation avec les fichiers css et tpl dans les modules du thème, it's work reste 5 à modifier.

 

- Nous suivre (blocksocial):

 

global.css et tpl du bloc reste 4.

 

- Catégorie (blockcategories):

 

 le blockcategories_footer et global.css reste 3

 

Ainsi de suite pour le reste et vous aurez une page d'accueil avec un balisage propre, ne pas oublier de vider le cache.

 

Cependant revers de la médaille sur mobile le footer devient inutilisable et dégeu..., va falloir gratter...

Edited March 24, 2016 by lechapelier (see edit history)