Créer une sidebar à gauche.

  • WordPress :5.2
  • Statut : non résolu
15 sujets de 16 à 30 (sur un total de 37)
  • Auteur
    Messages
  • #2280743
    ferman
    Participant
    Maître WordPress
    1187 contributions

    Voilà comment j’ai procédé (j’ai un thème enfant):

    1. Dans functions.php du thème enfant, j’ai collé le code 1. pris ici. (la sidebar s’appelle donc “sidebar aside”)
    <?php
    function custom_sidebar() {
    
    	$args = array(
    		'id'            => 'sidebar-aside',
    		'name'          => __( 'Secondary Widget Area', 'text_domain' ),
    		'description'   => __( 'Aside Widgets.', 'text_domain' ),
    		'before_title'  => '<h3 class="widget-title">',
    		'after_title'   => '</h3>',
    		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
    		'after_widget'  => '</aside>',
    	);
    	register_sidebar( $args );
    
    }
    add_action( 'widgets_init', 'custom_sidebar' );

    2. J’ai copié le fichier  page.php du thème parent dans  le thème enfant et j’ai ajouté le code 2. pris ici (ce qui est entre <page end et <sidebar left or right end).

    J’ai mis une div et une classe (sidebar-aside) pour pouvoir facilement appliquer des css.

    
                    <!--PAGE END-->
                <div class="sidebar-aside">
                   <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("sidebar-aside") ) : ?>
    				<?php endif;?>   
    			</div>     
                
                    <!--SIDEBAR LEFT OR RIGHT--> 
                    	<?php /* Sidebar Variables */?>
    					<?php $hide_sidebar = get_post_meta( $post->ID, 'hide_sidebar', true);  
    						if(empty($hide_sidebar)){	get_sidebar(); 	}
    					?>
                    <!--SIDEBAR LEFT OR RIGHT END--> 
                
                        </div>
                </div><!--#content END-->

    3. J’ai mis un widget dans la nouvelle sidebar  et les css suivantes: Important: la position “absolute est nécessaire” pour avoir la sidebar à gauche. Le reste, c’est jouer avec les dimensions des deux sidebars et du content. Chez-vous il faudra adapter mais le principe est là.

    .thn_post_wrap{
        width:70%!important;
        float:right!important;  
    }
    #sidebar{
        width:200px!important;
    }
    .sidebar-aside{
        max-width: 250px!important; 
        position: absolute;
        width: 20.4118%;
    }

    Il restera quelques css pour limiter la hauteur de la nouvelle sidebar.

    Voila. Chez moi ça fonctionne (une sidebar à droite et une à gauche). J’espère qu’il en sera de même pour vous. Si vous avez des questions, n’hésitez pas.

    Et enlevez les !important chaque fois que c’est possible.

    • Cette réponse a été modifiée le il y a 6 jours et 22 heures par  ferman.
    • Cette réponse a été modifiée le il y a 6 jours et 22 heures par  ferman.
    #2280747
    feulefou
    Participant
    Initié WordPress
    17 contributions

    Je test cela, et je te fais un retour demain matin !

    Merci en tout cas de prendre le temps.

    • Cette réponse a été modifiée le il y a 6 jours et 21 heures par  feulefou.
    #2280749
    feulefou
    Participant
    Initié WordPress
    17 contributions

    J’ai essayé mais toujours pas.. Bon avec les modifications faite avant, ça doit me perturber. Je ferais le test sur un thème vierge.

    Petite question, le code numéro 2 copier depuis le fichier page.php a été collé sur ce même fichier ou il a été collé dans functions.php ?

    Désolé des questions, je débute et ç’est vraiment différent des exercices que j’ai pu faire ^^

    #2280750
    ferman
    Participant
    Maître WordPress
    1187 contributions

    Je ne crois pas que la sidebar soit correctement appelée dans les pages (je ne la vois pas). Attribuez-lui une id, ou une classe (ou les deux) qu’on puisse bien la repérer.

    #2280753
    feulefou
    Participant
    Initié WordPress
    17 contributions

    Ayant supprimé la base de donnée, voici le nouveau lien du site : http://www.imperiumfr.ovh

    Alors, le premier code impeccable, je l’ai bien copié dans le fichier functions.php. Il s’affiche bien dans le gestionnaire des Widgets.

    Le second je l’ai copié dans page.php (Je ne sais pas si c’était ici qu’il fallait bien l’insérer et à partir de quelle ligne) Hors là rien ne change, le widget est bien installé dans la nouvelle sidebar.

    En mettant le CSS, cela ne modifie que la taille de la sidebar de droite.

    #2280757
    ferman
    Participant
    Maître WordPress
    1187 contributions

    J’ai regardé:

    Vos deux sidebars sont bien là: à gauche et l’une sur l’autre. Il y a du travail de css à faire.

    Je vois aussi que vous avez recopié intégralement les css que je vous avais données  mais c’est spécifique au thème (les éléments de la page n’ont pas les mêmes noms) et il fallait modifier pour que ça marche chez vous .

    Je vous donne donc ce code adapte à votre thème. Cela fonctionne. Il ne vous reste plus que les ultimes réglages CSS pour la mise en page. Et essayez d’enlever les !important si vous pouvez.

    .single-container{float:right!important;
      width:70%!important;
      margin-right: 10%!important}
    #sidebar-container{width:200px!important;
      float:right!important;
    	margin-left:90%;
      position:absolute;}
    .sidebar-aside {
             float: left!important; 
             max-width: 20%!important; 
             position: absolute; 
    	       width: 20.4118%;}

    Donc, je pense que cela devrait marcher maintenant (j’en suis même sûr).

    • Cette réponse a été modifiée le il y a 6 jours et 19 heures par  ferman.
    #2280760
    feulefou
    Participant
    Initié WordPress
    17 contributions

    Oui en effet j’ai remarqué a un moment donné que ça ne collait pas.

    Fiou.. j’ai fais pas mal d’erreur et j’ai encore BEAUCOUP à apprendre. Je met en place le code CSS demain matin, et je ferais les modifications de CSS nécessaire pour que ça soit comme je souhaite.

    Encore mille merci pour votre aide, sans vous je serais encore en train de me taper la tête contre les murs !

    Bonne soirée a vous.

    #2280765
    PhiLyon
    Modérateur
    Maître WordPress
    23780 contributions

    Bonjour.

    Vu le temps pourri, j’ai eu le temps de regarder ton problème.

    En fait il faut en premier lieu créer et activer un thème enfant, @ferman te l’avais indiqué, avec cette extension c’est facile https://fr.wordpress.org/plugins/child-theme-configurator/

    En bas de la page tu as une case à cocher pour importer tes réglages de menu, etc.

    Dans le fichier functions.php tu colles le code ci-dessous (le tien un peu modifié)

    // Ajout Sidebar gauche
    
    function my_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>',
    		)
    	);
    	
    	register_sidebar(
    		array(
    			'name'          => __( 'Progress', 'materia-lite' ),
    			'id'            => 'progress-sidebar',
    			'before_widget' => '<div class="progress">',
    			'after_widget'  => '</div>',
    			'before_title'  => '<h3 class="widget-title">',
    			'after_title'   => '</h3>',
    		)
    	);
    
    }
    
    add_action( 'widgets_init', 'my_materia_widgets_init' );

    Dans le fichier style.css tu colles celui-ci

    /* Ajout Sidebar gauche */
    
    #progress-sidebar{
    	float:left;
    	position:relative;
    	display:block;
    	width:20%;
    	background:#fff}
    
    .progress {
    	box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
        border-radius: 2px;
        background: #fff;
    	padding:32px
    }
    
    #single-container.with-sidebar {
        width: 60%;
        float: none;
        padding-right: 40px;
    	padding-left: 40px;
    	margin:0 auto;
    	display: inline-block
    }
    
    #sidebar-container {
        width: 20%;
        float: right;
    	display:block
    }
    
    /* Affichage sur mobiles */
    
    @media screen and (max-width: 780px)
    {
        #progress-sidebar{
    	float:left;
    	position:relative;
    	width:100%;
    	background:#fff}
    
    .progress {
    	box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
        border-radius: 2px;
        background: #fff;
    	padding:32px
    }
    
    #single-container.with-sidebar {
        width: 100%;
        float: left;
    	padding-left:0
    }
    
    #sidebar-container {
        width: 100%;
        float: right;
    	display:block
    }
    }

    Dans ce thème enfant tu importes le fichier page.php et tu rajoutes le code pour appeler ta sidebar en bas comme je l’ai fait.

    							'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="progress-sidebar">
    	<?php dynamic_sidebar('progress-sidebar'); ?>	
    	</div>
    	
    	<div id="sidebar-container">
    		<?php get_sidebar(); ?>
    	</div>
    </main>
    			
    <?php
    get_footer();

    Et ça devrait fonctionner.

    🙂

     

    #2280785
    feulefou
    Participant
    Initié WordPress
    17 contributions

    Wow ! Super bien détaillé , merci à vous 3 !

    Je test cela ce soir en rentrant à la maison.

    Petite question, quand tu dis “Dans ce thème enfant tu importes le fichier page.php et tu rajoutes le code pour appeler ta sidebar en bas comme je l’ai fait.” J’importe le code dans le fichier page.php ? Que je ne fasse pas d’erreur.

    #2280794
    ferman
    Participant
    Maître WordPress
    1187 contributions

    Bonjour,

    Comme quoi le mauvais temps (picard si je ne m’abuse) est propice à la recherche de solutions complètes pour les participants du forum. Comme chacun sait le temps en Normandie est bien meilleur et permet les sorties. Donc  les solutions fournies, bien que valides, s’en ressentent  et sont forcément moins détaillées!

    @PhiLyon: pour une solution aussi complète, le temps devait vraiment être très mauvais.

    #2280805
    PhiLyon
    Modérateur
    Maître WordPress
    23780 contributions

    Le plus simple, tu retournes dans Outils/Themes enfants, normalement ton thème enfant est toujours sélectionné.

    En haut tu as un onglet Fichiers, tu cliques dessus, tu coches la case page.php et tu cliques sur Copier la sélection dans le thème enfant.

    Après tu retournes dans Éditeur de thème/page.php et tu insères le code à ajouter.

    🙂

    #2280838
    PhiLyon
    Modérateur
    Maître WordPress
    23780 contributions

    Je viens d’aller sur ton site, problème, la page d’accueil est apparemment celle des articles, hors le code que je t’ai donné est prévu pour les pages.

    Pour que les deux sidebars apparaissent sur la page des articles (index) il faut que tu recommences la manip d’insertion du code mais dans le fichier index.php (après l’avoir importé)

    Pareil si tu veux les sidebars sur tes articles, c’est le fichier single.php qu’il faut importer/modifier.

    🙂

    #2281270
    feulefou
    Participant
    Initié WordPress
    17 contributions

    Bonjour !

    Désolé pour le retard, quelques soucis à la maison. Alors après avoir suivi vos indications, quand je souhaite prévisualiser le thème, j’ai le message d’erreur suivant : “Ce site rencontre des difficultés techniques.”

    Pourtant j’ai bien télécharger l’extension “Child Theme Configurator” j’ai copier le thème que j’utilise avec mes paramètres, le thème enfant s’appelle “Materia Lite Child” Dans les paramètres de Child Theme Configurator, j’ai bien coché la casse pour importer mes paramètres etc, ensuite je suis aller dans “éditeur de thème” j’ai selectionné le thème a modifier, donc le thème enfant, j’ai copier les lignes de code cité, puis j’ai importer le fichier page.php vers mon thème enfant, dans lequel j’ai ajouté les lignes de code, et en voulant prévisualiser le thème, j’ai l’erreur cité plus haut.

    J’ai fais une erreur quelques part ? J’aurais dû copier les lignes de code dans les fichiers du thème parent et copier seulement ceux du fichier page.php dans le thème enfant ?

    #2281282
    PhiLyon
    Modérateur
    Maître WordPress
    23780 contributions

    Bonjour.

    Pourtant j’ai bien télécharger l’extension “Child Theme Configurator” j’ai copier le thème que j’utilise avec mes paramètres,

    Tu veux dire que tu l’as créé ?

    Il faut ensuite l’activer, tu l’as fait ?

    j’ai copier les lignes de code cité,

    Où as-tu copié le code, dans quel fichier ?

    🙂

    #2281289
    feulefou
    Participant
    Initié WordPress
    17 contributions

    Oui je l’ai bien crée, j’ai donc mon thème parent (qui est celui que j’utilise depuis le début) et le thème enfant crée part “Child Theme Configurator”

    En relisant, j’ai d’abord copié les lignes de code dans les fichiers functions.php, style.css et page.php puis ensuite activé le thème, il fallait peut-être d’abord activer le thème ?

    Et j’ai copié le premier code dans functions.php, puis ensuite le code css dans le style.css, et le dernier dans page.php que j’ai importé depuis mon thème parent.

    Désolé de vous importuner autant, puis pas facile d’être à 100% dedans en ce moment.

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