Utilisation des modèles de présentation

L'exemple ci-dessus définit une présentation à deux colonnes, avec un conteneur masqué pour les widgets qui participent à la connexion de la page tout en n'étant pas visibles.

<div class="hiddenWidgetsDiv">
	<!-- widgets in this container are hidden in the UI by default -->
	<div class="component-container hiddenWidgetsContainer ibmDndRow wpthemeCol12of12 wpthemeFull" name="ibmHiddenWidgets"></div>
	<div style="clear:both"></div>
</div>
<!-- this layout has two equally sized columns -->
<div class="wptheme2Col wpthemeEqual">
	<div class="component-container wpthemeCol wpthemePrimaryContainer ibmDndColumn wpthemeLeft wpthemeCol6of12 wpthemeMedium" name="ibmMainContainer"></div>
	<div class="component-container wpthemeCol wpthemeSecondaryContainer ibmDndColumn wpthemeLeft wpthemeCol6of12 wpthemeMedium" name="secondary"></div>
</div>

La signification des éléments est la suivante :

class="component-container"

L'analyseur de page statique reconnaît ce microformat afin de définir des conteneurs dans le modèle de présentation de page qui peut contenir les composants. Ces composants peuvent être des portlets ou des widgets.

name="ibmMainContainer"

L'attribut name d'un conteneur de composants identifie ce conteneur de façon unique sur la page. L'analyseur de page statique utilise le même nom pour établir une corrélation entre les conteneurs lorsqu'il met à jour la définition de page. L'utilisation de noms cohérents sur les modèles de présentation conserve le contenu de votre conteneur en dépit des changements de modèles. Il doit toujours exister un conteneur nommé ibmMainContainer pour le contenu principal de la page.

name="ibmHiddenWidgets"

Lorsque vous créez vos propres présentations, il doit toujours exister un conteneur au début de la page nommé ibmHiddenWidgets.

name="headline"

S'il existe des conteneurs autres que ibmHiddenWidgets ou ibmMainContainer, utilisez headline pour un en-tête ou une bannière sur la page pour un basculement sans à-coups entre vos présentations et les présentations par défaut.

name="secondary"

Utilisez secondary pour le contenu secondaire par rapport au contenu principal, par exemple, une barre d'options latérale.

name="tertiary"

Utilisez tertiary pour le contenu qui prend en charge le contenu secondaire.

name="additional"

Utilisez additional pour le contenu qui prend en charge le contenu tertiaire.

name="footer"

Utilisez footer pour un objet situé à la fin de la page.

class="ibmDndColumn"

class="ibmDndRow"

Cette classe est requise pour la prise en charge du glisser-déposer côté client. Marquez le conteneur de composants avec l'une de ces classes.

class="wpthemeCol"

class="wpthemeRow"

Cette classe fournit des informations de positionnement du fichier CSS. Marquez le conteneur de composants avec l'une de ces classes.

class="wpthemeHeadlineContainer"

class="wpthemePrimaryContainer"

class="wpthemeSecondaryContainer"

class="wpthemeTertiaryContainer"

Ces classes fournissent des informations de dimensionnement CSS. Marquez le conteneur de composants avec l'une de ces classes. Ces classes sont facultatives. Vous pouvez utiliser l'une de vos propres classes si la taille requise par votre conteneur est différente de celle fournie par ces classes.

class="wpthemeLeft"

Cette classe fournit des informations de positionnement du fichier CSS. Marquez le conteneur de composants avec cette classe s'il s'agit d'un conteneur parmi d'autres sur le même niveau vertical et qu'il flotte pour rester au même niveau.

class="wpthemeCol1of12"

class="wpthemeCol2of12"

class="wpthemeCol1of5"

class="wpthemeCol3of12"

class="wpthemeCol4of12"

class="wpthemeCol2of5"

class="wpthemeCol5of12"

class="wpthemeCol6of12"

class="wpthemeCol7of12"

class="wpthemeCol3of5"

class="wpthemeCol8of12"

class="wpthemeCol9of12"

class="wpthemeCol4of5"

class="wpthemeCol10of12"

class="wpthemeCol11of12"

class="wpthemeCol5of5"

class="wpthemeCol12of12"

Ces classes sont des classes de marqueur CSS. Aucun style n'est défini par défaut pour ces classes. Mais, elles peuvent être utilisées dans les sélecteurs CSS pour varier les styles de contenu et les portlets qui peuvent être déplacés dans ce conteneur. Marquez le conteneur de composants avec l'une de ces classes basées sur la largeur du conteneur par rapport à d'autres conteneurs sur le même niveau vertical. Ces classes sont appelées classes de largeur relative de la grille. Vous pouvez indiquer qu'un conteneur occupe un certain nombre d'unités de largeur de la page. Voir Classes CSS de largeur relative pour les présentations de thème.

class="wpthemeThin"

class="wpthemeNarrow"

class="wpthemeMedium"

class="wpthemeWide"

class="wpthemeFull"

Ces classes sont des classes de marqueur CSS. Aucun style n'est défini par défaut pour ces classes. Mais, elles peuvent être utilisées dans les sélecteurs CSS pour varier les styles de contenu et les portlets qui peuvent être déplacés dans ce conteneur. Marquez le conteneur de composants avec l'une de ces classes basées sur la largeur du conteneur par rapport à d'autres conteneurs sur le même niveau vertical. Ces classes sont appelées classes de largeur relative sémantiques. Voir Classes CSS de largeur relative pour les présentations de thème.

Si vous répétez des sections similaires dans une présentation, ajoutez 2 à n à la fin des noms. Par exemple, utilisez additional2 et additional3 ou headline2, ibmMainContent2 et secondary2. Utilisez cette convention d'attribution de nom pour une meilleure transition lorsque vous basculez entre les présentations.

Si vous souhaitez implémenter un modèle de présentation complexe qui requiert une gestion JavaScript, assurez-vous que les composants JavaScript requis sont chargés et initialisés par le thème. Pour de meilleures performances, générez et regroupez tous les éléments JavaScript utilisés dans un fichier unique pouvant être mis en cache, qui pourra être chargé une fois puis mis en cache par le navigateur.