Outils pour utilisateurs

Outils du site


Panneau latéral

html_design:convert_wp:get_layout

Récupérer le gabarit de la page

Extraction de la structure

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 :

  • Deux zones dynamiques et donc gérées par des blocs de page :
    • Le menu principal : Ce menu utilisera l'étiquette contextual_website_website_menu-main utilisé pour désigner le menu. Nous utiliserons donc le bloc modules_website_ConfigurableMenu pour gérer le menu.
    • Le formulaire de recherche : Implémenté dans le bloc modules_solrsearch_form.
  • Trois zones de contenu libre où le rédacteur pourra déposer ce qu'il lui plaît :
    • La colonne de gauche : sera la zone de contenu sidebar-block
    • La colonne centrale et principale : sera la zone de contenu content-block
    • La colonne de droite : sera la zone de contenu 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.

Création du gabarit de page

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>

Optimiser le gabarit pour le backoffice

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>

Installation du thème

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...

Screenshot

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.

Récupérons maintenant les CSS

html_design/convert_wp/get_layout.txt · Dernière modification: 2017/01/19 14:54 (modification externe)