Retour documentation

Ajout de fonctions aux Thèmes

Les fonctions de Thème WB sont utilisées pour extraire le contenu et les paramètres stockés dans la base de données de WB. De cette façon, le contenu affiché par le Thème fournit automatiquement les informations qui appartiennent à la page affichée. Le texte d'essai et des liens du Thème statique présenté dans la section précédente seront désormais remplacés par les fonctions du Thème WB. L'ordre des fonctions du Thème est celui du fichier "index.html" de haut en bas.

Titre de page dynamique

Suivant les règles du W3C, chaque fichier HTML doit contenir un titre. Le titre est affiché dans la fenêtre du navigateur et est un facteur important pour l'optimisation de la page pour les moteurs de recherche. 

<title>3-col CSS Template based on a template provided by Maxdesign</title>

Remplacer la ligne ci-dessus qui se trouve dans le fichier index.html par le code ci-dessous. 

<title><?php page_title(); ?></title>

La fonction page_title est définie dans /framework/frontend.functions.php et affiche un titre de la page sous la forme: WEBSITE_TITLE - PAGE_TITLE. Pour remplacer le trait d'union par un autre caractère, vous pouvez modifier l'appel de la fonction comme suit:

<title><?php page_title('', '[WEBSITE_TITLE][SPACER][PAGE_TITLE]'); ?></title>

La première chaîne définit le caractère utilisé comme espace [spacer]. La deuxième chaîne contrôle le contenu du titre de la page. L'espace réservé à la deuxième chaîne [WEBSITE_TITLE], [spacer] et [PAGE_TITLE] sera remplacé par leurs valeurs avant l'affichage du titre de la page dans votre Thème.

Meta tag 'charset'

La balise META suivante définit le jeu de caractères par défaut utilisé par le navigateur. Ce tag est essentiel car il fournit des informations sur l'encodage des caractères figurant dans le fichier index.html. Si le jeu de caractères utilisé ne correspond au paramétrage de WB, les caractères affichés peuvent être mauvais.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Remplacer la ligne ci-dessus qui se trouve dans le fichier index.html par le code ci-dessous.

<meta http-equiv="Content-Type" content="text/html; charset=<?php 
if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else 
{ echo 'utf-8'; }?>" /> 

Meta tags 'description' et 'mots-clés'

Les balises META suivantes sont utilisées par les moteurs de recherche. Google affiche le texte de la description, dans ses résultats de recherche. Les mots-clés jouent un rôle important pour l'optimisation pour les moteurs de recherche et devraient être choisis avec soin. Remplacer les deux lignes suivantes:

<meta name="description" content="short description of the pages content" />
<meta name="keywords" content="keywords for searche engines" />

par le code PHP suivant.

<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />

Lien vers des feuilles de style externes

Les feuilles de style externes sont utilisées pour gérer les styles et les positions en dehors des fichiers HTML. Pour utiliser les feuilles de style externes dans un fichier HTML, un lien doit pointer vers la feuille de style dans la section du fichier HTML. Remplacer

<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />

par le code ci-dessous.

<link rel="stylesheet" type="text/css" href="
<?php echo TEMPLATE_DIR; ?>/screen.css" media="screen" /> 

Entête du site

Pour remplacer la bannière d'entête fixe: "Website Title" par le code HTML spécifié dans la zone de texte Entête-Site du backend de WB (Paramètres -> Afficher les options avancées -> Paramètres -> Site-tête), il faut remplacer les lignes ci-dessous

<!-- header -->
    <div id="banner">
        <h1>Website Title</h1>
    </div>

par le code PHP suivant. 

    <!-- header -->
    <div id="banner">
        <h1><?php echo WEBSITE_HEADER; ?></h1>
    </div>

Si vous souhaitez afficher la page titre de la page affichée au lieu de cela, il suffit de remplacer WEBSITE_HEADER par PAGE_TITLE.

Menu principal et barre de navigation supérieure

Les menus de navigation sont créés automatiquement par Website Baker à partir des pages ajoutées par l'intermédiaire du backend. Les niveaux de menu suivent la hiérarchie des pages dans le panneau de configuration. Website Baker possède de multiples menus, qui peuvent être géré par le backend de WB. Le menu de navigation du haut est noté N° 2 (par WB en interne), le menu de navigation à gauche est le N° 1. Remplacer les lignes suivantes dans le fichier index.html 

    <div id="navigation1">
        <ul>
            <li><a href="#">Disclaimer</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
    </div>

par les lignes suivantes.

    <div id="navigation1">
        <?php show_menu(2); ?>
    </div>

Il en est de même pour le menu de navigation sur la gauche. Remplacer les lignes suivantes 

    <div id="navigation2">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Section A</a></li>
            <li><a href="#">Section B</a></li>
         </ul>
    </div>

par

    <div id="navigation2">
        <?php show_menu(1); ?>
    </div>

Contenu principal et nouvelles

Le contenu principal et bloc nouvelles sont stockés dans la base de données de WB. Le Thème est doté de deux blocs différents, l'un pour l'affichage des nouvelles, l'autre pour le contenu principal. Le bloc des nouvelles est marqué 2, le contenu principal est désigné par la lettre 1. Remplacer les lignes suivantes

<div id="news">
        <h3>Latest news:</h3>
        <p>Place holder for the latest news...</p>
    </div>

par la fonction suivante du Thème WB.

    <div id="news">
        <h3>Latest news:</h3>
        <?php page_content(2); ?>
    </div>

Il en est de même pour le contenu principal. Remplacer

    <!-- column for main content -->
    <div id="content">
        <h2>Home</h2>
        <p>Place holder for the main content...</p>
    </div>

par

    <!-- column for main content -->
    <div id="content">
        <?php echo page_content(1); ?>
    </div>

Pied de page du site

Le pied de page peut être défini par WB en arrière-plan: Paramètres -> Voir Options avancées -> Pied de page. Pour extraire le pied de page de la base de données de WB, il faut remplacer les lignes suivantes dans index.html.

    <div id="footer">
        <p>(c) 2007 C. Sommer, for the websitebaker.org help project</p>
    </div>

par le code ci-dessous. 

    <div id="footer">
        <?php page_footer(); ?>
    </div>

Les modifications appliquées au fichier index.html remplacent le texte statique par le contenu de la base de données de WB. Les fonctions ajoutées au Thème WB prennent en compte les modifications des paramètres de WB et les modifications du contenu des différentes pages. De cette façon, une mise en page peut être créé qui peut être utilisée pour toutes les pages.

Ajouter des images

La constante TEMPLATE_DIR est aussi votre amie si vous souhaitez intégrer une image à partir du dossier des Thèmes dans le fichier index.php de votre Thème. Le code ci-dessous ajoute l'image mypic.gif stockée dans le sous-dossier /img de votre répertoire Thème.

<img src="<?php echo TEMPLATE_DIR;?>/img/mypic.gif" alt="mypic" />

Note:
D'autres changements sont nécessaires pour créer un Thème WB à partir des modification du fichier index.html, cela sera expliqués dans la section suivante.


suite -> création d'un thème WB

Copyright (c) 2007 Website Baker Help team
Text and images of this page are licensed under a Creative Commons Attribution-NonCommercial-No Derivative 3.0 Licence. You are free to copy and distribute this work for noncommercial purposes as long as no changes are applied and this copyright notice and a backlink to http://help.websitebaker.org are provided.

Website Baker is released under the GNU General Public License. Copyright © 2004-2007, Ryan Djurovich