WordPress : créer une homepage à sidebar multiples

le 13 mai 2011

WordPress

L’autre jour, Cybercraft m’a demandé comment était réalisée la page d’accueil de mon portfolio, en particulier les trois zones widgetisées. J’en profite pour en faire un tuto : nous allons créer une page template pour votre page d’accueil et y intégrer des zones de widgets, sous Wordpress.

1 – Ajout de la fonction sidebar à votre thème

La première chose à faire est d’activer la fonction sidebar dans le fichier functions.php de votre thème. Pour cela, ajoutez le code qui suit, et personnalisez le pour ajouter autant de zones de widgets que nécessaire. Ici, je crée 3 zones de widgets que j’utiliserai en pied de page. Vous pouvez modifier leur nom en modifiant la ligne ‘name’ => ‘Footer 1’.

// Enregistrement des sidebar et des widgets
if ( function_exists('register_sidebar') ) {
    register_sidebar(array(
        'name' => 'Footer 1',
        'before_widget' => '<div id="%1$s">',
        'after_widget' => '</div>',
        'before_title' => '<h6>',
        'after_title' => '</h6>',
    ));
    register_sidebar(array(
        'name' => 'Footer 2',
        'before_widget' => '<div id="%1$s">',
        'after_widget' => '</div>',
        'before_title' => '<h6>',
        'after_title' => '</h6>',
    ));
    register_sidebar(array(
        'name' => 'Footer 3',
        'before_widget' => '<div id="%1$s">',
        'after_widget' => '</div>',
        'before_title' => '<h6>',
        'after_title' => '</h6>',
    ));
}

2 – Création du fichier template

Ensuite, créez un fichier template-home.php, qui vous servira de modèle à appliquer à notre page d’accueil. Pour définir ce fichier en tant que template, écrivez le code qui suit, où Home est le titre de votre template.

 <?php
/*
Template Name: Home
*/
?>

Ensuite, appelez le header et le footer de votre thème dans le template :

 <?php get_header(); ?>

<?php get_footer(); ?>

Le contenu de votre page devra s’insérer entre le header et le footer de la page. Pour insérer vos zones de widget, écrivez le code suivant :

<?php    if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('Footer 1') ) ?>
<?php    if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('Footer 2') ) ?>
<?php    if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('Footer 3') ) ?>

Enregistrez votre fichier et uploadez le sur votre ftp, dans votre dossier thème.

3 – Ajout de widgets

Rendez-vous dans le menu Apparence > Widgets. Le panneau d’admin devrait maintenant ressembler à celui-ci :

Ajout de widgets à une sidebar

Ajoutez le nombre de widgets voulus.

4 – Appliquer votre modèle à la page d’accueil

Dernière étape, rendez-vous dans le menu Réglages > Lecture et appliquez votre template à votre page d’accueil.

WordPress – Appliquer un modèle à la page d'accueil

Vous disposez maintenant de sidebar multiples, un peu de CSS vous permettra de modifier leur apparence !

42 commentaires

  1. Cybercraft dit :

    Héhé… Pas mal du tout… Je pensé utiliser le template front-page.php mais cette solution conviens tout à fais…

    Merci Mylène

    Info : Mon blog est en maintenance, je refais totalement le thème graphique… Donc le lien inséré est « dead » pour l’instant !

  2. franck dit :

    Très bon tuto, seulement mes zones de widget sont en les une en dessous des autres..:( quelles balises css utilise t’on pour customiser la taille et l’emplacement des widgets

    • Mylene dit :

      Bonjour,

      Il faut ajouter un float:left; à vos widget et une largeur. Après c’est du calcul simple : si votre largeur maxi est de 1000px, 330px par widgets devraient convenir (à adapter selon les marges voulues).

      • franck dit :

        il faut donc creer une div dans la home.php qui encadre nos trois zones de widgets.
        et attribuer du css a cette div

        #madiv { padding:20px 10px 0 10px; width:210px; float:left; }

        J’ai essayer cela mais ça n’a pas l’air de fonctionner.

      • Mylène dit :

        En fait, si on imagine que vous avez 3 div avec la classe « widgets »:

        widget 1
        widget 2
        widget 3

        il faut faire un CSS de type :
        .widget {widht:300px; float: left;}

        ==>> Vous aurez trois div de taille égales, « flottants », donc alignés !

      • franck dit :

        J’ai fini par y arriver, merci beaucoup !

      • Gwenm dit :

        Salut, pile poile ce que je cherchais, mais j’ ai du mal à les aligner..je m’ y prend comme ceci:

        et le css:
        .widget {widht:300px; float: left;

        mais ce n’est pas exactement ca apparemment..vous pourriez m’éclairer?

      • Mylene dit :

        Bonjour,

        Il faut penser à la largeur totale du div principal. Le CSS devrait ressembler à ceci :

        #footer{ width:1007px;float:left;}
        #footer .widget { width:305px; float:left;padding:0 0 0 20px;margin: 0 10px 0 0;}

  3. Mathieu dit :

    Bonjour,
    merci pour ce tutoriel très clair.

    de mon côté je n’arrive pas à faire apparaître dans l’interface d’administration les 3 nouvelles sidebars.
    J’utilise un theme enfant du theme par défaut, est-ce incompatible?

    merci pour votre aide

  4. Mathieu dit :

    dans la première étape, j’ai rajouté ‘id’ => ‘sidebar-4’,
    à la déclaration, et les 3 widgets apparaissent maintenant dans l’interface d’admin
    merci

  5. Paul dit :

    Bonjour,

    L’article est très intéressant et convient parfaitement à ce que je cherche.
    Malheureusement les bouts de code et images ne s’affichent plus !
    Pourriez-vous y remédier ? =)

    • Mylene dit :

      Bonjour Paul,

      Je viens de voir que votre commentaire était passé en spam, je viens de modifier l’article pour que le code s’affiche à nouveau. Désolée :)

  6. mayanaya dit :

    Bonjour,

    Et merci pour ce tuto très clair. Je suis novice et j’ai tout compris, et j’ai maintenant les 3 widgets qui sont les uns en dessous des autres. Seulement vos explications suivantes sont un peu du chinois pour moi.
    Pourriez vous être un plus spécifique sur le CSS à intégrer et où exactement faut il l’intégrer ?
    Merci d’avance pour votre réponse

    • Mylene dit :

      Bonjour mayanaya,

      Il faut intégrer ce css dans le fichier style.css de votre thème.
      Après création de vos sidebar, vous devriez obtenir quelque chose de ce style dans votre fichier template-home.php :

      
      
      

      Côté CSS (style.css) :

      
      #footer{ width:1000px;float:left;} */ Ou 1000px correspond à la largeur de votre page /*
      
      #footer .widget { width:300px; float:left;margin: 0 10px 0 0;border:1px solid black;}*/ Ou 300px correspond à la largeur de vos widgets. Le float:left permet aux widgets de s'aligner sur la page. Pensez à jouer sur le margin si l'un des widgets ne s'aligne pas. Le border devrait vous aider à visualiser l'emplacement de vos widgets. /*
      
  7. jpdperso dit :

    l’image https://www.myleneboyrie.fr/wp-content/uploads/2011/05/widgets-02.jpg qui doit illustrer la phase 4, a disparu. Or c’est justement là que je ne sais pas appliquer un template à une page d’accueil statique.
    Pouvez-vous la remettre en place que je comprenne, merci d’avance

  8. jojo dit :

    Bonjour,

    Comment on applique ce tutoriaux à la colonne principale ?

    merci d’avance

  9. rodolphe_ dit :

    merci beaucoup pour ce tuto hyper clair.
    Cela fonctionne évidemment :)

  10. sohaib dit :

    merci pour le tuto :) , je veux juste savoir est ce que c’est possible de créer un style pour chaque page selon le théme de la page merci encor une fois :p

  11. JInx dit :

    Merci pour ce tuto, Vraiment clair, grâce à toi j’ai fais mon premier template :)

  12. émilie dit :

    Bonjour, j’ai tout suivi à la lettre et je ne vois nullepart aparraitre mon « footer 3 » dans lequel j’ai mis mon widget texte (voulant mettre du code pour la pub enbas de ma page). pouvez vous voir pourquoi ? merci d’avance

  13. valarno dit :

    Bonjour,
    J’ai tout suivi à la lettre et ça fonctionne pas….Il n’y a que le header qui s’affiche.
    Je pars du thème Twenty Twelve 1.0 et mon wordpress est en version 3.5 c’est peut être ça ? je débute sous WP….

  14. […] Je tenais à citer la source dans ma recherche initiale pour réaliser un thème avec widgets.Consultez ce billet d’ Aide aux Widgets sur myleneb.fr […]

  15. edgy dit :

    Merci pour ce tuto. J’ai bien suivi les instruction mais je suis bloqué à la fin.
    Dans le point 4, je n’arrive pas à appliquer le template à la page d’accueil. Je n’ai pas la page qui s’appelle accueil comme sur la capture d’écran. Faut il la créer ou doit elle être reconnu automatiquement grâce aux modifications que l’on a fait avant?
    Merci

  16. Maddi dit :

    Bonjour,

    Merci pour ce tuto. J »ai suivi toutes les étapes mais les widgets ne s’affichent pas dans le Dashboard.
    J’utilise un thème enfant twenty eleven. Est-ce que je dois rajouter quelque chose ?

    Merci

    • Mylène Boyrie dit :

      Oups, j’avais laissé passer votre commentaire !

      Le problème des thèmes comme Twenty Eleven & de ses thèmes enfants, c’est que le fichier functions.php est déjà bien rempli. Je vous conseille de vérifier que des sidebars n’ont pas déjà été déclarées dans votre thème à la base, si tel est le cas, il vous faut supprimer ces lignes pour éviter les conflits.

  17. Sabine Noirel dit :

    Bonjour,

    Désolée pour le double post mais j’ai fait n’importe quoi sur le précédent au niveau de l’url.

    Je suis entrain de créer le site d’une jeune esthéticienne. je souhaite ajouter une slidebar dans le footer de mon thème. J’ai tout suivi à la lettre mais je n’ai rien à l’étape 3.

    Mon fichier functions.php était plein de code, j’ai donc ajouté celui-ci tout à a fin juste avant la fermeture de a balise php. Est-ce de là que vient mon problème ?

    Merci :)

    • Mylène Boyrie dit :

      Bonjour Sabine,

      Il est fort possible que le problème vienne du functions.php, en effet. Si vous utilisez un thème préconçu, peut-être que des sidebars sont déjà prévues dans ce fichier, et que l’ajout du code fait concurrence au précédent. Vérifiez que des sidebars n’ont pas été déclarées au préalable, votre souci vient probablement de là ;)

      • Sabine Noirel dit :

        Bonjour,

        Si, il y en a qui on été déclarées. Je pense que c’est effectivement le problème mais je ne sais pas comment le régler :/

  18. alain dit :

    Bonjour,
    Moi en fait, c’est une variante que je veux réaliser.
    créer plusieurs zones widjetisables dans la sidebar (colonne de droite) au lieu d’une seul par défault. je veux faire comme sur le site : trafficgenerationcafe.com/blog/ . J’utilise un theme enfant japibas. gratuit.
    Alors que votre tuto montre comment créer plusieurs zones widgetisable dans le footer. pouvez-vous m’aider?

  19. Issah dit :

    Bonjour,

    Je voudrais que mes widget se mettent dans une autre page que accueil.

    Comment puis je faire?

    Bien à vous

  20. Issah dit :

    Ma page ou je veux mettre mon widget s’appelle « boutique ».
    Mais je ne la trouve pas dans mes dossiers.

  21. ayoub dit :

    Merci pour le tuto, je l’ai trouvé très très intéressant !

  22. Nadège dit :

    Bonjour !
    Merci pour cette information intéressante !
    J’utilise le thème twenty twelve et je débute sur wordpress. J’ai modifié le fichier functions, comme tu l’as indiqué puis..page blanche !
    Depuis le site est inaccessible.. J’ai cherché partout via le ftp sur le fichier function, widget ou encore sidebar à annuler la modification que j’avais faite mais impossible..Aurais-tu une idée ?
    Merci par avance !

  23. dov dit :

    bonjour, pourriez vous m’aider a aligner trois widgets de promotion tripadvisor sur un site que je tente de mettre en ordre.

    voici le code que j’ai mis en place mais les widgets vont a la ligne a chaque fois

    un grand merci pour votre aide précieuse
    dov

  24. Gautier dit :

    Salut, j’ai testé, et ca ne fonctionne pas. J’ai réalisé toutes les étapes une par une, créé une page Accueil pour la dernière étape, nommée Accueil, je l’ai mis en page d’accueil pour mon test et ca ne fonctionne toujours pas.
    est-ce que ca peut venir du thème ? Merci d’avance

  25. pascal dit :

    Bonjour, je suis ultra débutant sur wordpress. Je bloque à l’étape 1. a quel endroit du dossier functions.php dois-je ajouter le code?

Ajouter un commentaire