WBCE Templates

WBCE Template programmieren

Ein eigenes Template für WBCE CMS zu programmieren, ist gar nicht so schwer. Man kann entweder komplett bei Null anfangen oder ein HTML-Template in ein WBCE-Template umwandeln.

Wenn man in das Thema Templateprogrammierung für WBCE einsteigt, sollte man natürlich nicht gleich mit einem komplexen Template loslegen, sondern erst einmal anhand eines einfachen HTML Templates das Prinzip verstehen. HTML- und CSS-Kenntnisse sind auch erforderlich, und etwas PHP-Basiswissen zumindest hilfreich, wobei sich das meiste aber auch "blind" aus einem vorhandenen Template übernehmen lässt.

Die Herausforderung besteht meist darin, die templatespezifische Navigation abzubilden und unterschiedliche Darstellungsvarianten durch optionale Inhaltsbereiche umzusetzen. Das klingt erstmal schrecklich kompliziert, aber wenn man das ein paar Mal gemacht hat, ist ein Template in einer knappen Stunde heruntergeklappert.

Als Beispiel soll das Template "Industrious" von templated.co dienen. 

Zunächst lädst Du dir die Zip-Datei mit den Template-Dateien herunter und entpackst sie bei Dir lokal. Du hast dann ein Verzeichnis auf Deinem Rechner, in dem sich zwei Unterverzeichnisse, eine Textdatei und drei HTML-Dateien befinden.

Du hast bestimmt ein Programm bei Dir auf dem Rechner, mit dem Du HTML-Dateien bearbeiten kannst. Wenn nicht: Lade Dir eines herunter, z.B. Notepad++. Mit dem Windows-Editor oder Textverarbeitungsprogrammen wie Word kommst Du nicht weit.

Öffne nun mit besagtem Programm die Datei generic.html zum Bearbeiten - mach es Dir lieber erst einmal einfach, denn in der Aufbau der index.html ist zu komplex und nicht so gut als Grundlage eines flexiblen Seitentemplates geeignet.

Der <head>

Am Ende soll ein Template stehen, bei dem nicht nur die Inhaltsbereiche dynamisch befüllt werden, sondern auch in den Metadaten die jeweils passenden Angaben stehen. Dafür brauchen wir Platzhalter, die an Stelle der fest hinterlegten Angaben kommen.

Ersetze also 

<title>Generic Page - Industrious by TEMPLATED</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="" />
<meta name="keywords" content="" />

durch 

<?php simplepagehead(); ?>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

Damit beginnst Du einen PHP-Bereich, rufst Du die WBCE-Funktion "simplepagehead" auf, die Titel- und alle Metatags mit den jeweiligen Werten, die bei den Seiteneigenschaften hinterlegt sind, generiert, und schließt den PHP-Bereich wieder.

Die viewport-Anweisung musst Du stehen lassen, diese wird für die responsive Darstellung des Templates benötigt.

Die Zeile 

<link rel="stylesheet" href="assets/css/main.css" />

änderst Du nur ein bisschen, nämlich zu

<link rel="stylesheet" href="<?php echo TEMPLATE_DIR; ?>/assets/css/main.css" />

Dies ist erforderlich, damit das templatespezifische Stylesheet immer gefunden wird, egal wie tief in der Seitenstruktur später die aktuelle Seite hinterlegt ist.

Wieder ein PHP-Schnipsel: Diesmal wird der Befehl "echo" aufgerufen, der die Konstante (erkennbar an der brüllenden Großschreibweise) TEMPLATE_DIR ausgibt. DIR steht für DIRectory, also Verzeichnis.

Nach dieser Zeile und vor dem </head> fügst Du ein:

<?php

register_frontend_modfiles('css');
register_frontend_modfiles('jquery');
register_frontend_modfiles('js');

In diesem PHP-Bereich rufst Du drei Mal die WBCE-Funktion register_frontend_modfiles auf, und zwar mit verschiedenen Parametern. Dieser Aufruf ist erforderlich, damit jQuery und alle modulspezifischen Scripte und Stylesheets geladen werden.

Der PHP-Bereich ist noch nicht zu Ende, Du brauchst dort noch etwas mehr Code. Das sieht im ersten Moment schrecklich kompliziert und unverständlich aus, ich will versuchen, kurz zu erklären, was es damit auf sich hat.

Die nächsten Zeilen sehen so aus:

$nav = show_menu2(
            $aMenu          = 1,
            $aStart         = SM2_ROOT,
            $aMaxLevel      = SM2_ALL,
            $aOptions       = SM2_ALL|SM2_PRETTY|SM2_BUFFER,
            $aItemOpen      = '<li><a href="[url]" class="[class]" target="[target]">[menu_title]</a>',
            $aItemClose     = '</li>',
            $aMenuOpen      = '<ul>',
            $aMenuClose     = '</ul>',
            $aTopItemOpen   = false,
            $aTopMenuOpen   = '<ul class="links">'
          );

Damit wird die Navigation erzeugt. Schließlich willst Du Dich nicht selbst darum kümmern müssen, dass jede Seite Deiner Website im Menü erscheint - diese Arbeit soll Dir schön WBCE abnehmen. Das geschieht durch den Aufruf der Funktion show_menu2 (die aus historischen Gründen die 2 im Namen trägt) und einer Vielzahl von komplett irrwitzigen Parametern, die zu erklären hier jetzt zu weit führen würde - wenn es Dich interessiert, schau Dir die Seite sm2.wbce-cms.org an, da ist aufgeführt, welche Möglichkeiten es gibt, das Menü zu erzeugen, und was die einzelnen Parameter bewirken.

Die Navigation wird erstmal nur in eine Variable $nav geschrieben, die Du später aufrufst.

Nun kannst Du das  etwas unerquickliche Feld der PHP-Programmierung kurz verlassen und fügst daher vor der Zeile, in der  </head> steht, eine neue Zeile ein, in der einfach nur

?>

steht.

Header und Navigation

Jetzt gehst Du den <header> an: Dort ist nicht viel zu tun. Du änderst die Zeile

<a class="logo" href="index.html">Industrious</a>

zu

<a class="logo" href="<?php echo WB_URL; ?>"><?php echo WEBSITE_TITLE;?></a>

Damit fügst Du statt der festen Verlinkung zur index.html den Link zur Startseite Deines Auftritts ein, und statt "Industrious" erscheint dort dann das, was Du im WBCE-Backend bei den Grundeinstellungen im Feld "Website-Titel" eingibst.

Das nächste ist die Navigation: Die hast Du ja schon erzeugt, nun musst Du sie nur noch anzeigen. Ersetze also das

<ul class="links">
    <li><a href="index.html">Home</a></li>
    <li><a href="elements.html">Elements</a></li>
     <li><a href="generic.html">Generic</a></li>
</ul>

durch

<?php echo $nav; ?>

Der Seiteninhalt

Jetzt möchtest Du natürlich, dass auf der Seite die Überschrift und der Inhalt erscheint, die Du eingibst, und nicht irgendwelcher Blindtext. Ersetze dafür das

<h1>Generic Page</h1>

durch

<h1><?php echo PAGE_TITLE;?></h1>

und den ganzen Blindtext, der nach

<section id="main" class="wrapper">
                <div class="inner">
                    <div class="content">

bis


                    </div>
                </div>
            </section>

steht, durch

<?php echo page_content(1); ?>    

Der Footer

Du kannst Dir jetzt noch überlegen, ob Du weitere Dinge im Footer anzeigen willst. Beispielsweise könntest Du den Code so umbauen:

<footer id="footer">
                <div class="inner">
                    <div class="content">
                        <section>
                            <?php echo WEBSITE_HEADER; ?>
                        </section>
                        <section>                            
                            <ul class="alt">
                                <li><a href="[ wblink2]">Impressum</a></li>
                                <li><a href="[ wblink3]">Datenschutzerklärung</a></li>
                                <li><a href="[ wblink4]">Sitemap</a></li>                                
                            </ul>
                        </section>
                        <section>                            
                            <ul class="plain">
                                <li><a href="#"><i class="icon fa-twitter">&nbsp;</i>Twitter</a></li>
                                <li><a href="#"><i class="icon fa-facebook">&nbsp;</i>Facebook</a></li>
                                <li><a href="#"><i class="icon fa-instagram">&nbsp;</i>Instagram</a></li>
                                <li><a href="#"><i class="icon fa-github">&nbsp;</i>Github</a></li>
                            </ul>
                        </section>
                    </div>
                    <div class="copyright">
                        <?php echo WEBSITE_FOOTER; ?>
                    </div>
                </div>
            </footer>

Dann kannst Du über die Grundeinstellungen hinterlegen, was dort erscheinen soll (für den Langtext im ersten Footer-Block zweckentfremdest Du dafür einfach das Feld WEBSITE_HEADER). 

Für die Links zu Impressum, Datenschutz und Sitemap musst Du ggf. die Links anpassen. Das geht ganz einfach. Du schaust im Seitenbaum, welche ID die jeweilige Seite hat, und trägst dann beim jeweiligen Link für href "wblink", gefolgt von der Zahl, in eckigen Klammern ein - ohne Leerschritte (die Leerschritte sind nur hier für die Anzeige auf dieser Seite erforderlich).  Hat bei Dir das Impressum die ID 42, wäre also der Aufruf <a href="[ wblink42 ]">Impressum</a>.

Natürlich musst Du auch noch bei den ganzen Social Media-Links schauen, welche Du brauchst, und die Raute beim href durch den Link zu Deinem jeweiligen Profil ersetzen.

Du hast es fast geschafft. Am Ende stehen noch einige Zeilen:

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>

Das änderst Du zu

<script src="<?php echo TEMPLATE_DIR; ?>/assets/js/browser.min.js"></script>
<script src="<?php echo TEMPLATE_DIR; ?>/assets/js/breakpoints.min.js"></script>
<script src="<?php echo TEMPLATE_DIR; ?>/assets/js/util.js"></script>
<script src="<?php echo TEMPLATE_DIR; ?>/assets/js/main.js"></script>

Die erste Zeile mit dem jquery-Aufruf musst Du dort wegnehmen, da jquery schon oben im <head> geladen wird.

Ein Template-Zip zum Installieren erstellen 

Nun bist Du fertig mit den Änderungen an dem Haupt-Bestandteil Deines Templates. Speichere dieses Dokument unter dem Dateinamen im selben Verzeichnis wie die Ausgangsdatei generic.html, aber unter dem Namen index.php

Jetzt brauchen wir noch eine zweite Datei, die zu jedem WBCE-Template gehört. Leg dafür dort, wo Deine gerade gespeicherte index.php liegt, eine leere Datei mit dem Namen info.php an. In diese schreibst Du:

<?php

$template_directory = 'industrious';
$template_name = 'Industrious by templated';
$template_version = '1.0';
$template_platform = '1.4';
$template_function = 'template';
$template_author = 'templated.co';
$template_license = 'Creative Commons Attribution 3.0 license (templated.co/license)';
$template_description = 'Mein erstes WBCE-Template';

$block[1] = 'Inhalt';
$menu[1] = 'Navigation';

und speicherst das so. 

Die index.php, die info.php und das Verzeichnis assets packst Du nun in ein neues Zip. 

Diese Zip-Datei kannst Du nun bei Erweiterungen > Templates hochladen und dann bei den Grundeinstellungen oder Seiteneigenschaften Dein neues Template aktivieren.

Noch ein paar Hinweise:

  • Das ganze ist recht rudimentär umgesetzt - so sieht die Navigation nicht schön aus, wenn es mehr als eine Seitenebene gibt, und die ganzen Sperenzchen mit Blöcken und Videos fehlen auch. Um so etwas zu realisieren, sind ein paar Kniffe erforderlich, die aber für ein Einsteiger-Tutorial nicht geeignet sind.
  • Wenn Du das Template benutzt, denk daran, dass es unter einer CC-BY-Lizenz steht und Du auf Deiner Website auf die Urheberschaft von templated.co hinweisen musst.
  • Es werden Google Webfonts geladen, das ist wegen der DSGVO ein bisschen zwiespältig. Du musst auf jeden Fall in Deiner Datenschutzerklärung darauf hinweisen. Besser noch, Du ersetzt diese - wie das geht, beschreibt dieser Beitrag im WBCE-Forum.