Présentation du Framework de thème Genesis

Dans cet article, je vous présenterai le Framework de Thème créé par StudioPress: Genesis.
Pour avoir la même interface, veillez bien à télécharger l’extension Genesis Translations qui traduit la majeure partie de l’interface.

Qu’est-ce qu’un Framework de thème?

Définition officielle

Dans le domaine informatique, un framework peut être traduit comme étant un cadre applicatif, un socle d’application ou encore une structure logicielle. Ce sont différents composants qui vont servir de base à une architecture finale.

Le cas de Genesis

Dans le cadre d’un thème WordPress, le framework pourrait s’illustrer par la logique entre un thème Parent et un thème Enfant. Ce deuxième sera choisi en tant que thème principal et il dépend du premier qui doit toujours être installé simultanément. Cette mise en place permet au parent de se mettre à jour sans avoir à écraser tout ce que nous aurions modifié dans l’enfant.

Le Framework Genesis, créé par StudioPress et Nathan Rice, repose sur ce même principe. C’est un thème parent qui suppose l’utilisation d’un thème enfant en parallèle. Il peut se mettre à jour directement depuis le back-office de votre site WordPress. Nous verrons que par rapport à un thème classique, Genesis ajoute une multitude d’outils et de fonctionnalités qui permettent de rapidement mettre en place un thème enfant sur mesure. Par défaut quand un thème enfant prêt à l’emploi, genesis-sample, est fourni avec le Framework.

Les grands points de Genesis

Histoire de Genesis

Genesis a été initié par Brian Gardner est sorti en février 2010. Le développeur principal du projet se nomme Nathan Rice. Ces deux acteurs sont déjà très connus dans la communauté WordPress, ce qui a facilité son lancement. Brian fut un des premiers développeurs aux États-Unis à créer des thèmes “Premium”.

Aujourd’hui, sept ans après, le projet Genesis est toujours très vivace. StudioPress fait même désormais partie du groupe Rainmaker Digital et il vient de lancer en parallèle une plateforme d’hébergement clé en main. Ainsi sur le site officiel il nous est proposé de créer un site ou acheter un thème.

Ce qu’il faut retenir

Voici les points importants qui pourrait vos motiver pour démarrer avec ce moteur de thème. Certains seront développés plus loin dans cet article.

Mise à jour

Comme je le précisais, la mise à jour est automatique depuis le début. Il n’y a pas de numéro de licence et d’outils spéciaux à installer pour que le thème soit fonctionnel.

Tout illimité

Dans la même veine que le point précédent, vous pouvez utiliser Genesis de manière illimitée aussi bien dans le temps que dans le nombre de projets. J’ai acheté ma licence en juillet 2010 et je n’ai rien payé depuis. Le prix public est de 59,95 $ et il comprend une base de thème pour créer vos futurs projets.

100% dans les standards WordPress

En plus d’être complètement GPL, Genesis utilise au mieux les fonctionnalités de WordPress. Si l’une d’entre elles existe, aucune surcouche ne sera ajoutée. Nous verrons par exemple que la logique du framework repose sur l’API (Interface de programmation) des extensions. Comme sur WordPress, un gros travail a été fait sur l’accessibilité du framework.

Réglages simplifiés

De ce côté-là, il n’y a pas de mauvaise surprise après l’activation du thème. Une seule page de réglages qui volontairement est simplifiée. Nous verrons plus tard pourquoi.

Sécurité

C’est un point important dès que l’on réalise un projet sur mesure. Sachez que tout le code de Genesis est audité par Mark Jaquith, le grand expert de la sécurité WordPress. Vous verrez également dans la partie réservée au développeur que l’approche utilisée pour les modifications limite grandement les erreurs de codage.

SEO

Genesis est optimisé pour le SEO. Nativement, des champs dédiés sont intégrés. Contrairement à ce j’entends souvent dire, je trouve logique de penser le référencement en même temps que la structure HTML. Et pour que vous compreniez bien l’esprit qui anime l’équipe derrière ce framework, si vous activez une extension SEO connue, le module SEO se désactive automatiquement. Cela ne s’arrête pas là puisque le développeur principal a créé une extension SEO Data Transporter qui vous permet d’exporter les données SEO de Genesis vers une autre extension.
Dernière chose, l’optimisation SEO comprend une structure qui supporte le Microformats et le Microdata. Vous pouvez également ajouter vos propres réglages et complètement ajuster ces formats en fonction de vos besoins.

Communauté

Comme ce framework est très utilisé dans monde, plusieurs avantages en découlent. D’abord, il existe de nombreuses extensions dédiées ou compatibles. Ensuite, beaucoup d’articles sont disponibles sur la toile. Je vous invite à visiter cette étiquette sur mon site Genesis Framework. Enfin, il y a plusieurs maisons de thème qui proposent des choix variés. Je développerais la plupart de ces points dans les parties qui suivent.

Genesis pour les administrateurs

Genesis propose de multiples outils ou options pour l’administrateur du site. Celles-ci peuvent d’ailleurs être masquées facilement par les développeurs du thème sur mesure.

Outils intégrés

Genesis ajoute d’office quelques outils très utiles, qui sont peu nombreux, mais qui sont essentiels. Nous verrons que comme WordPress, le framework peut facilement être étendu par l’intermédiaire d’extension ou de fonctions quand vous êtes plus à l’aise avec le code. Je vous présente ici les principales.

Mise en page

Des options de maquettes sont intégrées nativement dans Genesis. D’abord dans les réglages généraux de Genesis. Ensuite dans chaque contenu individuel ou qui concerne les archives. À chaque fois, vous pouvez afficher ou non les deux barres latérales, à droite, à gauche ou de chaque côté.

Fil d’Ariane

Un fil d’Ariane est compris dans Genesis. Dans les options générales, vous pouvez ou non le masquer en fonction des types de contenu. Quand vous ajoutez un contenu sur mesure (Portofio, produit….), le fil d’Ariane s’adapte.

Affichage des Archives

Dans le même esprit, des réglages sont proposés pour toutes les archives de votre site. Par archive, il faut entendre les liens vers les contenus d’une catégorie, d’une étiquette, d’une date ou encore d’un auteur.

Options WordPress

Tous les supports de thème classique WordPress sont intégrés et sont disponibles dans le mode d’affichage Personnaliser (Customizer en anglais) de votre thème: en-têtes, image d’arrière-plan, zones de widget et options ajoutées par Genesis.

Widgets

Deux widgets essentiels sont fournis avec Genesis: Article à la Une et Page à la Une. Ces deux utilitaires vous permettent d’afficher facilement un page ou une suite d’article en contrôlant les éléments qui vont apparaître:

• L’image à la une à un format donné.
• Le titre du contenu.
• La partie du contenu qui va s’afficher: extrait, contenu entier ou nombre de caractères.

Dans la capture d’écran, voici un aperçu du réglage du widget à gauche et son rendu à droite.

Grand choix de thèmes

StudioPress propose beaucoup de thèmes enfants pour Genesis. Comme vous achetez une fois le framework, les thèmes enfants seront donc toujours moins chers. Cela tournera autour de 30/40€ chaque. Vous avez aussi un site dédié GenesisThemes.ca qui liste tous les thèmes enfants qui existe chez plusieurs éditeurs:

Sur mon site, je tiens à jour une liste dédiée avec des ressources sur le framework Genesis

Personnalisation de l’aspect

Trois extensions permettent de modifier l’aspect de votre thème sans avoir à toucher au code:

• Design Palette Pro: cette extension payante ajoute un nouveau menu dans votre back-office pour modifier directement l’aspect de votre site.
• Genesis Extender:: cette extension fonctionne de la même manière que la précédente.
• CSS Hero: cette extension payante permet de modifier les CSS en direct depuis votre navigateur. Elle est compatible avec la plupart des thèmes enfants créés par StudioPress. C’est une sorte de super Inpecteur avec des menus plus intuitifs. Les CSS seront ensuite enregistrés automatiquement dans le dossier de votre site.

Extensions

De nombreuses extensions gratuites sont disponible pour Genesis. Et toutes les extensions connues vont tester rapidement la compatibilité avec Genesis. Et quand un problème survient, une extension est rapidement mise en place . Ce fut le cas avec BuddyPress ou encore Woocommerce qui possède une extension dédiée: Genesis Connect for WooCommerce.

Vous pouvez explorer le même lien vers mon site pour une sélection de ressources sur le framework Genesis.

Genesis pour les développeurs

Genesis Sample Theme

Comme je le citais précédemment, un thème de base genesis-sample est fourni avec Genesis. Il est volontairement assez neutre et complètement responsive par défaut. C’est une très bonne base de travail pour construire n’importe quel thème sur mesure. Vous pouvez également à terme créer votre propre base de thème. Sachez qu’il est aussi possible de trouver plusieurs thèmes gratuits qui utiliser des configurations plus poussées. Voici une modeste sélection:

• Thème de base qui repose sur Bootstrap.
• Thème de base avec un support de Gulp.
• Thème de base avec SASS et Grunt intégré.

Structure HTML

De la structure HTML optimisée pour le SEO, aux classes CSS toujours identiques, jusqu’aux nombreuses fonctions disponibles. Tout est fait pour faciliter la mise en place de thèmes sur mesure. Et pour ça, le genesis-sample donné avec Genesis suffit amplement.

Comme nous l’avons vu sommairement, le HTML est entièrement modifiable avec les hooks qui joueront sur l’ordre, l’ajout de partie, la modification de structure. Etc….
Du côté du CSS, d’avoir toujours la même structure avec ses classes permet de gagner beaucoup de temps au niveau de la mise en place de CSS sur mesure. Des fonctions utilitaires permettent aussi d’ajouter des .wrap structurels sur les contenus de votre choix.

Construits comme une extension

Genesis repose sur l’API des extensions WordPress. C’est le point qui est plus perturbant au début pour les créateurs de thèmes qui ont l’habitude de travailler avec des modèles plus “classiques”.

Au niveau de la hiérarchie des modèles (template hierarchy en anglais), Genesis fonctionne comme n’importe quel thème traditionnel. Par contre, quand on ouvre un modèle Genesis, on constate qu’à part la fonction genesis(), vous n’avez quasiment aucun code à l’intérieur. Cette fonction est cruciale, car en tâche de fond elle affichera tout le contenu nécessaire en fonction du contexte donné par le modèle de la hiérarchie. Ainsi, un fichier pour la catégorie Blog sera nommé category-blog.php. La fonction fera le reste du travail.

Pour modifier le modèle, nous utiliserons les hooks pour ajouter, déplacer, retirer ou retirer du contenu. Les extensions connues (WooCommerce, BuddyPress, bbPress) fonctionnent exactement de la même manière. C’est la raison pour laquelle Genesis est tout de suite plus familier à tout développeur d’extension. L’avantage principal de cette approche est qu’il est possible de modifier énormément le comportement du framework sans avoir besoin de modifier le code source original. C’est une approche plus sûre et plus pérenne dans le temps.

Parmi les extensions incontournables avec Genesis, je citerai Genesis Visual Hook Guide qui permet d’afficher pour les Administrateurs du site toutes les zones de Hook disponible au niveau du front-office. Ainsi, comme nous le verrons, vous pouvez facilement ajouter de nouveaux contenus à l’endroit que vous souhaitez. Voici une capture de ce qu’affiche l’extension:

Add Action

Avec les fonctions WordPress add_action, vous allez pouvoir ajouter, retirer ou déplacer des éléments de votre squelette HTML. Dans es thèmes enfants Genesis créés par StudioPress, genesis-sample y compris, vous avec un modèle appelé page_landing. Il est modèle intéressant pour voir comment se fait la mise en place d’un template et comment on peut retirer des parties essentielles de la page comme le titre du site, les menus, les zones de widgets… Nous verrons plus bas une application plus concrète.

Add Filter

Avec les fonctions WordPress add_filter, vous allez modifier des parties existantes. Par exemple, si vous désirez changer ce qui s’affiche dans les informations des articles sous le titre ou encore pour changer la structure complète du titre du site. Sachez qu’en ce qui concerne les parties principales du site, une extension existe: Genesis Simple Edits. Elle ajoute des options directement dans le menu Genesis de votre back-office.

Support personnalisé

Une fois Genesis acheté, vous avez accès à de nombreuses ressources en ligne et à un support personnalisé par email avec ticket dédié. Contrairement à la plupart des thèmes premiums, celui-ci est illimité dans le temps. Par contre, seul bémol, celui-ci se fera en anglais.

Quelques exemples

Avant d’aller plus loin, je vous recommande d’installer les extensions Genesis Visual Hook Guide et Afficher le modèle courant – Show Current Template.

Ajouter un visuel avant le titre

Ici, je me concentrerai sur le modèle single.php qui est utilisé pour l’affichage d’un article tout seul. Mon objectif sera d’afficher l’image à la Une quand elle existe juste avant le titre de l’article. Dès qu’il s’agit d’ajoute un contenu dans la structure, nous devrons toujours passer par des hooks et ici avec les add_action.

<?php 
// Afficher l'image à la une avant le titre
add_action( 'genesis_entry_header', 'resto_image_une', 9 );
function resto_image_une() {
    // condition pour voir si l'image à la une existe
    // Sinon, le script s'arrête
    if ( !  has_post_thumbnail() ) {
        return;
    }

    // Données de l'image
    $image_id = get_post_thumbnail_id();

    // Afficher l'image 
    printf( '<a href="%s">%s</a>', wp_get_attachment_url( $image_id ), wp_get_attachment_image( $image_id, 'large') );

}

genesis();

Dans le code, il s’agit de suivre les étapes suivantes:

• Création du modèle single.php en mettant la fonction genesis() pour l’affichage standard de tous les contenus.
• Vérifier si mon modèle s’applique bien avec Reveal Current Template. Si je place mon curseur sur le nom single.php, je vois où se trouve ce fichier.
• Repérer la zone dans ce modèle avec Genesis Visual Hook Guide.
• Faire un hook sur cette zone add_action en affichant du contenu provisoire. Les priorités nous permettront de trouver le bon emplacement dans la structure. Ici, je mets 9 pour être avant le titre.
• J’ajoute une condition au tout début de ma fonction pour vérifier si cet article à une image à la une. Dans le cas contraire, return stoppe l’exécution du script.
• Utiliser la fonction WordPress wp_get_attachment_image pour afficher l’image à la une.

Ajouter un champ ACF sous le contenu principal.

Dans un modèle de page, je vais ajouter un champ stocké grâce à ACF sur un modèle de Page spécifique que je nomme Page avec un deuxième éditeur. Ce modèle ajoute une zone de dialogue en bas de page pour ajouter un deuxième éditeur. C’est donc un champ ACF WYSIWYG qui sera utilisé.

Comme l’exercice précédent, je suis toutes les mêmes étapes. Mon champ fichier se nomme editeur_bas_page. Le code final donnera:

<?php
// Template Name: Page avec un deuxième éditeur

// Hook pour placer ce nouveau contenu après l'éditeur principal de la page
add_action('genesis_entry_content','gn_contenu_extra');
function gn_contenu_extra(){
    echo '<h3>Nouveau contenu après l'article</h3>';
    printf( '<div class="contenu-extra-page">%s</div>', get_field('editeur_bas_page') );
}

// Fonction genesis obligatoire dans tous les modèles
genesis();

Voici le détail du code:

• Création du modèle de page.
• Choix du hook où je me place.
• Affichage du titre en dur avec le h3.
• Affichage du champ ACF WYSIWYG après le titre.

Ajouter un filtre pour imposer la pleine largeur

Ici, je vais créer un modèle de page pour une utilisation avec un Page Builder de Site Origine.

<?php
// Template Name: Modèle de page avec page builder

// Supprimer le titre de la page
remove_action('genesis_entry_header','genesis_do_post_title');


// Imposer la maquette en pleine largeur
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );


genesis();

Plusieurs fonctions sont disponibles dans Genesis pour choisir la mise en page. Je donne dans ce tutoriel personnel sur les options de mise en page Genesis plusieurs réglages et approches.

La nuance réside dans le hook utilisé genesis_pre_get_option_layout ou genesis_layout. Le premier propose une mise en page qui pourra être modifiée par l’administrateur dans les options de maquette du back-office. Le deuxième imposera vraiment la mise en page dans le modèle.

Autres exemples

En suivant l’étiquette Genesis Framework ou en visualisant cette collection de fonctions sur Genesis, d’autres pistes sont proposées. Sachez également que vous pouvez lire le code de Genesis qui est entièrement documenté. Voici quelques sites où vous pouvez trouver des ressources intéressantes:

• Code Snippets Archive – Bill Erickson. Le site de Bill est à explorer..
• Genesis Quick Tips – Bill Erickson. Collection de codes très utiles.
• Genesis Framework from StudioPress sur le site de Carrie Dils.
• Genesis Framework from StudioPress. Beaucoup de ressources, mais le site est désormais réservé aux membres.
• Genesis Code Snippets – Brian Gardner. Extraits de codes de base par Brian.