Aanvullende Template Elementen

Dit hoofdstuk beschrijft de aanvullende template elementen van Website Baker. Behalve meervoudige menu's en inhouds-blokken, kunnen aanvullende onderdelen, zoals een zoek- of login-formulier geïntegreerd worden in het template. Verder maken externe code snippets uit de Add-ons Repository het mogelijk om extra functies toe te voegen die bruikbaar zijn in het bestand index.php van het template. 

• Een zoekformulier toevoegen
  
• Zoekterm Highlighting (.css)
  
• Een frontend login toevoegen
  
• Registreer Frontend Module Bestanden (.css & .js)
  
• Externe code snippets toevoegen
  

Een zoekformulier toevoegen

Website Baker maakt het mogelijk voor uw bezoekers om te zoeken naar bepaalde termen via een zoekformulier dat wordt getoond in de frontend. Als U uw bezoekers een simpel zoekformuleir wilt aanbieden, voegt U de volgende code toe aan het bestand index.php van uw template. De styling kan worden aangepast via de CSS defenities in de screen.css van uw template.

<?php if(SHOW_SEARCH) { ?>
<div class="search_box">
  <form name="search" action="<?php echo WB_URL; ?>/search/index.php" method="get">
    <input type="text" name="string" class="search_string" />
    <input type="submit" name="submit" value="<?php echo $TEXT['SEARCH']; ?>" />
  </form>
</div>
<?php } ?>

Opmerking:
Het zoekformulier wordt alleen getoond asl deze functie is ingeschakeld via de WB backend:
Instellingen -> Bekijk geavanceerde opties -> Zoekinstellingen -> Zichtbaarheid -> Iedereen

Zoekterm Hightlighting (.css)

Met versie 2.6.7 introduceerden we de zoekterm highlighting. De hiervoor benodigde code is toegevoegd in de core bestanden van WB. Het enige dat U moet doen om de zoektermen highlighted weer te geven, is het toevoegen van een klasse aan het CSS-bestand van uw template. Voelt U zich vrij om deze klasse te definieren naar uw wensen. In de standaard templates voegen we simpelweg een achtergrondkleur toe. U kunt ook andere fonts, font-weights gebruiken, of wat U maar wilt. Voeg de volgende klasse toe aan het CSS bestand van uw template:

.highlight { background-color: #D0D0D0;} 

 Een frontend login toevoegen

De code hieronder voegt een frontend login toe aan uw template. Een frontend login maakt het mogelikk voor uw bezoekers om direct in te loggen via de frontend zonder de de admin URL (http://domein.nl/admin) te weten.

<?php
// add a frontend login
if(FRONTEND_LOGIN == 'enabled' AND VISIBILITY != 'private' 
  AND $wb->get_session('USER_ID') == '') {
?>
  <div id="login_box">
  <form name="login" action="<?php echo LOGIN_URL; ?>" method="post">
    <p><?php echo $TEXT['LOGIN']; ?></p>
    <?php echo $TEXT['USERNAME']; ?>:
    <input type="text" name="username" />
    <?php echo $TEXT['PASSWORD']; ?>:
    <input type="password" name="password" />
    <input type="submit" name="submit" value="<?php echo $TEXT['LOGIN']; ?>" />
    <a href="<?php echo FORGOT_URL; ?>">
    <?php echo $TEXT['FORGOT_DETAILS']; ?></a>
    <?php if(is_numeric(FRONTEND_SIGNUP)) { ?>
      <a href="<?php echo SIGNUP_URL; ?>"><?php echo $TEXT['SIGNUP']; ?></a>
    <?php } ?>
  </form>
  </div>
<?php
} elseif(FRONTEND_LOGIN=='enabled' AND is_numeric($wb->get_session('USER_ID'))){
?>
  <div id="login_box">
  <form name="logout" action="<?php echo LOGOUT_URL; ?>" method="post">
    <p><?php echo $TEXT['LOGGED_IN']; ?></p>
    <?php echo $TEXT['WELCOME_BACK']; ?>, <?php echo $wb->get_display_name(); ?>
    <br />
    <input type="submit" name="submit" value="<?php echo $MENU['LOGOUT']; ?>" />
    <br />
    <a href="<?php echo PREFERENCES_URL; ?>">
    <?php echo $MENU['PREFERENCES']; ?></a>
    <a href="<?php echo ADMIN_URL; ?>/index.php">
    <?php echo $TEXT['ADMINISTRATION']; ?></a>
  </form>
  </div>
<?php
}
?>

De styling van het login-formulier kan het best gedaan worden via een externe style sheet (bijv. screen.css). Om de CSS stijlen te beperken die de div container <div id="login_box">bevat, kan de volgende CSS-regel gebruikt worden. Het voorbeeld zet de font-kleur van paragrafen in de div login_box naar rood.

#login_box p { 
  color: red;
} 

Opmerking:
Het zoekformulier wordt aleen getoond als deze functie is ingeschakeld via de WB backend:
Instellingen -> Login -> Aan

Registreer Frontend Module Bestanden (.css & .js)

Een van de grote problemen van de WB modules is dat stijl-informatie wordt opgeslagen in de database en in de body-tag van van de pagina wordt weergegeven. Hierdoor verkrijgt men geen valide (X)HTML ouput. De nieuwe functies kunnen nu worden gebruikt om alle CSS en js van elke module in de head-sectie van het template te plaatsen. De integratie is heel simpel. U dient hiervoor de volgende stappen te doorlopen:

1. Voeg de volgende code toe in de head-sectie van de index.php van uw template

<?php
if(function_exists('register_frontend_modfiles')) {
  register_frontend_modfiles('css');
  register_frontend_modfiles('js');
} ?>

Hierdoor zullen modules die een frontend.css of frontend.js hebben geladen worden met uw template.

Maar dit is alleen het frontend deel. Hetzelfde kan ook gedaan worden met de stijlen voor de admin backend. Neem alle stijlen uit de module-bestanden en voeg ze toe in een backend.css of als javascript nodig is in een backend.js bestand. Hierdoor zullen gebruikers niet alleen de mogelijkheid hebben in stijlen toe te voegen aan de forntend van de modules, maar ook aan de backend. Met dezelfde functies zou het mogelijk moeten zijn om de WB admin interface skinnable te maken, hetgeen een functie zal zijn van een van de volgende WB versies.

Externe code snipperts toevoegen

Sinds Website Baker v2.6 kunnen code snippets gebruikt worden om het aantal functies uit te breiden dat gebruikt kan worden in het template. De integratie van functies die zich bevinden in externe code snippets wordt uitgelegd aan de hand van een voorbeeld snippet: Last Update Info. Deze is beschikbaar op de Addons Repository.

1. Download de code snippet Last Update Info op de Addons Repository
2. Installeer de code snippet via de WB backend: Extra's -> Modules -> Installeer Module
   

Als de code snippet geïnstalleerd is, kunt U de functie get_modified_when() toevoegen aan het bestand index.php van uw template.

<?php
if(function_exists('get_modified_when')) {
  get_modified_when();
} ?>

Deze functie toont de datum van de laatste update van de huidige pagina welke wordt getoond in de frontend. De PHP functie function_exists controleert of de code snippet functie beschikbaar is. Dit is een maatregel om PHP error berichten te voorkomen als de code snippet niet geïnstalleerd is.

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.