Créer une sidebar à gauche.

  • WordPress :5.2
  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 37)
  • Auteur
    Messages
  • #2280686
    feulefou
    Participant
    Initié WordPress
    17 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL :
    • Thème utilisé : Materia Lite
    • Extensions en place : WoW Progress, WOW Recruitment Widget
    • Nom de l’hébergeur : OVH
    • Adresse du site : http://www.imperiumfr.ovh/ak97515-ovh/

    Problème(s) rencontré(s) : Créer une nouvelle sidebar

    Bonjour,

    Sur mon site il y a une sidebar à droite avec un widget actif dedans, même deux, sauf que j’aimerais avoir une autre sidebar a gauche pour éviter d’encombrer le côté droite, et que d’un coup d’oeil on puisse voir le côté gauche aussi.

    J’ai cherché sur internet, mais en vain. J’ai essayé de copier le code de la dite sidebar, donc elle est bien apparu dans mon menu “Widget” je pouvais y placer un widget mais celui-ci de s’affichait pas. J’ai bien suivi les tutoriels, et après des heures d’essai, toujours rien.

    J’ai lu alors qu’il fallait créer cette nouvelle sidebar dans le code HTML, et là je craque.. Je ne le trouve pas, tout est en PhP.

    C’est pour cela que je viens demander votre aide, faut-il réellement passer par le HTML ? Si oui, où ce trouve t’il dans les fichiers ? Sachant que je veux simplement copier la barre latérale droite, pour en mettre une a gauche, comme cela j’aurais une sidebar de chaque côté.

    Merci de prendre le temps de me lire et de m’aider.

    Cordialement,

    #2280688
    Yoshimario77
    Participant
    Initié WordPress
    39 contributions

    Bonjour,

    si je comprends bien, vous avez fait ce qu’il fallait dans le fichier function.php.

    Maintenant, si vous allez dans page.php (ou le template qui est utilisé pour votre page d’accueil), il y a deux div :

    • une div d’id = single-container , qui contient la grande div de gauche
    • une div d’id = sidebar-container qui contient la sidebar de droite

    Il faut que vous copiez la div de la sidebar pour en ajouter une devant la div “single_container”, effectivement (en changeant l’id). Mais ce n’est pas tout : la fonction get_sidebar accepte un paramètre en entrée : le nom de la sidebar en question. Ca devrait vous permettre d’ajouter la sidebar que vous avez défini dans votre fichier function.php

    Après, il vous suffit de gérer le style.

    Sinon, essayez la fonction dynamic_sidebar, comme dans le fichier footer.php de votre thème.

    #2280693
    ferman
    Participant
    Maître WordPress
    1352 contributions

    Bonjour,

    Ou bien, si vous ne voulez pas vous embêter avec du code, vous pouvez sans doute faire avec un plugin. Regardez ici  ça pourrait peut être vous intéresser.

    #2280697
    feulefou
    Participant
    Initié WordPress
    17 contributions

    @Ferman Merci pour le plugin, hélas il m’est inutile pour le moment car dans la sélection des sidebar, je n’ai pas “colonne gauche” car elle n’existe pas sur le thème, donc il faut que j’en créer une et que je la place.

     

    @<span class=”bbp-author-name”>Yoshimario77</span> En effet j’ai bien fait ce qu’il fallait dans le function.php.

    Voici ce que j’ai fais :

    Je suis aller dans function.php, j’ai à l’origine ce code :

    function materia_widgets_init() {
    
    	register_sidebar(
    		array(
    			'name'          => __( 'Default Sidebar', 'materia-lite' ),
    			'id'            => 'sidebar',
    			'before_title'  => '<h3 class="widget-title">',
    			'after_title'   => '</h3>',
    		)
    	);
    
    	register_sidebar(
    		array(
    			'name'          => __( 'Footer', 'materia-lite' ),
    			'id'            => 'footer-sidebar',
    			'before_widget' => '<li id="%1$s" class="widget %2$s">',
    			'after_widget'  => '</li>',
    			'before_title'  => '<h3 class="widget-title">',
    			'after_title'   => '</h3>',
    		)
    	);
    
    }
    
    add_action( 'widgets_init', 'materia_widgets_init' );

    J’y ai copier la ligne de code pour créer une nouvelle sidebar, ce qui donne ceci :

    	register_sidebar(
    		array(
    			'name'          => __( 'Footer', 'materia-lite' ),
    			'id'            => 'footer-sidebar',
    			'before_widget' => '<li id="%1$s" class="widget %2$s">',
    			'after_widget'  => '</li>',
    			'before_title'  => '<h3 class="widget-title">',
    			'after_title'   => '</h3>',
    		)
    	);
    
    		register_sidebar(
    		array(
    			'name'          => __( 'Progress', 'materia-lite' ),
    			'id'            => 'progress-sidebar',
    			'before_widget' => '<li id="%1$s" class="widget %2$s">',
    			'after_widget'  => '</li>',
    			'before_title'  => '<h3 class="widget-title">',
    			'after_title'   => '</h3>',
    		)
    	);
    }

    J’ai donc dans mon menu “Apparence” => “Widget” la sidebar qui apparaît “Progress” d’après les tuto elle n’apparaît que ici pour le moment.

    A présent je suis dans le page.php et je bloque..

    Voici ce que j’ai dans page.php :

    <?php
    /**
     *
     * Materia Lite WordPress Theme by Iceable Themes | https://www.iceablethemes.com
     *
     * Copyright 2017-2019 Iceable Media - Mathieu Sarrasin
     *
     * Page Template
     *
     */
    
    get_header();
    
    ?>
    <main class="container">
    	<?php
    
    	get_template_part( 'part-title' );
    
    	?>
    	
    	<div id="single-container" class="single-container with-sidebar">
    		<?php
    
    		if ( have_posts() ) :
    			while ( have_posts() ) :
    				the_post();
    
    				?>
    				<div id="page-<?php the_ID(); ?>" <?php post_class( 'entry-wrap' ); ?>>
    					<?php
    
    					/* Post thumbnail ( Featured Image ) */
    					if ( '' !== get_the_post_thumbnail() ) :
    						?>
    						<div class="thumbnail">
    							<?php
    							the_post_thumbnail(
    								'large',
    								array(
    									'class' => '',
    								)
    							);
    							?>
    						</div>
    						<?php
    					endif;
    
    					?>
    					<div id="page-container" class="post-content entry-content">
    						<?php the_content(); ?>
    					</div>
    					<?php
    
    					wp_link_pages(
    						array(
    							'before'           => '<br class="clear" /><div class="paged_nav"><span>' . __( 'Pages:', 'materia-lite' ) . '</span>',
    							'after'            => '</div>',
    							'link_before'      => '<span>',
    							'link_after'       => '</span>',
    							'next_or_number'   => 'number',
    							'nextpagelink'     => __( 'Next page', 'materia-lite' ),
    							'previouspagelink' => __( 'Previous page', 'materia-lite' ),
    							'pagelink'         => '%',
    							'echo'             => 1,
    						)
    					);
    
    					?>
    				</div>
    				<?php
    
    				// Display comments section only if comments are open or if there are comments already.
    				if ( comments_open() || '0' !== get_comments_number() ) :
    					?>
    					<div class="comments">
    						<?php comments_template( '', true ); ?>
    					</div>
    					<?php
    				endif;
    
    			endwhile;
    
    		else : // Empty loop ( this should never happen! )
    
    			?>
    			<h2><?php esc_html_e( 'Not Found', 'materia-lite' ); ?></h2>
    			<p><?php esc_html_e( 'What you are looking for isn\'t here...', 'materia-lite' ); ?></p>
    			<?php
    
    		endif;
    
    		?>
    	</div>
    
    	<div id="sidebar-container">
    		<?php get_sidebar(); ?>
    	</div>
    
    </main>
    <?php
    get_footer();

    J’ai essayé de mettre le code que vous m’aviez conseillé mais en vain..

    Je débute pas mal et je dois avouer que je me retrouve vite perdu.

    #2280698
    Yoshimario77
    Participant
    Initié WordPress
    39 contributions

    ligne 21, essayez d’ajouter :

    <div id="sidebar-gauche">
       <?php dynamic_sidebar('progress-sidebar'); ?>
    </div>

    Est-ce qu’elle s’affiche ?

    Je ne peux pas tester moi-même pour le moment !

    #2280699
    feulefou
    Participant
    Initié WordPress
    17 contributions

    Ligne ajouté mais rien de change malheureusement.

    Je ne comprends pas dans ton code pourquoi il y a

    <div id="sidebar-gauche">

    Car je n’ai pas d’id “sidebar-gauche”

    Merci en tout cas de prendre du temps !

    #2280701
    Yoshimario77
    Participant
    Initié WordPress
    39 contributions

    C’est seulement afin que tu puisses y référer dans ton fichier de style !

    Pareil si tu utilises la fonction get_sidebar ? Avec le même argument en entrée.

    Sinon, j’essaierai ce soir.

    #2280703
    feulefou
    Participant
    Initié WordPress
    17 contributions

    Ah d’accord, je ne comprenais pas ^^

    J’ai essayé avec get-sidebar, il y a un changement mais pas très probant, ça étire les colonnes. J’ai laissé la modification pour qui tu puisses voir comment ça fait.

    #2280708
    Yoshimario77
    Participant
    Initié WordPress
    39 contributions

    Ça a l’air de fonctionner, c’est juste que comme tu n’as pas appliqué de style, ça ne s’affiche pas au bon endroit.

    Si tu appliques à l’élément <main class=”container”> la propriété “flex” dans ton fichier de style, et que tu précises la largeur de chaque élément fils (donc les div d’identifiants “sidebar-gauche”, “single-container” et “sidebar-container”)  en %, tu devrais réussir à les avoir comme tu le souhaites.

    Normalement, tu dois pouvoir enlever des float: left / float: right et les padding-right en faisant comme ça.

    Attention quand même à gérer les différentes tailles d’écran.

    #2280721
    feulefou
    Participant
    Initié WordPress
    17 contributions

    Malheureusement même en appliquant le style, la colonne n’apparaît pas. Mais j’ai bien les autres qui sont modifiable.

    J’ai ceci dans mon css :

    #sidebar-gauche {
            float: left;
            margin-right: -100%;
            max-width: 413px;
            position: relative;
            width: 29.4118%;
        }

    C’est pour tester mais rien n’y fait.

    • Cette réponse a été modifiée le il y a 1 mois par  feulefou.
    #2280726
    ferman
    Participant
    Maître WordPress
    1352 contributions

    Il faut aussi déplacer le “content” vers la droite, et rapetisser la sidebar. Essayez ce code pour voir:

    .single-container{float:right!important;}
    
    #sidebar-gauche {
             float: left!important; 
             max-width: 300px!important; 
             position: relative; 
    	  width: 20.4118%;}

    Par contre, je ne vois pas la deuxième sidebar (celle de droite). Vous voulez bien deux sidebars à la fois?

    les !important ne seront sans doute pas nécessaires. Les éviter si possible.

    • Cette réponse a été modifiée le il y a 1 mois par  ferman.
    #2280729
    feulefou
    Participant
    Initié WordPress
    17 contributions

    Alors le code a bien fonctionné mais la nouvelle barre qu’on a crée n’apparaît pas.

    Donc ça a déplacer la colonne de droite vers la gauche, celle que j’avais rajouté dans le sidebar.php qui s’appelle “progress-sidebar” t’es toujours pas présente. Pourtant on a bien fait le rajout.

    #2280730
    ferman
    Participant
    Maître WordPress
    1352 contributions

    Avez-vous mis au moins un widget dans l’autre sidebar? Dans l’inspecteur firefox, je ne vois aucune “progress-sidebar”.

    • Cette réponse a été modifiée le il y a 1 mois par  ferman.
    #2280734
    feulefou
    Participant
    Initié WordPress
    17 contributions
    #2280735
    Yoshimario77
    Participant
    Initié WordPress
    39 contributions

    En faisant un clic droit puis “inspecter”, on peut changer le style dans le navigateurs. Ce que je te disais fonctionnait, mais effectivement, la sidebar de droite était vide !

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