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.

Cet article a été publié il y a plus d'un an. Les informations qu'il contient ne sont peut-être plus pertinentes à l'heure actuelle.

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. 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. 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

    1. 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).

      1. 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.

      2. 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 !

      3. J’ai fini par y arriver, merci beaucoup !

      4. 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?

      5. 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. 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. 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. 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 ? =)

    1. 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. 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

    1. 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. l’image https://www.myleneboyrie.fr/hoppipolla/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

    1. C’est corrigé, merci d’avoir remonté l’info.

  8. Bonjour,

    Comment on applique ce tutoriaux à la colonne principale ?

    merci d’avance

    1. Je ne comprends pas votre question ?

  9. merci beaucoup pour ce tuto hyper clair.
    Cela fonctionne évidemment 🙂

  10. 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. Merci pour ce tuto, Vraiment clair, grâce à toi j’ai fais mon premier template 🙂

  12. 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. 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….

    1. Si vous êtes nouveau sous WordPress, je vous conseille tout d’abord de lire le codex, et en particulier la partie dur les modèles de page, disponible à cette adresse : http://codex.wordpress.org/fr:Pages..

  14. Pingback: Créer son thème Wordpress avec Widgets | Laintimes
  15. 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

    1. Effectivement il vous faut créer une page nommée « Accueil » pour suivre le dernier point 🙂

  16. 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

    1. 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. 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 🙂

    1. 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à 😉

      1. 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. 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. Bonjour,

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

    Comment puis je faire?

    Bien à vous

    1. Alain & Issah : il vous suffit de placer vos zones de widget dans le template de la page voulue, à l’endroit souhaité.

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

    1. Il vous suffit de suivre ce tuto, et d’appliquer le thème à votre page boutique.

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

  22. 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. 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. 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. 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?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec une astérisque: *.