2. ConPresso grafisch anpassen

Um grafische Anpassungen durchzuführen bedient sich ConPresso zweier verschiedener Techniken.

Zum einen können so genannte Header- und Footer-Dateien angepasst werden, die die Ausgabe der durch ConPresso ausgegebenen Artikel umschließen. Dieses Vorgehen ermöglicht die Realisierung jeder denkbaren grafischen Anpassung, wie sie bei Projekten ohne ein Content Management System möglich ist.

Für die grafische Anpassung stehen sowohl globale Header/Footer, die sich auf das gesamte Projekt auswirken, als auch lokale (rubrik-individuelle) Header/Footer bereit. Zahlreiche Applikationen, die im Rahmen von Internetprojekten zum Einsatz kommen, verwenden die Technik von Header- und Footer-Dateien. Erfahrenen Internet-Entwicklern ist diese Methode daher vielfach bekannt. Durch die Anpassung von Header- und Footer-Dateien wird das optische "Gesamtbild" des Projekts maßgeblich gesteuert.

Zum anderen muss die Ausgabe der ConPresso-Artikel formatiert werden. Hierzu steht in ConPresso ein Template-Editor zur Verfügung, mit dessen Hilfe eine unbegrenzte Anzahl von Artikeltemplates erzeugt und den Redakteuren zur Verwendung bereitgestellt werden kann.

Wie an anderer Stelle bereits erläutert, haben auch die Rubrikeinstellungen einen entscheidenden Einfluss auf das grafische Erscheinungsbild des Projekts, da durch diese beispielsweise festgelegt wird, welche Artikeltemplates in einer Rubrik verwendet werden können oder wie viele Artikel auf einer best. Rubrikseite im ConPresso-Frontend ausgegeben werden.

Betrachten Sie also die grafische Anpassung des ConPresso-Frontends als eine Kombination aus Abschnitt 2.1, "Anpassung von Header- und Footer-Dateien", Abschnitt 2.1, "Rubrikeinstellungen bearbeiten" und Abschnitt 11, "Templates". Durch Kombination dieser drei Anpassungsmittel ergeben sich vielfältigste Möglichkeiten, das Frontend eines Projekts grafisch vollständig zu individualisieren.

Da aus der Modifikation von Header- und Footer-Dateien die umfangreichsten grafischen Anpassungsmöglichkeiten resultieren und auch im Rahmen eines Projekts an dieser Stelle angesetzt werden sollte, soll auch hier zunächst das Hauptaugenmerk auf diese Dateien gelegt werden.

2.1. Anpassung von Header- und Footer-Dateien

Über die Bearbeitung von Header- und Footer-Dateien werden die Elemente einer Seite, die die Inhalte eines ConPresso-Projekts im Frontend umschließen sollen, integriert. Diese Elemente können z.B. Bilder, Hintergründe, Flash-Animationen, etc. sowie weitere Funktionen sein. Die Header- und Footer-Dateien können sowohl HTML-Code als auch Code anderer Scriptsprachen (wie z.B. Javascript, PHP) enthalten, was für die Anpassung eine maximale Flexibilität bedeutet und jede denkbare Form der Anpassung zulässt.

Globale und lokale Header/Footer

Bei der Verwendung von Header- und Footer-Dateien unterscheidet ConPresso globale und lokale Header/Footer. Der Unterschied zwischen beiden besteht darin, dass Anpassungen, die in den globalen Dateien durchgeführt werden, sich auf das gesamte ConPresso-Projekt - also auf alle Rubriken - auswirken, während sich die lokalen Header/Footer jeweils nur auf Rubriken auswirken, denen ein bestimmtes Rubrikverzeichnis zugrunde liegt.

Die Ausgabe der Header/Footer erfolgt in der folgenden festgelegten Reihenfolge:

  1. Globaler Header

  2. Lokaler Header

  3. Durch ConPresso generierte Inhalte (Artikel 1 bis n)

  4. Lokaler Footer

  5. Globaler Footer

Verwendung globaler Header/Footer

Vorlagen für die globalen Header- und Footer-Dateien finden Sie im Verzeichnis _cfg/ unterhalb des ConPresso-Verzeichnisses. Diese tragen die Dateinamen:

  • global_header.php.dist (Globaler Header)

  • global_footer.php.dist (Globaler Footer)

Sie können diese Dateien nach eigenen Wünschen editieren und sie dann unter den Dateinamen global_header.php und global_footer.php im selben Verzeichnis (conpresso/_cfg/) speichern. Sie entfernen also beim Speichern die zusätzliche Endung ".dist" der beiden Dateien, die bis zur Bearbeitung nur einen leicht formatierten Hinweis-Text enthalten, der darüber informiert, dass es sich bei den Dateien um den globalen Header bzw. Footer handelt.

Die zusätzliche Endung ".dist" der Dateien im Auslieferungszustand steht für "distributed". Durch das Umbenennen der Dateien stellen Sie sicher, dass Ihre Änderungen in Header und Footer, z.B. bei einer Aktualisierung von ConPresso, nicht überschrieben werden, da in einem ConPresso-Archiv nur die Dateien global_header.php.dist und global_footer.php.dist, nicht jedoch die Dateien global_header.php und global_footer.php enthalten sind.

[Anmerkung]Anmerkung

Prinzipiell ist es denkbar, die Anpassungen auch direkt in den ".dist"-Dateien vorzunehmen, aus dem beschriebenen Grund ist dies jedoch nicht sinnvoll.

Verwendung lokaler Header/Footer

Mit den lokalen Header- und Footer-Dateien steht im Gegensatz zu globalem Header und Footer für jede Rubrik eine rubrikindividuelle Anpassungsmöglichkeit zur Verfügung. Lokale Header/Footer befinden sich im jeweiligen Rubrikverzeichnis (z.B. conpresso/_rubric). Da für jede Rubrik in den Rubrikeinstellungen ein Rubrikverzeichnis ausgewählt werden kann, haben Sie über diese Auswahl die Möglichkeit, für verschiedene Rubriken auch verschiedene lokale Header bzw. Footer zu verwenden.

Sie müssen also dieseDateien editieren, wenn Sie einer bestimmten Rubrik oder auch einigen Rubriken ein individuelles, vom Standard abweichendes Erscheinungsbild verleihen möchten. Genaue Informationen zur Auswahl eines Rubrikverzeichnisses für eine Rubrik erhalten Sie unter Abschnitt 2.2, "Basis-Rubrikeinstellungen bearbeiten".

Die Dateien tragen im Auslieferungszustand die Dateinamen:

  • _local_header.php.dist (Header der Rubrik)

  • _local_footer.php.dist (Footer der Rubrik)

Bitte speichern Sie auch diese Dateien nach der Bearbeitung unter den Dateinamen _local_header.php und _local_footer.php, also ohne die zusätzliche Endung ".dist".

Verwendung von Stylesheets

ConPresso sorgt über eine Stylesheet-Datei für die Artikelformatierung. Im Verzeichnis conpresso/_cfg liegt analog zu den Vorlagen für Header und Footer eine Datei style.css.dist (mit der Endung ".dist" für distributed), die als Vorlage genutzt werden kann. Bitte speichern Sie auch diese Datei nach der Bearbeitung ohne die zusätzliche Endung ".dist" unter dem Dateinamen style.css.

[Anmerkung]Anmerkung

Selbstverständlich können beliebig viele weitere Stylesheet-Dateien verwendet werden. Diese müssen entsprechend in einer Header-Datei eingebunden werden.

2.2. Bearbeitung von Header und Footer am Beispiel der ConQuarium AG

Am folgenden Beispiel soll die Anpassung eines ConPresso-Projekts beschrieben werden. Die ConPresso-Beispielfirma "ConQuarium AG" finden Sie auch im Internet unter ConQuarium AG-Website, wo Sie sich die Ergebnisse der Anpassung im Detail ansehen können.

Um das Beispiel möglichst verständlich zu halten, soll die Anpassung anhand der Produktseite der ConQuarium AG demonstriert werden. Es wird davon ausgegangen, dass bereits ein grafischer Entwurf der Website vorliegt. Im Fall der Produktseite der ConQuarium AG weist dieser folgendes Aussehen auf.

Freundlicherweise wurde vom Grafiker hinsichtlich des Inhalts der Seite u.a. bereits vorbereitet, an welcher Stelle die Überschrift "Possierliche Plastikfische für Ihre Badewanne" stehen soll und in welcher Form die Produkte dargestellt werden sollen.

Wird diese Seite statisch vom Programmierer in HTML umgesetzt, so entsteht beispielsweise der hier dargestellte Quelltext. Abgedruckt ist ausschließlich der Quelltext der Seite. Sofern gewünscht, können Sie Einsicht in die Stylesheet-Datei nehmen, indem Sie sich von der ConPresso-Website das ConQuarium AG-Archiv herunterladen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>ConQuarium AG - die ConPresso-Demofirma by Bartels.Schöne - Produkte</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Revisit" content="7 days" />
<meta name="page-topic" content="ConPresso-Demofirma" />
<meta name="author" content="Bartels Schöne GmbH & Co. KG, 48149 Münster, Deutschland" />
<meta name="identifier-URL" content="http://www.conquarium.de/" />
<meta name="robots" content="all" />
<meta name="Language" content="de" />
<meta name="Keywords" content="ConPresso, Content Management System, Contentmanagementsystem, Content-Management, ConQuarium, ConPresso Demo-Firma, PHP, mySQL, Redaktionssystem" />
<meta name="Description" content="ConQuarium ist die Demo-Firma zum Content Management System ConPresso" />

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

<script type="text/javascript">
    function clearInput(obj, def)
    {
        if (obj.value==def) obj.value='';
    }
</script>

</head>

<body><div id="rahmen">

<div id="sitenavi">
    <ul>
        <li style="background: none;">Weitere Websites:</li>
        <li><a href="http://www.conpresso.de" title="ConPresso" target="_blank">ConPresso</a></li>
        <li><a href="http://community.conpresso.de" title="ConPresso Community" target="_blank">ConPresso Community</a></li>
        <li><a href="http://wiki.conpresso.de" title="ConPresso Wiki" target="_blank">ConPresso Wiki</a></li>
    </ul>
</div>

<div id="header">
    <div class="logo"><a href="/index.php" title="Startseite"><img src="../../images/logo.gif" alt="Logo der ConQuarium AG" width="203" /></a></div>

    <div class="search">
        <form action="" method="post" name="suchformular">
        Suche: <input name="search" title="Suchfeld" type="text" id="search" class="input" style="width:180px;" />
        <input type="button" value="  " class="submitsearch" />
        </form>
    </div>

    <div id="menu">
        <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">ConQuarium</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Produkte</a></li>
            <li><a href="#">Partner</a></li>
        </ul>
    </div>
</div>

<div id="content">
    <div id="right">

        <div class="rightboxblumen">
        <div class="spacer">
                <!--<img src="../../images/wurm1.gif" alt="" />-->
            </div>
            <object data="../../flash/blumen.swf" type="application/x-shockwave-flash" width="251" height="128">
                <param name="movie" value="../../flash/blumen.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#cad5e1" />
            </object>
        </div>

        <div class="rightboxhighlighted">
            <h3>So schwimmt's!</h3>
            Um Texte zu ändern, klicken Sie bitte auf "Backend Login".<br />
            <br />
            Bitte bedenken Sie dabei, dass alle Texte auch von anderen Usern geändert werden können.<br />
        </div>

        <div class="rightboxschatten">
            <a href="http://www.conquarium.de/conpresso/_admin/index.php" title="Backend Login" target="_blank">Backend Login »</a>
        </div>
    </div>

    <div id="left">

<!-- lokaler header "hellblau" -->
        <div class="inhaltrandtop"></div>
        <div class="inhalt">
            <h1>Possierliche Plastikfische für Ihre Badewanne</h1>
            
            <!-- Start Produktausgabe -->

            <div style="padding-bottom: 30px;">
            <h2>Elefantenfisch</h2>
            <p>Der Elefantenfisch ist der Action-Fisch für Ihre Wanne</p>
            <img src="images/elefant1.gif" alt="Produktabbildung 1 - Elefantenfisch" title="Produktabbildung 1 - Elefantenfisch" width="261" height="145" /><br />
            <div>
                <table border="0" cellpadding="0" cellspacing="5">
                <tbody>
                    <tr>
                        <td align="right">Größe:</td>
                        <td>max. 20 x 15 cm</td>
                    </tr>
                    <tr>
                        <td></td> 
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right">Farben:</td>
                        <td>türkisblau</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>blaugrün</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>zinnober</td>
                    </tr>
                </tbody>
                </table>
                <br />
                Aufgrund seines ausschweifenden Schwimmverhaltens empfehlen wir den Einsatz des Elefantenfisches
                insbesondere in Swimmingpools. Wenn er allerdings gelegentlich mit ins Freibad genommen wird,
                fühlt er sich auch in der Badewanne wohl. Erhältlich in verschiedenen Rüssellängen und Farben.
            </div>
            <p><a href="#" >Elefantenfisch-Produktdetails »</a></p>
            </div>

            <!-- Ende Produktausgabe -->
            
        </div>
        <div class="inhaltrandbottom"></div>
        <object data="../../flash/fisch.swf" type="application/x-shockwave-flash" width="300" height="155">
            <param name="movie" value="../../flash/fisch.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#dde5ec" />
        </object>

    </div><!-- /left -->

    <div class="clear"> </div>

</div>

<div id="footer">
    Copyright © 2000-2006 • <a href="http://www.bartels-schoene.de" title="Bartels.Schöne" target="_blank">Bartels.Schöne</a>
    • All Rights reserved • <a href="#">Impressum</a>
</div>

</div></body>
</html>

Der Bereich, der am Anfang durch den Kommentar "<!-- Start Produktausgabe -->" und am Ende durch "<!-- Ende Produktausgabe -->" gekennzeichnet ist, markiert die Stelle, an der ConPresso später die Produkte ausgeben soll. Exakt an dieser Stelle befindet sich damit auch die gedankliche Trennung von Header- und Footer-Dateien. D.h. der gesamte Quelltext, der oberhalb des markierten Bereichs steht, ist der Teil, der in die Header einzufügen ist. Bei dem Teil, der sich unterhalb des Bereichs befindet, handelt es sich um den Teil des Quelltextes, der in Footer einzufügen ist.

Um dies zu verdeutlichen, wird der oben gezeigte Quelltext anhand der folgenden Tabelle den entsprechenden Header- und Footer-Dateien (Zieldateien) zugeordnet. Der Teil des Quelltextes, der die eigentliche Darstellung des Produkts erzeugt, wird hier nicht mehr berücksichtigt (Zeile 4 der Tabelle "für Header und Footer nicht benötigt"). Dieser Teil des Quelltextes findet hingegen teilweise bei der Erstellung von ConPresso-Artikeltemplates Verwendung.

<!-- start of _cfg/global_header.php -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>ConQuarium AG: Possierliche Plastikfische für Ihre Badewanne - ConPresso-Demofirma by Bartels.Schöne - Münster - Internetagentur - Content Management</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Revisit" content="After 7 days" />
<meta name="page-topic" content="" />
<meta name="author" content="" />
<meta name="identifier-URL" content="" />
<meta name="robots" content="INDEX, FOLLOW" />
<meta name="robots" content="all" />
<meta name="Language" content="Deutsch" />

<meta name="Keywords" content="" />
<meta name="Description" content="" />

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

<script type="text/javascript">
    function clearInput(obj, def)
    {
        if (obj.value==def) obj.value='';
    }
</script>

</head>

<body><div id="rahmen">

<div id="sitenavi">
    <ul>
        <li style="background: none;">Weitere Websites:</li>

        <li><a href="http://www.conpresso.de" title="ConPresso" target="_blank">ConPresso</a></li>
        <li><a href="http://community.conpresso.de" title="ConPresso Community" target="_blank">ConPresso Community</a></li>
    </ul>
</div>

<div id="header">
    <div class="logo"><a href="/index.php" title="Startseite"><img src="../../images/logo.gif" alt="Logo der ConQuarium AG" width="203" /></a></div>

    <div class="search">
        <form method="get" action="../mod_search/index.php">

            <input name="action" value="search" type="hidden" />
            <input name="rubric" value="" type="hidden" />
            Suche: <input name="q" title="Suchfeld" class="input" style="width: 180px;" value="" type="text" />
            <input value="  " class="submitsearch" type="submit" />
        </form>
    </div>

    <div id="menu">
        <ul><li><a href="http://www.conquarium.de/conpresso4/dunkelblau/index.php?rubric=Home">Home</a></li><li><a href="../dunkelblau/index.php?rubric=ConQuarium+-+Über+ConQuarium">ConQuarium</a></li><li><a href="http://www.conquarium.de/conpresso4/_rubric/index.php?rubric=News">News</a></li><li class="active"><a href="http://www.conquarium.de/conpresso4/_rubric/index.php?rubric=Produkte">Produkte</a></li><li><a href="http://www.conquarium.de/conpresso4/_rubric/index.php?rubric=Download">Download</a></li><li><a href="../_rubric/index.php?rubric=Partner+-+Aktuelles">Partner</a></li></ul>    </div>

</div>

<div id="content">
    <div id="right">

        <div class="rightboxblumen">
            <div class="spacer">
        </div>

            <object data="../../flash/blumen.swf" type="application/x-shockwave-flash" width="251" height="128">
                <param name="movie" value="../../flash/blumen.swf" />

                <param name="quality" value="high" />
                <param name="bgcolor" value="#cad5e1" />
            </object>
        </div>

        <div class="rightboxschatten">
            <a href="../_admin/index.php" target="_blank" title="ConPresso Backend-Login">ConPresso Backend-Login</a>
        </div>
    </div>

    <div id="left">
<!-- end of _cfg/global_header.php -->
<!-- start of RUBRIC/_local_header.php -->
        <div class="inhaltrandtop"></div>
        <div class="inhalt">
        <h1>Possierliche Plastikfische für Ihre Badewanne</h1>
<!-- end of RUBRIC/_local_header.php -->
<div style="padding-bottom: 30px;">
<h2>Elefantenfisch</h2>
<p>Der Elefantenfisch ist der Action-Fisch für Ihre Wanne</p>
<img src="images/elefant1.gif" alt="Produktabbildung 1 - Elefantenfisch" title="Produktabbildung 1 - Elefantenfisch" width="261" height="145" /><br />
<div>
    <table border="0" cellpadding="0" cellspacing="5">
    <tbody>
        <tr>
            <td align="right">Größe:</td>
            <td>max. 20 x 15 cm</td>
        </tr>
        <tr>
            <td></td> 
            <td></td>
        </tr>
        <tr>
            <td align="right">Farben:</td>
            <td>türkisblau</td>
        </tr>
        <tr>
            <td></td>
            <td>blaugrün</td>
        </tr>
        <tr>
            <td></td>
            <td>zinnober</td>
        </tr>
    </tbody>
    </table>
    <br />
    Aufgrund seines ausschweifenden Schwimmverhaltens empfehlen wir den Einsatz des Elefantenfisches
    insbesondere in Swimmingpools. Wenn er allerdings gelegentlich mit ins Freibad genommen wird,
    fühlt er sich auch in der Badewanne wohl. Erhältlich in verschiedenen Rüssellängen und Farben.
</div>
<p><a href="#" >Elefantenfisch-Produktdetails »</a></p>
</div>
<!-- start of RUBRIC/_local_footer.php -->

        </div>
        <div class="inhaltrandbottom"></div>

<!-- end of RUBRIC/_local_footer.php -->
<!-- start of _cfg/global_footer.php --> 

        <div class="leftboxhighlightedtop"><!-- --></div>
        <div class="leftboxhighlighted">
            <h2>Achtung: Die ConQuarium AG ist ein fiktives Unternehmen!</h2>

            <p>Um Texte zu ändern, klicken Sie bitte auf
            "<a href="../_admin/index.php" title="ConPresso Backend-Login" target="_blank">ConPresso Backend-Login</a>" 
            und loggen sich anschließend mit den angezeigten Zugangsdaten ein.
            Bitte bedenken Sie dabei, dass alle Texte auch von anderen
            Benutzern geändert werden können.</p>
            <p>Die beschriebenen Produkte können <strong>wirklich nicht</strong> bestellt werden!</p>
        </div>
        <div class="leftboxhighlightedbottom"><!-- --></div>

        <object data="../../flash/fisch.swf" type="application/x-shockwave-flash" width="300" height="155">

            <param name="movie" value="../../flash/fisch.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#dde5ec" />
        </object>

    </div>

    <div class="clear"> </div>

</div>

<div id="footer">
    Copyright © 2000-2006 • <a href="http://www.bartels-schoene.de" title="Bartels.Schöne" target="_blank">Bartels.Schöne</a>
    • All Rights reserved • <a href="../_rubric/index.php?rubric=Impressum">Impressum</a>
</div>

</div></body>

</html>

<!-- end of _cfg/global_footer.php -->
[Anmerkung]Anmerkung

Es sind auch von der beschriebenen Aufteilung leicht abweichende Aufteilungen denkbar.

Haben Sie die beschriebenen Anpassungen vollständig vorgenommen und die Header- und Footer-Dateien gespeichert, so erhalten Sie beim Aufruf der Rubrik "Podukte" Ihres ConPresso-Projekts das folgende Ergebnis.

Die Redakteure können nun mit der Eingabe der Produktinformationen beginnen, sofern ein entsprechendes Artikeltemplate angelegt wurde.

Der Teil des Artikeltemplates, der die Ausgabe auf der Rubrikseite formatiert, würde folgendermaßen aussehen. Die statischen Inhalte des Codes wurden dabei durch ConPresso-Platzhalter ersetzt.

<!-- start of template "ConQuarium - Produkte" -->
<div style="padding-bottom: 30px;">
<!-- ifSet: Produkt; --><h2><!-- TEXT: Produkt; --></h2><!-- /ifSet -->
<!-- ifSet: Produktuntertitel; --><p><!-- TEXT: Produktuntertitel; --></p><!-- /ifSet -->
<!-- ifSet: Bild; --><!-- IMAGE: Bild; --><br /><!-- /ifSet -->
<!-- ifSet: Produktteaser; --> <div><!-- HTML: Produktteaser; --></div><!-- /ifSet -->
<!-- ifSet: Produktdetails; --><p><!-- URL: Weiter-Link; --></p><!-- /ifSet -->
</div>
<!-- end of template "ConQuarium - Produkte" -->

Detaillierte Informationen zum Anlegen von Artikeltemplates erhalten Sie unter Abschnitt 2, "Artikeltemplate erstellen".

Weitere vorgenommene Anpassungen betreffen die Integration von Seitentitel und Rubriküberschrift (siehe Markierungen). Dazu wurde der statisch Titel wie folgt ergänzt.

<title>ConQuarium AG: <?php echo htmlspecialchars($cpoRubricSettings['title']); ?> - ConPresso-Demofirma by Bartels.Schöne - Münster - Internetagentur - Content Management</title>

Um die Rubriküberschrift aus den ConPresso-Rubrikeinstellungen auszugeben wird die Zeile

<h1>Possierliche Plastikfische für Ihre Badewanne</h1>

wie folgt geändert.

<?php 
    echo '<h1>'.htmlspecialchars($cpoRubricSettings['title']).'</h1>';
?>

Das Abschlussergebnis zeigt die folgende Abbildung. Sämtliche hier abgedruckten Quelltexte können in Form des ConQuarium AG-Archiv von der ConPresso-Website heruntergeladen werden.

2.3. Navigation im Frontend

Um dem Besucher des Frontends des Projekts die Möglichkeit zu geben, durch die Seiten zu navigieren, ist das Bereitstellen einer Navigation notwendig. ConPresso bietet hier zwei unterschiedliche Möglichkeiten. Während die statische Navigation eine eher einfache Methode ist, bietet die dynamische Navigation die Möglichkeit, die Navigationselemente innerhalb von ConPresso zu pflegen. Beide Mechanismen werden in den folgenden Abschnitten detaillierter erklärt.

Statische Navigation

Die Erstellung von statischen Navigationen ist eine einfache Methode, den Besucher durch die Website zu führen.

Sie sollten sich diese Möglichkeit insbesondere anschauen, wenn Sie nicht über die genug Kenntnisse in PHP und CSS verfügen, um dynamische Navigationen im ConPresso-Frontend einzusetzen. Statische Navigationen basieren auf der Möglichkeit, ConPresso-Rubriken gezielt durch einen für jede Rubrik eindeutigen Link bzw. eine eindeutige URL aufrufen zu können.

Dazu verlinken Sie einfach einen Navigationseintrag - sei es Text oder eine Grafik - mit genau dem Link, der die gewünschte Rubrik aufruft. Dieser Link setzt sich dabei nach folgendem Schema zusammen:

  • http://www.example.com/conpresso/_rubric/index.php?rubric=Rubrikname

Alternativ zum Namen der Rubrik kann auch die ID einer Rubrik zum Aufruf Verwendung finden:

  • http://www.example.com/conpresso/_rubric/index.php?rubric=Rubrik-ID

Der Link zum Aufruf einer Rubrik wird Ihnen auch jeweils in den Rurikeinstellungen einer Rubrik angezeigt. Falls ein anderes Rubrikverzeichnis als das Standard-Rubrikverzeichnis "_rubric" verwendet werden soll, passen Sie bitte die URL entsprechend an. Bitte entnehmen Sie die Details dem Abschnitt 2.1, "Rubrikeinstellungen bearbeiten".

Der Nachteil statischer Navigationen im Vergleich zu dynamischen Navigationen ist, dass diese nicht auf der im ConPresso-Backend erstellten Navigationsstruktur basieren, wie sie in Abschnitt 5, "Navigation bearbeiten" beschrieben wird. Änderungen müssen in diesem Fall manuell und unter Verwendung eines HTML-Editors durch Bearbeitung der Header- oder Footerdateien durchgeführt werden. Details zur Anpassung von Header- und Footerdateien erhalten Sie in Abschnitt 2.1, "Anpassung von Header- und Footer-Dateien".

Dynamische Navigation

Dynamische Navigationen bzw. Navigationsstrukturen, die im ConPresso-Backend wie in Abschnitt 5, "Navigation bearbeiten" beschrieben erzeugt werden, lassen sich im ConPresso-Frontend unter Verwendung von ConPresso-Funktionen wieder ausgeben. Die im Folgenden beschriebenen Funktionen printNavigation, getNavigation und getActiveElements können sowohl in den ConPresso-Header- als auch in Footerdateien verwendet werden.

Da die Navigation flexible Anpassungen hinsichtlich Funktion und optischer Anmutung zuläßt, benötigen Sie zur Erstellung bzw. zur Anpassung der Navigation PHP- und CSS-Kenntnisse.

Die Funktion printNavigation

Die Funktion printNavigation ist das Herzstück der dynamischen Navigation in ConPresso. Sie gibt die dynamische Navigation in einer unsortierten HTML-Liste ("<ul>") aus. Unterebenen der Navigation werden als geschachtelte Listen ausgegeben, so dass die Liste mit jeder zusätzlichen Navigationsebene eine weitere Schachtelung enthält.

Der generierte Quellcode zu dieser Ausgabe lautet folgendermassen.

<?php
    include_once(CPO_BASEDIR.'_include/printnavigation.inc.php');
    printNavigation('', 0, 99, 0, false);
?>

Diese ausgegebene Liste kann anschliessend mit Cascading Stylesheets (CSS) individuell formatiert werden.

[Anmerkung]Anmerkung

ConPresso markiert die aktiven Navigationselemente mit der Klasse ".active".

Die Verwendung der Funktion und Parameter lauten wie folgt.

boolean printNavigation(navi,  
 navi,  
 activeRubric,  
 levels,  
 parent,  
 activeOnly); 
 navi;
 activeRubric;
 levels;
 parent;
 activeOnly;
navi

Der Array-Parameter navi ist optional und wird von ConPresso mit der aktuellen Navigation (vollständiger aktueller Navigationspfad) belegt, wenn ein leerer Wert ("") übergeben wird.

navi entspricht dem Array, man unter Verwendung der Funktion getNavigation erhält.

activeRubric

Der Integer-Parameter activeRubric entspricht der ID der aktuell aktiven Rubrik. Wird der Wert 0 übergeben, so wird als Standardwert die aktive Rubrik benutzt ($GLOBALS['cpoRubric']['id']).

levels

Mit dem Integer-Parameter levels kann vorgegeben werden, wieviele Ebenen der Navigation angezeigt werden sollen. Als Standard werden hier 99 Ebenen vorgegeben. Dieser Wert ist z.B. nötig, wenn dem Besucher der Seite von einer Navigation mit drei oder mehr Ebenen nur die ersten zwei angezeigt werden sollen.

parent

Der Integer-Parameter parent erlaubt die Ausgabe von Navigationen, die nicht vom Wurzelelement ausgehen. Durch den Standardwert 0 wird die Navigation vom Wurzelelement an ausgegeben.

Wird eine andere Navigations-ID angegeben, so gibt ConPresso den Inhalt erst ab diesem Navigationselement aus. Benutzen Sie diesen Parameter z.B. dann, wenn die oberste Ebene aus zwei Elementen "Deutsch" und "Englisch" besteht und je Sprache eine andere Navigation ausgegeben werden soll.

activeOnly

Der Boolean-Parameter activeOnly ist ein Schalter dafür, ob alle (Unter-)Ebenen angezeigt werden sollen oder nur die jeweils aktive "aufgeklappt" wird. Der Standardwert "false" bedeutet in diesem Fall, dass alle Ebenen ausgegeben werden. Wird der Wert auf "true" gesetzt, so werden nur die gerade aktiven bzw. "aufgeklappten" Elemente ausgegeben. Unterpunkte in anderen Ebenen werden in diesem Fall nicht angezeigt.

Beispiel 15.1. Ausgabe der vollständigen Navigationsstruktur

printNavigation();

Beispiel 15.2. Ausgabe nur der ersten Navigationsebene

printNavigation('', 0, 1, 0, false);

Beispiel 15.3. Ausgabe nur der zweiten Navigationsebene

printNavigation('', 0, 2, 0, false);

Beispiel 15.4. Ausgabe des aktuell aufgeklappten Navigationszweiges

printNavigation('', 0, 99, 0, true);

Die Funktion getNavigation

array getNavigation();

Die Funktion getNavigation liefert die vollständige Navigation in einem Array.

Der Inhalt dieses Arrays entspricht dem Parameter navi der Funktion printNavigation.

Die Funktion getActiveElements()
array getActiveElements(navi,  
 navi,  
 activeRubric); 
 navi;
 activeRubric;

Die Funktion getActiveElements liefert die ein Array der aktiven Rubriken in der jeweiligen Navigationsebene zurück. Es handelt sich hierbei um den Pfad in der Navigation, der zu der gerade aktiven Rubrik führt. Die beiden Übergabeparameter sind optional und nur in speziellen Fällen anzugeben.

Die Funktion kann z.B. dazu genutzt werden, ein "Breadcrumb"-Menü auszugeben.

navi

Der Array-Parameter navi ist optional und wird mit der aktuellen Navigation belegt, wenn der Wert ein leerer Wert ("") übergeben wird. Er entspricht dem Array, das die Funktion getNavigation zurückliefert.

activeRubric

Der Integer-Parameter activeRubric entspricht der ID der aktuell aktiven Rubrik. Wird der Wert 0 übergeben, so wird als Standardwert die aktive Rubrik benutzt ($GLOBALS['cpoRubric']['id']).

Beispiel 15.5. Nutzung von getActiveElements

$aE = getActiveElements();
foreach ($aE as $k=>$v) {
    if ($k=='X') continue; // nicht existierende "Ebene 0" überspringen
    echo "Ebene $k: Rubrik: $v >> ";
}

[Anmerkung]Anmerkung

Die Identifikation des aktuellen Navigationspfades funktioniert nur dann, wenn eine Rubrik nicht in verschiedenen Ebenen vorkommt. Kommt eine Rubrik hingegen in verschiedenen Ebeneen der Navigation vor, so wird ausschliesslich das erste Navigationselement gefunden, dem die aktuelle Rubrik zugeordnet wird.

Möchten Sie eine Rubrik in unterschiedlichen Navigationsebenen verwenden, so verwenden Sie die Option "Externer Link", wie in Abschnitt 5.1, "Navigationselement bearbeiten" beschrieben, um einen Link auf die Rubrik zu erzeugen.