Templatefunktionen einfügen

Zum Standard jeder Webseite gehört der Webseitentitel, der mit dem HTML-Befehl < title > eingefügt wird. Dieser wird in der Titelzeile des Browsers angezeigt und ist auch für Suchmaschinen relevant.

• Schlecht: Fehlender Titel oder wenn alle Seiten einer Website denselben Titel haben.
• Besser: Individuelle Titel für jede Seite.

Im Beispieltemplate gibt es die Zeilen

<title>3-spaltiges CSS Template mit Kopf- und Fusszeile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Kurzbeschreibung der Webseiteninhalte" />
<meta name="keywords" content="Schlüsselwörter,
 Schlagwörter" />

Diese Zeilen ersetzen wir jetzt durch die folgende Anweisung:

<?php simplepagehead(); ?>

Was hat es nun damit auf sich?

• Die spitze Klammer, das Fragezeichen und die darauf folgenden Buchstaben "php" öffnen einen Bereich des Dokuments, in dem ausschließlich Befehle in der Programmiersprache PHP erscheinen dürfen.
• "simplepagehead" ist der Name einer PHP-Funktion. 
• Funktionsnamen werden in PHP stets mit einer öffnenden "(" und einer schließenden ")" runden Klammer angegeben.
• Am Ende einer PHP-Zeile steht meist (nicht immer!) ein Semikolon (;).
• Innerhalb eines Dokuments wird ein PHP-Bereich mit einem Fragezeichen und einer spitzen schließenden Klammer beendet.

Möglicherweise ist dies ja die erste Zeile PHP-Code, die Sie in Ihrem Leben schreiben! Herzlichen Glückwunsch! 

Dieser Funktionsaufruf erspart uns eine ganze Menge Schreibarbeit, denn er sorgt dafür, dass die oben genannten HTML-Befehle und Meta-Angaben durch website- bzw. seitenspezifische Informationen ersetzt werden und wir uns um nichts weiter kümmern müssen.

Dem Funktionsaufruf simplepagehead können auch 4 Parameter mitgegeben werden, z.B. so:

<?php simplepagehead('/'‚ 1‚ 1‚ 1‚ 1); ?>

Bitte dieses Beispiel nicht per Copy&Paste übernehmen, die Kommata sind aufgrund CKEditor-Renitenz durch das Sonderzeichen "einfaches Anführungszeichen unten" ersetzt. Im richtigen Funktionsaufruf müssen die Parameter natürlich mit Kommata getrennt werden!

Die Parameter (Übergabewerte) bedeuten im einzelnen:

1. Parameter: Wie sollen die Zeilen abgeschlossen werden? Diese Angabe (und nur diese Angabe!) muss in Hochkommata stehen. Standard ist natürlich der Schrägstrich ("/", nicht zu verwechseln mit dem Backslash "\"!) , um sauberes (X)HTML (5) zu erzeugen; wenn erforderlich, kann hier aber auch ein Leerstring (vulgo: nüscht) übergeben werden, indem zwei Hochkommata direkt hintereinander gesetzt werden: '' (nicht zu verwechseln mit dem normalen Anführungszeichen oben bzw. Zoll-Symbol " !)
2. Parameter: hier kann entweder 1 oder 0 stehen, Standard ist 1. In diesem Falle wird auf Seiten, wo dies ratsam ist, der Meta-Tag "robots" mit dem Wert "noindex,nofollow" eingefügt, um Suchmaschinen davon abzuhalten, bestimmte Seiten zu indizieren (z.B. Suchergebnisseiten).
3. Parameter: hier kann entweder 1 oder 0 stehen, Standard ist 1. Der Internet Explorer hatte eine Zeit lang die unschöne Angewohnheit, das Bilderklauen Herauskopieren von Inhalten durch das Einblenden einer extra dafür gedachten Symbolleiste zu vereinfachen. Mit der Einstellung 1 setzt SimplePageHead den entsprechenden Meta-Tag, der dies unterbindet.
4. Parameter: hier kann entweder 1 oder 0 stehen, Standard ist 1. Generiert Links zu Favicon- und Apple-Touch-Symbolen, die beim Setzen von Lesezeichen dann neben bzw. über der Verlinkung angezeigt werden. Diese Bildchen sollten natürlich vorhanden sein. Wenn nicht: Mit 0 werden diese Tags nicht gesetzt. Genaueres zu Favicons und Touchicons siehe z.B. auf https://realfavicongenerator.net/
5. Parameter: auch hier entweder 1 oder 0 angeben; 1 ist Standard, also aktiv. Schmeichelt der Eitelkeit des Teams von WBCE, fügt nämlich den Meta-Tag "Generator" ein, in dem stolz darauf verwiesen wird, dass die Seite mit WBCE erstellt wurde. Wenn Sie das nicht wollen, setzen Sie diesen Parameter auf 0. 

Sie können, müssen aber nicht SimplePageHead verwenden, sondern können auch die u.g. Platzhalter verwenden. Diese Methode hat allerdings den Nachteil, dass Links zu Favicons nicht gesetzt werden und alle von Modulen generierten Inhalte, die keine "richtigen" eigenständigen Seiten sind, also z.B. die einzelnen News- oder Topics-Beiträge oder Bakery-Artikel, die gleichen Titel- und Meta-Angaben erhalten, was für die Suchmaschinenoptimierung denkbar schlecht ist.

Wenn Sie dennoch dieser Methode anhängen, gehen Sie vor wie folgt:

Stylesheets, also Formatangaben, werden im Normalfall in eine externe CSS-Datei ausgelagert - so auch in unserem Beispiel. (Natürlich können Sie auch mehrere Stylesheets verwenden.) In der Beispiel-HTML-Seite ist dafür die folgende Zeile zuständig:

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

Diese ändern Sie nun in

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

Konkret bedeutet dies: Sie haben hier wiederum etwas PHP-Code eingefügt, der dafür sorgt, dass automatisch der richtige Pfad zum Stylesheet eingefügt wird, d.h. TEMPLATE_DIR wird vom Server durch "http://ihredomain.tld/templates/templatename" ersetzt, damit das Stylesheet geladen werden kann.

Begriffe in GROSSBUCHSTABEN kennzeichnen in PHP sog. Konstanten, also fest stehende Werte; eine Vielzahl davon generiert PHP von sich aus schon, und WBCE fügt dieser großen Menge dann noch einige hinzu, die an anderer Stelle detailliert aufgelistet sind.

Module haben die Möglichkeit, eigene Stylesheets und Javascript-Dateien mitzubringen, die dann im Seitenkopf (< head >) aufgerufen werden, sobald das entsprechende Modul irgendwo auf einer Seite verwendet wird.

Darüber hinaus kann über diesen Funktionsaufruf auch die mit WBCE ausgelieferte jQuery-Bibliothek geladen werden (sofern dies nicht über andere Mechanismen geschieht).

Der (oft vergessene) einzufügende Code - fehlt dieser, sehen z.B. Formulare sehr merkwürdig aus oder Bildergalerien funktionieren nicht - lautet wie folgt:

<?php
register_frontend_modfiles('css');
register_frontend_modfiles('jQuery');
register_frontend_modfiles('js'); 
?>

Was passiert hier nun genau:

• Die Funktion register_frontend_modfiles wird drei Mal mit unterschiedlichen Parametern afgerufen.
  • Das erste Mal hält sie für jedes auf der Seite verwendete Modul nach /modules/namedesmoduls/frontend.css Ausschau,
  • lädt dann jQuery (Hauptbibliothek und weitere Scripte),
  • und holt sich zuguterletzt wiederum ggf. für jedes Modul dessen
    /modules/namedesmoduls/frontend.js.
• Diese Reihenfolge ist unbedingt einzuhalten, da sonst Scripte möglicherweise nicht funktionieren.

Der Code ist idealerweise direkt vor dem schließenden < /head > ins Template einzufügen.

Im Beispieltemplate ist ein Bereich dafür vorgesehen, den Websitetitle auszugaben. Die zugehörige PHP-Konstante heißt WEBSITE_HEADER. Suchen Sie also in der HTML-Seite nach den Zeilen

 <!-- Banner -->
    <div id="banner">
        <h1>Webseiten Titel</h1>
    </div>

und ersetzten Sie diese durch

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

Eine andere denkbare Option wäre, hier den Titel der gerade angezeigten Seite anzuzeigen - dazu müsste WEBSITE_HEADER durch PAGE_TITLE ersetzt werden.

Der Titel der Website wird bei den Grundeinstellungen (aka Optionen) festgelegt.

Das Navigationselemente können in WBCE automatisch anhand der angelegten Seiten generiert werden.

• Die Menüebenen ensprechen dabei der Anordung der Seiten im Backend.
• Auch ist es möglich, mehrere voneinander unabhängige Menüs zu definieren.

Das Untermenü am oberen Rand unseres Templates soll die Nummer 2, das Hauptmenü auf der linken Seite die Nummer 1 zugewiesen werden. Suchen Sie die nachfolgende Codezeilen in der Datei index.html

<div id="navigation1"> 
<ul>
<li>
<a href="#">Impressum</a></li>
<li>
<a href="#">Kontakt</a></li>
</ul>
</div>

und ändern Sie diese wie folgt:

<div id="navigation1">  <?php show_menu2(2); ?> 
</div>

Beachten Sie: Der Funktionsaufruf heißt "show_menu2", die 2 vor der 2 in runden Klammern ist also kein Tippfehler!

Analog verfahren wir mit dem Hauptnavigationsmenü auf der linken Seite. Ersetzen Sie die folgenden Zeilen

<div id="navigation2"> 
<ul>
<li>
<a href="#">Startseite</a></li>
<li>
<a href="#">Rubrik 1</a></li>
<li>
<a href="#">Rubrik 2</a></li>
</ul>
</div>

durch diese:

<div id="navigation2">  <?php show_menu2(1); ?> 
</div>

Das sieht erst einmal noch recht einfach aus, doch generell kann man sagen, dass das Erzeugen der Navigationselemente zu den anspruchsvolleren Übungen bei der Templateprogrammierung gehört - denn show_menu2 ist ein flexibles und mächtiges, aber auch ziemlich komplexes Werkzeug mit einer unendlichen Vielzahl von Optionen. Um tiefer in die Materie einzusteigen, empfiehlt sich ein gründliches Studium der show_menu2-Dokumentation.

Das Beispieltemplate hat zwei Bereiche, in denen Inhalte dargestellt werden. Im WBCE-Kontext werden diese Bereiche "Blöcke" genannt, in denen theoretisch beliebig viele "Abschnitte" erscheinen können.

Damit das möglich ist, muss an den entsprechenden Positionen im Template wiederum eine Funktion aufgerufen werden. Diese hier heißt page_content - und als Parameter bekommt sie eine Zahl, oder, eleganter ausgedrückt, eine ID mit.

Es gibt einen Block für "Nebeninhalte" - im HTML-Dummy steht dort:

<div id="news">
        <h3>Letzte Meldungen:</h3>
        <p>Die neuesten Nachrichten kommen hier hin...</p>
    </div>

Dies wird nun ersetzt durch:

    <div id="news">
        <h3>Letzte Meldungen:</h3>
        <?php page_content(2); ?>
    </div>

Der eigentliche Hauptinhalt stellt sich im HTML-Dummy so dar

    <!-- Spalte für den Hauptinhalt -->
    <div id="inhalt">
        <h2>Startseite</h2>
        <p>Der Hauptseiteninhalt kommt hier hin...</p>
    </div>

und wird ersetzt durch:

    <!-- Spalte für den Hauptinhalt -->
    <div id="inhalt">
        <?php echo page_content(1); ?>
    </div>

Das Prinzip ist klar: Jeder Block hat eine ID, d.h. theoretisch wäre es nach demselben Schema auch noch möglich, z.B. einen dritten Inhaltsbereich unterhalb der Navigation in der rechten Spalte einzufügen.

Nicht nur der Kopfbereich, auch die Fußzeile kann übers Backend gepflegt werden - vorausgesetzt, es wird die Funktion page_footer aufgerufen.

Im HTML-Dummy sind also die folgenden Zeilen

  <div id="fusszeile">
        <p>(c) 2007 by http://css.maxdesign.com.au 
           (adapted for the WebsiteBaker.org help project by C. Sommer)</p>
    </div>

zu ersetzen durch

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

und schon erscheint dort zukünftig der Text (oder auch HTML-Code), der bei den Grundeinstellungen für "Fußzeile" angegeben wurde.

Viele Webdesigns sehen auch noch ein Logo, Schmuck- oder Hintergrundbilder vor, oder arbeiten mit grafischen Elementen, um die Inhaltsbereiche voneinander zu separieren. Diese Bilder müssen dann natürlich auch in der Vorlage korrekt eingebunden werden.

Nehmen wir an, es sind alle Bilder im Verzeichnis img/ abgelegt, und in der Vorlage soll noch ein Logo erscheinen, das zudem sinnvollerweise mit der Startseite verlinkt ist. Im HTML-Dummy sähe die entsprechende Zeile dann ungefähr so aus:

<a href="#"><img src="img/logo.png" alt="logo"></a>

Das wird nun ersetzt durch

<a href="<?php echo WB_URL; ?>"><img src="<?php echo TEMPLATE_DIR; ?>/img/logo.png" alt="logo"></a>

• Die Konstante TEMPLATE_DIR kennen wir schon - das ist der Link ins jeweilige Templateverzeichnis, von dort bzw. dem darin Unterverzeichnis "img" werden die Bilder geholt.
• Die Konstante WB_URL ist, wer hätte das gedacht, die Adresse (URL) der WBCE-Seite, d.h. entweder http://www.ihredomain.tld, oder, bei eingeschalteter "URL-Umleitung zur ersten Seite", http://www.ihredomain.tld/pages/titel-der-ersten-seite.php.