David Degliame

Un peu de tout et du Web

  • Accueil
  • Publications
  • Contact

WP Genesis et la gestion de la mise en page

27 octobre 2015 par David

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

 

les six mises en page wordpress de genesis

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 …

wordpress-attribut-de-la-pagePour 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 :

[pastacode lang= »php » message= »filtre genesis_pre_get_option_site_layout » highlight= »7″ provider= »manual » manual= »%3C%3Fphp%0A%2F*%0ATemplate%20Name%3A%20Portfolio%0A*%2F%0A%0A%2F**%20Force%20the%20full%20width%20layout%20on%20the%20Portfolio%20page%20*%2F%0Aadd_filter(%20’genesis_pre_get_option_site_layout’%2C%20’__genesis_return_full_width_content’%20)%3B%0A%0A%2F**%20Remove%20the%20standard%20loop%20*%2F%0Aremove_action(%20’genesis_loop’%2C%20’genesis_do_loop’%20)%3B%0A%0A%2F**%20Add%20the%20Portfolio%20widget%20area%20*%2F%0Aadd_action(%20’genesis_loop’%2C%20’balance_portfolio_widget’%20)%3B%0Afunction%20balance_portfolio_widget()%20%7B%0A%09dynamic_sidebar(%20’portfolio’%20)%3B%0A%7D%0A%0Agenesis()%3B »/]

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

[pastacode lang= »php » message= » » highlight= » » provider= »manual » manual= »%0A%2F**%20Force%20la%20mise%20en%20page%20%22full%20width%20layout%22%20**%2F%0Aadd_filter(%20’genesis_pre_get_option_site_layout’%2C%20’webvisible_do_layout’%20)%3B%0Afunction%20webvisible_do_layout(%20%24opt%20)%20%0A%7B%0A%20%20%24opt%20%3D%20’full-width-content’%3B%20%2F%2F%20mots-clefs%20des%20layout%20Genesis%0A%20%20return%20%24opt%3B%0A%7D%0A »/]

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.

[pastacode lang= »php » message= » » highlight= » » provider= »manual » manual= »%2F**%20Force%20la%20mise%20en%20page%20%22full%20width%20layout%22%20**%2F%0Aadd_filter(%20’genesis_pre_get_option_site_layout’%2C%20’webvisible_do_layout’%20)%3B%0Afunction%20webvisible_do_layout(%20%24opt%20)%20%0A%7B%0A%20%20%20%20%2F%2F%20utilisation%20des%20marqueurs%20conditionnels%20%0A%20%20%20%20%2F%2F%20cf%20%3A%20http%3A%2F%2Fcodex.wordpress.org%2Ffr%3AMarqueurs_conditionnels%0A%20%20%20%20if%20(%20is_404()%20)%20%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%24opt%20%3D%20’full-width-content’%3B%20%0A%20%20%20%20%20%20%20%20return%20%24opt%3B%0A%20%20%20%20%7D%0A%20%20%20%20if%20(is_archive()%20)%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%24opt%20%3D%20’sidebar-content-sidebar’%3B%0A%20%20%20%20%20%20%20%20return%20%24opt%3B%0A%20%20%20%20%7D%0A%7D%0A »/]

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

 

Classé sous :Web Balisé avec :genesis, wordpress

Une remarque sur le sujet ?

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

Derniers posts :

Full Path Disclosure sur rss-functions.php de WordPress

Qui a déjà reçu un panpan-culcul de Bing ? de Yahoo ? d’Exalead ? de Qwant ? de Baidu ? Yandex ? ou encore de DuckDuckGo ?

Utilisez les balises de courrier spéciaux dans l’extension Contact Form 7 pour WordPress

Enregistrer un nom de domaine expiré peut constituer une concurrence déloyale

Ouverture du coworking au Périscop’ de Saint-Nazaire

Les espaces de Coworking deviennent tendance !

erreurs d’envois de mails avec CF7, entre le spam et histoires de caches

Un espace dédié au numérique à Saint-Nazaire ?

Un problème pour envoyer vos mails sur ovh avec le smtp de mandrill