Boostez votre activité de Webmaster !

Comment créer une page d’accueil personnalisée avec des sidebars ?

Besoin d'avoir du temps pour travailler sur VOS projets en plus de ceux de vos clients ?
Téléchargez ici le guide sur 4 outils pour gagner du temps en tant que webmaster

Récemment j’ai eu à créer un site web dont la page d’accueil WordPress devait être totalement personnalisée. Elle se composait de plusieurs blocs avec différents contenus.

Je me suis servis du thème de base de WordPress, Twenty Sixteen et après réflexion, j’ai décidé de créer un modèle de page sur WordPress et d’y insérer plusieurs sidebars qui me serviront à positionner chaque bloc.

Suivez-moi pour voir les étapes de réalisation de cette page…

La mise en place de la page d’accueil WordPress

Créer un modèle de page sur WordPress est vraiment facile.

Mais avant de commencer quoi que ce soit, vous devez absolument penser à créer un thème enfant.

Pour ne pas perdre de temps, je le fais directement sur Filezilla :

  1. Je créé le dossier “nomduthème-child”.
  2. J’y créé le fichier style.css.
  3. J’édite le fichier et j’y mets le code suivant :
    /*
    Theme Name: Nom du Thème Child
    Template: nomdudossier_duthèmeparent
    */
    @import url("../nomdudossier_duthèmeparent/style.css");
  4. Fini !

Ensuite il me suffit de créer le modèle de page correspondant.

Encore une fois, le début n’est pas trop difficile, il suffit de créer une nouvelle page .php.

La mienne, étant une homepage, s’appelle homepage.php et elle contient, à la base ce ci :

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

Après, je vais dans le Tableau de bord de WordPress, pour y créer une page appelée Accueil.

Dans la colonne de droite je repère l’encart “Attributs de la page” puis je choisis, dans le menu déroulant “Modèle”, la page que je viens de créer (et qui doit apparaît sous le nom “HomePage”).

page d'accueil wordpress personnalisée

Construction de la page d’accueil WordPress personnalisée

Ce n’est que le début pour ne serait-ce qu’avoir quelque chose avec quoi travailler.

C’est maintenant que nous passons aux choses sérieuses.

Vous avez apprécié cet article ?
N'en ratez plus un seul en vous inscrivant ici !

En effet, toujours dans mon thème enfant, je créé un fichier functions.php pour y intégrer le code à mettre pour utiliser des sidebar.

Sur le site de mon client, j’ai créé 4 sidebars pour 4 zones de la page d’accueil : en haut à gauche, en haut à droite, au milieu et en bas.

Voici le code que j’utilise à chaque fois, en changeant juste le “name” et l'”id”.

if ( function_exists('register_sidebar') )
 register_sidebar(array(
 'name'=>'Widgets Page Accueil Top Left',
 'id' => 'home-widgets-top-left',
 'before_widget' => '<div id="%1$s" class="widget %2$s">',
 'after_widget' => '</div>',
 'before_title' => '<span class="widgettitle">',
 'after_title' => '</span>'
 ));

Sur la page HomePage, je les appelle de cette manière :

<div id="home-widgets-top-left">
 <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Widgets Page Accueil Top Left') ) : ?>
 <?php endif; ?>
 </div>

Et enfin, voici comment ces 4 sidebars différentes apparaissent quand je vais dans le tableau de bord sous “Apparence” > “Widgets”.

page d'accueil WordPress avec des Widgets

Mettre en place les widgets

L’avantage donc d’avoir des sidebars est de pouvoir utiliser les nombreux widgets de WordPress, des extensions mais aussi de créer des widgets “Texte” pour des besoins plus spécifiques.

Ainsi pour ma sidebar “Accueil Top Left”, elle présente uniquement le widget qui me permet d’afficher un slider (avec Revolution Slider).

Les autres widgets sont composés des derniers articles, de widgets textes pour mettre en forme informations textuelles et boutons, d’un widget pour afficher les derniers événements, d’un autre slider, etc.

Créer le CSS correspondant

J’ai mis chaque sidebar dans une div qui me permet ainsi de l’appeler en CSS.

Je peux styler chaque bloc comme je le veux : dans le cas présent, il me fallait mettre en place des fonds de couleurs différents, ainsi que des couleurs de police adéquates.

Sans parler bien sûr des styles des différents autres éléments (sous titres, listes, liens…).

 

Je suis sûre qu’il y avait d’autres manières de réaliser une page d’accueil WordPress personnalisée. J’ai choisi de partir sur l’utilisation des sidebars pour la facilité d’utilisation des widgets par le client.

Et vous qu’auriez-vous fait, quelle méthode auriez-vous utilisée ?

Gagnez du temps en tant que webmaster !
Recevez le guide gratuit avec 4 outils que j'utilise tous les jours pour gérer mon activité de webmaster plus efficacement et gagner du temps !
Partager :

Envoyer le commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

FERMER
CLOSE
4 outils dont je me sers au quotidien pour gagner plusieurs heures par jour, le guide !cliquez ici
+ +