Colonne latérale inactive (inutilisée) (Créer un compte)

  • WordPress :5.2
  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 18)
  • Auteur
    Messages
  • #2275700
    mynameisnobody
    Participant
    Initié WordPress
    12 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.0
    • Thème utilisé : Twenty Nineteen
    • Extensions en place :
    • Nom de l’hébergeur : OVH
    • Adresse du site : https://how-to-get-bitcoin.com/

    Problème(s) rencontré(s) : j’aimerai ré”activer cette colonne latérale, mais je ne trouve pas comment faire.

    J’ai donc ajouté une sidebar dans mon fichier page.php sauf qu’elle se retrouve dans le footer alors que je voudrais qu’elle soit à droite du texte.
    J’imagine qu’il faut que je modifie le css ?

    Bonne soirée,

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2275721
    ferman
    Participant
    Maître WordPress
    2628 contributions

    Bonjour,

    J’ai regardé comment faire (ça m’intéressait aussi). Le thème twentynineteen n’est pas prévu pour avoir des pages avec barre latérale .Je vous joins un pdf détaillant les étapes que j’ai essayées. Si on veut faire les choses à fond, il y a en a 4:

    1. Enregistrer une nouvelle sidebar (functions.php)
    2. et 3. Créer un nouveau modèle de page qui utilisera cette sidebar (page.php)
    3. Il est mieux d’ajouter une condition au footer autrement on a les widgets à la fois dans le footer et dans la barre latérale (footer.php).
    4. Ajuster avec des css.

    Ces quatre éléments doivent donc être dans le thème enfant. On peut certainement parfaire tout ça et adapter mais le principe est là et fonctionne.

    nb: si vous voulez simplement supprimer la zone widgets dans le footer et la remplacer par la barre latérale, au lieu de la condition il suffit d’enlever la ligne “get_template_part( ‘template-parts/footer/footer’, ‘widgets’ );” dans le footer. Et dans ce cas, vous n’avez pas non plus besoin de nouveau modèle de page. Il suffit de rajouter le code nécessaire pour appeler sidebar-2 dans page.php. Mais c’est nettement moins flexible.

    les sources principales: pour les sidebars,   pour les modèles de page.

    J’espère que ça vous sera utile (chez moi ça marche).

    Edit: je vois que vous avez migré vos widgets de: en bas à gauche à en bas à droite mais toujours dans le footer.

    • Cette réponse a été modifiée le il y a 10 mois par ferman.
    • Cette réponse a été modifiée le il y a 10 mois par ferman.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2275725
    ferman
    Participant
    Maître WordPress
    2628 contributions

    “Edit: je vois que vous avez migré vos widgets de: en bas à gauche à en bas à droite mais toujours dans le footer.”Vous n’avez pas dû comprendre ! et pour cause : le passage de gauche à droite en bas, c’était un des essais de css que j’avais faits sur votre site et la fenêtre était restée ouverte . Désolé.

    #2275739
    mynameisnobody
    Participant
    Initié WordPress
    12 contributions

    Bonsoir, merci pour votre réponse !

    Donc si je comprends bien, impossible de mettre mon widget sur la colonne latérale ?

    Bien à vous,

    #2275741
    ferman
    Participant
    Maître WordPress
    2628 contributions

    “Donc, si je comprends bien, impossible de mettre mon widget sur la colonne latérale ?”

    Pas tout à fait mais il y a un peu de travail car le thème twentynineteen ne propose pas de colonne latérale. Si on en veut une , il faut la créer. A partir de là plusieurs options de la plus simple à la plus complète. C’est ce que j’essayais d’expliquer dans le pdf joint.

    #2275742
    Flobogo
    Modérateur
    Maître WordPress
    16256 contributions

    Bonjour,

    Donc si je comprends bien, impossible de mettre mon widget sur la colonne latérale ?

    Vous avez mal compris. Il faut créer la colonne latérale par une fonction intégrée au fichier functions.php du thème. Et l’appeler dans le fichier page.php. Et la styliser en CSS. Une fois qu’elle est créée, on y met les widgets qu’on veut.

    Ou alors, c’est moi qui ne comprends pas votre demande.

    #2275743
    mynameisnobody
    Participant
    Initié WordPress
    12 contributions

    J’ai placé ma sidebar dans le header. (cf première capture d’écran)

    Cependant deux choses me bloquent, je n’arrive pas à basculer ma sidebar à droite alors que je pense utiliser le bon code css. (cf screenshot 2)

    Et il va toujours y avoir un espace entre ma sidebar à droite et le début du texte de ma page n’est-ce pas ?
    Je souhaiterai que les deux soient à la même hauteur. (cf screenshot 3)

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2275747
    ferman
    Participant
    Maître WordPress
    2628 contributions
    Cette réponse a été marquée comme privée.
    #2275748
    ferman
    Participant
    Maître WordPress
    2628 contributions

    Je ne l’ai pas mise dans le header mais en tête de page (voir pdf). Et en pièce jointe ce que j’obtiens avec float:right. Peut-être n’avez-vous pas sélectionné la bonne <div>?

    ACTIVITE est le titre de la page et ESSAI un widget texte.

    • Cette réponse a été modifiée le il y a 10 mois par ferman.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2275760
    PhiLyon
    Modérateur
    Maître WordPress
    25879 contributions

    @ferman – Bonjour.

    Ton Copier/Coller tu le fais après avoir cliqué sur le bloc “Citation”.

    🙂

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2275764
    ferman
    Participant
    Maître WordPress
    2628 contributions

    @PhiLyon

    Bonjour et merci. La seule icône sur laquelle je n’avais jamais cliqué. Je pourrai maintenant répondre à la vitesse de l’éclair (en tout cas plus celle de la tortue).

    #2275813
    mynameisnobody
    Participant
    Initié WordPress
    12 contributions

    Bonsoir,

    Merci beaucoup, j’ai enfin réussi !

    En revanche lorsque je fait une “longue” sidebar le texte de ma page se décale.
    Une idée de comment aligner ma sidebar avec le texte de la page ?

    Bonne soirée,

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

    Bonjour,

    Votre sidebar située en haut à droite est bien incluse dans une balise <div>, mais celle-ci ne fait ni partie du header, ni partie de la section “primary”.
    C’est pour ça qu’elle se retrouve entre les deux … et tout à droite puisque c’est la seule valeur CSS (align-right) donnée à votre class .html-perso

    Dans le code PHP de la page, on la place généralement après la section “primary” (mais avant le footer, bien sûr), et dans une balise <section> définie comme “secondary”.
    En CSS, il faut aussi mettre une marge, voire même définir le pourcentage d’espace accordé à la barre latérale, par rapport au contenu principal.

    #2275842
    mynameisnobody
    Participant
    Initié WordPress
    12 contributions

    Bonsoir,

    Voici ce que j’ai fait :

    get_header();
    ?>
    
    <div id="breadcrumbs">
    <?php
    if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb('
    <p id="breadcrumbs">','</p>
    ');
    }
    ?>
    </div>
    
    	<section id="primary" class="content-area-fullwidth">
    		<main id="main" class="site-main">		
    			
    			<?php		
    			
    			/* Start the Loop */
    			while ( have_posts() ) :
    				the_post();
    			
    				get_template_part( 'template-parts/content/content', 'page' );
    
    				// If comments are open or we have at least one comment, load up the comment template.
    				if ( comments_open() || get_comments_number() ) {
    					comments_template();
    				}
    
    			endwhile; // End of the loop.
    			?>		
    			
    		</main><!-- #main -->
    	</section><!-- #primary -->
    
    	<section id="secondary" class="content-area-fullwidth">
    		<main id="main" class="site-main">
    
    <div class="html-perso">	
    <?php
    if( is_active_sidebar( 'html-perso' ) ):
    dynamic_sidebar( 'html-perso' );
    endif;
    ?>
    </div>	
    
    		</main><!-- #main -->
    	</section><!-- #secondary -->
    			
    <?php
    get_footer();

    Cependant la sidebar est toujours en dessous.

    Il faut que je change les propriétés css de la class “html-perso”, ou de la section avec l’id “secondary”, ou aucun des deux ?

    Bonne soirée,

    #2275847
    ferman
    Participant
    Maître WordPress
    2628 contributions

    Bonjour,

    Ce n’est pas tant une question de position de la <div> qu’une question (que je trouve complexe de css). Pour info, regardez ici. En reprenant ça et en l’adaptant un peu, ça me donne le code suivant qui correspond à la capture d’écran (seul le haut de la page est montré).

    Donc, avec ce code, on a une barre à droite sur toute la hauteur de la page et “scrollable”. J’y ai mis des widgets text (sidebar-2 p) et un menu (sidebar-2 a). J’y ai aussi ajouté une “media rule” minimum qui supprime  la barre latérale pour les petits formats.

    Ce n’est qu’un point de départ. En particulier,si vous voulez que ce soit applicable à de petits écrans,  il faudrait travailler les conditions (et les métaqueries)  pour que par exemple, à partir d’une certaine taille les widgets se retrouvent dans le footer.

    .sidebar-2 {
      height: 100%; /* Full-height: remove this if you want "auto" height */
      width: 140px; /* Set the width of the sidebar */
      position: fixed; /* Fixed Sidebar (stay in place on scroll) */
      z-index: 1; /* Stay on top */
      top: 0; /* Stay at the top */
      right:0;
      background-color: #111; /* Black */
      overflow-x: hidden; /* Disable horizontal scroll */
      overflow-y:scroll;
      padding-top: 20px;
      margin-right:10px;
    }
    
    .sidebar-2 p {
      padding: 6px 8px 6px 16px;
      text-decoration: none;
      font-size: 14px;
      color: #2196F3;
      display: block;
    }
    
    .sidebar-2 a {
      padding: 6px 8px 6px 16px;
      text-decoration: none;
      font-size: 14px;
      color: #2196F3;
      display: block;
    }
    
    .sidebar p:hover {
      color: #064579;
    }
    
    .main {
      margin-right:  160px; /* Same width as the sidebar + left position in px */
      font-size: 28px; /* Increased text to enable scrolling */
      padding: 0px 10px;
    	
    	
    }
    
    @media screen and (max-width: 450px) {
      .sidebar-2 {
      display:none}
    }

    Cela étant dit: c’était un bon exercice, intéressant, mais sur le plan pratique je ne vois pas trop l’intérêt de tant de travail. Si vous voulez une barre latérale, choisissez un thème qui offre cette option, ce n’est pas ce qui manque.

    Essayez le code que je vous ai donné, que j’ai bien sûr testé, et qui marche chez moi. Après il reste à donner du style à la barre, aux widgets…vraiment beaucoup de travail.

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
15 sujets de 1 à 15 (sur un total de 18)
  • Vous devez être connecté pour répondre à ce sujet.