[Résolu] Créer des sidebars horizontales et une page widgetisé

Statut : non résolu

Ce sujet contient 15 réponses, 2 participants et a été mis à jour pour la dernière fois par Muzayan, le il y a 12 années et 2 mois.

15 sujets de 1 à 15 (sur un total de 16)

1 2 →

Auteur

Messages
7 août 2012 à 11 h 34 min #512911

Muzayan
Membre

Chevalier WordPress
113 contributions

Bonjour,

Ma configuration WP actuelle
– Version de WordPress : 3.4.1
– Version de PHP/MySQL : 5.4 – 5.5
– Thème utilisé : Masutoliso Magazine
– Extensions en place :
– Nom de l’hebergeur : E-clicking
– Adresse du site : http://vibzone.fr/secretdeeceemad

Problème(s) rencontré(s) :

Bonjour, dans le but de préparer la troisième version de mon site, je souhaiterai placer deux sidebars horizontal, une qui se trouverait en dessous des vignettes du slider et une autre dans le footer, bien qu’il y en ai déjà une, je souhaiterai du moins qu’elle contienne deux niveaux pour que je puisse ajouter d’autres widgets. J’aimerai que ces sidebars puissent contenir un minimum de 3 widgets, mais je n’ai aucune idée des modifications à opérer à mes fichiers.

Mon second projet était de créer une page contenant des widgets, j’ai essayé quelques plug-ins mais peu concluant jusque là, les widgets étaient déformés … Je voulais au départ que cette page puissent contenir un nombre assez conséquent de widgets, et qu’elle se présente un peu comme une grille de 6 widgets.

Pourriez-vous m’aider? Merci d’avance 🙂

7 août 2012 à 12 h 31 min #846474

lorenzolamas
Participant

Maître WordPress
3229 contributions

Bonjour,

Dans un premier temps, juste niveau « terminologie »: Sidebar signifie barre de côté. Du coup, si il s’agit de barres horizontales en pleine page, ce ne sont plus vraiment des sidebar.

Bref, pas d’affolement, c’est assez simple a faire. Il faut commencer par faire un thème enfant (voir plusieurs articles/tutos sur ce forum).

1) Barre horizontale en homepage:

Dans un premier temps, il faut repérer les « sections » (div) des éléments entre lesquels vous voulez mettre une barre de widget (pour la homepage, ce sera a priori sur le fichier index.php par défaut, si ce n’est pas une autre page spécifique qui a été mise en page d’accueil).

Il faudra ensuite rajouter qques lignes dans le fichier functions.php (pour dire qu’il y a des nouvelles zones de widget), puis dans le fichier index.php, il faudra insérer qques lignes de code dans une section crée a l’endroit voulu, pour dire: la nouvelle zone de widget sera ici. Et finalement, il faudra gérer l’affichage « visuel » de cette nouvelle zone de widget dans le CSS.

http://www.devsector.ch/cavimaster/2011/09/ajouter-une-zone-de-widget-wp/
=> voici un tuto pour créer une/des zone(s) de widget.
Pour la partie CSS, c’est du « sur mesure » selon la façon dont est constituée le CSS de base du thème.

2) Page de widget:

Il faudra dans un premier temps créé un nouveau modèle de page (voir tuto et post sur ce forum).
Il fudra ensuite de la même façon, insérer les différentes lignes de codes dans les fichiers fonctions.php et « pagewidget ».php (le modèle de page créé).
Finalement il faudra modifier le CSS pour mettre en page ces zones de widget.

Toutes ces zones crées seront alors gérables depuis l’onglet Apparence>widgets

7 août 2012 à 12 h 49 min #846475

lorenzolamas
Participant

Maître WordPress
3229 contributions

Sinon il y a aussi ce tuto: http://www.myleneb.fr/wordpress-homepage-3-zones-widgets/

7 août 2012 à 16 h 25 min #846476
Muzayan
Membre

Chevalier WordPress
113 contributions
Merci de votre réponse, j’ai à peu près compris le principe et en soit ce n’est pas très compliqué 🙂 Mais!
D’abord j’ai cherché à créer le thème enfant, mais je n’ai pas vraiment compris le principe de la manœuvre? J’ai alors appliqué les modifications sur le site lui-même. J’ai appliqué les recommandations de devsector ainsi que les vôtres, mais ça n’a pas vraiment l’air de fonctionner.
J’ai d’abord essayé d’inclure les lignes en dessous du slider mais après ça seulement une certaine partie du site s’affichait (sûrement car le fichier ne devait pas être le bon), j’ai donc réessayer plus simplement dans le footer, mais aucun des widgets n’apparaît, et plusieurs bugs visuels surviennent (disparition de l’admin bar entre autres). Néanmoins, la zone de widget en question apparaît bien dans l’interface de gestion des widgets. J’ai à chaque fois indiqué le même mot pour l’id, le nom et la description « MasutolisoMagazineclean ». J’ai vu sur le site de devsector que ces modifications étaient un peu plus appropriée à un thème de base, cela viendrait de ça, ou alors je m’y suis mal pris? J’ai également creuser par taton, pour voir si ça ne viendrait pas du fait de la position du code dans le fichier footer.php mais le problème est toujours présent peu importe l’endroit où j’inclus le code.

Voici le code que j’ai ajouté dans le fichier function.php
```
 __( ‘Primary Widget Area’, ‘MasutolisoMagazineclean’ ),
    ‘id’ => ‘MasutolisoMagazineclean’,
    ‘description’ => __( ‘The primary widget area’, ‘MasutolisoMagazineclean’ ),
    ‘before_widget’ => ‘<li id="%1$s">‘,
    ‘after_widget’ => ‘</li>‘,
    ‘before_title’ => ‘<h3>‘,
    ‘after_title’ => ‘</h3>‘,
    ) );
    ?>
```
et celui que j’ai ajouté dans le footer.php

Voilà, merci de votre aide en tout cas!
7 août 2012 à 16 h 34 min #846477

lorenzolamas
Participant

Maître WordPress
3229 contributions

Alors deja, le theme enfant c’est important de le faire car d’une part, ça évite de « bousiller » ton template en cas d’erreur et d’autre part, lorsque tu mettras a jour ton thème principal, toutes tes modifs ne seront pas effacées/remplacées.

Ensuite, chaque widget créé doit avoir un nom unique (et si possible « significatif » pour que tu puisse les différencier, et simple pour limiter le risque d’erreur).

Dans le fichier functions.php, as-tu mis le code du widget a la suite des autres widgets?
Dans l’index.php OU le footer.php, as-tu créé une « div » pour insérer le code dedans?

7 août 2012 à 17 h 44 min #846478

Muzayan
Membre

Chevalier WordPress
113 contributions

D’accord, j’ai compris le principe du thème enfant, je tâcherai de m’en occuper lorsque j’aurais réussi à réaliser ce que je veux faire actuellement.
J’ai mis des noms significatifs pour l’id et le nom, plus court et simple. Où dois-je placer exactement le code dans le fichier functions.php exactement? Je l’ai est placé au début du code du fichier, si je le place autre part dans le fichier, j’ai une page blanche qui remplace l’accueil. Pour le footer, j’ai inséré le code dans la div footer, et j’ai également essayé en recréant une div mais ça ne fonctionne pas non plus.

9 août 2012 à 16 h 19 min #846479

Muzayan
Membre

Chevalier WordPress
113 contributions

up s’il vous plait.

9 août 2012 à 17 h 35 min #846480

lorenzolamas
Participant

Maître WordPress
3229 contributions

A priori sur ton theme il y a deja une/des zones widgetisables.
Donc il faut rechercher le nom de ces zones dans le fichier functions.php (Si tu vas dans apparence > widget, tu peux placer les widget dans une ou plusieurs zones, ce sont ces zones que tu dois chercher dans le fichier functions.php => Ctrl + F et tu tappes le nom d’une des zones).
Une fois que tu as trouvé le début du code pour les zones widgetisables, tu rajoute les nouvelles zones juste après.

9 août 2012 à 18 h 07 min #846481
Muzayan
Membre

Chevalier WordPress
113 contributions
J’ai procédé de la manière décrite mais j’ai toujours le même souci. J’ai placé le code de la zone de widget en dessous de celles déjà présentes dans le code.
```
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(‘name’=>’Sidebar Right’,
	        ‘before_widget’ => ‘<div class="side-widget %2$s">‘,
	        ‘after_widget’ => ‘</div>‘,
	        ‘before_title’ => ‘<h3>‘,
	        ‘after_title’ => ‘</h3>‘,
));
register_sidebar(array(‘name’=>’Footer Widget 1’,
	        ‘before_widget’ => ‘<div class="widget %2$s">‘,
	        ‘after_widget’ => ‘</div>‘,
	        ‘before_title’ => ‘<h3>‘,
	        ‘after_title’ => ‘</h3>‘,
	    ));
register_sidebar(array(‘name’=>’Footer Widget 2’,
	        ‘before_widget’ => ‘<div class="widget %2$s">‘,
	        ‘after_widget’ => ‘</div>‘,
	        ‘before_title’ => ‘<h3>‘,
	        ‘after_title’ => ‘</h3>‘,
	    ));
register_sidebar(array(‘name’=>’Footer Widget 3’,
	        ‘before_widget’ => ‘<div class="widget %2$s">‘,
	        ‘after_widget’ => ‘</div>‘,
	        ‘before_title’ => ‘<h3>‘,
	        ‘after_title’ => ‘</h3>‘,
	    ));
register_sidebar(array(‘name’=>’Footer Widget 4’,
	        ‘before_widget’ => ‘<div class="widget %2$s">‘,
	        ‘after_widget’ => ‘</div>‘,
	        ‘before_title’ => ‘<h3>‘,
	        ‘after_title’ => ‘</h3>‘,
	    ));
register_sidebar(array(‘name’ => __( ‘Ma zone perso’ ),
			‘id’ => ‘ma-zone-perso’,
			‘description’ => __( ‘Une zone de widget perso’ ),
			‘before_widget’ => ‘<li id="%1$s">‘,
			‘after_widget’ => ‘</li>‘,
			‘before_title’ => ‘<h3>‘,
			‘after_title’ => ‘</h3>‘,
		));
```
A noter que la modification fait disparaître à chaque fois l’admin bar du site.
9 août 2012 à 18 h 40 min #846482

lorenzolamas
Participant

Maître WordPress
3229 contributions

Essayes avec ça:

register_sidebar(array(‘name’ => __( ‘Ma zone perso’ ),
‘before_widget’ => ‘
‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));

9 août 2012 à 18 h 41 min #846483

lorenzolamas

Participant

Maître WordPress

3229 contributions

euh plutot ça:

register_sidebar(array(‘name’ => __( ‘Ma zone perso’ ),
‘before_widget’ => ‘

‘,
‘after_widget’ => ‘

‘,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));

9 août 2012 à 18 h 47 min #846484

lorenzolamas

Participant

Maître WordPress

3229 contributions

Voila le code sur mon theme perso:

if ( function_exists(‘register_sidebar’) ) {
    register_sidebar(array(
        ‘name’ => ‘header’,
        ‘before_widget’ => ‘<div class="widget_header">‘,
        ‘after_widget’ => ‘</div>‘,
        ‘before_title’ => ‘<h3>‘,
        ‘after_title’ => ‘</h3>‘,
    ));	
	
	 register_sidebar(array(
        ‘name’ => ‘home_slider’,
        ‘before_widget’ => ‘<div class="home_slider">‘,
        ‘after_widget’ => ‘</div>‘,
        ‘before_title’ => ‘<h3>‘,
        ‘after_title’ => ‘</h3>‘,
    ));
	
	register_sidebar(array(
        ‘name’ => ‘home_left’,
        ‘before_widget’ => ‘<div class="home_left">‘,
        ‘after_widget’ => ‘</div>‘,
        ‘before_title’ => ‘<h3>‘,
        ‘after_title’ => ‘</h3>‘,
    ));
	register_sidebar(array(
        ‘name’ => ‘home_center’,
        ‘before_widget’ => ‘<div class="home_center">‘,
        ‘after_widget’ => ‘</div>‘,
        ‘before_title’ => ‘<h3>‘,
        ‘after_title’ => ‘</h3>‘,
    ));
	register_sidebar(array(
        ‘name’ => ‘home_right’,
        ‘before_widget’ => ‘<div class="home_right">‘,
        ‘after_widget’ => ‘</div>‘,
        ‘before_title’ => ‘<h3>‘,
        ‘after_title’ => ‘</h3>‘,
    ));
	
	register_sidebar(array(
        ‘name’ => ‘Sidebar’,
        ‘before_widget’ => ‘<div class="widget_sidebar">‘,
        ‘after_widget’ => ‘</div>‘,
        ‘before_title’ => ‘<h3>‘,
        ‘after_title’ => ‘</h3>‘,
    ));	
	register_sidebar(array(
        ‘name’ => ‘Footer 1’,
        ‘before_widget’ => ‘<div class="widget_footer">‘,
        ‘after_widget’ => ‘</div>‘,
        ‘before_title’ => ‘<h3>‘,
        ‘after_title’ => ‘</h3>‘,
    ));
    register_sidebar(array(
        ‘name’ => ‘Footer 2’,
        ‘before_widget’ => ‘<div class="widget_footer">‘,
        ‘after_widget’ => ‘</div>‘,
        ‘before_title’ => ‘<h3>‘,
        ‘after_title’ => ‘</h3>‘,
    ));
    register_sidebar(array(
        ‘name’ => ‘Footer 3’,
        ‘before_widget’ => ‘<div class="widget_footer">‘,
        ‘after_widget’ => ‘</div>‘,
        ‘before_title’ => ‘<h3>‘,
        ‘after_title’ => ‘</h3>‘,
    ));
	 register_sidebar(array(
        ‘name’ => ‘Footer 4’,
        ‘before_widget’ => ‘<div class="widget_footer">‘,
        ‘after_widget’ => ‘</div>‘,
        ‘before_title’ => ‘<h3>‘,
        ‘after_title’ => ‘</h3>‘,
    ));
}

9 août 2012 à 18 h 49 min #846485

lorenzolamas

Participant

Maître WordPress

3229 contributions

Et dans le header (ou il y a une des zones):

17 août 2012 à 7 h 32 min #846486

Muzayan

Membre

Chevalier WordPress

113 contributions

Tout d’abord désolé pour le temps de réponse, mais j’ai dû changer de thème à cause d’une erreur de ma part. J’ai ensuite repris toute les modifications et ça marche 🙂 Maintenant il faut que j’arrange tout ça niveau CSS. Je vais essayer de me débrouiller!

Merci pour votre aide.

17 août 2012 à 10 h 13 min #846487

Muzayan

Membre

Chevalier WordPress

113 contributions

Par contre, ma zone de widget se « répète » dans la sidebar de droite alors que elle n’est pas appelée dans le code … Comment peut-on l’enlever?

15 sujets de 1 à 15 (sur un total de 16)

1 2 →

Vous devez être connecté pour répondre à ce sujet.

‘, ‘after_title’ => ‘

‘, ‘after_title’ => ‘

‘,
‘after_title’ => ‘

‘,
‘after_title’ => ‘