Language: de DE en EN nl NL
| Print | Sitemap |

Template Functies Toevoegen

U bent hier: Gevorderden Docu > Ontwerpers Gids > Template Functies Toevoegen
Een bestaande HTML Template aanpassen << | Ontwerpers Gids | >> Een WB Template Maken

De WB template functies worden gebruikt om instellingen en inhoud op te halen uit de WB database. Op deze manier wordt de inhoud automatisch vai het template getoond, en bevat deze de informatie die hoort bij de getoonde pagina. De voorbeeld-tekst en links van het statische template, in het vorige hoofdstuk, worden nu vervangen door de WB template functies. De volgeorde van de template functies worden volgens het bestand index.html van boven naar beneden behandeld.

Dynamische pagina titel

Volgens de W3C regels moet elk HTML bestand een titel bevatten. De titel wordt getoond in het browser-scherm en is een belangrijke factor voor zoekmachine-optimalisatie.

<title>3-kol CSS Template gebaseerd op een template gemaakt door Maxdesign</title >

Vervang de regel hierboven in het bestand index.html met de code hieronder.

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

De functie page_title is gedefiniëerd in /frameworks/frontend.functions.php en toont een pagina-titel in de vorm: WEBSITE_TITEL - PAGINA_TITEL. Om het tussen-karakter (spacer) te vervangen met een ander karakter, kan de functie als volgt gewijzigd worden:

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

De eerste string definiëerd het karakter dat gebruikt wordt als spacer [SPACER]. De tweede string bepaald hoe de pagina-titel weergegeven wordt. De plaatshouders [WEBSITE_TITLE], [SPACER] en [PAGE_TITLE] zullen vervangen worden door hun waarden, voordat de pagina-titel getoond wordt in uw template.

Meta tag karakterset

De volgende meta tag bepaald de standaard karakterset die door de browser gebruikt wordt. Deze toevoeging is essentieel, want het bevat informatie over de codering van de karakters in het betand index.html. Als de karakterset die gebruikt wordt niet in de WB-instellingen past, kunnen de karakters fout weergegeven worden.

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

Vervang de regel hierboven in het bestand index.html door de PHP code hieronder.

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

Meta tags voor de omschrijving en sleutelwoorden

De volgende meta tags worden gebruikt door zoekmachines. Google gebruikt de omschrijving in zijn zoekresultaten. Steekwoorden spelen een grote rol voor de zoekmachine-optimalisatie en dienen zorgvuldig gekozen te worden.
Vervang de volgende twee regels

<meta name="description" content="korte omschrijving van de inhoud van de pagina" />
<meta name="keywords" content="sleutelwoorden voor zoekmachines" />

door de onderstaande PHP code

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

Link naar externe style sheets

Externe style sheets worden gebruikt om stijlen en posities te beheren, los van de HTML-bestanden. Om gebruik te maken van externe style sheets in een HTML=bestand, dient men een link te leggen naar de stylesheet in de <head> sectie van het HTML-bestand.
Vervang

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

door de volgende code.

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

 

Website Header

Om de vaste koptekst: "website Titel" te vervangen door de HTML code, gespecificeerd in de instelling Website-header via de WB backend (Instellingen -> Bekijk geavanceerde opties -> Algemene instellingen -> Website Header), dient men de volgende regels te vervangen

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

door de volgende PHP code. 

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

Als U echter hier de pagina-titel wilt tonen van de opgevraagde pagina, vervang dan WEBSITE_HEADER door PAGE_TITLE.

Hoofd- en top-navigatie menu

De navigatie-menu's worden automatisch door WB aangemaakt aan de hand van de pagina's die via de backend toegevoegd worden. De menu-niveau's volgen de hiërarche van de Pagina's. Website Baker ondersteund meervoudige menu's die worden beheerd via de backend van WB. Het navigatie-menu aan de bovenkant krijgt het WB interne nummer 2 en het hoofd-menu aan de linkerkant krijgt WB intern nummer 1. Vervang in het bestand index.html 

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

en wijzig deze als volgt.

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

Hetzelfde geldt voor de hoofd-menu aan de linkerzijde. Vervang de volgende regels

    <div id="navigatie2">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Sectie A</a></li>
            <li><a href="#">Sectie B</a></li>
         </ul>
    </div>

met de volgende PHP code

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

Hoofd- en nieuws-inhoud

De inhoud van het hoofd- en nieuws-blok zijn opgeslagen in de WB database. Het template ondersteund twee blokken: een voor het weergeven van nieuws-items en een ander voor het weergeven van de inhoud. Het blok voor het nieuws krijgt nummer 2 en het blok voor de inhoud krijgt nummer 1. Vervang de volgende regels 

<div id="nieuws">
        <h3>Laatste nieuws:</h3>
        <p>De plek voor het laatste nieuws...</p>
    </div>

met de volgende WB template functie.

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

Hetzelfde geldt voor de hoofd-inhoud

    <!-- kolom voor de hoofd-inhoud -->
    <div id="inhoud">
        <h2>Home</h2>
        <<p>De plek voor de hoofd-inhoud...</p>
    </div>

met

    <!-- collom voor de hoofd-inhoud -->
    <div id="inhoud">
        <?php page_content(1); ?>
    </div>

Website Footer

De footer (voettekst) kan gedefiniëerd worden via de WB backend: Instellingen->Bekijk geavanceerde opties->Footer. Om de Footer uit de database te halen dient men de volgende regels te vervangen in het bestand index.html

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

met de volgende code. 

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

De veranderingen die worden aangebracht in het bestand index.html vervangt de statische tekst door de inhoud uit de WB database. De geïntroduceerde WB template functies houden rekening met de WB instellingen en veranderingen in de diverse pagina's. Op deze manier kan één layout gemaakt worden die gebruikt kan worden voor alle pagina's

Afbeeldingen toevoegen

De constante TEMPLATE_DIR is ook heel handig als U een afbeelding wilt toevoegen vanuit de template folder in het bestand index.php van uw template. Onderstaande code voegt de afbeelding mypic.gif toe, welke opgeslagen staat in de folder /img van de template folder.

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

 

Opmerking:
Er zijn nog wat meer wijzigingen nodig om een template te bereiden uit het gewijzigde bestand index.html. Deze wijzigingen worden besproken in het volgende hoofdstuk.



Copyright (c) 2007 Website Baker Hilfe Team
Tekst en afbeeldingen uit deze pagina zijn onderworpen aan een Creative Commons Attribution-NonCommercial-No Derivative 3.0 Licentie. Het is toegestaan om dit werk te kopieëren en distribueren voor niet-commerciële doeleinden, mits er geen wijzigingen worden aangebracht en deze copyright mededeling en een link naar http://help.websitebaker.org worden bijgevoegd.

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