WP Genesis et la gestion de la mise en page

Une des fonctionnalités qui m’attire le plus dans le Framework Genesis, est la gestion des mises en page ou “layout” dans le jargon Genesis.

Ces Layout ou “Mises en pages” vous procurent donc un moyen souple de changer l’apparence de vos pages.
Ces structures de pages sont —la plupart du temps— similaire d’un site à l’autre et permettent de changer simplement le format d’une page ou d’un site assez rapidement … pour peu que votre CSS soit correctement écrite et prévoit à l’avance ces différentes mises en page …

Par défaut, Genesis donne accès à 6 Layout avec pour mot-clefs :

• content-sidebar
• sidebar-content
• content-sidebar-sidebar
• sidebar-sidebar-content
• sidebar-content-sidebar
• full-width-content

Ces termes sont très explicites même pour quelqu’un pas très à l’aise avec l’anglais.

En un clic il est donc possible de définir un agencement différents à vos pages, articles, ou n’importe quel autre post-type de wordpress.

Il est également possible de définir et ajouter votre propres mises en pages, ce fera l’objet d’un autre article.

Donner une mise en page

Pour exemple, prenons le cas d’un blog professionnel.
La maquette de base prévoit une mise en page de type sidebar-content ( donc avec une barre latérale à Gauche du contenu).
Apres quelques réflexions, nous voulons placer la “Sidebar” à droite, comme sur la plupart des autres sites.

Il ne sera pas nécessaire de re-coder le template.
Encore une fois, ce n’est pas entièrement magique, votre CSS doit prévoir ces différentes mises en page.

1) Cas general

Les options générales de Genesis, permettent de determiner une mise en page par défaut, qui sera appliqué en l’absence de consigne particulière.

Un simple changement dans les options permet donc de répercuter l’option de mise en page choisi sur tout le site.

2) Page particulière

Pour chaque page ou article, il est possible de determiner une mise en page spécifique
Par exemple, mettre une mise en page “fullwidth” sans sidebar pour une page de présentation, ou une page de mentions légales.
Nous pouvons aussi imaginer vouloir une page de contact avec un formulaire au centre, une sidebar principale à droite avec un plan, et une seconde sidebar à gauche pour afficher d’autres informations tels que l’adresse, numéro de telephone, etc …

Ces deux exemples montre la capacité de Genesis à pouvoir rapidement mettre à jour les mises en page depuis le Back-end de WordPress.
C’est relativement puissant et efficace, dans le cas de mise à jours, d’ajout de page non prévu, faire de l’A/B test ou même encore pour du prototype rapide associé a quelques plugins sympas comme widget logic .

Fixer la mise en page d’un modele de page …

Pour rappel, dans wordpress une page — au sens wordpress du terme, c’est à dire un post de type ‘page’ — peut utiliser un modele de page.
De base on pourrait penser que cette fonctionnalité ressemble beaucoup au Modèle de page, mais pourtant il s’agit d’une fonctionnalité distincte.

En fait pour aller plus loin, elle peut également être complémentaire.

imaginons dans notre blog professionnel pris en exemple de départ, que nous voulons créer une page pour notre portfolio et voulons qu’elle s’affiche en pleine largeur sans barre latérales.

Nous avons plusieurs possibilité, à commencer par créer simplement une page et lui attribuer un layout “full-width-content” en un simple clic.
Mais nous pouvons aller plus loin;
On peut creer un template de page, et il suffira de rajouter un filtre dans ce fichier php :

<?php
/*
Template Name: Portfolio
*/

/** Force the full width layout on the Portfolio page */
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

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

/** Add the Portfolio widget area */
add_action( 'genesis_loop', 'balance_portfolio_widget' );
function balance_portfolio_widget() {
	dynamic_sidebar( 'portfolio' );
}

genesis();

Ou mieux encore en passant si vous le préférez, par une fonction ce qui vous permettra éventuellement d’autres traitements.

/** Force la mise en page "full width layout" **/
add_filter( 'genesis_pre_get_option_site_layout', 'webvisible_do_layout' );
function webvisible_do_layout( $opt ) 
{
  $opt = 'full-width-content'; // mots-clefs des layout Genesis
  return $opt;
}

Dans le cas de page spéciales, qui ne sont pas vraiment accessibles ( ou difficilement ) depuis l’administration de wordpress, comme par exemple la page des archives, les pages d’erreurs ( 404 également ) ou la home ( front page ). On peut utiliser le fichier function de votre theme pour y placer les filtres qui se chargeront de forcer une mise en page.

/** Force la mise en page "full width layout" **/
add_filter( 'genesis_pre_get_option_site_layout', 'webvisible_do_layout' );
function webvisible_do_layout( $opt ) 
{
    // utilisation des marqueurs conditionnels 
    // cf : http://codex.wordpress.org/fr:Marqueurs_conditionnels
    if ( is_404() ) 
    {
        $opt = 'full-width-content'; 
        return $opt;
    }
    if (is_archive() )
    {
        $opt = 'sidebar-content-sidebar';
        return $opt;
    }
}

Dans la mesure où un theme qui repose sur les fondations de Genesis n’est ni plus ni moins qu’un theme enfant, il peut être plus simple d’utiliser function.php car cela évite d’avoir à re-créer des fichiers spécifiques tel que 404.php, single.php ou archive.php …

Un theme basé sur Genesis pourrait se suffire de deux fichiers et éventuellement d’une miniature : le seul obligatoire pour la creation d’un theme enfant étant donc style.css
http://codex.wordpress.org/fr:Thèmes_Enfant