Erweiterte Designelemente

Dieses Kapitel stellt die erweiterten Designelemente von Website Baker vor. Neben Menüs und Inhaltsblöcken können in der Designvorlage weitere Elemente, wie z.B. Suchfunktion oder eine Anmeldemaske fürs Backend eingebunden werden. Darüber hinaus können über externe Code Snippets von der Addons-Seite weitere Funktionen in die Designvorlage integriert werden.

• Suchfunktion in Designvorlage einbinden
  
• Suchbegriffhervorhebung anpassen
  
• Anmeldemaske in Designvorlage einbinden
  
• Optionale Moduldateien (CSS/Javascript) einbinden
  
• Verwendung von Code Snippets (externe Zusatzfunktionen)
  

Suchfunktion in Designvorlage einbinden

Website Baker verfügt über eine integrierte Suchfunktion. Um eine Suchmakse in die Designvorlage zu integrieren, muss nachfolgender Code in die index.php Datei des Templates eingefügt werden. 

<?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 } ?>

Hinweis:
Damit die Suchmaske auch im Frontend angezeigt wird, muss diese Funktion zuerst im Backend aktiviert werden: Optionen -> Erweiterte Optionen anzeigen -> Suchoptionen -> Sichtbarkeit -> Öffentlich

Suchbegriffhervorhebung anpassen

Mit 2.6.6 wurde die Hervorhebung von Suchtreffern eingeführt. Die benötigten Funktionen wurden in die WB Kernfunktionen integriert und stehen somit ohne weitere Änderung zur Verfügung. Es muss ledigliche eine neue Klasse zur CSS Datei des Templates (z.B. screen.css) hinzugefügt werden. Diese Klasse kann ganz nach eigenen Wunsch gestaltet werden (Schriftgrösse, Schriftart...). Das nachfolgende Beispiel legt lediglich eine neue Hintergrundfarbe für die Hervorhebung der Suchbegriffe fest.

.highlight { background-color: #D0D0D0;}

 Anmeldemaske in Designvorlage einbinden

Über nachfolgenden Code kann eine Anmeldemaske in die Designvorlage integriert werden. Dies ermöglicht es, dass registrierte Benutzer sich über das Frontend anmelden können. Dies erspart den Umweg über http://domain.de/admin.

<?php
// Anmeldemaske für den Backendzugang einbinden
if(FRONTEND_LOGIN == 'enabled' AND VISIBILITY != 'private' 
  AND $wb->get_session('USER_ID') == '') {
?>
  <div id="loginmaske">
  <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="loginmaske">
  <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
}
?>

Die Formatierung der Anmeldemaske sollte über das externe Stylesheet des Templates (meist screen.css) vorgenommen werden. Damit CSS Regeln nur auf Elemente innerhalb von <div id="loginmaske"> angewendet werden, kann folgende CSS Regel verwendet werden.

#loginmaske p { 
  color: red;
}

Hinweis:
Damit die Anmeldemaske im Frontend auch angezeigt wird, muss diese Funktion im Backend aktiviert werden:
WB Backend -> Optionen -> Anmeldung -> Eingeschaltet

Optionale Moduldateien (CSS/Javascript) einbinden

Bis einschliessliche WB 2.6.5 wurden CSS Stilanweisungen von Modulen in der Datenbank abgelegt und im <body> der Webseite ausgegeben. Dies führt zu nicht validem (X)HTML markup. Mit v2.6.6 wurde eine neue Funktion eingeführt, die es erlaubt, CSS und Javascript Dateien von Modulen in den <head> Bereich des Templates zu laden.

Um Moduldateien automatisch einzubinden, muss nachfolgender PHP Code in den <head> Bereich der index.php Datei des Templates eingefügt werden.

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

Die Anpassung erlaubt es, für jedes Module eine eigene frontend.css und frontend.js Datei in den <head> Bereich des Templates zu linken.

Die gleiche Funktionalität steht auch im Backend Bereich zur Verfügung. Über die optionalen Dateien backend.css und backend.js können CSS Anweisungen und Javascript Funktionen ausgelagert werden. Dies erlaubt es dem Designer und Modulentwickler das Aussehen des Moduls im Front- und Backend nach eigenen Wünschen anzupassen.

CSS für Suchbegriffhervorhebung anpassen

Mit 2.6.6 wurde die Hervorhebung von Suchtreffern eingeführt. Die benötigten Funktionen wurden in die WB Kernfunktionen integriert und stehen somit ohne weitere Änderung zur Verfügung. Es muss ledigliche eine neue Klasse zur CSS Datei des Templates (z.B. screen.css) hinzugefügt werden. Diese Klasse kann ganz nach eigenen Wunsch gestaltet werden (Schriftgrösse, Schriftart...). Das nachfolgende Beispiel legt lediglich eine neue Hintergrundfarbe für die Hervorhebung der Suchbegriffe fest.

.highlight { background-color: #D0D0D0;}

Verwendung von Code Snippets

Seit Website Baker 2.6 können externe Funktionen über sogenannte Code Snippets integriert werden. Das Einbinden von externen Funktionen wird anhand des Code Snippets Last Update Info erläutert.

1. Lade das Code Snippet: Last Update Info von der Addons-Seite herunter
2. Installiere das Code Snippet über das WB Backend: Erweiterungen -> Module -> Modul installieren

Anschliessend kann die Funktion in die Datei index.php des Templates eingebunden werden.

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

Als Ergebnis wird das letzte Änderungsdatum der aktuellen Seite ausgegeben. Über die PHP Funktion function_exists sollte zuerst geprüft werden, ob die Funktion verfügbar ist. So vermeidet man Fehler, falls das Code Snippet nicht installiert wurde.

Copyright (c) 2007 Website Baker Hilfe Team
Text und Bilder dieser Seite unterliegen den Bestimmungen der Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Lizenz. Sie dürfen den Inhalt für nicht kommerzielle Zwecke vervielfältigen und verbreiten, solange dieser unverändert übernommen wird, der Copyright Hinweis bestehen bleibt und ein Link zu http://websitebaker.org angegeben wird.