Genesis :: Comprendre et créer votre page d’accueil sur mesure

Dans ce tutoriel nous verrons comment créer une page d’accueil sur mesure avec le framework Genesis. Avec cette mise en place vous comprendrez le fonctionnement de ce modèle utilisé dans la quasi-totalité des thèmes enfants qui reposent sur ce moteur de thème.

Avant de commencer

Si vous démarrez avec Genesis, je vous recommande ces tutoriels avant de vous lancer:

• Présentation du Framework de thème WordPress Genesis en français
• Comment utiliser les Widgets Genesis pour les Pages et les Articles à la Une
• Genesis :: Comment créer un modèle de page WordPress sur mesure
• Formation vidéo Personnaliser un template WordPress avec le framework Genesis

Thème de base

Si vous achetez le Framework Genesis, vous n’êtes pas obligé d’utiliser thème enfant payant (comme je l’ai décrit dans ma formation Elephorm sur le sujet). Avec votre achat, un thème Sample Theme vous est fourni. C’est une bonne base de travail. Par contre, il ne comprend pas de page d’accueil contruite avec des Widgets et c’est le coeur de ce type de thème. Nous verrons donc comment en créer une.

Vous pouvez télécharger le Sample Theme dans votre compte StudioPress. Une fois ajouté à votre dossier themes, vous pouvez renommer le dossier avec un nom sur mesure. Et dans les commentaires placés au début de votre fichier style.css, vous ajoutez les données de votre thème.
Attention, ne surtout pas supprimer Template: genesis. C’est ce qui permet de faire le lien avec le framework lui-même qui est un thème parent.

/* # Genesis Sample Child Theme
Theme Name: Mon thème enfant Genesis
Theme URI: https://www.gregoirenoyelle.com/
Description: Description de votre thème
Author: Grégoire Noyelle
Author URI: https://www.gregoirenoyelle.com/
Template: genesis
Template Version: 2.1.2
Tags: black, orange, white, one-column, two-columns, three-columns, left-sidebar, right-sidebar, responsive-layout, custom-menu, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

Une fois ces changements effectués, vous pourrez choisir votre nouveau thème enfant comme thème principal. Ce sont déjà les styles du thème Genesis qui ont été utilisés. Attention, pour rappel, ce sont toujours les thèmes enfants que nous devrons utiliser et non le framework Genesis directement (qui est le thème parent).

Création des zones de widgets

Une fois le thème activé, nous allons ajouter deux nouvelles zones de widget dont nous aurons besoin pour la page d’accueil. La première servira pour utiliser un slider. La deuxième pour afficher des articles en une.

Pour la création, tout se passe dans le fichier functions.php de votre thème enfant. Voici la fonction Genesis de base que je vais vous détailler.

<?php
//* Register widget areas
genesis_register_sidebar( array(
    'id'          => 'home-top',
    'name'        => 'Accueil - Haut de page',
    'description' => 'Partie haute de ma page d\'Accueil.',
) );
?>

• Attention à ne pas intégrer les balises PHP ajoutées dans mes exemples.
• le id doit être unique. Il servira à appeler spécifiquement cette zone de widget dans la page d’accueil.
• le name apparaîtra comme nom de zone de widget
• le description permet de décrire la zone. Au passage vous remarquerez le caractère \ que nous devons utiliser devant un guillemet simple ' pour ne pas avoir d’erreur PHP. C’est un caractère d’échappement qui ne s’affichera que dans votre code.

Nous allons pour notre exemple créer deux zones et le code total à placer dans votre fichier functions.php ressemblera à ça. L’ajouter sans les balise PHP.

<?php
// première zone
genesis_register_sidebar( array(
    'id'          => 'home-top',
    'name'        => 'Accueil - Haut de page',
    'description' => 'Partie haute de ma page d\'Accueil.',
) );
// deuxième zone
genesis_register_sidebar( array(
    'id'          => 'home-bottom',
    'name'        => 'Accueil - Bas de page',
    'description' => 'Partie basse de la page d\'Accueil.',
) );
?>

Dans le back-office cela donnera

Ajout d’un nouveau format d’image

Nous avons besoin dans notre modèle d’accueil d’un nouveau format d’image à la une. Il sera utilisé dans la zone Accueil – Bas de page. Je désire obtenir une image de 285px X 160px. Elle devra être recadrée à la volée. Voici la fonction WordPress et l’article du codex qui permet cette action:

//* Format d'image
add_image_size( 'home-bottom', 285, 160, TRUE);

Suite à l’installation de cette fonction, une nouvelle option d’image (ici home-bottom) sera disponible dans les Widgets Genesis.

Si vous avez déjà des images à la une dans votre site, il s’agira alors de les régénérer avec le plugin Regenerate thumbnails. L’option se trouve dans le menu Outils de votre back-office. Il faut juste cliquer sur le bouton Regenerate all Thumbnails ou utiliser les Actions groupées dans la liste de tous vos médias.

Modèle de page pour l’accueil

La plupart des thèmes premium qui reposent sur Genesis ont un fichier front-page.php intégré. Ce modèle s’applique avec le réglage de lecture par défaut d’une installation WordPress. Sans widgets actifs, ce sont les derniers articles qui s’affichent après l’activation du thème.
Pour avoir plus d’information, vous pouvez vous référer à l’article du codex qui illustre la hiérarchie d’un thème WordPress. L’image dans l’article permet d’illustrer le principe.
Attention, si vous voulez que votre administrateur puisse choisir une page d’accueil d’après une page statique (dans les options de Lecture), il faudra appeler votre fichier home.php .
Il n’y a pas de page physique dans les thèmes premium Genesis. Très souvent, c’est ce modèle qui appelle le contenu des widgets choisis. Aussi retenez que pour que votre modèle fonctionne, il s’agit de choisir ce même réglage de lecture et non une page spécifique comme accueil.

Modèle complet de la page d’accueil

Dans cette partie, nous allons analyser une page type pour créer un modèle spécifique pour une page d’accueil construite sur des widgets. Voici le modèle complet et je vais détailler la construction.

https://gist.github.com/gregoirenoyelle/daa02202bd039b52f645#file-sample-front-page-php

Si le fichier ne s’affichait pas, le voir en ligne.

Analyse du modèle front-page.php ou home.php

Premier hook

Le premier hook genesis_meta s’exécute suffisamment tôt pour lancer des actions spécifiques sur le modèle.
Le modèle est construit de la manière suivante, sur ce premier hook, plusieurs autres hooks sont seulement déclarés en fonction d’un conditionnel qui vérifie si les zones home-top (Accueil – Haut de page) et home-bottom (Accueil – Bas de page) ont des widgets actifs. Et dans ce cas, les fonctions liées aux hooks seront appelées. Dans les autres, ce sont les derniers articles qui s’affichent (le réglage par défaut comme nous avons vu).

Imposer la pleine largeur

Avec le hook genesis_pre_get_option_site_layout. Ce hook est très utile pour imposer une mise en page par le code sur tous les modèles de votre thème. Un article de Sridhar, How to apply layouts conditionally in Genesis, détaille toutes les options possibles sur la mise en page. Dans les Autres liens utiles, je mets aussi les ressources données par Brian Gardner.

Ajouter une classe au body

Avec le hook body_class . Celui-ci n’est pas spécifique à Genesis. La fonction gn_sample_body_class permettra le réglage.
La fonction plus bas gn_sample_body_class ajoutera une nouvelle classe au body qui sera utilisées dans les CSS.

Retirer le fil d’Ariane

Avec le hook genesis_before_loop sur genesis_do_breadcrumbs. Ici, c’est un remove_action pour enlever un affichage existant; dans notre cas, le fil d’Ariane.

Retirer et ajouter des nouvelles boucles

Avec cet ensemble de trois fonctions:

//* Remove the default Genesis loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

//* Add home top widgets
add_action( 'genesis_loop', 'gn_sample_home_top_widgets' );

//* Add home bottom widgets
add_action( 'genesis_before_footer', 'gn_sample_home_bottom_widgets', 1 );

• la première enlève la boucle classique
• la deuxième ajoute une nouvelle boucle qui en fait affichera le contenu des widgets s’il sont actifs
• la troisième, ajoute une nouvelle boucle qui comme l’autre affichera nos choix de widget. Seul l’emplacement diffère. Nous nous plaçons tout au début du hook genesis_before_footer.

Les deux fonctions gn_sample_home_top_widgets et gn_sample_home_bottom_widgets sont construites sur le même principe. Elles utilisent la fonction genesis genesis_widget_area pour appeler une zone de widget que nous avons créée dans le fichier functions.php.
Par exemple pour la première zone on a le code suivant:

genesis_widget_area( 'home-top', array(
'before' => '<div class="home-top widget-area">',
'after'  => '</div>',
) );

Le premier attribut home-top est l’identifiant unique que nous avons donné au moment de la mise en place de la zone. Pour les deux autres attributs before et after ce sont les balises HTML qui se trouve avant et après la zone de widget.

Fonction genesis

Au final, bien sûr n’oubliez pas la fonction genesis() qui est primordiale dans tous les templates de votre site.

A noter

Pour des thèmes sur mesure, vous êtes libre de créer une page d’accueil qui ne repose pas sur des widgets. Vous pouvez intégrer des fonctions complexes ou même récupérer des contenus créés par Advanced Custom Fields par exemple (j’ai plusieurs tutoriels sur ACF).

Activation des widgets

Nous allons installer deux widgets, celui donné par Genesis Responsive Slider et les widgets Articles à la une de Genesis.

La première zone, Accueil – Haut de page, affichera juste le slider alors que la deuxième, Accueil – Bas de page, permettra d’installer 4 fois le widget Article à la une avec des paramètres différents.

Mise en forme des widgets

Une fois vos zones de Widget installées il s’agira d’inspecter le code générer pour appliquer vos différents styles CSS.

Des styles sont déjà compris dans le slider et pour les Widgets Article à la une . Je vous propose d’autres styles pour la partie écran d’ordinateur et pour les mobiles. Pour la zone Accueil – Bas de page , je vais créer une mise en page de 4 colonnes. Chacune d’entre elles est générée à chaque nouveau widget Article à la une. Il y a trois articles à chaque fois par catégorie.

CSS pour les écran d’ordinateur

Attentions, ces règles CSS doivent se placer avant celles qui concernent les media queries.

https://gist.github.com/gregoirenoyelle/daa02202bd039b52f645#file-style-home-widget-screen-css

Si le fichier ne s’affichait pas, le voir en ligne.

CSS pour les supports mobiles

Attention, ces règles CSS doivent se placer tout en bas de votre feuille de styles.

https://gist.github.com/gregoirenoyelle/daa02202bd039b52f645#file-style-home-widget-responsive-css

Si le fichier ne s’affichait pas, le voir en ligne.

Résultat

Voici le résultat final avec des mises en avant des zones créées (en rouge).

Autres Liens utiles

• Genesis Site Layouts – Brian Gardner. Tous les codes pour gérer la mise en page dans Genesis.
• How to apply layouts conditionally in Genesis – Sridhar Katakam
• Sélection de tutoriels et ressources sur le framework Genesis