Nous travaillons maintenant à partir de la page index.php
du thème WordPress. Après avoir nettoyé tout le code PHP qui s'y trouvait nous pouvons identifier plus facilement la structure HTML de la page :
Cliquez ici pour voir la structure HTML définie dans le fichier index.php
du thème WordPress
Cliquez ici pour voir la structure HTML définie dans le fichier index.php
du thème WordPress
Cliquez ici pour voir la structure HTML définie dans le fichier index.php
du thème WordPress
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- Head --> </head> <body> <div id="header"> <div id="navigation"> <div id="navigationleft"> <!-- Menu principal --> </div> <div id="navigationright"> <!-- Formulaire de recherche --> </div> </div> <div class="clear"></div> <div id="headertitle"> <!-- Titre du site --> </div> <div id="headerdescription"> <!-- Courte description du site --> </div> <div class="clear"></div> </div> <div id="container"> <div id="left"> <!-- Contenu gauche --> </div> <div id="right"> <!-- Contenu principal --> </div> <div id="middle"> <!-- Contenu droite --> </div> <div class="clear"></div> <div id="footer"> <div id="footerleft"> <!-- Qqchose à gauche --> </div> <div id="footerright"> <!-- Qqchose à droite --> </div> </div> </div> </body> </html>
Dans ce gabarit, nous avons :
contextual_website_website_menu-main
utilisé pour désigner le menu. Nous utiliserons donc le bloc modules_website_ConfigurableMenu
pour gérer le menu.modules_solrsearch_form
.sidebar-block
content-block
secondary-sidebar-block
Pour permettre une navigation dans la structure du site, nous placerons également un menu dans la colonne de gauche. Ce menu sera construit automatiquement en fonction de la structure du site, nous utiliserons le bloc modules_website_ConfigurableMenu
.
Nous utiliserons également le bloc modules_website_thread
qui gérera le fil d'Arianne.
Nous créons le fichier themes/foodexpress/templates/threeCols.xml
en plaçant les blocs et définissons les zones de contenus libres :
<?xml version="1.0" encoding="UTF-8"?> <change:templates xmlns:change="http://www.rbs.fr/change/1.0/schema"> <change:template id="threeCols"> <div id="header"> <div id="navigation"> <div id="navigationleft"> <!-- Menu principal --> <change:templateblock type="modules_website_ConfigurableMenu" __mode="tag" __tag="contextual_website_website_menu-main" __displayMode="inline" __depth="1" /> </div> <div id="navigationright"> <!-- Formulaire de recherche --> <change:templateblock type="modules_solrsearch_form" /> </div> </div> <div id="headertitle"> Titre du site </div> <div id="headerdescription"> Courte description du site </div> <div class="clear"></div> </div> <div id="container"> <!-- file d'Arianne --> <change:templateblock type="modules_website_thread" /> <div id="left"> <div class="sidebar"> <change:templateblock type="modules_website_ConfigurableMenu" __mode="contextual" __displayMode="contextual" __deployAll="false" __showTitle="true" __depth="2" __startLevel="1" /> </div> <div class="sidebar"> <!-- Barre latérale de contenu --> <change:content id="sidebar-block" /> </div> </div> <div id="middle"> <div class="sidebox"> <!-- Zone de contenu principale --> <change:content id="content-block" /> </div> </div> <div id="right"> <a name="content"></a> <div id="freeLocation" orient="vertical"> <!-- Seconde barre latérale de contenu --> <change:content id="secondary-sidebar-block" /> </div> </div> <div class="clear"></div> <div id="footer"> <div id="footerleft"> Quelque chose à gauche </div> <div id="footerright"> Quelque chose à droite </div> <change:templateblock type="modules_website_ConfigurableMenu" __mode="tag" __tag="contextual_website_website_menu-footer" __displayMode="inline" __depth="1" /> </div> </div> </change:template> </change:templates>
On déclare ensuite notre template dans le fichier themes/foodexpress/install.xml
pour qu'il soit bien pris en compte avec ses CSS et autres paramètres de configuration :
<?xml version="1.0" encoding="UTF-8"?> <script> <binding fileName="modules/theme/persistentdocument/import/theme_binding.xml"/> <rootfolder module="theme"> <theme id="foodexpress" byCodename="foodexpress" label="Foodexpress" description="Theme converted from WP"> <pagetemplate byCodename="foodexpress/threeCols" doctype="XHTML-1.0-Transitional" /> </theme> </rootfolder> </script>
Dans le backoffice, nous n'avons pas nécessairement besoin de tous les styles CSS, nous pouvons donc simplifier le template au maximum.
Nous allons déclarer dans notre fichier themes/foodexpress/templates/threeCols.xml
un nouveau noeud XML change:template
en renseignant l'attribut content-type
par xul
ce qui permet d'indiquer que ce template ne vaut que pour le backoffice et qu'il peut contenir des éléments du langage XUL.
Dans cette version optimisée pour le backoffice nous n'afficherons que l'image de la bannière et les colonnes pour la saisie de contenu. Nous nous aiderons des éléments XUL vbox
(comprendre vertical box) et hbox
(comprendre horizontal box) pour placer nos colonnes.
Ce qui fait que nous ajouterons le noeud XML suivant dans notre template de page :
... <change:template id="threeCols" content-type="xul"> <vbox> <box id="header" /> <vbox id="container"> <hbox> <vbox id="left"> <!-- Barre latérale de contenu --> <change:content id="sidebar-block" /> </vbox> <vbox id="middle"> <!-- Zone de contenu principale --> <change:content id="content-block" /> </vbox> <vbox id="right"> <!-- Seconde barre latérale de contenu --> <change:content id="secondary-sidebar-block" /> </vbox> </hbox> </vbox> </vbox> </change:template> </change:templates>
Pour que le thème soit opérationnel en backoffice, il faut l'installer, c'est que nous allons faire :
php framework/bin/change.php theme.install foodexpress == Install == Theme foodexpress installed successfully == Clear webapp cache == Webapp cache directory cleared => Exiting...
En l'état, même si je peux ajouter le gabarit de mon thème à un site et l'utiliser pour une page, ce dernier n'as pas de CSS, ce qui donne un rendu très pauvre comme le montre la capture d'écran ci-dessous.