Création d’un template FrontOffice
Avant de commencer…
Tout d’abord, si vous ne savez pas ce qu’est un template, lisez cette Introduction aux templates
Un template ‘Frontoffice’ permet de modifier la mise en page du site web géré par PLOOPI.
Vous pouvez par exemple modifier :
- l’emplacement et la forme des rubriques (jusqu‘à plusieurs niveaux de profondeur)
- l’emplacement et la forme des menus (articles)
- l’emplacement du corps de page
- la mise en page des différents type d’information : date de modif, auteur, fil d’ariane, moteur de recherche, etc…
Contenu d’un template
Les templates frontoffice sont installés dans le dossier ./templates/frontoffice
Chaque template est stocké dans un sous-dossier séparé.
Un template est constitué d’un ou plusieurs fichiers mais le seul fichier obligatoire est le fichier index.tpl
Par exemple si on veut créer le template ‘test’, il faut d’abord créer un dossier ./templates/frontoffice/test , puis créer un fichier index.tpl dans ce dossier.
D’autres éléments optionnels peuvent être ajoutés comme par exemple des images, des feuilles de styles ou des fichiers javascript (liste non exhaustive). Il conviendra au développeur/intégrateur d’organiser comme bon lui semble le contenu du dossier du template.
Fichiers optionnels
- home.tpl : Ce fichier permet de définir un gabarit spécial pour la page d’accueil du site. Si ce gabarit n’existe pas, index.tpl est utilisé par défaut.
- search.tpl : Ce fichier permet de définir un gabarit spécial pour la page de résultat de recherche. Si ce gabarit n’existe pas, index.tpl est utilisé par défaut.
- rss.tpl : Ce fichier permet de définir le gabarit d’affichage d’un flux rss inséré dans une page.
- news.tpl : Ce fichier permet de définir le gabarit d’affichage des “news” lorsque le module news est inséré dans une page.
- forms.tpl : Ce fichier permet de définir le gabarit d’affichage d’un formulaire inséré dans une page (via le module forms).
Modification du gabarit principal (index.tpl)
Le gabarit principal ( index.tpl ) et l‘élément central du template. C’est lui qui gère le positionnement des différents éléments dans la page (partie visible) et c’est également lui qui gère les inclusions dynamiques (javascript, styles) ou les metas.
Blocs
Note: les blocs seront notés B et les blocs conditionnels seront notés BC
- path (B) : Aide à la navigation : Localisation du lecteur dans le site (Fil d’ariane).
| Balise |
Contenu |
{path.DEPTH} |
Profondeur dans le chemin |
{path.LABEL} |
Intitulé de la rubrique |
{path.LINK} |
Lien vers la rubrique |
- ploopi_js (B) : Liste des fichiers javascript utilisées par PLOOPI.
| Balise |
Contenu |
{ploopi_js.PATH} |
Le chemin complet vers le fichier javascript |
- rootX (B) : Racine du menu X où X est la position de la racine dans l’arborescence des rubriques du site.
- rootX.heading1 (B) : Rubriques de niveau 1 de la racine X. Un rubrique de niveau 1 est toujours rattachée à une racine (root1, root2, etc..)
| Balise |
Contenu |
{rootX.heading1.COLOR} |
Couleur de la rubrique (contient en général le code hexa de la couleur #rrggbb) |
{rootX.heading1.DEPTH} |
Profondeur de la rubrique (entier) |
{rootX.heading1.DESCRIPTION} |
Description de la rubrique |
{rootX.heading1.ID} |
Identifiant de la rubrique (entier) |
{rootX.heading1.FREE1} |
Champ libre 1 |
{rootX.heading1.FREE2} |
Champ libre 2 |
{rootX.heading1.LABEL} |
L’intitulé de la rubrique |
{rootX.heading1.LINK} |
Le lien vers la rubrique |
{rootX.heading1.LINK_TARGET} |
Cible du lien vers la rubrique |
{rootX.heading1.POSITION} |
La position de la la rubrique (entier) |
{rootX.heading1.POSX} |
Coordonnée X de la position de la rubrique (entier) |
{rootX.heading1.POSY} |
Coordonnée Y de la position de la rubrique (entier) |
{rootX.heading1.SEL} |
Contient ‘selected’ si la rubrique est sélectionnée |
- rootX.heading1.headingY (B) : Rubriques de niveau Z de la rubrique Y de la racine X
| Balise |
Contenu |
{rootX.headingY.headingZ.COLOR} |
Couleur de la rubrique (contient en général le code hexa de la couleur #rrggbb) |
{rootX.headingY.headingZ.DEPTH} |
Profondeur de la rubrique (entier) |
{rootX.headingY.headingZ.DESCRIPTION} |
Description de la rubrique |
{rootX.headingY.headingZ.ID} |
Identifiant de la rubrique (entier) |
{rootX.headingY.headingZ.FREE1} |
Champ libre 1 |
{rootX.headingY.headingZ.FREE2} |
Champ libre 2 |
{rootX.headingY.headingZ.LABEL} |
L’intitulé de la rubrique |
{rootX.headingY.headingZ.LINK} |
Le lien vers la rubrique |
{rootX.headingY.headingZ.LINK_TARGET} |
Cible du lien vers la rubrique |
{rootX.headingY.headingZ.POSITION} |
La position de la la rubrique (entier) |
{rootX.headingY.headingZ.POSX} |
Coordonnée X de la position de la rubrique (entier) |
{rootX.headingY.headingZ.POSY} |
Coordonnée Y de la position de la rubrique (entier) |
{rootX.headingY.headingZ.SEL} |
Contient ‘selected’ si la rubrique est sélectionnée |
- switch_atomfeed_heading (BC) : Actif si le backend est activé sur la rubrique (Affichage du flux atom pour la rubrique)
| Balise |
Contenu |
{switch_atomfeed_heading.URL} |
Adresse absolue du flux |
{switch_atomfeed_heading.TITLE} |
Titre du flux |
- switch_atomfeed_site (BC) : Actif si le backend est activé sur le site (Affichage du flux atom pour le site)
| Balise |
Contenu |
{switch_atomfeed_site.URL} |
Adresse absolue du flux |
{switch_atomfeed_site.TITLE} |
Titre du flux |
- switch_content_heading (BC) : Actif si la rubrique est destinée à afficher son contenu (rubriques/pages)
- switch_content_heading.page (B)
| Balise |
Contenu |
{switch_content_heading.page.REFERENCE} |
Référence de la page |
{switch_content_heading.page.LABEL} |
Titre de la page |
{switch_content_heading.page.AUTHOR} |
Auteur de la page |
{switch_content_heading.page.VERSION} |
Version de la page |
{switch_content_heading.page.DATE} |
Date de la page |
{switch_content_heading.page.LASTUPDATE_DATE} |
Date de dernière modification de la page |
{switch_content_heading.page.LASTUPDATE_TIME} |
Heure de dernière modification de la page |
{switch_content_heading.page.DATE_PUB} |
Date de début de mise en ligne |
{switch_content_heading.page.DATE_UNPUB} |
Date de début de mise hors ligne |
{switch_content_heading.page.CONTENT} |
Contenu de la page |
{switch_content_heading.page.LINK} |
URL de la page |
{switch_content_heading.page.SEL} |
Contient ‘selected’ ou ‘’ si la page est sélectionnée ou non |
{switch_content_heading.page.POSITION} |
Position de la page dans la rubrique (ordre) |
- switch_content_heading.subheading1 (B) : Sous-Rubriques de premier niveau
| Balise |
Contenu |
{switch_content_heading.subheading1.COLOR} |
Couleur de la rubrique (contient en général le code hexa de la couleur #rrggbb) |
{switch_content_heading.subheading1.DEPTH} |
Profondeur de la rubrique (entier) |
{switch_content_heading.subheading1.DESCRIPTION} |
Description de la rubrique |
{switch_content_heading.subheading1.ID} |
Identifiant de la rubrique (entier) |
{switch_content_heading.subheading1.FREE1} |
Champ libre 1 |
{switch_content_heading.subheading1.FREE2} |
Champ libre 2 |
{switch_content_heading.subheading1.LABEL} |
Intitulé de la rubrique |
{switch_content_heading.subheading1.LINK} |
Lien vers la rubrique |
{switch_content_heading.subheading1.LINK_TARGET} |
Cible du lien vers la rubrique |
{switch_content_heading.subheading1.POSITION} |
Position de la la rubrique (entier) |
{switch_content_heading.subheading1.POSX} |
Coordonnée X de la position de la rubrique (entier) |
{switch_content_heading.subheading1.POSY} |
Coordonnée Y de la position de la rubrique (entier) |
{switch_content_heading.subheading1.SEL} |
Contient ‘selected’ si la rubrique est sélectionnée |
- switch_content_heading.subheading1.subheadingX.subheadingY (B) : Sous-Rubriques de niveau Y
| Balise |
Contenu |
{switch_content_heading.subheading1.subheadingX.subheadingY.COLOR} |
Couleur de la rubrique (contient en général le code hexa de la couleur #rrggbb) |
{switch_content_heading.subheading1.subheadingX.subheadingY.DEPTH} |
Profondeur de la rubrique (entier) |
{switch_content_heading.subheading1.subheadingX.subheadingY.DESCRIPTION} |
Description de la rubrique |
{switch_content_heading.subheading1.subheadingX.subheadingY.ID} |
Identifiant de la rubrique (entier) |
{switch_content_heading.subheading1.subheadingX.subheadingY.FREE1} |
Champ libre 1 |
{switch_content_heading.subheading1.subheadingX.subheadingY.FREE2} |
Champ libre 2 |
{switch_content_heading.subheading1.subheadingX.subheadingY.LABEL} |
L’intitulé de la rubrique |
{switch_content_heading.subheading1.subheadingX.subheadingY.LINK} |
Le lien vers la rubrique |
{switch_content_heading.subheading1.subheadingX.subheadingY.LINK_TARGET} |
Cible du lien vers la rubrique |
{switch_content_heading.subheading1.subheadingX.subheadingY.POSITION} |
La position de la la rubrique (entier) |
{switch_content_heading.subheading1.subheadingX.subheadingY.POSX} |
Coordonnée X de la position de la rubrique (entier) |
{switch_content_heading.subheading1.subheadingX.subheadingY.POSY} |
Coordonnée Y de la position de la rubrique (entier) |
{switch_content_heading.subheading1.subheadingX.subheadingY.SEL} |
Contient ‘selected’ si la rubrique est sélectionnée |
- switch_content_message (BC) : Actif si un message (brut) doit être affiché (retour après désabonnement par exemple)
- switch_content_page (BC) : Actif si une page est affichée.
- switch_content_sitemap (BC) : Actif si la rubrique est destinée à afficher le plan du site
- switch_content_sitemap.heading0 (B) : Racines du site (Rubriques de niveau 0)
| Balise |
Contenu |
{switch_content_sitemap.heading0.LABEL} |
Intitulé de la rubrique |
{switch_content_sitemap.heading0.LINK} |
Lien vers la rubrique |
{switch_content_sitemap.heading0.LINK} |
Lien vers la rubrique |
- switch_content_sitemap.heading0.headingX.headingY (B) : Rubriques de niveau Y du site
| Balise |
Contenu |
{switch_content_sitemap.heading0.headingX.headingY.LABEL} |
Intitulé de la rubrique |
{switch_content_sitemap.heading0.headingX.headingY.LINK} |
Lien vers la rubrique |
{switch_content_sitemap.heading0.headingX.headingY.LINK} |
Lien vers la rubrique |
- switch_pages (BC) : Actif s’il y a des pages à afficher dans la rubrique
- switch_pages.page (B) : Pages de la rubrique courante
| Balise |
Contenu |
{page.REFERENCE} |
Référence de la page |
{page.LABEL} |
Titre de la page |
{page.AUTHOR} |
Auteur de la page |
{page.VERSION} |
Version de la page |
{page.DATE} |
Date de la page |
{page.LASTUPDATE_DATE} |
Date de dernière modification de la page |
{page.LASTUPDATE_TIME} |
Heure de dernière modification de la page |
{page.DATE_PUB} |
Date de début de mise en ligne |
{page.DATE_UNPUB} |
Date de début de mise hors ligne |
{page.CONTENT} |
Contenu de la page |
{page.LINK} |
URL de la page |
{page.SEL} |
Contient ‘selected’ ou ‘’ si la page est sélectionnée ou non |
{page.POSITION} |
Position de la page dans la rubrique (ordre) |
- switch_rssfeed_heading (BC) : Actif si le backend est activé sur la rubrique (Affichage du flux rss pour la rubrique)
| Balise |
Contenu |
{switch_rssfeed_heading.URL} |
Adresse absolue du flux |
{switch_rssfeed_heading.TITLE} |
Titre du flux |
- switch_rssfeed_site (BC) : Actif si le backend est activé sur le site (Affichage du flux rss pour le site)
| Balise |
Contenu |
{switch_rssfeed_site.URL} |
Adresse absolue du flux |
{switch_rssfeed_site.TITLE} |
Titre du flux |
- switch_search (BC) : Actif si le résultat d’une recherche est affiché.
- switch_search.switch_notfound (BC) : Actif si la recherche ne propose pas de réponse.
- switch_search.result (B) : Permet d’afficher le résulat d’une recherche. Chaque itération affiche le détail d’un résultat vers une page ou un document.
| Balise |
Contenu |
{switch_search.result.AUTHOR} |
Auteur du résultat |
{switch_search.result.DATE} |
Date du résultat |
{switch_search.result.EXTRACT} |
Extraits du résultat contenant les termes recherchés |
{switch_search.result.LINK} |
Lien du résultat |
{switch_search.result.METATITLE} |
META “title” du résultat |
{switch_search.result.METAKEYWORDS} |
META “keywords” du résultat |
{switch_search.result.METADESCRIPTION} |
META “description” du résultat |
{switch_search.result.RELEVANCE} |
Pertinence du résultat en % |
{switch_search.result.SIZE} |
Taille en Ko du résultat |
{switch_search.result.TITLE} |
Intitulé du résultat |
- switch_subscription (BC) : Actif si le bloc ‘abonnement’ est activé sur la rubrique courante
| Balise |
Contenu |
{switch_subscription.ACTION} |
URL du formulaire de validation |
{switch_subscription.ROOTID} |
Identifiant de la rubrique racine |
{switch_subscription.HEADINGID} |
Identifiant de la rubrique courante |
- switch_subscription.switch_response (BC) : Actif si une demande d’abonnement a été effectuée
| Balise |
Contenu |
{switch_subscription.switch_response.CONTENT} |
Contenu du message |
- switch_tagsearch (BC) : Actif si le résultat d’une recherche par tag est affiché.
- switch_tagsearch.result (B) : Permet d’afficher le résultat d’une recherche par tag. Chaque itération affiche le détail d’un résultat vers une page ou un document.
| Balise |
Contenu |
{switch_tagsearch.result.TITLE} |
Titre de l’article |
{switch_tagsearch.result.LINK} |
Lien vers l’article |
{switch_tagsearch.result.SIZE} |
Taille de l’article en ko |
{switch_tagsearch.result.AUTHOR} |
Auteur de l’article |
{switch_tagsearch.result.DATE} |
Date de l’article |
{switch_tagsearch.result.META_TITLE} |
Meta-Titre de l’article |
{switch_tagsearch.result.META_KEYWORDS} |
Meta-Mots clés de l’article |
{switch_tagsearch.result.META_DESCRIPTION} |
Meta-Description de l’article |
Variables
| Balise |
Contenu |
| Rubrique de niveau X {HEADING1_….} {HEADING2_…} |
{HEADING<X>_ID} |
Identifiant de la rubrique de niveau X sélectionnée (entier) |
{HEADING<X>_COLOR} |
Code couleur de la rubrique de niveau X sélectionnée |
{HEADING<X>_DESCRIPTION} |
Description de la rubrique de niveau X sélectionnée |
{HEADING<X>_FREE1} |
Champ libre 1 de la rubrique de niveau X sélectionnée |
{HEADING<X>_FREE2} |
Champ libre 2 de la rubrique de niveau X sélectionnée |
{HEADING<X>_POSITION} |
Position de la rubrique de niveau X sélectionnée (entier) |
{HEADING<X>_TITLE} |
Intitulé de la rubrique de niveau X sélectionnée |
| Page courante |
{PAGE_REFERENCE} |
Référence de la page |
{PAGE_TITLE} |
Titre de la page |
{PAGE_KEYWORDS} |
Mots clés associés à la page |
{PAGE_DESCRIPTION} |
Description de la page |
{PAGE_META_TITLE} |
META “title” de la page |
{PAGE_META_KEYWORDS} |
META “keywords” de la page |
{PAGE_META_DESCRIPTION} |
META “description” de la page |
{PAGE_AUTHOR} |
Auteur de la page |
{PAGE_VERSION} |
Version de la page |
{PAGE_DATE} |
Date de la page |
{PAGE_LASTUPDATE_DATE} |
Date de dernière modification de la page |
{PAGE_LASTUPDATE_TIME} |
Heure de dernière modification de la page |
{PAGE_LASTUPDATE_USER_LASTNAME} |
Nom du dernier utilisateur ayant modifié la page |
{PAGE_LASTUPDATE_USER_FIRSTNAME} |
Prénom du dernier utilisateur ayant modifié la page |
{PAGE_LASTUPDATE_USER_LOGIN} |
Login du dernier utilisateur ayant modifié la page |
{PAGE_CONTENT} |
Contenu de la page |
| META (keywords, description, etc…) |
{WORKSPACE_META_AUTHOR} |
META “author” |
{WORKSPACE_META_COPYRIGHT} |
META “copyright” |
{WORKSPACE_META_DESCRIPTION} |
META “description” |
{WORKSPACE_META_KEYWORDS} |
META “keywords” |
{WORKSPACE_META_ROBOTS} |
META “robots” |
| Date |
{DATE_DAY} |
Jour du mois de 1 à 31 |
{DATE_MONTH} |
Mois de l’année de 1 à 12 |
{DATE_YEAR} |
Année sur 4 chiffres |
{DATE_DAYTEXT} |
Jour de la semaine en lettres |
{DATE_MONTHTEXT} |
Mois de l’année en lettres |
{LASTUPDATE_DATE} |
Date de la dernière mise à jour du site |
{LASTUPDATE_TIME} |
Heure de la dernière mise à jour du site |
| RSS |
{SITE_RSSFEED_URL} |
Url du flux RSS du Site |
{SITE_RSSFEED_TITLE} |
Intitulé du flux RSS du Site |
{HEADING_RSSFEED_URL} |
Url du flux RSS de la rubrique courante |
{HEADING_RSSFEED_TITLE} |
Intitulé du flux RSS de la rubrique courante |
| Divers |
{TEMPLATE_PATH} |
Chemin du template sélectionné |
{ADDITIONAL_JAVASCRIPT} |
Contenu javascript additionnel fourni par Ploopi |
{SITE_CONNECTEDUSERS} |
Nombre d’utilisateurs connectés sur le site |
{SITE_TITLE} |
Titre du site |
{PAGE_QUERYSTRING} |
Requête de recherche |
{HOST} |
| Recherche |
{SEARCH_RESPONSES} |
Nombre de réponses du moteur de recherche |
Modification du gabarit des formulaires (forms.tpl)
Balises utilisables dans le template forms.tpl
| Balise |
Contenu |
{FORM_ID} |
Identifiant du formulaire |
{FORM_DESCRIPTION} |
Description du formulaire |
{HEADINGID} |
{ARTICLEID} |
{WCE_MODE} |
{ACTION} |
Action à effectuer lors de la validation |
- formfields : Bloc principal des templates Forms
- switch_field : Fils de formfields
| Balise |
Contenu |
{formfields.switch_field.ID} |
Identifiant du champ (n°) |
{formfields.switch_field.LABELID} |
Identifiant HTML du champ (= field_+ ID du champ) |
{formfields.switch_field.NAME} |
Name HTML du champ (= field__X_) |
{formfields.switch_field.LABEL} |
Nom du champ |
{formfields.switch_field.DESCRIPTION} |
Description du champ |
{formfields.switch_field.NEEDED} |
Champ requis |
{formfields.switch_field.INTERLINE} |
Interligne |
{formfields.switch_field.VALUE} |
Valeur |
{formfields.switch_field.TABINDEX} |
Tabindex HTML du champ (1000 + position donnée) |
{formfields.switch_field.MAXLENGTH} |
Taille de saisie maximum (255 par défaut) |
{formfields.switch_field.CONTENT} |
Contenu |
- formfields.switch_field.switch_required : Fils de switch_field — Existe si une ou des champs existent avec l’option “Requis”.
- formfields.switch_field.switch_autoincrement : Fils de switch_field — Existe si une ou des champs de type “numéro auto” sont dans le formulaire.
- formfields.switch_field.switch_text : Fils de switch_field — Existe si une ou des champs de type “texte” sont dans le formulaire.
- formfields.switch_field.switch_text_date : Fils de switch_field — Existe si une ou des champs de type “texte” au format “date” sont dans le formulaire.
- formfields.switch_field.switch_textarea : Fils de switch_field — Existe si une ou des champs de type “texte avancé” sont dans le formulaire.
- formfields.switch_field.switch_file : Fils de switch_field — Existe si une ou des champs de type “Fichier” sont dans le formulaire.
- formfields.switch_field.switch_select : Fils de switch_field — Existe si une ou des champs de type “Liste de choix” sont dans le formulaire.
| Balise |
Contenu |
{formfields.switch_field.switch_select.values.VALUE} |
Valeur par defaut |
{formfields.switch_field.switch_select.values.SELECTED} |
Indique si la valeur est sélectionnée (selected) |
{formfields.switch_field.switch_select.values.SELECTED_XHTML} |
Indique si la valeur est sélectionnée au format XHTML Strict (selected=“selected”) |
- formfields.switch_field.switch_checkbox : Fils de switch_field — Existe si une ou des champs de type “Case a cocher” sont dans le formulaire.
- formfields.switch_field.switch_checkbox.columns : Fils de switch_checkbox
| Balise |
Contenu |
{formfields.switch_field.switch_checkbox.columns.WITH} |
Largeur de la colonne |
- formfields.switch_field.switch_checkbox.columns.values : Fils de columns
| Balise |
Contenu |
{formfields.switch_field.switch_checkbox.columns.values.ID} |
Identifiant de l’option à cocher |
{formfields.switch_field.switch_checkbox.columns.values.VALUE} |
Valeur de l’option à cocher |
{formfields.switch_field.switch_checkbox.columns.values.NAME} |
Identifiant HTML du champ (field_+ ID du champ +[]) |
{formfields.switch_field.switch_checkbox.columns.values.CHECKED} |
Indique si l’option est cochée (checked) |
{formfields.switch_field.switch_checkbox.columns.values.CHECKED_XHTML} |
Indique si l’option est cochée au format XHTML Strict (checked=“checked”) |
- formfields.switch_field.switch_radio : Fils de switch_field — Existe si une ou des champs de type “Bouton radio” sont dans le formulaire.
- formfields.switch_field.switch_radio.columns : Fils de switch_radio
| Balise |
Contenu |
{formfields.switch_field.switch_radio.columns.WITH} |
Largeur de la colonne |
- formfields.switch_field.switch_radio.columns.values : Fils de columns
| Balise |
Contenu |
{formfields.switch_field.switch_radio.columns.values.ID} |
Identifiant de l’option radio |
{formfields.switch_field.switch_radio.columns.values.VALUE} |
Valeur de l’option radio |
{formfields.switch_field.switch_radio.columns.values.NAME} |
Identifiant HTML du champ (field_+ ID du champ +[]) |
{formfields.switch_field.switch_radio.columns.values.CHECKED} |
Indique si l’option est sélectionnée (checked) |
{formfields.switch_field.switch_radio.columns.values.CHECKED_XHTML} |
Indique si l’option est sélectionnée au format XHTML Strict (checked=“checked”) |
- formfields.switch_field.switch_color : Fils de switch_field — Existe si une ou des champs de type “Palette de couleur” sont dans le formulaire.
| Balise |
Contenu |
{formfields.switch_field.switch_color.VALUE} |
Valeur par défaut |
{formfields.switch_field.switch_color.SELECTED} |
Indique si la valeur est sélectionnée (selected) |
{formfields.switch_field.switch_color.SELECTED_XHTML} |
Indique si la valeur est sélectionnée au format XHTML Strict (selected=“selected”) |
Autres blocs et balises, modules et fichiers complémentaires
