Dieses Kapitel stellt die erweiterten Designelemente von WebsiteBaker 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.
WebsiteBaker 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="hidden" name="referrer" value="<?php echo defined('REFERRER_ID')
? REFERRER_ID : PAGE_ID; ?>" />
<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
Um die Hervorhebung von Suchtreffern zu gestalten, muss lediglich eine neue Klasse zur CSS Datei des Templates (z.B. screen.css, template.css, style.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;}
Ü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 https://domain.de/admin.
Kurzform als Droplet
<?php if (defined('FRONTEND_LOGIN') && FRONTEND_LOGIN){ ?>
<div class="outer-box gradient-sweet-home">
[[LoginBox]]
</div>
<?php } ?>
Oder Langform
<?php
// Anmeldemaske für den Backendzugang einbinden
if(FRONTEND_LOGIN AND !$wb->is_authenticated() AND VISIBILITY != 'private' ) {
$redirect_url = ((isset($_SESSION['HTTP_REFERER'])
&& $_SESSION['HTTP_REFERER'] != '') ? $_SESSION['HTTP_REFERER'] : WB_URL );
$redirect_url = (isset($thisApp->redirect_url)
? $thisApp->redirect_url : $redirect_url );
?>
<div id="loginmaske">
<form name="login" action="<?php echo LOGIN_URL; ?>" method="post">
<input type="hidden" name="redirect" value="<?php echo $redirect_url;?>" />
<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 AND $wb->is_authenticated()) {
?>
<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 (zB: screen.css, template.css, style.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 -> Frontend Anmeldung -> Anmeldung Eingeschaltet
Mit WebsiteBaker kann man CSS und Javascript Dateien von Modulen in den <head> Bereich des Templates laden.
Um Moduldateien automatisch einzubinden, muss nachfolgender PHP Code in den <head> Bereich der index.php Datei des Templates eingefügt werden.
<?php
register_frontend_modfiles('css'); // MUSS auf jeden Fall hier stehen
register_frontend_modfiles('jquery');
register_frontend_modfiles('js');
?>
Die Anpassung erlaubt es, für jedes Module eine eigene frontend.css|frontendUser.css und frontend.js|frontendUser.js Datei in den <head> Bereich des Templates zu linken.
frontendUser.xx Dateien werden genutzt, wenn vorhanden (statt der frontend.xx Dateien) und werden von Modulen nicht überschrieben.
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.
Externe Funktionen können über sogenannte Code Snippets integriert werden. Das Einbinden von externen Funktionen wird anhand des Code Snippets Last Update Info erläutert.
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.