DynPG-Wiki - Benutzerbeiträge [de]

MediaWiki:Sidebar

2009-10-10T08:16:32Z

Sebastian:

MediaWiki:Dynpgforum-url

2009-10-10T08:14:58Z

Sebastian:

http://www.dynpg.org/cms-freeware.php?t=Support+Forum&read_group=38

Eine einfache Inhaltsübersicht

2009-09-23T13:11:54Z

Sebastian:

[[Kategorie:Integration in eine Webseite]]
[[en:Integration short and sweet]]
== Ein paar Hinweise zum Einstieg ==

Infolge der bestehenden Standard-Templates ist es nicht zwingend notwendig, neue
Templates zu erstellen. Es kann demnach einfach erst einmal der Code eingebunden
werden. Ansichten werden durch das CSS "config_general.css" verändert, welches sich
im Verzeichnis CSS im Stammverzeichnis von DynPG befindet.

Wir verweisen darauf hin, dass diese Erklärung hier nicht die komplette Dokumentation ersetzt.
Wir zeigen hier nur grob ein Muster auf, Erklärungen zu den einzelnen Varianten können
in anderen Artikeln nachgelesen werden.

Nun zur Definition der einzelnen Ansichten.

Um DynPG in Ihren PHP-Seiten verwenden zu können, setzen Sie bitte die folgenden
drei Zeilen an den Anfang Ihrer PHP-Seite, noch bevor Sie irgend welche HTML-Tags
einfügen (d.h. auch noch vor den <tt>DOCTYPE</tt>).
<code>[php,N]
<?php
require('dynpg/getcontent.php');
$DynPG->SetParam_PathToRoot('dynpg/');
?>
</code>

Sie haben daraufhin nun die Möglichkeit, verschiedene Ansichten zu implementieren,
welche die Aufgabe haben, den von Ihnen erzeugten Inhalt aus dem Backend ins Frontend
zu implementieren. Logischerweise ergeben sich daraus drei Listungen, welche
die Darstellung der Daten abdecken: Artikellisten, Gruppenlisten und einzelne Ansichten
der Artikel.

DynPG arbeitet hier mit PHP-Snipptes, Codeschnipseln, welche Sie an die jeweiligen
Stellen Ihrer Seite schieben, wodurch an eben diesen Stellend er Inhalt angezeigt wird.

Der Sinn dahinter ist, dass die Templatearbeit verringert wird, da sie im äußersten Falle
nur die Templates der dynamsichen Ansichten editieren müssen, der Rest der Seite
kann von Ihnen frei und wie gewohnt erstellt werden.

== Die Einbindung eines einzelnen Artikels ==

Im <tt><head></tt>-Bereich jeder php-Datei kann danach ein CSS definiert werden. Dabei sind
Sie frei, an welcher Stelle Sie das Snippet einsetzen. Es empfiehlt sich aber der Übersichtlichkeit
halber, dieses immer am selben Ort einzufügen.
<code>[php,N]
<?php $DynPG->Write_CSS_JS_Header(); ?>
</code>

Dieser Befehl implementiert die CSS-Dateien des CMS, alternativ können Sie natürlich
auch jegliche CSS-Definitionen in ihren eigenen CSS-Dateien vornehmen.

Nun folgt das eigentliche Snippet für den einzubindenden Artikel. Sie haben also die
Möglichkeit, den Artikel einfach in Ihr vorgesehenes Design einzubinden, wo auch immer
dies auf der Seite sein möge.
<code>[php,N]
<?php
// parameters
$DynPG->SetParam_A_CategoryNavigation(FALSE);
$DynPG->SetParam_A_PrintNavigation(FALSE);
$DynPG->SetParam_A_ArticleHeader(FALSE);
$DynPG->SetParam_A_Article(1);
// implementation
$DynPG->SetParam_A_Anytime(TRUE);
$DynPG->Write_Article();
?>
</code>

Für die "1" unter <tt>SetParam_A_Article</tt> geben Sie diejenige Artikel-ID an, welche Sie implementieren möchten. Die jeweilige ID erfahren Sie im Backend.

== Die Einbindung einer Artikelliste ==

Snippet für die Artikelliste (hier werden alle Artikel der Gruppe „DynPG“ implementiert).
<code>[php,N]
<?php
$DynPG->SetParam_AA_Anytime(TRUE);
$DynPG->SetParam_AA_Group("DynPG");
$DynPG->Write_AllArticles();
$DynPG->SetParam_A_Anytime(FALSE);
$DynPG->SetParam_A_CategoryNavigation(TRUE);
$DynPG->SetParam_A_PrintNavigation(TRUE);
$DynPG->SetParam_A_ArticleHeader(TRUE);
$DynPG->SetParam_A_IgnoreSeperator(TRUE);
$DynPG->Write_Article();
?>
</code>

== Die Einbindung einer Gruppenliste ==

Die dazugehörige Gruppenstruktur im Backend sähe folgendermaßen aus:
*DynPG
**Module
***diverse Artikel
**Demos
***diverse Artikel

Snippet für die Gruppenliste
<code>[php,N]
<?php
$DynPG->SetParam_UseCategory('DynPG');
$DynPG->SetParam_AG_Anytime(TRUE);
$DynPG->SetParam_AG_ForceNav(TRUE);
$DynPG->Write_AllGroups();
$DynPG->SetParam_AA_Anytime(FALSE);
$DynPG->SetParam_AA_ForceNav(TRUE);
$DynPG->Write_AllArticles();
$DynPG->SetParam_A_CategoryNavigation(FALSE);
$DynPG->SetParam_A_PrintNavigation(TRUE);
$DynPG->SetParam_A_ArticleHeader(TRUE);
$DynPG->Write_Article();
?>
</code>

== Diese Informationen als PDF ==
Dieser Artikel liegt auch als PDF vor, jedoch möglicherweise nicht so aktuell: [[Media:Integration.pdf|Integration.pdf]].

Kategorie:Integration in eine Webseite

2009-09-23T13:10:18Z

Sebastian:

[[en:Category:Integrating DynPG into a web site]]
=== Artikel ===
Vorschlag einer Reihenfolge zum Lesen:
*[[Integration kurz und knackig]]
*[[Ein erstes kleines Beispiel]]
*[[Die drei Ansichten von DynPG]]
*[[Funktionsreferenz/Globals]]
*[[CSS]]
*[[Templates]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Einbau der DynPG-Suche]]
*[[Sitemap-Tutorial]]
*[[Snippet-Beispiele]]
*[[Webseiten Suchmaschinen-tauglich machen]]
*[[SEO-Mythos]]

=== Video-Tutorials ===
Hilfestellung erhalten Sie auch in Form von Video-Tutorials:
* Das [[Video Kurze Erklärung des Backends]] gibt Ihnen grundlegenden Einblick in das Backend und damit auch in die Denkart von DynPG. Es ist also durchaus von Interesse für die Implementation von DynPG in eine Webseite.
* Das [[Video Globals in Adobe Dreamweaver]] wird Nutzern von Adobe Dreamweaver oder GoLive den Einstieg mit DynPG erleichtern.

==== Eine Beispiel-Implementierung von DynPG ====
* [[Video Erklärung der Grundstruktur]] -- Teil 1 einer Beispiel-Implementierung von DynPG
* [[Video Einbau eines einzelnen Artikels]] -- Teil 2 der Beispiel-Implementierung
* [[Video Einbau einer Artikelliste]] -- Teil 3 der Folge
* [[Video Einbau einer Gruppenliste]] -- Teil 4 des Tutorials

==== Eine volldynamische Website ====
Ein weitere Reihe von Videos erläutert Ihnen beispielhaft das Erstellen einer kleinen volldynamischen Website in fünf Schritten:
* Teil 1 -- [[Video Volldynamische Website - Einbinden von Globals]]
* Teil 2 -- [[Video Volldynamische Website - Erstellen der Navigation]]
* Teil 3 -- [[Video Volldynamische Website - Aufbau innerhalb dem Backend]]
* Teil 4 -- [[Video Volldynamische Website - Das CSS]]
* Teil 5 -- [[Video Volldynamische Website - Der CSS-Aufbau]]

Installation von Modulen

2009-09-23T13:09:23Z

Sebastian:

[[en:Installation of Modules]]
[[Kategorie:Module]]
Nachdem Sie ein Modul erworben haben, entpacken Sie dieses und laden den Inhalt in ihren Installationsordner ("cms") hoch. Dabei ist zu beachten, dass Sie den Unterordner im Ordner "plugin" (z.B. DPGshop, DPGforum) auch im Installationsordner in den Ordner "plugin" hochladen. Die Dateien im Ordner "update" laden Sie logischerweise auch im Installationsordner in den Ordner "update".

Wenn Sie nun in der Adresszeile Ihres Browsers das Installationsverzeichnis (also das Verzeichnis von DynPG) eingeben, startet die Installation des jeweiligen Moduls automatisch. Nach abgeschlossener Installation gelangen Sie über diese Adresse wieder zum Login für DynPG.

Installation eines Updates

2009-09-23T13:08:20Z

Sebastian:

[[en:Installation of Updates]]
[[Kategorie:Installation und Update]]
Entzippen Sie als erstes das entsprechende Update. Achten Sie darauf, dass Sie die
Updates der Reihenfolge nach vornehmen, sollten allenfalls mehrere gleichzeitig
notwendig sein.

[[Bild:update01.png]]

Kopieren Sie die Dateien in Ihre Website in ein leeres Verzeichnis, oder kopieren Sie
einfach den Hauptordner des entpackten ZIP-Files in Ihre Website hinein. Es ist
empfehlenswert, diesen Vorgang nicht im Web-Editor sondern über den Dateibrowser
Ihres Systems vorzunehmen.

Danach wechseln Sie zum FTP-Programm und stellen die Verbindung zum virtuellen
Server her.

Versichern Sie sich vor dem Hochladen, dass im Verzeichnis Update alle Dateien mit dem
Namen "update.* entfernt worden sind, welche allenfalls von einem vorgängigen Update
noch vorhanden sind.

In unserem Beispiel sehen Sie nun das geöffnete FTP-Programm. Wir haben das ganze
Update in das Verzeichnis "tool" gelegt, weil wir auch auf dem Server das gleichnamige
Verzeichnis haben. Nun markieren Sie den Inhalt des Verzeichnisses und schieben diesen
Inhalt in der genau gleichen Hierarchie auf Ihren Webserver.

[[Bild:update02.png]]

Wenn Sie alle Dateien hochgeladen haben, gehen Sie auf dem virtuellen Server in das
Verzeichnis Update und geben der Datei die erforderlichen Rechte 777.

Rechte vorher:

[[Bild:update03.png]]

Rechte danach:

[[Bild:update04.png]]

Nun wechseln Sie zum Browser und rufen das Verzeichnis auf, in welchem sich das
Backend befindet. In unserem Fall ist dies das Verzeichnis www.domain.ch/tool. Dabei
wird uns dieser Bildschirm angezeigt:

[[Bild:update05.png]]

Hier ersehen Sie die Änderungen, welche seit der letzten Version vorgenommen wurden.
Gleich darunter finden Sie die Lizenzbestimmungen und der aktuelle Stand des
Installationsvorganges.

[[Bild:update06.png]]

Wenn obige Voraussetzungen erfüllt sind, bestätigen Sie die Lizenzbedingungen und
beginnen mit der Installation bzw. schliessen sie schon wieder ab.

[[Bild:update07.png]]

Bevor Sie die Dateien vom Server löschen, aktualisieren Sie doch bitte erst das
Verzeichnis. Dadurch sehen Sie dann alle vorhandenen Dateien, welche dann auch
gemäss Beschreibung gelöscht werden müssen.

[[Bild:update08.png]]

Klicken Sie danach auf den Link zur Administration. Wenn Sie obige update-Dateien nicht
gelöscht haben, werden Sie nicht über die nächste Maske hinauskommen.

[[Bild:update09.png]]

Sobald Sie die Dateien gelöscht haben ist das Update abgeschlossen und Sie können sich
wieder in das Backend einloggen.

== Diese Informationen als PDF ==
Dieser Artikel existiert auch als PDF, jedoch möglicherweise nicht so aktuell:[[Media:Install_update.pdf|Install_update.pdf]]

Installation von DynPG

2009-09-23T13:07:47Z

Sebastian:

[[en:Installation of DynPG]]
{{old}}
[[Kategorie:Installation und Update]]
== Hochladen von DynPG und ausführen der Installation ==
*Entpacken Sie das heruntergeladene Archiv. Sie erhalten einen Ordner, indem die Installationsdateien für DynPG liegen. Benennen Sie ihn nach "cms" oder auch "dynpg" und laden diesen Ordner samt Dateien auf ihren Webserver.

*Bevor Sie die Installation beginnen, müssen Sie noch die Rechte für bestimmte Dateien und Ordner vergeben. Setzen Sie dazu für die Ordner "cms" und "cms/update/bin" und die Datei "configuration.php-dist" den CHMOD auf 777 (alle Rechte).

*Haben Sie alles hochgeladen, rufen Sie die Datei "cms/index.php" in Ihrem Browser auf. Nun wird automatisch die Installationsdatei ausgeführt.

*Lesen Sie im '''1. Schritt''' die Lizenzbedingungen und nehmen Sie diese mit einem Klick auf die Box "Ja, ich akzeptiere die o. g. Lizenzbedingungen" an. Darunter sehen Sie die Produktvoraussetzungen und ob Sie diese erfüllen. Ist alles in Ordnung drücken Sie auf "Weiter".

*Nun gelangen Sie zu '''Schritt 2'''. Hier geben Sie die Zugangsdaten zu Ihrem MySQL-Datenbankserver ein: Server (befindet sich Ihre Datenbank auf dem Server, auf dem auch DynPG liegt, dann geben Sie hier bitte "localhost" an), Benutzer, Passwort und Datenbank. Möchten Sie das CMS ohne Datenbankinstallation konfigurieren, so setzten Sie bitte einen Haken bei „DynPG Stand-Alone installieren“. Haben Sie alle Daten eingegeben, drücken Sie auf "Weiter".

*Im '''3. Schritt''' müssen Sie die Installationsoptionen vornehmen. Je nach Pakettyp stehen Ihnen unter "Module" verschiedene Zusatzmodule zur Verfügung. Unter "Optionen" können Sie angeben, welche zusätzlichen Daten mitinstalliert werden sollen.
**Prüfen Sie anschließend bitte den Installationsordner auf Korrektheit. Die Pfadangabe erfolgt absolut oder ausgehend vom Installationsverzeichnis.
**Geben Sie darunter die Domain an, unter der DynPG installiert wird. Zur Identifikation müssen Sie danach die Seriennummer angeben, welche Sie beim Download von DynPG erhalten haben. Diese Nummer besteht aus 13 Buchstaben und Ziffern und kann unter [http://www.dynpg.ch/ www.dynpg.ch] ->Download -> Meine Downloads nachgesehen werden. Zuletzt bestimmen Sie einen "Superadmin", mit dem Sie sich danach im CMS einloggen können. Dieser Benutzer besitzt zu Beginn absolute Administrationsrechte. Geben Sie im linken Textfeld einen Benutzernamen und im rechten ein Passwort ein. Mit einem Klick auf "Installieren" wird DynPG nun installiert.

*Im '''4. Schritt''' werden Sie über den Installationsverlauf informiert. Fehler werden mit roter Schrift angezeigt. Sollte dies der Fall sein, überprüfen Sie die entsprechende Fehlerquelle mit einem Klick auf "Zurück". Liegen keine Fehler vor, so ist die Installation erfolgreich abgeschlossen. Klicken Sie anschließend auf den Link <center>'''Hier gelangen Sie zur DynPG Administration!'''</center>

*Es werden Ihnen nun noch diejenigen Installationsdateien genannt, welche zu entfernen sind. In der Regel betrifft dies nur den Ordner „install“ in Ihrem DynPG Verzeichnis.

*Ausserdem müssen Sie danach dem Ordner "upload" noch alle Rechte zuweisen (CHMOD Wert muss auf "777" sein), da mittels DynPG hochgeladene Dateien in diesem Ordner gespeichert werden.

== Installation von Modulen ==
Siehe hier: [[Installation von Modulen]]

== Modifizieren der config.php ==
Nun können Sie im Programmordner von DynPG noch weitere Einstellungen vornehmen. Die entsprechende Datei heisst ''config.php''. Nachfolgend sind die verschiedenen Konfigurationsmöglichkeiten mit Beschreibung aufgelistet:

{| class="dynpgwikitable"
! <center>'''Bezeichner'''</center>
! <center>'''Beschreibung'''</center>

|-
| C_TOOL_TITLE

FORMS_IMAGES_DESTINATIONURL_ROOT
| Lassen Sie diese Werte unverändert um Fehler zu vermeiden.

|-
| MYSQL_SERVER

(wird bei Installation konfiguriert)
| Die Adresse bzw. IP zu dem Server, auf dem die MySQL Datenbank liegt. Befindet sich die Datenbank auf dem Server, auf dem auch DynPG liegt, dann geben Sie hier bitte '''localhost''' an (Standard).

|-
| MYSQL_USER

(wird bei Installation konfiguriert)
| Der Benutzername, mit dem Sie sich bei Ihrer MySQL Datenbank anmelden.

|-
| MYSQL_PASSWORD

(wird bei Installation konfiguriert)
| Das Passwort, welches DynPG authentifiziert und berechtigt an der Datenbank zu arbeiten.

|-
| MYSQL_DATABASE

(wird bei Installation konfiguriert)
| Der Datenbankname auf Ihrem MySQL-Server.

|-
| config_AllGroups_Limit
| Stellen Sie hier die maximale Anzahl an Gruppen ein, die in der Ansicht einer Gruppen-Liste angezeigt werden soll. Nach der angegebenen Anzahl wird eine neue Seite erstellt, auf der dann die restlichen Gruppen angezeigt werden.

Beispiel: Es existieren 15 Gruppen. Sie stellen diesen Wert auf "5". Dadurch werden die ersten fünf Gruppen angezeigt und es existieren weitere zwei Seiten auf denen dann die anderen Gruppen angezeigt werden.

|-
| config_AllArticles_Limit
| Das Äquivalent zur obigen Einstellung für die Ansicht der Artikel-Liste.

|-
| config_Home_Limit
| Die Anzahl der Artikel die auf der Home-Seite angezeigt werden sollen.

|-
| config _Guestbook_Limit
| Geben Sie hier die maximale Anzahl an Einträgen an, welche pro Seite des Gästebuches angezeigt werden soll.

|-
| config_Navigation_Range_Numbered
| Diese Einstellung betrifft die Navigation im Frontend. Geben Sie hier die Anzahl der Seitenzahlen um die aktuell angewählte an.

Beispiel: Ihre Angabe: 2

<nowiki>Navigation: Seiten [1] [2] … </nowiki>'''<nowiki>[4]</nowiki>'''<nowiki> … [9] [10]</nowiki>

|-
| Config_General_CompatibilityMode
| Diese Konfiguration besteht aus Kompatibilitätsgründen zu älteren Versionen. I. d. R. sollten Sie hier den voreingestellten Wert belassen. Wenn Sie eine Umsetzung alter Psdeudo-Code-Elemente im Artikeltext wünschen, setzen Sie diese Option auf '''true'''.

|}

Kategorie:Installation und Update

2009-09-23T13:07:11Z

Sebastian:

[[en:Category:Installation and update]]
{{old}}
=== Download ===
Sie gehen einfach auf [http://www.dynpg.ch www.dynpg.ch] in die Download-Sektion und laden die aktuellste Version herunter.

=== Upload und Installation ===

Wie Sie DynPG auf Ihren Server hochladen und konfigurieren, können Sie hier nachlesen: [[Installation von DynPG]].

=== Update von DynPG ===

Hinweise zum Updaten von DynPG finden sie hier: [[Installation eines Updates]]

=== Video-Tutorial ===

In diesen beiden Videos wird Ihnen der Download von der Webseite und Upload/Installation auf Ihren Webserver nochmals erklärt:
* [[Video Download, Registration und FTP-Upload|Download, Registration und FTP-Upload]]
* [[Video Die Installation auf dem Webserver|Die Installation auf dem Webserver]]

Kategorie:Einleitung

2009-09-23T13:06:26Z

Sebastian:

[[en:Category:Introduction]]
{{old}}
== Was? ==
DynPG steht für '''''"Dynamic Webpages"''''' und ist ein sogenanntes '''''"Content Management System"''''' (CMS), also ein System mit dem es möglich ist Websiten zu bauen und insbesondere sehr leicht instandzuhalten. Die Aufgabe eines CMS besteht bspw. darin den Aufwand für die Erstellung / Änderung eines Artikels und für die Einbindung dieses Artikels zu minimieren. Mit solch einem System können auch Personen '''''ohne Programmierkenntnisse ihre Website aktualisieren und neue Texte und Dateien einbinden'''''.

== Warum? ==
Warum ein neues CMS wenn es schon so viele davon gibt? Nun, viele CMS sind sehr umfangreich und bieten extrem viel Funktionalität, die Autoren kleiner bis mittlerer Websiten eher weniger verwenden. Dadurch werden sie recht schnell komplex und schwierieger einzubinden / zu bedienen. DynPG ist direkt '''''auf kleine bis mittlere Webpräsenzen zugeschnitten''''' und bietet die gängigsten Funktionen, bleibt dabei jedoch '''''einfach''''' in der Handhabung und ist zudem '''''kostenlos'''''!

Zusätzlich ist es mit Hilfe von Plugins sehr gut erweiterbar.

== Wie? ==
DynPG basiert auf '''''PHP (ab Version 4.0.6)''''', besitzt ein Pluginsystem, eine Template-Engine, ist '''''multilingual''''' und mit Hilfe von CSS flexibel gestaltbar! Nachdem Sie DynPG in Ihre Website integriert haben, können Sie mit Hilfe des sogenannten '''''Backends''''' (Verwaltungsoberfläche) Artikel schreiben, diese in Gruppen anordnen und sie dann auf dem '''''Frontend''''' (der eigentlichen Website) anzeigen lassen.

<gallery>
Image:backend_example1.jpg|Abbildung 1: Ansicht des Backends - Artikel erstellen
Image:backend_example2.jpg|Abbildung 2: Ansicht des Backends - Gruppen verwalten
Image:frontend_example1.jpg|Abbildung 3: Ansicht des Frontends - Gruppen anzeigen
</gallery>

{{-}}

== Wer? ==
Für die Entwicklung von DynPG zeichnen hauptsächlich [mailto:mail@ds-develop.de Daniel Schliebner] (Hauptentwickler) sowie [mailto:info@gamper-media.ch Urs Gamper] (Idee/Initiant und Auftraggeber) verantwortlich. Des Weiteren gibt es viele Menschen, die sich aktiv an der Entwicklung von DynPG beteiligen / beteiligt haben. Siehe hierzu [http://www.dynpg.ch/cms-freeware.php?t=Kontakt&read_category=27 Bereich Kontakt auf der DynPG-Website].

== System-Voraussetzungen ==
*PHP ab Version 4.0.6
*1 bereits vorhandene MySQL Datenbank
*FTP-Zugang
*Internet-Browser mit aktiviertem JavaScript

== Lizenz ==
Bei DynPG handelt es sich um Open-Source-Software die unter der [http://de.wikipedia.org/wiki/LGPL GNU Lesser General Public License] (LGPL) steht. Das System kann frei unter der LGPL verwendet werden! Die meisten Plugins sind kostenpflichtig und können mit einer einmaligen Lizenz je Domain erworben werden.

== Weiteres ==
Auf [http://www.dynpg.de/ www.dynpg.de] finden Sie in der '''''Rubrik Support''''' ein [http://www.dynpg.ch/index1.php?read_group=30 Forum], das speziell für Fragen zu DynPG eingerichtet wurde. In diesem Wiki befinden sich zudem weitere Artikel und einige Videos, welche die Installation wie auch die Bedienung von DynPG erklären.

Implementation eines kompletten Hauptmenüs

2009-08-17T18:49:55Z

Sebastian: /* Weitere Informationen */

[[Kategorie:Integration in eine Webseite]]
{{Einführungsartikel}}
== Einleitung ==
In den vorangegangenen Kapiteln haben Sie gelernt wie man DynPG in seine Seite integriert und es entsprechend anpasst. Ausgerüstet mit diesem Wissen wollen wir uns nun an eine wichtige Aufgabe machen: Die Erstellung eines '''''Seitenhauptmenüs'''''. Fangen wir also an. Als erstes benötigen wir eine leere '''''index.php''''', d.h. nicht ganz leer, sie enthält natürlich das Html-Grundgerüst. Außerdem erstellen wir uns eine CSS-Datei namens '''''style.css''''' mit der unser Menü optisch auf Vordermann gebracht werden soll. Das Grundgerüst könnte wie folgt aussehen:
<code>[php,N]
<?php
require 'cms/getcontent.php'; //DynPG-Funktionalität einbinden
$DynPG->SetParam_PathToRoot('cms/'); //DynPG-Pfad setzen
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Hauptmenue-Tutorial</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<?php $DynPG->Write_CSS_JS_Header(); ?> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head>
<body>
<h1>Hauptmenue-Tutorial</h1>
<table border="0">
<tr valign="top">
<th align="left" style="width:230px" id="hauptmenue">
<div style="border: 3px black solid">
<?php
//hier soll das Hauptmenü hin
?>
</div>
</th>
<th id="anzeige">
<div style="border: 3px black solid">
<?php
//hier sollen die anzuzeigenden Artikel und Gruppen hin
?>
</div>
</th>
</tr>
</table>
</body>
</html>
</code>

In den Spalten '''''hauptmenue''''' und '''''anzeige''''' sollen das Hauptmenü bzw. die eigentlichen Artikel, Artikellisten und Gruppenlisten angezeigt werden. Bevor wir nun den eigentlichen Code schreiben, müssen wir in das DynPG Backend und einen Artikel erstellen, nämlich den Artikel der das Hauptmenü tragen soll. Ja richtig, das Hauptmenü ist nämlich auch ein Artikel, nur eben ein etwas spezieller! Loggen Sie sich mit ihrem Account in das DynPG-Backend ein und gehen Sie in die Sektion '''''Artikelbezogene Texte'''''. Nun haben Sie schon einen neuen Artikeltext vor sich und müssen nur noch auf das '''''Dynamisches Menü einfügen''''' - Symbol über dem Textfeld klicken und just in diesem Moment müsste eine blaue Grafik mit der Bezeichnung "dynamisches Menü" im Textfeld erscheinen. Nun, das war es auch schon fast, drücken Sie nun den Knopf '''''Erstellen'''''.

[[Image:create_article.jpg|thumb|Abbildung 2.3. Artikel für das Hauptmenü erstellen]]

Der Hauptmenü-Artikel müsste nun darunter in der Liste '''''"Texte / Text-Gruppen"''''' angezeigt werden. Schauen Sie wo er sich dort befindet und merken Sie sich die '''''ID'''''. Mit der werden wir den Artikel nämlich jetzt anzeigen lassen. Gehen wir also wieder in unsere "index.php" und fügen in der '''''Spalte hauptmenue''''' folgendes ein:
{{-}}
<code>[php,Y]
<?php
//nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt!
$DynPG->SetParam_A_Anytime(true);
$DynPG->SetParam_A_Article(15);
$DynPG->Write_Article();
?>
</code>

Was genau passiert da? Nun in der 1. Zeile sagen wir DynPG, dass es den folgenden Artikel immer anzeigen soll, kontextunabhängig also. Das macht auch Sinn, denn es handelt sich hier schließlich um unser Hauptmenü und das ist sozusagen omni-präsent. Bei mir wurde dem Menü-Artikel die ID 15 zugewiesen, deshalb verwende ich beim Setzen des Artikels in Zeile 2 auch diese Nummer. Mit Zeile 3 wird dann das Menü angezeigt.

Nun müssen wir uns noch um die anzuzeigenden Artikel kümmern die man über das Menü erreichen kann, dazu fügen wir in der '''''Spalte anzeige''''' folgendes ein:

<code>[php,Y]
<?php
//nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt!
$DynPG->SetParam_A_Anytime(false);
$DynPG->SetParam_AA_Maxview(10); //Maximal zehn Einträge in Artikellisten
$DynPG->Write_AllArticles();
$DynPG->Write_Article();
?>
</code>

Zeile 1 funktioniert analog zu obigem Code. Die Zeilen 3 und 4 bewirken, dass sowohl Artikellisten (wenn im Menü auf eine Gruppe geklickt wird) als auch einzelne Artikel (wenn auf einen Artikel geklickt wird) angezeigt werden. Zeile 2 gibt an wie lang die Artikellisten sein dürfen, bevor sie der Übersicht halber auf mehreren Seiten (mit Navigation) dargestellt werden.

Für das Beispiel werden wir die style.css wie folgt füllen:

<code>[css,N]
/*alle Links schwarz*/
a{color: black;}

#hauptmenu p{
text-align: left;
}

/*Navigation, Print-Button und Artikelheader unsichtbar machen*/
#dynpg_A_breadcrumb{display: none;}

#dynpg_AA_breadcrumb_navi{display: none;}
#dynpg_AA_breadcrumb_pages{display: none;}

#dynpg_A_btnprint{display: none;}

#dynpg_A_header{display: none;}
</code>

Hier werden die Artikel-Navigation (dynpg_A_breadcrumb), der Artikel- Printbutton (dynpg_A_btnprint) sowie der Artikelkopf (dynpg_A_header) ausgeblendet.

Nun kann das ganze sogar schon ausgeführt werden und sieht bei mir folgendermaßen aus:

[[Image:first_look.jpg|200px|Abbildung 2.4. ein erstes funktionierendes Hauptmenü]]

Freilich variiert diese Ansicht, denn es werden natürlich immer die Gruppen und Artikel angezeigt die man im Backend definiert hat. Hier habe ich größtenteils alles so gelassen wie man es nach der Installation von DynPG mit den Beispieldaten vorfindet. Nun kann man daran gehen eigene Artikel/Gruppen zu erzeugen, die dann natürlich auch im Menü auftauchen werden.

Das Menü, so wie es jetzt erscheint, ist rein optisch noch etwas rudimentär, daher werden wir nun daran gehen das ganze ein bisschen aufzupeppen indem wir Grafiken für die einzelnen Menüpunkte einfügen.

== Grafiken für die Menüpunkte ==
Da nun bereits ein fertiges Menü-Grundgerüst steht, sollte es ein leichtes sein Grafiken für die einzelnen Menüpunkte einzufügen, denn dazu müssen wir lediglich die Stylesheet-Datei '''''style.css''''' um folgenden Code erweitern:
<code>[css,N]
/*===========================Hauptkategorien==============================*/
/*Hintergrundbilder für die Menüeinträge setzen*/
#hauptmenue .level_0_r_i_exp, #hauptmenue .level_0_r_i_exp_hover,
#hauptmenue .level_0_r_a_exp_hover, #hauptmenue .level_0_r_a_exp
{
background: url("images/note.gif") no-repeat left top;
padding: 0px 0px 5px 0px;
}
/*Bezeichnungen für die Menüeinträge positionieren*/
#hauptmenue .level_0_r_i_exp p, #hauptmenue .level_0_r_i_exp_hover p,
#hauptmenue .level_0_r_a_exp_hover p, #hauptmenue .level_0_r_a_exp p
{
position: relative;
left: 40px;
}
/*===========================Sub-Kategorien==============================*/
/*Bezeichnungen für die Menüeinträge positionieren*/
#hauptmenue .level_1_r_i_exp p, #hauptmenue .level_1_r_i_exp_hover p,
#hauptmenue .level_1_r_a_exp_hover p, #hauptmenue .level_1_r_a_exp p
{
position: relative;
left: 60px;
}
/*===========================Sub-Sub-Kategorien==============================*/
/*Bezeichnungen für die Menüeinträge positionieren*/
#hauptmenue .level_2_r_i_exp p, #hauptmenue .level_2_r_i_exp_hover p,
#hauptmenue .level_2_r_a_exp_hover p, #hauptmenue .level_2_r_a_exp p
{
position: relative;
left: 60px;
}
</code>
Um diesen Code zu verstehen müssen wir zunächst ein paar Sachen klären. Jedem Menüpunkt wird von DynPG in CSS automatisch eine Klasse zugeordnet mit der wir in die Lage versetzt werden die einzelnen Eigenschaften zu setzen. Folgende Gruppen gibt es:

* '''''level_0_r_i_exp''''' (inaktiver(noch nicht geklickter) Menüpunkt)
* '''''level_0_r_i_exp_hover''''' (inaktiver(noch nicht geklickter) Menüpunkt auf dem die Maus steht)
* '''''level_0_r_a_exp''''' (aktiver(geklickter) Menüpunkt)
* '''''level_0_r_a_exp_hover''''' (aktiver(geklickter) Menüpunkt auf dem die Maus steht)

All diese Klassen beziehen sich auf Menüpunkte des Typs '''''Level 0''''', also die Hauptpunkte / Punkte der obersten Kategorie. Für Menüpunkte des Typs '''''Level X''''' gibt es natürlich auch Klassen:

* '''''level_X_r_i_exp''''' (inaktiver(noch nicht geklickter) Menüpunkt)
* '''''level_X_r_i_exp_hover''''' (inaktiver(noch nicht geklickter) Menüpunkt auf dem die Maus steht)
* '''''level_X_r_a_exp''''' (aktiver(geklickter) Menüpunkt)
* '''''level_X_r_a_exp_hover''''' (aktiver(geklickter) Menüpunkt auf dem die Maus steht)

Wobei X im Bereich von 0 bis 3 liegt! Ist ein Menüpunkt eine Gruppe werden alle seine Untergruppen bzw. Unterartikel in einem Div mit dem Namen

* '''''group_fold_ID'''''

zusammengefasst, wobei '''''ID''''' für die ID der Gruppe steht (diese wird beim Erstellen generiert und kann im Backend bzw. im generierten Html-Code (Browser) nachgelesen werden). Jetzt wird sicher auch klar wie der Code in style.css zu verstehen ist, in der nur Menüeinträge bis Level2 formatiert werden. Den vollständigen Code und ein laufendes Beispiel kann man sich [[CSS Einfaches Hauptmenü mit Bildern|hier]] anschauen.

== Verschiedene dynamische Grafiken für verschiedene Menüpunkte ==
Im vorherigen Beispiel haben wir Grafiken für die Menüpunkte eingefügt, nun soll jeder Menüpunkt seine eigene Grafik erhalten und diese soll sich zudem ändern, wenn man mit der Maus daraufzeigt. Das hört sich zwar schon etwas komplizierter an, tatsächlich müssen wir aber wieder "nur" die '''''style.css''''' ändern, der eigentliche Code für das Menü bleibt so bestehen.

[[CSS Einfaches Hauptmenü mit verschiedenen Bildern und Hovereffekt|Hier]] können der Css-Code und das ausführbare Beispiel bewundert werden.

Erklärung: Im vorigen Beispiel stellten wir bereits fest, dass jedem Menüpunkt eine Klasse zugeordet wird und das Menüpunkte die Gruppen sind von divs mit dem Namen '''''group_fold_ID''''' (wobei "ID" die Id der Gruppe ist) umschlossen werden. Da die Namen (bzw. Ids) dieser divs eindeutig sind, können wir mit ihrer Hilfe jedem Menüpunkt eine eigene Grafik zuordnen:

<code>[css,N]
#group_fold_6 .level_0_r_i_exp
{
background: url("images/warning1.gif") no-repeat left top;
}
</code>

Bei mir ist der erste Menüpunkt eine Gruppe welche die Id "6" trägt, daher '''''group_fold_6'''''! Mit '''''.level_0_r_i_exp''''' beziehe ich mich auf die Eigenschaften des Menüpunktes die er hat, wenn er nicht aktiv (nicht angeklickt oder mit dem Mauszeiger berührt) ist. In diesem Zustand soll ihm die Grafik '''''warning1.gif''''' zugewiesen werden.

<code>[css,N]
#group_fold_6 .level_0_r_i_exp_hover,
#group_fold_6 .level_0_r_a_exp_hover, #group_fold_6 .level_0_r_a_exp
{
background: url("images/warning2.gif") no-repeat left top;
}
</code>

Wenn er aktiv ist (also angeklickt oder mit dem Mauszeiger berührt wird), dann soll er die Grafik '''''warning2.gif''''' erhalten. Nun kann man so für alle weiteren Hauptpunkte vorgehen und erhält den im [http://www.dynpg.ch/doku/examples/css/menu_with_different_images/index.php ausfürbaren Beispiel] vorgestellten Effekt.

== Direktklick auf Gruppen ==
[[Image:special_group.jpg|thumb|Abbildung 2.5. Spezielle Gruppe]]
Bis jetzt wurde bei einem Klick auf eine Gruppe im Hauptmenü immer eine Artikelliste (sowohl im Menü als auch im Anzeigefenster) dargestellt. Was aber wenn wir wollen, dass direkt und ohne jeden Umweg ein Artikel angezeigt werden soll? Nun, die Lösung ist einfach und erfordert noch nicht einmal Quellcode, denn das '''''Backend''''' erledigt all dies schon für uns. Für das Beispiel habe ich dort nämlich eine Gruppe namens '''''spezielle Gruppe''''' erstellt. In der Gruppe habe ich dann einen Artikel mit dem Namen '''''spezieller Artikel''''' erstellt und ihm einen beliebiegen Artikeltext zugewiesen. Ist dies einmal geschehen kann man in der Gruppenliste bei "spezielle Gruppe" auf das "Bearbeiten"-Symbol klicken (das, welches wie ein Kugelschreiber aussieht) und bei '''''"Gruppeninhalt"''''' die Id von "spezieller Artikel" eintragen. Und schon erhält man im [http://www.dynpg.ch/doku/examples/css/menu_with_different_images/index.php ausfürbaren Beispiel] den beschriebenen Effekt.
{{-}}
== Unterschiedliche Stile für unterschiedliche Seiten ==
Angenommen Sie haben einen Menüpunkt Kontakt und einen namens Startseite und Sie wollen, dass beide z.B. verschiedene Hintergrundfarben zur Darstellung verwenden. Was tun? Glücklicherweise gibt es dafür Menüfunktionalitäten die einem die Arbeit abnehmen. Dabei sei auf [[Code-Schnipsel Unterschiedliche Stile für unterschiedliche Seiten|dieses Beispiel]] verwiesen.

Im Beispiel werden die folgenden beiden Funktionen verwendet:

<code>[php,Y]
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../index.php');
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_subpages', Array(1 => '../details.php'));
</code>

Funktion 1 legt die PHP-Datei fest, die zum anzeigen sämtlicher Menüpunkte verwendet werden soll (hier: index.php). Funktion 2 legt die Datei fest, die zum anzeigen der "Startseite"-Gruppe verwendet werden soll. Somit überschreibt Funktion 2 die Einstellungen von Funktion 1 für "Startseite". Dabei muss wieder die ID der Gruppe angegeben werden (kann im Backend nachgelesen werden). Jedesmal wenn man jetzt auf die Startseiten-Gruppe klickt, wird statt dem Code von index.php, der von details.php zum anzeigen verwendet. Man kann natürlich auch mehr als eine Datei angeben:

<code>[php,N]
$DynPG->SetParam_PlugIn_Param('DPGdynmenu',
'href_subpages',
Array(
5 => '../details.php',
7 => '../beliebige_datei.php'
)
);
</code>

[[Image:caution.png]] '''Achtung''' Bei dem Pfad für die anzugebenen Dateien wird von dem Standard-Pfad von DynPG ausgegangen (dem in dem die '''''getcontent.php''''' liegt), nicht von dem der Datei in dem die Funktion aufgerufen wird!

[[Image:caution.png]] '''Achtung''' Hat man für eine Gruppe eine andere Datei festgelegt, dann wird diese Datei nicht zwingend auch für die Untergruppen verwendet! Man muss auch explizit für die Untergruppen die zu verwendenden Dateien angeben!!

== Einträge sortieren ==
Der Titel sagt bereits alles: Wir wollen hier die Einträge im Menü sortieren, und zwar nach verschiedenen Schlüsseln, wie z.B. dem Index der Gruppe / des Artikels oder dem Namen. Dazu gibt uns DynPG zwei Funktionen zur Hand nämlich:

<code>[php,Y]
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
</code>

Die erste der beiden legt den Sortierschlüssel fest (hier: der Index der Gruppe / des Artikels). Mögliche Sortierschlüssel sind:

* '''''INDEX''''' (Index des Eintrages)
* '''''NAME''''' (Name des Eintrages)
* '''''CREATEDATE''''' (Erstellungsdatum)

Die zweite sortiert schließlich die Einträge. Dabei hat man die Wahl zwischen auf- ('''''ASC''''') und absteigend ('''''DESC'''''). [[Code-Schnipsel Menüeinträge sortieren|In diesem Beispiel]] sieht man die Funktionen in Aktion.

[[Image:caution.png]] '''Achtung''' Die Funktionen müssen natürlich '''''vor''''' der Ausgabe des Menüs aufgerufen werden.

==Weitere Informationen==

[[Bild:Tip.png]] Mehr Informationen zum Einbinden von Hauptmenüs in Ihre Seite erhalten Sie im Artikel [[Modul Dynamische Navigation]], der Beschreibungsseite des DynPG-Plugins, dass in obigem Artikel Verwendung fand.

Implementation eines kompletten Hauptmenüs

2009-08-17T18:48:23Z

Sebastian:

[[Kategorie:Integration in eine Webseite]]
{{Einführungsartikel}}
== Einleitung ==
In den vorangegangenen Kapiteln haben Sie gelernt wie man DynPG in seine Seite integriert und es entsprechend anpasst. Ausgerüstet mit diesem Wissen wollen wir uns nun an eine wichtige Aufgabe machen: Die Erstellung eines '''''Seitenhauptmenüs'''''. Fangen wir also an. Als erstes benötigen wir eine leere '''''index.php''''', d.h. nicht ganz leer, sie enthält natürlich das Html-Grundgerüst. Außerdem erstellen wir uns eine CSS-Datei namens '''''style.css''''' mit der unser Menü optisch auf Vordermann gebracht werden soll. Das Grundgerüst könnte wie folgt aussehen:
<code>[php,N]
<?php
require 'cms/getcontent.php'; //DynPG-Funktionalität einbinden
$DynPG->SetParam_PathToRoot('cms/'); //DynPG-Pfad setzen
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Hauptmenue-Tutorial</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<?php $DynPG->Write_CSS_JS_Header(); ?> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head>
<body>
<h1>Hauptmenue-Tutorial</h1>
<table border="0">
<tr valign="top">
<th align="left" style="width:230px" id="hauptmenue">
<div style="border: 3px black solid">
<?php
//hier soll das Hauptmenü hin
?>
</div>
</th>
<th id="anzeige">
<div style="border: 3px black solid">
<?php
//hier sollen die anzuzeigenden Artikel und Gruppen hin
?>
</div>
</th>
</tr>
</table>
</body>
</html>
</code>

In den Spalten '''''hauptmenue''''' und '''''anzeige''''' sollen das Hauptmenü bzw. die eigentlichen Artikel, Artikellisten und Gruppenlisten angezeigt werden. Bevor wir nun den eigentlichen Code schreiben, müssen wir in das DynPG Backend und einen Artikel erstellen, nämlich den Artikel der das Hauptmenü tragen soll. Ja richtig, das Hauptmenü ist nämlich auch ein Artikel, nur eben ein etwas spezieller! Loggen Sie sich mit ihrem Account in das DynPG-Backend ein und gehen Sie in die Sektion '''''Artikelbezogene Texte'''''. Nun haben Sie schon einen neuen Artikeltext vor sich und müssen nur noch auf das '''''Dynamisches Menü einfügen''''' - Symbol über dem Textfeld klicken und just in diesem Moment müsste eine blaue Grafik mit der Bezeichnung "dynamisches Menü" im Textfeld erscheinen. Nun, das war es auch schon fast, drücken Sie nun den Knopf '''''Erstellen'''''.

[[Image:create_article.jpg|thumb|Abbildung 2.3. Artikel für das Hauptmenü erstellen]]

Der Hauptmenü-Artikel müsste nun darunter in der Liste '''''"Texte / Text-Gruppen"''''' angezeigt werden. Schauen Sie wo er sich dort befindet und merken Sie sich die '''''ID'''''. Mit der werden wir den Artikel nämlich jetzt anzeigen lassen. Gehen wir also wieder in unsere "index.php" und fügen in der '''''Spalte hauptmenue''''' folgendes ein:
{{-}}
<code>[php,Y]
<?php
//nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt!
$DynPG->SetParam_A_Anytime(true);
$DynPG->SetParam_A_Article(15);
$DynPG->Write_Article();
?>
</code>

Was genau passiert da? Nun in der 1. Zeile sagen wir DynPG, dass es den folgenden Artikel immer anzeigen soll, kontextunabhängig also. Das macht auch Sinn, denn es handelt sich hier schließlich um unser Hauptmenü und das ist sozusagen omni-präsent. Bei mir wurde dem Menü-Artikel die ID 15 zugewiesen, deshalb verwende ich beim Setzen des Artikels in Zeile 2 auch diese Nummer. Mit Zeile 3 wird dann das Menü angezeigt.

Nun müssen wir uns noch um die anzuzeigenden Artikel kümmern die man über das Menü erreichen kann, dazu fügen wir in der '''''Spalte anzeige''''' folgendes ein:

<code>[php,Y]
<?php
//nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt!
$DynPG->SetParam_A_Anytime(false);
$DynPG->SetParam_AA_Maxview(10); //Maximal zehn Einträge in Artikellisten
$DynPG->Write_AllArticles();
$DynPG->Write_Article();
?>
</code>

Zeile 1 funktioniert analog zu obigem Code. Die Zeilen 3 und 4 bewirken, dass sowohl Artikellisten (wenn im Menü auf eine Gruppe geklickt wird) als auch einzelne Artikel (wenn auf einen Artikel geklickt wird) angezeigt werden. Zeile 2 gibt an wie lang die Artikellisten sein dürfen, bevor sie der Übersicht halber auf mehreren Seiten (mit Navigation) dargestellt werden.

Für das Beispiel werden wir die style.css wie folgt füllen:

<code>[css,N]
/*alle Links schwarz*/
a{color: black;}

#hauptmenu p{
text-align: left;
}

/*Navigation, Print-Button und Artikelheader unsichtbar machen*/
#dynpg_A_breadcrumb{display: none;}

#dynpg_AA_breadcrumb_navi{display: none;}
#dynpg_AA_breadcrumb_pages{display: none;}

#dynpg_A_btnprint{display: none;}

#dynpg_A_header{display: none;}
</code>

Hier werden die Artikel-Navigation (dynpg_A_breadcrumb), der Artikel- Printbutton (dynpg_A_btnprint) sowie der Artikelkopf (dynpg_A_header) ausgeblendet.

Nun kann das ganze sogar schon ausgeführt werden und sieht bei mir folgendermaßen aus:

[[Image:first_look.jpg|200px|Abbildung 2.4. ein erstes funktionierendes Hauptmenü]]

Freilich variiert diese Ansicht, denn es werden natürlich immer die Gruppen und Artikel angezeigt die man im Backend definiert hat. Hier habe ich größtenteils alles so gelassen wie man es nach der Installation von DynPG mit den Beispieldaten vorfindet. Nun kann man daran gehen eigene Artikel/Gruppen zu erzeugen, die dann natürlich auch im Menü auftauchen werden.

Das Menü, so wie es jetzt erscheint, ist rein optisch noch etwas rudimentär, daher werden wir nun daran gehen das ganze ein bisschen aufzupeppen indem wir Grafiken für die einzelnen Menüpunkte einfügen.

== Grafiken für die Menüpunkte ==
Da nun bereits ein fertiges Menü-Grundgerüst steht, sollte es ein leichtes sein Grafiken für die einzelnen Menüpunkte einzufügen, denn dazu müssen wir lediglich die Stylesheet-Datei '''''style.css''''' um folgenden Code erweitern:
<code>[css,N]
/*===========================Hauptkategorien==============================*/
/*Hintergrundbilder für die Menüeinträge setzen*/
#hauptmenue .level_0_r_i_exp, #hauptmenue .level_0_r_i_exp_hover,
#hauptmenue .level_0_r_a_exp_hover, #hauptmenue .level_0_r_a_exp
{
background: url("images/note.gif") no-repeat left top;
padding: 0px 0px 5px 0px;
}
/*Bezeichnungen für die Menüeinträge positionieren*/
#hauptmenue .level_0_r_i_exp p, #hauptmenue .level_0_r_i_exp_hover p,
#hauptmenue .level_0_r_a_exp_hover p, #hauptmenue .level_0_r_a_exp p
{
position: relative;
left: 40px;
}
/*===========================Sub-Kategorien==============================*/
/*Bezeichnungen für die Menüeinträge positionieren*/
#hauptmenue .level_1_r_i_exp p, #hauptmenue .level_1_r_i_exp_hover p,
#hauptmenue .level_1_r_a_exp_hover p, #hauptmenue .level_1_r_a_exp p
{
position: relative;
left: 60px;
}
/*===========================Sub-Sub-Kategorien==============================*/
/*Bezeichnungen für die Menüeinträge positionieren*/
#hauptmenue .level_2_r_i_exp p, #hauptmenue .level_2_r_i_exp_hover p,
#hauptmenue .level_2_r_a_exp_hover p, #hauptmenue .level_2_r_a_exp p
{
position: relative;
left: 60px;
}
</code>
Um diesen Code zu verstehen müssen wir zunächst ein paar Sachen klären. Jedem Menüpunkt wird von DynPG in CSS automatisch eine Klasse zugeordnet mit der wir in die Lage versetzt werden die einzelnen Eigenschaften zu setzen. Folgende Gruppen gibt es:

* '''''level_0_r_i_exp''''' (inaktiver(noch nicht geklickter) Menüpunkt)
* '''''level_0_r_i_exp_hover''''' (inaktiver(noch nicht geklickter) Menüpunkt auf dem die Maus steht)
* '''''level_0_r_a_exp''''' (aktiver(geklickter) Menüpunkt)
* '''''level_0_r_a_exp_hover''''' (aktiver(geklickter) Menüpunkt auf dem die Maus steht)

All diese Klassen beziehen sich auf Menüpunkte des Typs '''''Level 0''''', also die Hauptpunkte / Punkte der obersten Kategorie. Für Menüpunkte des Typs '''''Level X''''' gibt es natürlich auch Klassen:

* '''''level_X_r_i_exp''''' (inaktiver(noch nicht geklickter) Menüpunkt)
* '''''level_X_r_i_exp_hover''''' (inaktiver(noch nicht geklickter) Menüpunkt auf dem die Maus steht)
* '''''level_X_r_a_exp''''' (aktiver(geklickter) Menüpunkt)
* '''''level_X_r_a_exp_hover''''' (aktiver(geklickter) Menüpunkt auf dem die Maus steht)

Wobei X im Bereich von 0 bis 3 liegt! Ist ein Menüpunkt eine Gruppe werden alle seine Untergruppen bzw. Unterartikel in einem Div mit dem Namen

* '''''group_fold_ID'''''

zusammengefasst, wobei '''''ID''''' für die ID der Gruppe steht (diese wird beim Erstellen generiert und kann im Backend bzw. im generierten Html-Code (Browser) nachgelesen werden). Jetzt wird sicher auch klar wie der Code in style.css zu verstehen ist, in der nur Menüeinträge bis Level2 formatiert werden. Den vollständigen Code und ein laufendes Beispiel kann man sich [[CSS Einfaches Hauptmenü mit Bildern|hier]] anschauen.

== Verschiedene dynamische Grafiken für verschiedene Menüpunkte ==
Im vorherigen Beispiel haben wir Grafiken für die Menüpunkte eingefügt, nun soll jeder Menüpunkt seine eigene Grafik erhalten und diese soll sich zudem ändern, wenn man mit der Maus daraufzeigt. Das hört sich zwar schon etwas komplizierter an, tatsächlich müssen wir aber wieder "nur" die '''''style.css''''' ändern, der eigentliche Code für das Menü bleibt so bestehen.

[[CSS Einfaches Hauptmenü mit verschiedenen Bildern und Hovereffekt|Hier]] können der Css-Code und das ausführbare Beispiel bewundert werden.

Erklärung: Im vorigen Beispiel stellten wir bereits fest, dass jedem Menüpunkt eine Klasse zugeordet wird und das Menüpunkte die Gruppen sind von divs mit dem Namen '''''group_fold_ID''''' (wobei "ID" die Id der Gruppe ist) umschlossen werden. Da die Namen (bzw. Ids) dieser divs eindeutig sind, können wir mit ihrer Hilfe jedem Menüpunkt eine eigene Grafik zuordnen:

<code>[css,N]
#group_fold_6 .level_0_r_i_exp
{
background: url("images/warning1.gif") no-repeat left top;
}
</code>

Bei mir ist der erste Menüpunkt eine Gruppe welche die Id "6" trägt, daher '''''group_fold_6'''''! Mit '''''.level_0_r_i_exp''''' beziehe ich mich auf die Eigenschaften des Menüpunktes die er hat, wenn er nicht aktiv (nicht angeklickt oder mit dem Mauszeiger berührt) ist. In diesem Zustand soll ihm die Grafik '''''warning1.gif''''' zugewiesen werden.

<code>[css,N]
#group_fold_6 .level_0_r_i_exp_hover,
#group_fold_6 .level_0_r_a_exp_hover, #group_fold_6 .level_0_r_a_exp
{
background: url("images/warning2.gif") no-repeat left top;
}
</code>

Wenn er aktiv ist (also angeklickt oder mit dem Mauszeiger berührt wird), dann soll er die Grafik '''''warning2.gif''''' erhalten. Nun kann man so für alle weiteren Hauptpunkte vorgehen und erhält den im [http://www.dynpg.ch/doku/examples/css/menu_with_different_images/index.php ausfürbaren Beispiel] vorgestellten Effekt.

== Direktklick auf Gruppen ==
[[Image:special_group.jpg|thumb|Abbildung 2.5. Spezielle Gruppe]]
Bis jetzt wurde bei einem Klick auf eine Gruppe im Hauptmenü immer eine Artikelliste (sowohl im Menü als auch im Anzeigefenster) dargestellt. Was aber wenn wir wollen, dass direkt und ohne jeden Umweg ein Artikel angezeigt werden soll? Nun, die Lösung ist einfach und erfordert noch nicht einmal Quellcode, denn das '''''Backend''''' erledigt all dies schon für uns. Für das Beispiel habe ich dort nämlich eine Gruppe namens '''''spezielle Gruppe''''' erstellt. In der Gruppe habe ich dann einen Artikel mit dem Namen '''''spezieller Artikel''''' erstellt und ihm einen beliebiegen Artikeltext zugewiesen. Ist dies einmal geschehen kann man in der Gruppenliste bei "spezielle Gruppe" auf das "Bearbeiten"-Symbol klicken (das, welches wie ein Kugelschreiber aussieht) und bei '''''"Gruppeninhalt"''''' die Id von "spezieller Artikel" eintragen. Und schon erhält man im [http://www.dynpg.ch/doku/examples/css/menu_with_different_images/index.php ausfürbaren Beispiel] den beschriebenen Effekt.
{{-}}
== Unterschiedliche Stile für unterschiedliche Seiten ==
Angenommen Sie haben einen Menüpunkt Kontakt und einen namens Startseite und Sie wollen, dass beide z.B. verschiedene Hintergrundfarben zur Darstellung verwenden. Was tun? Glücklicherweise gibt es dafür Menüfunktionalitäten die einem die Arbeit abnehmen. Dabei sei auf [[Code-Schnipsel Unterschiedliche Stile für unterschiedliche Seiten|dieses Beispiel]] verwiesen.

Im Beispiel werden die folgenden beiden Funktionen verwendet:

<code>[php,Y]
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../index.php');
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_subpages', Array(1 => '../details.php'));
</code>

Funktion 1 legt die PHP-Datei fest, die zum anzeigen sämtlicher Menüpunkte verwendet werden soll (hier: index.php). Funktion 2 legt die Datei fest, die zum anzeigen der "Startseite"-Gruppe verwendet werden soll. Somit überschreibt Funktion 2 die Einstellungen von Funktion 1 für "Startseite". Dabei muss wieder die ID der Gruppe angegeben werden (kann im Backend nachgelesen werden). Jedesmal wenn man jetzt auf die Startseiten-Gruppe klickt, wird statt dem Code von index.php, der von details.php zum anzeigen verwendet. Man kann natürlich auch mehr als eine Datei angeben:

<code>[php,N]
$DynPG->SetParam_PlugIn_Param('DPGdynmenu',
'href_subpages',
Array(
5 => '../details.php',
7 => '../beliebige_datei.php'
)
);
</code>

[[Image:caution.png]] '''Achtung''' Bei dem Pfad für die anzugebenen Dateien wird von dem Standard-Pfad von DynPG ausgegangen (dem in dem die '''''getcontent.php''''' liegt), nicht von dem der Datei in dem die Funktion aufgerufen wird!

[[Image:caution.png]] '''Achtung''' Hat man für eine Gruppe eine andere Datei festgelegt, dann wird diese Datei nicht zwingend auch für die Untergruppen verwendet! Man muss auch explizit für die Untergruppen die zu verwendenden Dateien angeben!!

== Einträge sortieren ==
Der Titel sagt bereits alles: Wir wollen hier die Einträge im Menü sortieren, und zwar nach verschiedenen Schlüsseln, wie z.B. dem Index der Gruppe / des Artikels oder dem Namen. Dazu gibt uns DynPG zwei Funktionen zur Hand nämlich:

<code>[php,Y]
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
</code>

Die erste der beiden legt den Sortierschlüssel fest (hier: der Index der Gruppe / des Artikels). Mögliche Sortierschlüssel sind:

* '''''INDEX''''' (Index des Eintrages)
* '''''NAME''''' (Name des Eintrages)
* '''''CREATEDATE''''' (Erstellungsdatum)

Die zweite sortiert schließlich die Einträge. Dabei hat man die Wahl zwischen auf- ('''''ASC''''') und absteigend ('''''DESC'''''). [[Code-Schnipsel Menüeinträge sortieren|In diesem Beispiel]] sieht man die Funktionen in Aktion.

[[Image:caution.png]] '''Achtung''' Die Funktionen müssen natürlich '''''vor''''' der Ausgabe des Menüs aufgerufen werden.

==Weitere Informationen==

Mehr Informationen zum Einbinden von Hauptmenüs in Ihre Seite erhalten Sie im Artikel [[Modul Dynamische Navigation]], der Beschreibungsseite des DynPG-Plugins, dass in obigem Artikel Verwendung fand.

Dynamische Navigation

2009-08-17T18:45:24Z

Sebastian:

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==

Dies hier erklärt die Globals aus dem PHP-Code von [[#Schritt 2: PHP-Datei für die dynamische Navigation erstellen|Schritt 2 des Punkts ''Einrichten'']].

===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Untergruppen hat. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Artikel enthält. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf einen Artikelnamen. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
)
)</pre> || Ermöglicht es, für bestimmte Gruppen auf eine spezielle <tt>PHP-SEITE</tt> zu verlinken. Hierzu geben Sie anstatt <tt>GRUPPENNUMMER</tt> die Gruppennummer der Gruppe aus dem Backend ein. Statt <tt>PHP-SEITE</tt> fügen Sie den Namen und Pfad zur Zieldatei an, ausgehend vom Hauptverzeichnis des CMS!. Lassen Sie den Anhang <tt>{query}</tt> genau so stehen, falls in die Zieldatei auch DynPG über Globals eingeben wurde. <tt>BOOLEAN</tt> ersetzen Sie mit <tt>true</tt> wenn für Untergruppen dieser Gruppe auch auf diese spezielle PHP-Seite verlink werden soll, ansonsten mit <tt>false</tt>.

Passen Sie auf, dass nach jedem <tt>GRUPPENNUMMER => Array(...)</tt> ein Komma notiert ist, allerdings nicht beim letzten.
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> oder eine Zahl || Sofern dieser Parameter eine Zahl als Wert erhält, bestimmt er die Anzahl der Artikel pro Gruppe, die in der dynamischen Navigation angezeigt werden, wenn eine Gruppe statt Untergruppen Artikel enthält.
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> oder <tt>true</tt> || Verwenden Sie das Template ''intelligent'' für die dynamische Navigation, setzen Sie diesen Parameter auf <tt>true</tt>, ansonsten auf <tt>false</tt>
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> '''
:ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> '''
:Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> '''
:keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> '''
:kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> '''
:keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> '''
:Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> '''
:Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> '''
:andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), <tt>cll</tt> (eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Verschiedene Grafiken für Menüpunkte==

Dies lässt sich mittels CSS realisieren. Weitere Informationen hierzu gibt es in: [[Implementation eines kompletten Hauptmenüs#Verschiedene dynamische Grafiken für verschiedene Menüpunkte|Implementation eines kompletten Hauptmenüs]], einem Artikel aus einer Reihe einführender Wiki-Artikel zu DynPG.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Implementation eines kompletten Hauptmenüs

2009-08-17T18:38:39Z

Sebastian:

Templates

2009-08-17T18:38:28Z

Sebastian:

[[Category:Integration in eine Webseite]]
{{Einführungsartikel}}
== Einführung ==
Mit DynPG ist es möglich die Art und Weise wie Artikel und Listenansichten ausgegeben werden, zu beeinflussen. Ein Weg ist CSS, ein anderer (wesentlich flexiblerer) geht über die eingebaute '''''Templateengine'''''. Ein Beispiel: Der Aufruf
<code>[php,N]
$DynPG->Write_Article();
</code>
bewirkt, dass die Detailansicht eines Artikels angezeigt wird. Dabei wird (wenn nichts anderes explizit angegeben wurde) implizit ein Standard-Template verwendet, das definiert wie diese Ansicht auszusehen hat. Im DynPG-Unterverzeichnis '''''/tpl/MyCMS/default/''''' liegen die Templatedateien für die Standardansichten.

* groups.tpl (Gruppenlistenansicht)
* articles.tpl (Artikellistenansicht)
* detail.tpl (Artikel-Detailansicht)
* home.tpl (Home-Ansicht)
* navigation.tpl (Blätterfunktion der Listen-Ansichten)
* search-form.tpl (Formular für die Suche)

In diesen Dateien haben Sie die Möglichkeit, oben genannte Ansichten nach Ihren Wünschen anzupassen. Die Darstellung geschieht grundsätzlich mit '''''HTML'''''. Zusätzlich gibt es eine '''''Templatesprache'''''. Diese ist schlicht gehalten und beinhaltet einige wenige Elemente die nachfolgend näher betrachtet werden sollen. Statt die Standard-Templates zu manipulieren, können auch neue Templates erzeugt werden. Dazu muss im Unterverzeichnis '''''/tpl/MyCMS/''''' einfach ein neuer Ordner mit dem gewünschten Templatenamen angelegt werden. Je nachdem welche Ansichten nun geändert werden sollen, fügt man Dateien mit denselben Namen wie in oben genannter Liste ein. Diese können dann nach den eigenen Wünschen bearbeitet werden. Mit den Zeilen

<code>[php,N]
$DynPG->setupTemplate("meinTemplate");

$DynPG->SetParam_A_Article(13);

$DynPG->Write_Article();
</code>
wird das Template '''''"meinTemplate"''''' gesetzt und damit der Artikel 13 ausgegeben.

[[Image:caution.png]] '''Achtung''' Das Setzen eines Templates muss '''''vor''''' der Ausgabe des Artikels erfolgen!

[[Image:caution.png]] '''Achtung''' Wenn das Template gesetzt wurde, dann wird es auch für alle nachfolgenden Ausgaben verwendet! Ist dies unerwünscht, muss man explizit wieder das Standard-Template('''''"default"''''') setzen!

== Die Template-Sprache ==
=== Ein erstes kleines Beispiel ===
Da alle Theorie grau ist, hier ein kleines einführendes Beispiel:

'''Beispiel 2.1. Template-Minimalbeispiel (eigene Artikel-Detailansicht in ''/tpl/MyCMS/minimal/detail.tpl'')'''

<code>[html,N]

{$CONTENT} 

Dies ist ein <b>selbstdefiniertes Template</b> 


</code>

Ich habe mir also mit dem Ordner '''''/tpl/MyCMS/minimal''''' ein eigenes Template angelegt. In diesen Ordner packe ich die Datei '''''detail.tpl''''', die obigen Inhalt aufweist. Damit hab ich meine eigene Artikel-Detailansicht definiert, die ich jetzt jederzeit auf meiner Seite verwenden kann, indem ich z.B.
<code>[php,N]
$DynPG->setupTemplate("minimal");

$DynPG->SetParam_A_Article(13);

$DynPG->Write_Article();
</code>
aufrufe. '''''{$CONTENT}''''' ist ein Platzhalter für den Inhalt des anzuzeigenden Artikels. An dieser Stelle wird dann also der eigentliche Artikeltext eingefügt (das macht die Templateengine). Eine Liste der Templatevariablen (Platzhalter) finden Sie im nächsten [[#Liste und Bedeutung der Template-Variablen|Kapitel]].

Die Templatesprache hat neben den Templateplatzhaltern noch 2 andere wichtige Sprachelemente. Dies wäre zum einen die [[#Die bedingte Anweisung|bedingte Anweisung]] und zum anderen ein [[#PHP-Code|PHP-Block]], der es ermöglicht PHP-Anweisungen auszuführen. In die Template-Datei kann zudem auch beliebiger HTML-Code eingefügt werden, wodurch den Gestaltungsphantasien fast keine Grenzen gesetzt sind!

=== Liste und Bedeutung der Template-Variablen ===
Dieses Template ist zuständig für die Darstellung von Ansichten der Gruppen-Listen.

{| class="dynpgwikitable"
|+ Templatevariablen - groups.tpl
! <center>Platzhalter</center>
! <center>Beschreibung</center>

|-
| {$ROOT_NAVIGATION}
| Erstellt eine Übersichts-Navigation. Gruppe >> Untergruppe

|-
| {$PAGES_NAVIGATION}
| Erstellt eine Navigation zum Blättern bei mehreren Seiten. Also falls mehr Gruppen angezeigt werden sollten, als in der config.php unter config_AllGroups_Limit eingestellt sind.

|-
| {$LIST_REFER_TO}
| Enthält die URL-Adresse zur nächsttieferen Anzeige- Stufe (im falle groups.tpl den Link zur Artikelliste oder zur Untergruppe).

|-
| {$NAME}
| Gibt den Namen der Gruppe aus.

|-
| {$SHORTTEXT}
| Gibt den Kurztext der Gruppe aus.

|-
| {$CREATEDATE}
| Gibt das Erstelldatum der Gruppe aus.

|-
| {$LIST_SHOW_VISTS}
| Gibt die Anzahl Klicks auf den Link der entsprechenden Gruppe aus.

|-
| {$LIST_HAS_IMAGE}
| Gibt zurück, ob die Gruppe ein Leadbild hat. Falls ja wird TRUE, bei nein FALSE zurückgegeben. Entnimmt den Wert aus DynPG.

|-
| {$LIST_IMAGE_ALIGN}
| Gibt die gewünschte Position des Leadbildes zurück. TOP für oben, BOTTOM für unten, LEFT für links und RIGHT für rechts. Entnimmt den Wert aus DynPG.

|-
| {$IMAGE_URL}
| Gibt das Quellverzeichnis des Leadbildes aus.

|-
| {$IMAGE_NAME}
| Gibt den Namen des Leadbildes aus.

|-
| {$IMAGE_DESCR}
| Gibt die Beschreibung des Leadbildes aus.

|}

Dieses Template ist zuständig für die Darstellung von Ansichten der Artikel-Listen.

{| class="dynpgwikitable"
|+ Templatevariablen - articles.tpl
! <center>Platzhalter</center>
! <center>Beschreibung</center>

|-
| {$ROOT_NAVIGATION}
| Erstellt eine Übersichts-Navigation. Gruppe >> Artikel

|-
| {$PAGES_NAVIGATION}
| Erstellt eine Navigation zum Blättern bei mehreren Seiten. Also falls Sie mehr Gruppen angezeigt werden sollten, als in der config.php unter 'config_AllArticles_Limit' eingestellt sind.

|-
| {$LIST_USER_DEFINED_CSS}
| Gibt den Wert zurück, den Sie beim Implementieren unter SetParam_AA_SingleCss(...); angegeben wurde.

|-
| {$LIST_INDEX}
| Gibt die aktuelle Anzahl (den Index) der angezeigten Artikel zurück (also beim 3. Artikel den Wert 3, beim 6. Artikel den Wert 6).

|-
| {$LIST_REFER_TO}
| Enthält die URL-Adresse zur nächsttieferen Anzeige- Stufe (im falle articles.tpl den Link zur Detail-Ansicht).

|-
| {$CONTENT}
| Gibt die ID des zum Artikel gehörigen Textes aus.

|-
| {$TITLE}
| Gibt den Namen/Titel des Artikels aus.

|-
| {$LEAD}
| Gibt den Lead-Text des Artikels aus.

|-
| {$SHOWDATE}
| Gibt zurück, ob das Erstelldatum angezeigt werden soll. Falls ja wird TRUE, bei nein FALSE zurückgegeben. Entnimmt den Wert aus DynPG.

|-
| {$CREATEDATE}
| Gibt das Erstelldatum des Artikels aus

|-
| {$LIST_SHOW_VISTS}
| Gibt die Anzahl Klicks auf den Link des entsprechenden Artikel aus.

|-
| {$LIST_HAS_IMAGE}
| Gibt zurück, ob der Artikel ein Leadbild hat. Falls ja wird TRUE, bei nein FALSE zurückgegeben. Entnimmt den Wert aus DynPG.

|-
| {$LIST_IMAGE_ALIGN}
| Gibt die gewünschte Position des Leadbildes zurück. TOP für oben, BOTTOM für unten, LEFT für links und RIGHT für rechts. Entnimmt den Wert aus DynPG.

|-
| {$IMAGE_URL}
| Gibt das Quellverzeichnis des Leadbildes aus.

|-
| {$IMAGE_NAME}
| Gibt den Namen des Leadbildes aus.

|-
| {$IMAGE_DESCR}
| Gibt die Beschreibung des Leadbildes aus.

|}

Dieses Template ist zuständig für die Darstellung der Detailansicht eines Artikels.

{| class="dynpgwikitable"
|+ Templatevariablen - detail.tpl
! <center>Platzhalter</center>
! <center>Beschreibung</center>

|-
| {$COND_SEGM_CATNAV}
| Gibt zurück, ob eine Übersichts-Navigation angezeigt werden soll. Falls ja wird TRUE, bei nein FALSE zurückgegeben. Entnimmt den Wert aus der Implementation: SetParam_A_CategoryNavigation(TRUE/FALSE);

|-
| {$ROOT_NAVIGATION}
| Erstellt eine Übersichts-Navigation . Gruppe >> Artikel >> Titel

|-
| {$LIST_USER_DEFINED_CSS}
| Gibt den Wert zurück, den Sie beim Implementieren unter SetParam_A_ArticleCss(...); angegeben wurde.

|-
| {$COND_SEGM_HEAD}
| Gibt zurück, ob der Head-Bereich (im Normalfall Headtext und Beschreibung) angezeigt werden soll. Falls ja wird TRUE, bei nein FALSE zurückgegeben. Entnimmt den Wert aus der Implementation: SetParam_A_ArticleHeader(TRUE/FALSE);

|-
| {$TITLE}
| Gibt den Namen/Titel des Artikels aus.

|-
| {$LEAD}
| Gibt den Lead-Text des Artikels aus.

|-
| {$SHOWDATE}
| Gibt zurück, ob das Erstelldatum angezeigt werden soll. Falls ja wird TRUE, bei nein FALSE zurückgegeben. Entnimmt den Wert aus DynPG.

|-
| {$CREATEDATE}
| Gibt das Erstelldatum des Artikels aus

|-
| {$COND_SEGM_TEXT}
| Gibt zurück, ob der Artikelinhalt/-text angezeigt werden soll. Falls ja wird TRUE, bei nein FALSE zurückgegeben. Entnimmt den Wert aus der Implementation: SetParam_A_ShowText(TRUE/FALSE);

|-
| {$CONTENT}
| Gibt den zugehörigen Text des Artikels aus

|-
| {$COND_SEGM_PRINTNAV}
| Gibt zurück, ob ein Link um den Artikel zu drucken angezeigt werden soll. Falls ja wird TRUE, bei nein FALSE zurückgegeben. Entnimmt den Wert aus der Implementation: SetParam_A_PrintNavigation(TRUE/FALSE);

|-
| {$PRINT_HREF}
| Gibt den Link zur Druckansicht des Artikels aus.

|-
| {$COND_SEGM_SEPARATOR}
| Gibt zurück, ob der Seperator im Text ignoriert werden soll. Falls ja wird TRUE, bei nein FALSE zurückgegeben. Entnimmt den Wert aus der Implementation: SetParam_A_IgnoreSeperator(TRUE/FALSE);

|-
| {$MORE_HREF}
| Gibt die URL aus, die vom durch den Seperator getrennten Text zum gesamten Text führt.

|}

Dieses Template ist zuständig für die Darstellung der Home-Ansicht.

{| class="dynpgwikitable"
|+ Templatevariablen - home.tpl
! <center>Platzhalter</center>
! <center>Beschreibung</center>

|-
| {$LIST_INDEX}
| Gibt die aktuelle Anzahl (den Index) der angezeigten Artikel zurück (also beim 3. Artikel den Wert 3, beim 6. Artikel den Wert 6).

|-
| {$GRP_NAME}
| Gibt den Gruppennamen aus.

|-
| {$LIST_HEADER_EACH}
|  

|-
| {$TITLE}
| Gibt den Namen/Titel des Artikels aus.

|-
| {$LEAD}
| Gibt den Lead-Text des Artikels aus.

|-
| {$LIST_SHOWTEXT_EACH}
|  

|-
| {$CONTENT}
| Gibt den zugehörigen Text des Artikels aus.

|-
| {$SHOWDATE}
| Gibt zurück, ob das Erstelldatum angezeigt werden soll. Falls ja wird TRUE, bei nein FALSE zurückgegeben. Entnimmt den Wert aus DynPG.

|-
| {$CREATEDATE}
| Gibt das Erstelldatum des Artikels aus.

|-
| {$LIST_FWD_TEXT}
|  

|-
| {$LIST_REFER_TO}
| Enthält die URL-Adresse zur nächsttieferen Anzeige- Stufe (im falle home.tpl den Link zum gesamten Artikel).

|}

Dieses Template ist zuständig für die Darstellung von Ansichten der Artikel-Listen.

{| class="dynpgwikitable"
|+ Templatevariablen - navigation-page.tpl
! <center>Platzhalter</center>
! <center>Beschreibung</center>

|-
| {$PG_NAV_LASTPAGE}
| Gibt die Seitenzahl der Seite davor aus.

|-
| {$PG_NAV_NEXTPAGE}
| Gibt die Seitenzahl der nächsten Seite aus.

|-
| {$PG_NAV_RELPAGE}
| Gibt die URL der Seite aus.

|-
| {$PG_NAV_SEPARATION}
|  

|-
| {$PG_NAV_ISCURRENT}
|  

|}

Dieses Template ist zuständig für die Darstellung von Ansichten der Artikel-Listen.

{| class="dynpgwikitable"
|+ Templatevariablen - search-form.tpl
! <center>Platzhalter</center>
! <center>Beschreibung</center>

|-
| {$SEARCH_RESULTPAGE}
| Gibt die URL der Seite aus, auf der die Suchresultate erscheinen.

|}

=== Die bedingte Anweisung ===
Folgendes Beispiel zeigt, wie man bedingte Anweisungen in seine Templates integrieren kann:

'''Beispiel 2.2. Template-Beispiel (Artikel-Detailansicht mit bedingter Anweisung)'''

<code>[html,N]


{$# ('{$TITLE}'=='Kontakt') #}

{$CONTENT}

mein <b>Lieblingsartikel</b>!

{$# End #}



{$# ('{$TITLE}'!='Kontakt') #}

{$CONTENT}

{$# End #}
</code>
Hier wird der Text '''''"mein Lieblingsartikel!"''''' nur dann ausgegeben, wenn der Artikel den Namen "Kontakt" trägt. Die Syntax für bedingte Anweisungen lautet allgemein:
<code>[html,N]
{$#(Bedingung) #}

...

{$# End #}
</code>

[[Image:caution.png]] '''Achtung''' Bei Zeichenkettenvergleichen(wie in obigem Bsp.) muss darauf geachtet werden, dass auch die Templatevariablen von Anführungszeichen umgeben werden, sonst hagelt es Fehlerausschriften!

[[Image:tip.png]] '''Tipp''' Die Bedingung wird als PHP-Code ausgewertet, daher können prinzipiell alle Operatoren verwendet werden, solange der Ergebnisausdruck einen Wahrheitswert liefert.

Schauen wir uns ein Beispiel mit Negation an.
<code>[html,N]
<table>
<tr>
<td> {$TITLE} </td>
</tr>
{$# ({$SHOWDATE}) #}
<tr>
<td> Erstellt am: {$CREATEDATE} </td>
</tr>
{$# End #}
{$# (!{$SHOWDATE}) #}
<tr>
<td> Anzeige ohne Erstelldatum </td>
</tr>
{$# End #}
<tr>
<td> {$CONTENT} </td>
</tr>
</table>
</code>

Das obige Beispiel gibt den Artikel mit seinem Erstelldatum aus, falls das entsprechende Häkchen im Backend angeklickt wurde, ansonsten wird "Anzeige ohne Erstelldatum" ausgegeben.

=== PHP-Code ===
<code>[html,N]
{$#PHP (PHP-CODE) #}
</code>
Mit dieser Syntax können Sie PHP-Code implementieren. Alles was in der Klammer steht, wird als PHP-Code interpretiert. Es kommt dem Tag

<code>[php,N]
<?php ... ?>
</code>

einer PHP-Seite gleich. Auch hier ein kleines Beispiel:

'''Beispiel 2.3. Template-Beispiel (Artikel-Detailansicht mit PHP-Code)'''

<code>[html,N]


Die Länge des Titels beträgt {$#PHP (strlen("{$TITLE}")) #} Zeichen

{$CONTENT} 
</code>

[[Image:caution.png]] '''Achtung''' Am Ende eines PHP-Statements '''''darf kein Semikolon (";")''''' stehen, wie sonst üblich!

== Diese Informationen als PDF ==
Teile dieses Artikels sind auch in [[Media:Templates.pdf|Templates.pdf]] enthalten. Diese Datei wird jedoch wahrscheinlich nicht mehr aktualisiert und ist damit nicht so aktuell wie dieser Artikel.

CSS

2009-08-17T18:38:18Z

Sebastian:

{{old}}
[[Category:Integration in eine Webseite]]
{{Einführungsartikel}}
Das Aussehen der von DynPG erzeugten Elemente (Hauptmenü, Artikel, Artikellisten, Gästebuch, ...) lässt sich mit Hilfe von CSS sehr flexibel gestalten, wenn man die richtigen Klassen und Ids kennt. In diesem Kapitel soll nun erklärt werden wie man das macht. Die wichtigsten (standardmäßig installierten) Plugins sollen hier Erwähnung finden.

== Grundlegendes ==
Wie bereits erwähnt lässt sich vieles in DynPG mit Hilfe von CSS manipulieren und das Schöne ist, dass es bereits einige vorgefertigte CSS-Dateien gibt, die einem u.U. ein wenig Arbeit abnehmen. Um diese Dateien in seiner Website zu nutzen, muss man den Aufruf
<code>[php,N]<?php $DynPG->Write_CSS_JS_Header(); ?></code>
in den Kopf seiner Html-Datei einfügen. Wo genau er platziert werden muss, kann man [[Code-Schnipsel Einfaches Hauptmenü|hier]] sehr schön sehen. Damit werden bereits bestehende CSS-Dateien mit in die Website integriert. Hier eine Liste der vordefinierten Dateien:
* config_editor.css (für den Editor des Backends)
* config_forum.css (für das Forum-Plugin)
* config_general.css (allgemeine Einstellungen (Artikellisten, Gruppenlisten,...))
* config_votes.css (Vote-Plugin)
* style_counter.css (Counter-Plugin)
* tool.css (Backend)
Alle diese Dateien liegen im DynPG-Ordner im Unterverzeichnis "css/". Zudem gibt es die CSS-Dateien der installierten Plugins, z.B. das Hauptmenü. Somit gibt es also '''''zwei''''' Möglichkeiten CSS zu verwenden, '''''1.''''' man editiert die bereits vorhandenen Dateien, die teilweise mit Kommentaren versehen sind, oder '''''2.''''' man definiert sich eigene.

== Ein erstes kleines Beispiel ==
Wie immer wollen wir mit etwas praktischem beginnen. Dazu werden wir die Schriftfarbe von einem Artikel manipulieren. Der Inhalt des Artikels den wir ausgeben, soll rot gefärbt werden. Der Code der CSS-Datei:
<code>[css,N]
#dynpg_A_content {
color: red;
}
</code>
Mit der ID '''''#dynpg_A_content''''' können wir also ganz einfach auf die CSS-Eigenschaften des Artikelinhalts zugreifen. Eine Auflistung der CSS-IDs und -Klassen wird in den nächsten Kapiteln erfolgen. Wie die CSS-Datei eingebunden wird, sieht man in der '''''index.php''''':
<code>[php,N]
<?php
require '../../../cms/getcontent.php';
$DynPG->SetParam_PathToRoot('../../../cms/');
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Einzelner Artikel</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<?php $DynPG->Write_CSS_JS_Header(); ?>

<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Artikelansicht</h1>
<?php
$DynPG->SetParam_A_Anytime(true); //Artikel von Anfang an anzeigen
$DynPG->SetParam_A_Article(11); //ArtikelNr. angeben
$DynPG->Write_Article(); //Artikel mit der Nr. 11 ausgeben
?>
</body>
</html>
</code>

Und [[CSS Minimalbeispiel|hier]] nochmal das vollständige und ausführbare Beispiel.

== CSS-Referenz ==

{| class="dynpgwikitable"
|+ CSS-Bezeichner - Artikel-Detail-Ansicht
! <center>Name</center>
! <center>Typ</center>
! <center>Beschreibung</center>

|-
| dynpg_A_breadcrumb
| Id
| "Brotkrümel"-Navigation

|-
| dynpg_A_header
| Id
| der Kopf des Artikels (enthält u.a. den Titel, Datum, Lead,...)

|-
| dynpg_A_header_text
| Id
| der Text im Kopf des Artikels

|-
| dynpg_A_header_lead
| Id
| Lead im Kopf des Artikels

|-
| dynpg_A_header_date
| Id
| Datum im Kopf des Artikels

|-
| dynpg_A_content
| Id
| Der gesamte Inhalt des Artikels

|-
| dynpg_A_btnprint
| Id
| "drucken"-Knopf um den Artikel an den Drucker zu senden

|-
| dynpg_A_more
| Id
| "mehr"-Knopf mit dem der Rest des Artikels angezeigt wird

|-
| dynpg_A_edit_mode
| Id
| Knopf für den Editier-Modus mit dem man ins Backend gelangt um den Artikel zu bearbeiten.

|}

{| class="dynpgwikitable"
|+ CSS-Bezeichner - Artikellisten-Ansicht
! <center>Name</center>
! <center>Typ</center>
! <center>Beschreibung</center>

|-
| dynpg_AA_breadcrumb_navi
| Id
| "Brotkrümel"-Navigation

|-
| dynpg_AA_breadcrumb_pages
| Id
| Die Navigation mit der man auf die nächste Seite springen kann. (Wenn die Artikelliste groß ist wird sie auf mehrere Seiten aufgeteilt)

|-
| dynpg_AA_edit_mode
| Id
| Knopf für den Editier-Modus mit dem man ins Backend gelangt um den Artikel zu bearbeiten.

|-
| dynpg_AA_row_Headtext
| Id
|  

|-
| dynpg_AA_row_Description
| Id
|  

|-
| dynpg_AA_row_table
| Id
|  

|-
| dynpg_AA_row_MainA
| Id
|  

|-
| dynpg_AA_row_Main_Col_01A
| Id
|  

|-
| dynpg_AA_row_MainB
| Id
|  

|-
| dynpg_AA_row_Main_Col_01B
| Id
|  

|}

{| class="dynpgwikitable"
|+ CSS-Bezeichner - Gruppenlisten-Ansicht
! <center>Name</center>
! <center>Typ</center>
! <center>Beschreibung</center>

|-
| dynpg_AG_breadcrumb_navi
| Id
| "Brotkrümel"-Navigation

|-
| dynpg_AG_breadcrumb_pages
| Id
| Die Navigation mit der man auf die nächste Seite springen kann. (Wenn die Gruppenliste groß ist wird sie auf mehrere Seiten aufgeteilt)

|-
| dynpg_AG_row_Headtext
| Id
|  

|-
| dynpg_AG_row_Description
| Id
|  

|-
| dynpg_AG_row_table
| Id
|  

|-
| dynpg_AA_row_Main
| Id
|  

|-
| dynpg_AA_row_Main_Col_01
| Id
|  

|}

{| class="dynpgwikitable"
|+ CSS-Bezeichner - Artikel-Druck-Ansicht
! <center>Name</center>
! <center>Typ</center>
! <center>Beschreibung</center>

|-
| dynpg_P
| Id
|  

|-
| dynpg_P_breadcrumb
| Id
| "Brotkrümel"-Navigation

|-
| dynpg_P_header
| Id
| Kopf des Artikels

|-
| dynpg_P_header_text
| Id
| Text im Kopf des Artikels

|-
| dynpg_P_header_lead
| Id
| Lead im Kopf des Artikels

|-
| dynpg_P_header_date
| Id
| Datum im Kopf des Artikels

|-
| dynpg_P_content
| Id
| Inhalt des Artikels

|}

{| class="dynpgwikitable"
|+ CSS-Bezeichner - Home-Ansicht
! <center>Name</center>
! <center>Typ</center>
! <center>Beschreibung</center>

|-
| dynpg_H
| Id
|  

|-
| dynpg_H_EM
| Id
|  

|-
| dynpg_H_EM_glow
| Id
|  

|-
| dynpg_H_parentgroup
| Id
|  

|-
| dynpg_H_header
| Id
| Kopf des Artikels

|-
| dynpg_H_header_text
| Id
| Text im Kopf des Artikels

|-
| dynpg_H_header_lead
| Id
| Lead im Kopf des Artikels

|-
| dynpg_H_header_date
| Id
| Datum im Kopf des Artikels

|-
| dynpg_H_content
| Id
| Inhalt des Artikels

|-
| dynpg_H_btnprint
| Id
| "Drucken"-Knopf

|-
| dynpg_H_more
| Id
| "mehr"-Knopf mit dem der Rest des Artikels angezeigt wird

|-
| dynpg_H_edit_mode
| Id
| Knopf für den Editier-Modus mit dem man ins Backend gelangt um den Artikel zu bearbeiten.

|}

{| class="dynpgwikitable"
|+ CSS-Bezeichner - Suchform
! <center>Name</center>
! <center>Typ</center>
! <center>Beschreibung</center>

|-
| dynpg_search_query
| Id
|  

|-
| dynpg_search_submit
| Id
|  

|}

DynPG in eine Webseite einbinden

2009-08-17T18:38:09Z

Sebastian:

[[Category:Integration_in_eine_Webseite]]
{{Einführungsartikel}}
Hier wird davon ausgegangen, dass DynPG bereits installiert und konfiguriert ist! Wenn dies nicht der Fall ist, schauen Sie zuerst im Kapitel [[:Category:Installation und Update|Installation und Update]] nach.

Glückwunsch! DynPG ist also installiert und kann bereits, mit Hilfe des sogenannten "Backends", konfiguriert werden.

DynPG kann nun in jede beliebige HTML-Seite eingebunden werden. Dies geschieht, indem zuersteinmal die entsprechende HTML-Datei mit der Endung <tt>.php</tt> versehen wird. Die eigentliche Implementierung geschieht nun durch Eingabe folgender Zeilen in die Seite:
<code>[php,N]
<?php
require('cms/getcontent.php');
$DynPG->SetParam_PathToRoot('cms/');
?>
</code>

Diese Zeilen müssen Sie auf jeder PHP-Seite, bei der Sie DynPG implementieren wollen, zuoberst unterbringen. Dies bedeutet, dass vor dem Befehl <tt><?php</tt> kein Zeichen an den Browser versandt werden durfte (d.h. weder Sonderzeichen noch sonstige, nicht in PHP-Bereiche geschriebene Zeichen).

Die erste Zeile muss den Pfad der Datei getcontent.php enthalten, ausgehend vom Verzeichnis in der die PHP Datei gespeichert ist. Änderungen sind hier nur nötig, wenn Sie DynPG nicht im Ordner "cms" installiert haben.

In der zweiten Zeile geben Sie das Verzeichnis an, indem Sie DynPG installiert haben. Dabei ist immer von dem Verzeichnis auszugehen, in der Sie diese Datei gespeichert haben. Um ein höheres Verzeichnis zu erreichen schreiben Sie zwei Punkte ( <tt>..</tt> ). Jede Ordnerangabe müssen Sie mit einem "Slash" ( <tt>/</tt> ) abschliessen. Dazu ein Beispiel:

* Datei "beispielseite.php" liegt im Verzeichnis "seiten/beispielseite.php".
* die Dateien von DynPG sind im Verzeichnis "programme/cms/" gespeichert.
* die Ordner "seiten" und "programme" befinden sich im selben Verzeichnis
* die Pfadangabe sieht folgendermaßen aus:
:<code>[php,N]SetParam_PathToRoot('../programme/cms/');</code>
* und zur Datei getcontent.php so:
:<code>[php,N]require('../programme/cms/getcontent.php');</code>

== Minimalbeispiel ==
Nun will ich daran gehen ein Minimalbeispiel für die Einbindung in eine Website zu zeigen. Wir erstellen nun eine Datei mit bspw. dem Namen '''''"index.php"'''''. Die Ordnerstruktur könnte dann in etwa so aussehen:

[[Image:sample1_dirstructure.jpg|Abbildung 2.1. Ordnerstruktur des Minimalbeispiels]]

Im Ordner '''''"cms"''''' ist also unser CMS installiert. Nun füllen wir die Datei mit etwas Standard-Html-Code:
{{-}}
<code>[php, N]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Minimalbeispiel</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>

<body>
Hallo Welt!
</body>

</html>
</code>

Nun wollen wir DynPG einbinden und dazu schreiben wir die folgenden Zeilen in den Kopf von "index.php":

<code>[php, N]
<?php
require 'cms/getcontent.php';
$DynPG->SetParam_PathToRoot('cms/');
?>
</code>

Dieser Code dient dazu alle Funktionalitäten von DynPG in der aktuellen HTML-Datei verfügbar zu machen. In Zeile 3 muss der relative Pfad zu dem DynPG-Ordner (hier "cms/") stehen.

[[Image:caution.png]] '''Achtung!''' Diese beiden Zeilen müssen unbedingt an oberster Stelle in der Datei stehen (ohne führende Freizeile!!)

Nun können wir also loslegen. Wir wollen alle Gruppen (bei der Installation von DynPG wurden bereits automatisch Gruppen erzeugt!) in unserer Datenbank anzeigen lassen. Dazu fügen wir die folgenden Zeilen '''''zwischen die body-tags''''' unserer HTML-Seite ein:

<code>[php, N]
<?php
$DynPG->SetParam_AG_Anytime(true);
$DynPG->Write_AllGroups();
?>
</code>

Was genau das alles bedeutet, dazu werde ich später kommen, wenn wir aber alles richtig gemacht haben, dann müsste bei aufrufen der Seite nun folgende Ausgabe zu sehen sein:

[[Image:frontend_example1.jpg|Abbildung 2.2. Ausgabe des Minimalbeispiels|200px]]

Der komplette Code der HTML-Datei kann [[Code-Schnipsel Minimalbeispiel|hier]] heruntergeladen werden.

Die drei Ansichten von DynPG

2009-08-17T18:37:40Z

Sebastian:

[[Category:Integration in eine Webseite]]
{{Einführungsartikel}}
== Die Ansichten ==

Im [[Ein erstes kleines Beispiel|vorigen Kapitel]] konnten Sie sich davon überzeugen, wie einfach es ist mit DynPG zu einem ersten Resultat zu kommen. In dem Beispiel wurde nämlich die sogenannte Gruppenliste demonstriert. Insgesamt gibt es drei Ansichten:

* Gruppenliste (nachfolgend '''''AG''''' genannt)
* Artikelliste ('''''AA''''')
* Artikel-Detailansicht ('''''A''''')

Die ''Gruppenlisten-Ansicht'' gibt einfach alle Gruppen(-namen) die in der Datenbank vorhanden sind aus. In der ''Artikellisten-Ansicht'' kann man sich die Artikel(-namen) einer bestimmten Gruppe anzeigen lassen und die ''Artikel-Detailansicht'' zeigt letztlich den Artikelinhalt eines bestimmten Artikels an. Alle drei Ansichten haben natürlich gewisse Parameter, die die Ausgabe beeinflussen und diesen Parametern und Aufrufen werden wir uns nach und nach widmen.

=== Integration einer Artikel-Detailansicht ===

Dies ist die tiefste Anzeigestufe. Mit der Integration des einzelnen Artikels, wird ein bestimmter Artikel in der Detailansicht angezeigt. Durch diverse Parameterangaben können Sie weitere Einstellungen vornehmen.

Die Artikel-Detailansicht implementieren Sie durch folgenden PHP Code:
<code>[php,Y]
<?php
$DynPG->SetParam_A_Anytime(true);
$DynPG->SetParam_A_Article(1);
$DynPG->Write_Article();
?>
</code>

'''Erläuterung:'''
*Zeile 2: <tt>$DynPG->SetParam_A_Anytime(true);</tt>
:Dieser Parameter weist DynPG an, diesen Artikel ständig anzuzeigen und nicht nur dann, wenn dies durch den Kontext vorgegeben ist (d.h. wenn ein Benutzer durch eine Artikelliste oder andere Elemente mit dynamischen Artikellisten auf diese Seite gelangen). Wenn Sie einen Artikel einzeln anzeigen, muss dieser Parameter stets auf true gesetzt sein.
*Zeile 3: <tt>$DynPG->SetParam_A_Article(19);</tt>
:Hier müssen Sie angeben, welchen Artikel Sie anzeigen möchten. Schreiben Sie einfach die Artikelnummer, die automatisch von DynPG zugewiesen wurde, als Sie den Artikel erstellt haben.
*Zeile 4: <tt>$DynPG->Write_Article();</tt>
:Diese Methode erstellt die Detailansicht des Artikels. Sie muss zwingend der letzte Aufruf auf dieser Ebene sein. Hier dürfen Sie keine Änderungen vornehmen.

Weitere mögliche Parameter entnehmen Sie der [[Funktionsreferenz]].

=== Integration einer Artikel-Liste ===

Dies ist die zweittiefste Anzeigestufe. Mit der Integration der Artikel-Liste, wird grundsätzlich eine Liste aller Artikel einer Gruppe angezeigt. Bei einem Klick auf einen der Artikel, wird dieser in der Detailansicht angezeigt. Deshalb muss zuerst eine Artikel-Liste implementiert werden und direkt darunter der einzelne Artikel. Auch hier können Sie Parameter setzen und so weitere Einstellungen vornehmen.

Die Artikel-Liste implementieren Sie durch folgenden PHP Code (muss innerhalb des "body"-Tags stehen):
<code>[php,Y]
<?php
$DynPG->SetParam_AA_Anytime(true);
$DynPG->SetParam_AA_Group("Gruppenname");
$DynPG->Write_AllArticles();
?>
</code>

'''Erläuterung:'''
*Zeile 2: <tt>$DynPG->SetParam_AA_Anytime(true);</tt>
:Dieser Parameter weist DynPG an, diese Artikelliste ständig anzuzeigen und nicht nur dann, wenn dies durch den Kontext vorgegeben ist (d.h. wenn ein Benutzer durch eine Artikelliste oder andere Elemente mit dynamischen Artikellisten auf diese Seite gelangen).
*Zeile 3: <tt>$DynPG->SetParam_AA_Group("News");</tt>
:Geben Sie hier den Namen der Gruppe an, von der Sie eine Artikel-Listenansicht angezeigt haben wollen. In diesem Beispiel würde eine Liste der Artikel in der Gruppe "News" angezeigt werden.
*Zeile 4: <tt>$DynPG->Write_AllArticles();</tt>
:Diese Methode erstellt die Artikel-Liste. Hier dürfen Sie keine Änderungen vornehmen.

Nach dem Aufruf der Methode <tt>Write_AllArticles()</tt> müssen Sie nun die Einstellungen für die Detailansicht eines Artikels vornehmen. Diese sind natürlich identisch mit denen aus Kapitel [[#Integration einer Artikel-Detailansicht]], deshalb werden Sie hier nicht noch mal erläutert. Am Ende muss wiederum die Methode <tt>Write_Article();</tt> stehen. Eine Implementierung einer Artikel-Liste könnte also beispielsweise so Aussehen:
<code>[php,N]
<?php
$DynPG->SetParam_AA_Anytime(true);
$DynPG->SetParam_AA_Group("Gruppenname");
$DynPG->Write_AllArticles();
$DynPG->Write_Article();
?>
</code>

Weitere mögliche Parameter entnehmen Sie der [[Funktionsreferenz]].

=== Integration einer Gruppen-Liste ===

Wie es der Name schon verrät, werden in der Gruppen-Liste alle Gruppen in einer Liste aufgereiht. Bei einem Klick auf eine der Gruppen, wird von dieser eine Artikel-Liste angezeigt oder wenn weitere Untergruppen bestehen eine Gruppen-Liste der Untergruppen. Von der Artikel-Liste gelangt man mittels Link zu der Detailansicht. Deshalb muss zuerst eine Gruppen-Liste, dann eine Artikel-Liste und zuletzt die Detailansicht eines Artikels implementiert werden. Auch hier können Sie Parameter setzen und so weitere Einstellungen vornehmen und zusätzliche Optionen ein oder ausblenden.

Die Gruppen-Liste implementieren Sie durch folgenden PHP Code:
<code>[php,Y]
<?php
$DynPG->SetParam_AG_Anytime(true);
$DynPG->Write_AllGroups();
?>
</code>

'''Erläuterung:'''
*Zeile 3: <tt>$DynPG->Write_AllGroups();</tt>
:Diese Methode erstellt die Gruppen-Liste. Hier dürfen Sie keine Änderungen vornehmen.

Nach dem Aufruf der Methode <tt>Write_AllGroups()</tt> müssen Sie nun die Einstellungen für die Artikel-Liste und danach die Einstellungen für die Detaiansicht eines Artikels vornehmen. Diese sind natürlich identisch mit denen aus Kapitel [[#Integration einer Artikel-Detailansicht]] und [[#Integration einer Artikel-Liste]], deshalb werden Sie hier nicht noch mal erläutert. Am Ende der entsprechenden Ansicht muss wiederum die Methode <tt>Write_AllArticles();</tt> bzw. <tt>Write_Article();</tt> stehen.

Eine komplette Implementierung einer Gruppen-Liste könnte also beispielsweise so aussehen:
<code>[php,N]
<?php
$DynPG->SetParam_AG_Anytime(true);
$DynPG->Write_AllGroups();
$DynPG->Write_AllArticles();
$DynPG->Write_Article();
?>
</code>

Weitere mögliche Parameter entnehmen Sie der [[Funktionsreferenz]].

== Weiterführung des Beispiels ==

Zur Veranschaulichung erweitern wir nun unser bestehendes Beispiel, dieses wird um ein paar nette Funktionen verfeinert. Zusätzlich zur Gruppenliste sollen auch die Untergruppen bzw. die Artikel die in diesen Gruppen existieren, angezeigt werden. Damit sind wir dann bereits in der Lage durch unsere Gruppen zu navigieren und vorhandene Artikel darzustellen.

<code>[php,N]
<?php
$DynPG->SetParam_AA_Anytime(false);
$DynPG->Write_AllArticles();

$DynPG->SetParam_A_Anytime(false);
$DynPG->Write_Article();
?>
</code>

Nun wird nicht mehr nur eine starre Gruppenliste angezeigt! Es existiert jetzt eine komplette Navigation! (den vollständigen Code des Beispiels finden sie [[Code-Schnipsel Alle Ansichten (komplette Navigation)|hier]])

Nun zur Erklärung der beiden vorangegangenen Beispiele. Was die einzelnen Funktionen genau tun werde ich hier nicht erörtern (das können Sie in der [[Funktionsreferenz]] nachlesen), aber ich werde erklären wie sie zusammenspielen. Schauen wir zuerst den Aufruf

<code>[php,N]
$DynPG->SetParam_AG_Anytime(true);
</code>

aus Beispiel 1 (das Minimalbeispiel) an. Der Präfix "SetParam" kündigt schon an, dass hierbei ein Parameter gesetzt wird, es gibt mehrere solcher Funktionen. "AG" (wie schon aus obiger Tabelle bekannt) steht für die Gruppenlisten-Ansicht. Die Funktion bewirkt, dass die Gruppenliste von Anfang an (beim Aufruf der Seite) angezeigt wird und nicht nur dann, wenn dies durch den Kontext vorgegeben ist (d.h. wenn ein Benutzer durch eine Artikelliste oder andere Elemente mit dynamischen Artikellisten auf diese Seite gelangt). würden wir der Funktion das Argument "false" übergeben, so wäre dies folglich nicht der Fall. Nun wurde also ein Parameter gesetzt der die folgende Funktion

<code>[php,N]
$DynPG->Write_AllGroups();
</code>

in eben genannter Weise beeinflusst.

Im Beispiel 2 (komplette Navigation) funktioniert das alles analog, nur dass wir eben die Parameter- und Ausgabefunktionen auch für die Artikellistenansicht (AA) und die Artikel-Detailansicht (A) aufrufen. Es fällt allerdings auf, dass bei den "SetParam"-Funktionen als Argument "false" übergeben wird. Dies ist nötig, denn wir wollen die Artikellisten und Artikel die sich in einer Gruppe befinden ja nur dann ausgeben, wenn der Kontext es vorgibt (also dann wenn der Nutzer auf die Gruppe geklickt hat) und nicht von Anfang an!

[[Image:note.png]] '''Anmerkung''' Die Reihenfolge von "Write_AllGroups()", "Write_AllArticles()" und "Write_Article()" im Code ist beliebig!

Nun können Sie daran gehen die Ansicht von Beispiel 2 weiter zu beeinflussen, z.B. mit:

<code>[php,N]
$DynPG->SetParam_AG_ForceNav(false);
</code>

Dadurch wird die "Zurück-Weiter-Navigation" abgeschaltet. Weitere nützliche Parameter-Funktionen finden Sie in der [[Funktionsreferenz]].

Vorlage:Einführungsartikel

2009-08-17T18:37:20Z

Sebastian:

<div style="border-style:solid; border-width:2px; border-color:#2D7FBD; background-color:#E5F4FB; padding:5px">
'''''Dieser Artikel ist Teil einer Reihe von Einführungsartikeln zu DynPG'''''

[[Ein erstes kleines Beispiel]] |
[[Die drei Ansichten von DynPG]] |
[[Funktionsreferenz/Globals]] |
[[CSS]] |
[[Templates]] |
[[Implementation eines kompletten Hauptmenüs]]
</div>
{{-}}

Vorlage:Einführungsartikel

2009-08-17T18:35:00Z

Sebastian:

Dynamische Navigation

2009-08-17T16:12:27Z

Sebastian: /* CSS */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==

Dies hier erklärt die Globals aus dem PHP-Code von [[#Schritt 2: PHP-Datei für die dynamische Navigation erstellen|Schritt 2 des Punkts ''Einrichten'']].

===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Untergruppen hat. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Artikel enthält. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf einen Artikelnamen. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
)
)</pre> || Ermöglicht es, für bestimmte Gruppen auf eine spezielle <tt>PHP-SEITE</tt> zu verlinken. Hierzu geben Sie anstatt <tt>GRUPPENNUMMER</tt> die Gruppennummer der Gruppe aus dem Backend ein. Statt <tt>PHP-SEITE</tt> fügen Sie den Namen und Pfad zur Zieldatei an, ausgehend vom Hauptverzeichnis des CMS!. Lassen Sie den Anhang <tt>{query}</tt> genau so stehen, falls in die Zieldatei auch DynPG über Globals eingeben wurde. <tt>BOOLEAN</tt> ersetzen Sie mit <tt>true</tt> wenn für Untergruppen dieser Gruppe auch auf diese spezielle PHP-Seite verlink werden soll, ansonsten mit <tt>false</tt>.

Passen Sie auf, dass nach jedem <tt>GRUPPENNUMMER => Array(...)</tt> ein Komma notiert ist, allerdings nicht beim letzten.
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> oder eine Zahl || Sofern dieser Parameter eine Zahl als Wert erhält, bestimmt er die Anzahl der Artikel pro Gruppe, die in der dynamischen Navigation angezeigt werden, wenn eine Gruppe statt Untergruppen Artikel enthält.
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> oder <tt>true</tt> || Verwenden Sie das Template ''intelligent'' für die dynamische Navigation, setzen Sie diesen Parameter auf <tt>true</tt>, ansonsten auf <tt>false</tt>
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> '''
:ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> '''
:Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> '''
:keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> '''
:kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> '''
:keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> '''
:Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> '''
:Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> '''
:andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), <tt>cll</tt> (eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-17T16:11:19Z

Sebastian: /* Globalsreferenz */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==

Dies hier erklärt die Globals aus dem PHP-Code von [[#Schritt 2: PHP-Datei für die dynamische Navigation erstellen|Schritt 2 des Punkts ''Einrichten'']].

===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Untergruppen hat. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Artikel enthält. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf einen Artikelnamen. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
)
)</pre> || Ermöglicht es, für bestimmte Gruppen auf eine spezielle <tt>PHP-SEITE</tt> zu verlinken. Hierzu geben Sie anstatt <tt>GRUPPENNUMMER</tt> die Gruppennummer der Gruppe aus dem Backend ein. Statt <tt>PHP-SEITE</tt> fügen Sie den Namen und Pfad zur Zieldatei an, ausgehend vom Hauptverzeichnis des CMS!. Lassen Sie den Anhang <tt>{query}</tt> genau so stehen, falls in die Zieldatei auch DynPG über Globals eingeben wurde. <tt>BOOLEAN</tt> ersetzen Sie mit <tt>true</tt> wenn für Untergruppen dieser Gruppe auch auf diese spezielle PHP-Seite verlink werden soll, ansonsten mit <tt>false</tt>.

Passen Sie auf, dass nach jedem <tt>GRUPPENNUMMER => Array(...)</tt> ein Komma notiert ist, allerdings nicht beim letzten.
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> oder eine Zahl || Sofern dieser Parameter eine Zahl als Wert erhält, bestimmt er die Anzahl der Artikel pro Gruppe, die in der dynamischen Navigation angezeigt werden, wenn eine Gruppe statt Untergruppen Artikel enthält.
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> oder <tt>true</tt> || Verwenden Sie das Template ''intelligent'' für die dynamische Navigation, setzen Sie diesen Parameter auf <tt>true</tt>, ansonsten auf <tt>false</tt>
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> '''
:ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> '''
:Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> '''
:keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> '''
:kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> '''
:keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> '''
:Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> '''
:Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> '''
:andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-17T16:11:02Z

Sebastian: /* Globals direkt für das Plugin */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

Dies hier erklärt die Globals aus dem PHP-Code von [[#Schritt 2: PHP-Datei für die dynamische Navigation erstellen|Schritt 2 des Punkts ''Einrichten'']].

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Untergruppen hat. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Artikel enthält. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf einen Artikelnamen. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
)
)</pre> || Ermöglicht es, für bestimmte Gruppen auf eine spezielle <tt>PHP-SEITE</tt> zu verlinken. Hierzu geben Sie anstatt <tt>GRUPPENNUMMER</tt> die Gruppennummer der Gruppe aus dem Backend ein. Statt <tt>PHP-SEITE</tt> fügen Sie den Namen und Pfad zur Zieldatei an, ausgehend vom Hauptverzeichnis des CMS!. Lassen Sie den Anhang <tt>{query}</tt> genau so stehen, falls in die Zieldatei auch DynPG über Globals eingeben wurde. <tt>BOOLEAN</tt> ersetzen Sie mit <tt>true</tt> wenn für Untergruppen dieser Gruppe auch auf diese spezielle PHP-Seite verlink werden soll, ansonsten mit <tt>false</tt>.

Passen Sie auf, dass nach jedem <tt>GRUPPENNUMMER => Array(...)</tt> ein Komma notiert ist, allerdings nicht beim letzten.
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> oder eine Zahl || Sofern dieser Parameter eine Zahl als Wert erhält, bestimmt er die Anzahl der Artikel pro Gruppe, die in der dynamischen Navigation angezeigt werden, wenn eine Gruppe statt Untergruppen Artikel enthält.
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> oder <tt>true</tt> || Verwenden Sie das Template ''intelligent'' für die dynamische Navigation, setzen Sie diesen Parameter auf <tt>true</tt>, ansonsten auf <tt>false</tt>
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> '''
:ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> '''
:Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> '''
:keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> '''
:kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> '''
:keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> '''
:Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> '''
:Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> '''
:andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-17T16:10:49Z

Sebastian: /* Sinnvolle Globals vom DynPG-CMS */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Untergruppen hat. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Artikel enthält. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf einen Artikelnamen. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
)
)</pre> || Ermöglicht es, für bestimmte Gruppen auf eine spezielle <tt>PHP-SEITE</tt> zu verlinken. Hierzu geben Sie anstatt <tt>GRUPPENNUMMER</tt> die Gruppennummer der Gruppe aus dem Backend ein. Statt <tt>PHP-SEITE</tt> fügen Sie den Namen und Pfad zur Zieldatei an, ausgehend vom Hauptverzeichnis des CMS!. Lassen Sie den Anhang <tt>{query}</tt> genau so stehen, falls in die Zieldatei auch DynPG über Globals eingeben wurde. <tt>BOOLEAN</tt> ersetzen Sie mit <tt>true</tt> wenn für Untergruppen dieser Gruppe auch auf diese spezielle PHP-Seite verlink werden soll, ansonsten mit <tt>false</tt>.

Passen Sie auf, dass nach jedem <tt>GRUPPENNUMMER => Array(...)</tt> ein Komma notiert ist, allerdings nicht beim letzten.
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> oder eine Zahl || Sofern dieser Parameter eine Zahl als Wert erhält, bestimmt er die Anzahl der Artikel pro Gruppe, die in der dynamischen Navigation angezeigt werden, wenn eine Gruppe statt Untergruppen Artikel enthält.
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> oder <tt>true</tt> || Verwenden Sie das Template ''intelligent'' für die dynamische Navigation, setzen Sie diesen Parameter auf <tt>true</tt>, ansonsten auf <tt>false</tt>
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> '''
:ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> '''
:Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> '''
:keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> '''
:kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> '''
:keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> '''
:Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> '''
:Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> '''
:andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-17T16:10:14Z

Sebastian: /* Sinnvolle Globals vom DynPG-CMS */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Untergruppen hat. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Artikel enthält. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf einen Artikelnamen. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
)
)</pre> || Ermöglicht es, für bestimmte Gruppen auf eine spezielle <tt>PHP-SEITE</tt> zu verlinken. Hierzu geben Sie anstatt <tt>GRUPPENNUMMER</tt> die Gruppennummer der Gruppe aus dem Backend ein. Statt <tt>PHP-SEITE</tt> fügen Sie den Namen und Pfad zur Zieldatei an, ausgehend vom Hauptverzeichnis des CMS!. Lassen Sie den Anhang <tt>{query}</tt> genau so stehen, falls in die Zieldatei auch DynPG über Globals eingeben wurde. <tt>BOOLEAN</tt> ersetzen Sie mit <tt>true</tt> wenn für Untergruppen dieser Gruppe auch auf diese spezielle PHP-Seite verlink werden soll, ansonsten mit <tt>false</tt>.

Passen Sie auf, dass nach jedem <tt>GRUPPENNUMMER => Array(...)</tt> ein Komma notiert ist, allerdings nicht beim letzten.
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> oder eine Zahl || Sofern dieser Parameter eine Zahl als Wert erhält, bestimmt er die Anzahl der Artikel pro Gruppe, die in der dynamischen Navigation angezeigt werden, wenn eine Gruppe statt Untergruppen Artikel enthält.
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> oder <tt>true</tt> || Verwenden Sie das Template ''intelligent'' für die dynamische Navigation, setzen Sie diesen Parameter auf <tt>true</tt>, ansonsten auf <tt>false</tt>
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|}

===Sinnvolle Globals vom DynPG-CMS===

Dies hier erklärt die Globals aus dem PHP-Code von [[#Schritt 2: PHP-Datei für die dynamische Navigation erstellen|Schritt 2 des Punkts ''Einrichten'']].

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> '''
:ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> '''
:Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> '''
:keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> '''
:kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> '''
:keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> '''
:Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> '''
:Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> '''
:andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-17T16:08:54Z

Sebastian: /* Globals direkt für das Plugin */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Untergruppen hat. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Artikel enthält. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf einen Artikelnamen. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
)
)</pre> || Ermöglicht es, für bestimmte Gruppen auf eine spezielle <tt>PHP-SEITE</tt> zu verlinken. Hierzu geben Sie anstatt <tt>GRUPPENNUMMER</tt> die Gruppennummer der Gruppe aus dem Backend ein. Statt <tt>PHP-SEITE</tt> fügen Sie den Namen und Pfad zur Zieldatei an, ausgehend vom Hauptverzeichnis des CMS!. Lassen Sie den Anhang <tt>{query}</tt> genau so stehen, falls in die Zieldatei auch DynPG über Globals eingeben wurde. <tt>BOOLEAN</tt> ersetzen Sie mit <tt>true</tt> wenn für Untergruppen dieser Gruppe auch auf diese spezielle PHP-Seite verlink werden soll, ansonsten mit <tt>false</tt>.

Passen Sie auf, dass nach jedem <tt>GRUPPENNUMMER => Array(...)</tt> ein Komma notiert ist, allerdings nicht beim letzten.
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> oder eine Zahl || Sofern dieser Parameter eine Zahl als Wert erhält, bestimmt er die Anzahl der Artikel pro Gruppe, die in der dynamischen Navigation angezeigt werden, wenn eine Gruppe statt Untergruppen Artikel enthält.
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> oder <tt>true</tt> || Verwenden Sie das Template ''intelligent'' für die dynamische Navigation, setzen Sie diesen Parameter auf <tt>true</tt>, ansonsten auf <tt>false</tt>
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|}

===Sinnvolle Globals vom DynPG-CMS===

Dies hier erklärt die Globals aus dem PHP-Code von [[Schritt 2: PHP-Datei für die dynamische Navigation erstellen|Schritt 2 des Punkts ''Einrichten'']].

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> ''' : ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> ''' : Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> ''' : keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> ''' : kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> ''' : keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> ''' : Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> ''' : Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> ''' : andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-17T16:07:57Z

Sebastian: /* Sinnvolle Globals vom DynPG-CMS */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Untergruppen hat. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Artikel enthält. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf einen Artikelnamen. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
)
)</pre> || Ermöglicht es, für bestimmte Gruppen auf eine spezielle <tt>PHP-SEITE</tt> zu verlinken. Hierzu geben Sie anstatt <tt>GRUPPENNUMMER</tt> die Gruppennummer der Gruppe aus dem Backend ein. Statt <tt>PHP-SEITE</tt> fügen Sie den Namen und Pfad zur Zieldatei an, ausgehend vom Hauptverzeichnis des CMS!. Lassen Sie den Anhang <tt>{query}</tt> genau so stehen, falls in die Zieldatei auch DynPG über Globals eingeben wurde. <tt>BOOLEAN</tt> ersetzen Sie mit <tt>true</tt> wenn für Untergruppen dieser Gruppe auch auf diese spezielle PHP-Seite verlink werden soll, ansonsten mit <tt>false</tt>.

Passen Sie auf, dass nach jedem <tt>GRUPPENNUMMER => Array(...)</tt> ein Komma notiert ist, allerdings nicht beim letzten.
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> oder eine Zahl || Sofern dieser Parameter eine Zahl als Wert erhält, bestimmt er die Anzahl der Artikel pro Gruppe, die in der dynamischen Navigation angezeigt werden, wenn eine Gruppe statt Untergruppen Artikel enthält.
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> oder <tt>true</tt> || Verwenden Sie das Template ''intelligent'' für die dynamische Navigation, setzen Sie diesen Parameter auf <tt>true</tt>, ansonsten auf <tt>false</tt>
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|}

===Sinnvolle Globals vom DynPG-CMS===

Dies hier erklärt die Globals aus dem PHP-Code von [[Schritt 2: PHP-Datei für die dynamische Navigation erstellen|Schritt 2 des Punkts ''Einrichten'']].

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> ''' : ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> ''' : Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> ''' : keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> ''' : kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> ''' : keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> ''' : Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> ''' : Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> ''' : andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-17T16:05:02Z

Sebastian: /* Globals direkt für das Plugin */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Untergruppen hat. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Artikel enthält. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf einen Artikelnamen. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
)
)</pre> || Ermöglicht es, für bestimmte Gruppen auf eine spezielle <tt>PHP-SEITE</tt> zu verlinken. Hierzu geben Sie anstatt <tt>GRUPPENNUMMER</tt> die Gruppennummer der Gruppe aus dem Backend ein. Statt <tt>PHP-SEITE</tt> fügen Sie den Namen und Pfad zur Zieldatei an, ausgehend vom Hauptverzeichnis des CMS!. Lassen Sie den Anhang <tt>{query}</tt> genau so stehen, falls in die Zieldatei auch DynPG über Globals eingeben wurde. <tt>BOOLEAN</tt> ersetzen Sie mit <tt>true</tt> wenn für Untergruppen dieser Gruppe auch auf diese spezielle PHP-Seite verlink werden soll, ansonsten mit <tt>false</tt>.

Passen Sie auf, dass nach jedem <tt>GRUPPENNUMMER => Array(...)</tt> ein Komma notiert ist, allerdings nicht beim letzten.
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> oder eine Zahl || Sofern dieser Parameter eine Zahl als Wert erhält, bestimmt er die Anzahl der Artikel pro Gruppe, die in der dynamischen Navigation angezeigt werden, wenn eine Gruppe statt Untergruppen Artikel enthält.
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> oder <tt>true</tt> || Verwenden Sie das Template ''intelligent'' für die dynamische Navigation, setzen Sie diesen Parameter auf <tt>true</tt>, ansonsten auf <tt>false</tt>
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> :''' ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> :''' Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> :''' keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> :''' kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> :''' keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> :''' Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> :''' Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> :''' andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-17T16:00:36Z

Sebastian: /* Globals direkt für das Plugin */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Untergruppen hat. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf den Gruppennamen, sofern die Gruppe Artikel enthält. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die standardmäßig weiterverlinkt wird bei einem Klick auf einen Artikelnamen. Wird dieser Parameter nicht angegeben, so wird auf die aktuelle PHP-Seite verlinkt. (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => BOOLEAN
)
)</pre> || Ermöglicht es, für bestimmte Gruppen auf eine spezielle <tt>PHP-SEITE</tt> zu verlinken. Hierzu geben Sie anstatt <tt>GRUPPENNUMMER</tt> die Gruppennummer der Gruppe aus dem Backend ein. Statt <tt>PHP-SEITE</tt> fügen Sie den Namen und Pfad zur Zieldatei an, ausgehend vom Hauptverzeichnis des CMS!. Lassen Sie den Anhang <tt>{query}</tt> genau so stehen, falls in die Zieldatei auch DynPG über Globals eingeben wurde. <tt>BOOLEAN</tt> ersetzen Sie mit <tt>true</tt> wenn für Untergruppen dieser Gruppe auch auf diese spezielle PHP-Seite verlink werden soll, ansonsten mit <tt>false</tt>.

Passen Sie auf, dass nach jedem <tt>GRUPPENNUMMER => Array(...)</tt> ein Komma notiert ist, allerdings nicht beim letzten.
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> :''' ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> :''' Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> :''' keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> :''' kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> :''' keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> :''' Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> :''' Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> :''' andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-17T15:49:13Z

Sebastian: /* Beschreibung */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> :''' ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> :''' Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> :''' keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> :''' kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> :''' keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> :''' Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> :''' Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> :''' andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-17T15:48:40Z

Sebastian: /* Beschreibung */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> :''' ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> :''' Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> :''' keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> :''' kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> :''' keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> :''' Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> :''' Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> :''' andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-17T15:42:14Z

Sebastian: /* Die dynamische Navigation im Backend */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
([[Media:dynmenue11.PNG|Klick]])
. Unter dem Punkt ''Veröffentlichen''
([[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> :''' ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> :''' Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> :''' keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> :''' kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> :''' keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> :''' Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> :''' Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> :''' andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-17T15:41:24Z

Sebastian: /* Die dynamische Navigation im Backend */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf:
[[Media:dynmenue11.PNG|Klick]]
. Unter dem Punkt ''Veröffentlichen''
[[Media:dynmenue12.PNG|Klick]])
wählt man nun eine Option aus:
:* '''''Ja''''': die Gruppe wird auf der gesamten Website angezeigt, also auch in der dynamischen Navigation
:* '''''Nein''''': die Gruppe wird auf der ganze Website nicht angezeigt, also weder in Gruppenliste noch in der dynamischen Navigation
:* '''''Ja, ohne Navigation''''': die Gruppe wird zwar normal auf der Website angezeigt, jedoch in der dynamischen Navigation ausgeblendet
:* '''''Ja, ohne Subnavigation''''': wie '''''Ja''''', jedoch werden von diesem Menüpunkt in der dynamischen Navigation nur Untergruppen angezeigt, jedoch keine Artikel, die eventuell in dieser Gruppe liegen

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> :''' ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> :''' Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> :''' keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> :''' kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> :''' keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> :''' Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> :''' Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> :''' andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-16T18:15:48Z

Sebastian:

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

In diesen Einstellungen kann man z.B. auch bestimmen, dass eine bestimmte Gruppe nicht im Menü der Website sichtbar ist (so zum Beispiel die Gruppe "Diverses" aus der Musterwebsite 3). Die Eigenschaftenseite der Gruppe erreicht man über einen Klick auf:
[[Media:dynmenue11.PNG|Klick]]
. Unter dem Punkt ''Veröffentlichen''
[[Media:dynmenue12.PNG|Klick]])
wählt man nun die Option ''Nein'' aus.

Die Option ''Ja'' führt dazu, dass auf der Website der Navigationspunkt ''Diverses'' erscheint
[[Media:dynmenue14.PNG|Klick]]
. Ist der Punkt ''Diverses'' ausgewählt, erscheinen auch die Untergruppen
[[Media:dynmenue13.PNG|Klick]]
.

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> :''' ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> :''' Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> :''' keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> :''' kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> :''' keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> :''' Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> :''' Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> :''' andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

==CSS==
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-16T18:11:04Z

Sebastian: /* Sinnvolle Globals vom DynPG-CMS */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

In diesen Einstellungen kann man z.B. auch bestimmen, dass eine bestimmte Gruppe nicht im Menü der Website sichtbar ist (so zum Beispiel die Gruppe "Diverses" aus der Musterwebsite 3). Die Eigenschaftenseite der Gruppe erreicht man über einen Klick auf:
[[Media:dynmenue11.PNG|Klick]]
. Unter dem Punkt ''Veröffentlichen''
[[Media:dynmenue12.PNG|Klick]])
wählt man nun die Option ''Nein'' aus.

Die Option ''Ja'' führt dazu, dass auf der Website der Navigationspunkt ''Diverses'' erscheint
[[Media:dynmenue14.PNG|Klick]]
. Ist der Punkt ''Diverses'' ausgewählt, erscheinen auch die Untergruppen
[[Media:dynmenue13.PNG|Klick]]
.

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> :''' ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> :''' Menü soll immer angezeigt werden
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> :''' keine weitere Navigation(Breadcrumb) anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> :''' kein Link zu Print-Seite anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> :''' keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*'''<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> :''' Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*'''<tt>$GLOBALS["DynPG"]->Write_Article();</tt> :''' Artikel ausgeben
*'''<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> :''' andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

===CSS===
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-16T18:10:12Z

Sebastian: /* Globals direkt für das Plugin */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

In diesen Einstellungen kann man z.B. auch bestimmen, dass eine bestimmte Gruppe nicht im Menü der Website sichtbar ist (so zum Beispiel die Gruppe "Diverses" aus der Musterwebsite 3). Die Eigenschaftenseite der Gruppe erreicht man über einen Klick auf:
[[Media:dynmenue11.PNG|Klick]]
. Unter dem Punkt ''Veröffentlichen''
[[Media:dynmenue12.PNG|Klick]])
wählt man nun die Option ''Nein'' aus.

Die Option ''Ja'' führt dazu, dass auf der Website der Navigationspunkt ''Diverses'' erscheint
[[Media:dynmenue14.PNG|Klick]]
. Ist der Punkt ''Diverses'' ausgewählt, erscheinen auch die Untergruppen
[[Media:dynmenue13.PNG|Klick]]
.

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> : ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> : Menü soll immer angezeigt werden
*<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> : keine weitere Navigation(Breadcrumb) anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> : kein Link zu Print-Seite anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> : keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> : Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*<tt>$GLOBALS["DynPG"]->Write_Article();</tt> : Artikel ausgeben
*<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> : andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

===CSS===
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-16T18:09:35Z

Sebastian: /* Globals direkt für das Plugin */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

In diesen Einstellungen kann man z.B. auch bestimmen, dass eine bestimmte Gruppe nicht im Menü der Website sichtbar ist (so zum Beispiel die Gruppe "Diverses" aus der Musterwebsite 3). Die Eigenschaftenseite der Gruppe erreicht man über einen Klick auf:
[[Media:dynmenue11.PNG|Klick]]
. Unter dem Punkt ''Veröffentlichen''
[[Media:dynmenue12.PNG|Klick]])
wählt man nun die Option ''Nein'' aus.

Die Option ''Ja'' führt dazu, dass auf der Website der Navigationspunkt ''Diverses'' erscheint
[[Media:dynmenue14.PNG|Klick]]
. Ist der Punkt ''Diverses'' ausgewählt, erscheinen auch die Untergruppen
[[Media:dynmenue13.PNG|Klick]]
.

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:'''
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
...
...
...
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> : ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> : Menü soll immer angezeigt werden
*<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> : keine weitere Navigation(Breadcrumb) anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> : kein Link zu Print-Seite anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> : keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> : Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*<tt>$GLOBALS["DynPG"]->Write_Article();</tt> : Artikel ausgeben
*<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> : andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

===CSS===
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-16T18:07:39Z

Sebastian: /* Sinnvolle Globals vom DynPG-CMS */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

In diesen Einstellungen kann man z.B. auch bestimmen, dass eine bestimmte Gruppe nicht im Menü der Website sichtbar ist (so zum Beispiel die Gruppe "Diverses" aus der Musterwebsite 3). Die Eigenschaftenseite der Gruppe erreicht man über einen Klick auf:
[[Media:dynmenue11.PNG|Klick]]
. Unter dem Punkt ''Veröffentlichen''
[[Media:dynmenue12.PNG|Klick]])
wählt man nun die Option ''Nein'' aus.

Die Option ''Ja'' führt dazu, dass auf der Website der Navigationspunkt ''Diverses'' erscheint
[[Media:dynmenue14.PNG|Klick]]
. Ist der Punkt ''Diverses'' ausgewählt, erscheinen auch die Untergruppen
[[Media:dynmenue13.PNG|Klick]]
.

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
.................
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> : ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> : Menü soll immer angezeigt werden
*<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> : keine weitere Navigation(Breadcrumb) anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> : kein Link zu Print-Seite anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> : keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> : Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einrichten|Einrichten]] einfügen!''')
*<tt>$GLOBALS["DynPG"]->Write_Article();</tt> : Artikel ausgeben
*<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> : andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

===CSS===
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-16T18:04:59Z

Sebastian: /* Die dynamische Navigation im Backend */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']]) und den Einstellungen der Gruppe im Backend.

In diesen Einstellungen kann man z.B. auch bestimmen, dass eine bestimmte Gruppe nicht im Menü der Website sichtbar ist (so zum Beispiel die Gruppe "Diverses" aus der Musterwebsite 3). Die Eigenschaftenseite der Gruppe erreicht man über einen Klick auf:
[[Media:dynmenue11.PNG|Klick]]
. Unter dem Punkt ''Veröffentlichen''
[[Media:dynmenue12.PNG|Klick]])
wählt man nun die Option ''Nein'' aus.

Die Option ''Ja'' führt dazu, dass auf der Website der Navigationspunkt ''Diverses'' erscheint
[[Media:dynmenue14.PNG|Klick]]
. Ist der Punkt ''Diverses'' ausgewählt, erscheinen auch die Untergruppen
[[Media:dynmenue13.PNG|Klick]]
.

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
.................
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> : ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> : Menü soll immer angezeigt werden
*<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> : keine weitere Navigation(Breadcrumb) anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> : kein Link zu Print-Seite anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> : keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> : Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einbinden|Einbinden]] einfügen!''')
*<tt>$GLOBALS["DynPG"]->Write_Article();</tt> : Artikel ausgeben
*<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> : andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

===CSS===
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-16T18:03:54Z

Sebastian:

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Media:dynmenue01.png|Klick]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Media:dynmenue02.png|Klick]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Media:dynmenue05.PNG|Klick]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Media:dynmenue06.PNG|Klick]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Media:dynmenue07.PNG|Klick]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [[#Globalsreferenz|Funktionsübersicht der dynamischen Navigation]]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([[#Globalsreferenz|Globalsreferenz]]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([[#Dynamische_Navigation_im_Backend|Dynamische Navigation im Backend]]). Erweiterte Möglichkeiten ergeben sich durch das [[#CSS|CSS]] und die [[#Templates|Templates]].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']] und den Einstellungen der Gruppe im Backend.

In diesen Einstellungen kann man z.B. auch bestimmen, dass eine bestimmte Gruppe nicht im Menü der Website sichtbar ist (so zum Beispiel die Gruppe "Diverses" aus der Musterwebsite 3). Die Eigenschaftenseite der Gruppe erreicht man über einen Klick auf:
[[Media:dynmenue11.PNG|Klick]]
. Unter dem Punkt ''Veröffentlichen''
[[Media:dynmenue12.PNG|Klick]])
wählt man nun die Option ''Nein'' aus.

Die Option ''Ja'' führt dazu, dass auf der Website der Navigationspunkt ''Diverses'' erscheint
[[Media:dynmenue14.PNG|Klick]]
. Ist der Punkt ''Diverses'' ausgewählt, erscheinen auch die Untergruppen
[[Media:dynmenue13.PNG|Klick]]
.

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
.................
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> : ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> : Menü soll immer angezeigt werden
*<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> : keine weitere Navigation(Breadcrumb) anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> : kein Link zu Print-Seite anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> : keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> : Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [[#Einbinden|Einbinden]] einfügen!''')
*<tt>$GLOBALS["DynPG"]->Write_Article();</tt> : Artikel ausgeben
*<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> : andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

===CSS===
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [[#CSS|CSS]] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [[#Einrichten|Einrichten]]. In diesen wird dann mit den Befehlen aus [[#Globalsreferenz|Globalsreferenz]] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-16T17:58:09Z

Sebastian: /* Die dynamische Navigation im Backend */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Bild:dynmenue01.png|thumb]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Bild:dynmenue02.png|thumb]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Bild:dynmenue03.png|thumb]] und danach auf ''Inhalt bearbeiten'' [[Bild:dynmenue04.png|thumb]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Bild:dynmenue05.png|thumb]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Bild:dynmenue06.png|thumb]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Bild:dynmenue07.png|thumb]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [#Globalsreferenz Funktionsübersicht der dynamischen Navigation]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([#Globalsreferenz]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([#Dynamische_Navigation_im_Backend]). Erweiterte Möglichkeiten ergeben sich durch das [#CSS] und die [#Templates].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
.

Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei ([[#Globalsreferenz|z.B. Parameter 'full_load']] und den Einstellungen der Gruppe im Backend.

In diesen Einstellungen kann man z.B. auch bestimmen, dass eine bestimmte Gruppe nicht im Menü der Website sichtbar ist (so zum Beispiel die Gruppe "Diverses" aus der Musterwebsite 3). Die Eigenschaftenseite der Gruppe erreicht man über einen Klick auf:
[[Media:dynmenue11.PNG|Klick]]
. Unter dem Punkt ''Veröffentlichen''
[[Media:dynmenue12.PNG|Klick]])
wählt man nun die Option ''Nein'' aus.

Die Option ''Ja'' führt dazu, dass auf der Website der Navigationspunkt ''Diverses'' erscheint
[[Media:dynmenue14.PNG|Klick]]
. Ist der Punkt ''Diverses'' ausgewählt, erscheinen auch die Untergruppen
[[Media:dynmenue13.PNG|Klick]]
.

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
.................
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> : ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> : Menü soll immer angezeigt werden
*<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> : keine weitere Navigation(Breadcrumb) anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> : kein Link zu Print-Seite anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> : keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> : Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [#Einbinden] einfügen!''')
*<tt>$GLOBALS["DynPG"]->Write_Article();</tt> : Artikel ausgeben
*<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> : andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

===CSS===
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [#CSS] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [#Einrichten]. In diesen wird dann mit den Befehlen aus [#Globalsreferenz] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-16T17:54:52Z

Sebastian: /* Die dynamische Navigation im Backend */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Bild:dynmenue01.png|thumb]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Bild:dynmenue02.png|thumb]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Bild:dynmenue03.png|thumb]] und danach auf ''Inhalt bearbeiten'' [[Bild:dynmenue04.png|thumb]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Bild:dynmenue05.png|thumb]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Bild:dynmenue06.png|thumb]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Bild:dynmenue07.png|thumb]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [#Globalsreferenz Funktionsübersicht der dynamischen Navigation]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([#Globalsreferenz]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([#Dynamische_Navigation_im_Backend]). Erweiterte Möglichkeiten ergeben sich durch das [#CSS] und die [#Templates].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Media:dynmenue08.PNG|Klick]].
Auf der Website sieht dies dann wie folgt aus:
[[Media:dynmenue09.PNG|Klick]]
oder auch
[[Media:dynmenue10.PNG|Klick]]
. Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei [#Globalsreferenz z.B. Parameter 'full_load'] und den Einstellungen der Gruppe im Backend.

In diesen Einstellungen kann man z.B. auch bestimmen, dass eine bestimmte Gruppe nicht im Menü der Website sichtbar ist (so zum Beispiel die Gruppe "Diverses" aus der Musterwebsite 3). Die Eigenschaftenseite der Gruppe erreicht man über einen Klick auf:
[[Media:dynmenue11.PNG|Klick]]
. Unter dem Punkt ''Veröffentlichen''
[[Media:dynmenue12.PNG|Klick]])
wählt man nun die Option ''Nein'' aus.

Die Option ''Ja'' führt dazu, dass auf der Website der Navigationspunkt ''Diverses'' erscheint
[[Media:dynmenue14.PNG|Klick]]
. Ist der Punkt ''Diverses'' ausgewählt, erscheinen auch die Untergruppen
[[Media:dynmenue13.PNG|Klick]]
.

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
.................
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> : ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> : Menü soll immer angezeigt werden
*<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> : keine weitere Navigation(Breadcrumb) anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> : kein Link zu Print-Seite anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> : keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> : Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [#Einbinden] einfügen!''')
*<tt>$GLOBALS["DynPG"]->Write_Article();</tt> : Artikel ausgeben
*<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> : andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

===CSS===
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [#CSS] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [#Einrichten]. In diesen wird dann mit den Befehlen aus [#Globalsreferenz] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-16T17:51:07Z

Sebastian: /* Die dynamische Navigation im Backend */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Bild:dynmenue01.png|thumb]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Bild:dynmenue02.png|thumb]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Bild:dynmenue03.png|thumb]] und danach auf ''Inhalt bearbeiten'' [[Bild:dynmenue04.png|thumb]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Bild:dynmenue05.png|thumb]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Bild:dynmenue06.png|thumb]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Bild:dynmenue07.png|thumb]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [#Globalsreferenz Funktionsübersicht der dynamischen Navigation]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([#Globalsreferenz]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([#Dynamische_Navigation_im_Backend]). Erweiterte Möglichkeiten ergeben sich durch das [#CSS] und die [#Templates].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:

[[Bild:dynmenue08.PNG|200px]].

Auf der Website sieht dies dann wie folgt aus:

[[Bild:dynmenue09.PNG|200px]]

oder auch

[[Bild:dynmenue10.PNG|200px]]

. Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei [#Globalsreferenz z.B. Parameter 'full_load'] und den Einstellungen der Gruppe im Backend.

In diesen Einstellungen kann man z.B. auch bestimmen, dass eine bestimmte Gruppe nicht im Menü der Website sichtbar ist (so zum Beispiel die Gruppe "Diverses" aus der Musterwebsite 3). Die Eigenschaftenseite der Gruppe erreicht man über einen Klick auf:

[[Bild:dynmenue11.PNG|200px]]

. Unter dem Punkt ''Veröffentlichen''

[[Bild:dynmenue12.PNG|200px]])

wählt man nun die Option ''Nein'' aus.

Die Option ''Ja'' führt dazu, dass auf der Website der Navigationspunkt ''Diverses'' erscheint

[[Bild:dynmenue14.PNG|200px]]

. Ist der Punkt ''Diverses'' ausgewählt, erscheinen auch die Untergruppen

[[Bild:dynmenue13.PNG|200px]]

.

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
.................
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> : ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> : Menü soll immer angezeigt werden
*<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> : keine weitere Navigation(Breadcrumb) anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> : kein Link zu Print-Seite anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> : keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> : Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [#Einbinden] einfügen!''')
*<tt>$GLOBALS["DynPG"]->Write_Article();</tt> : Artikel ausgeben
*<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> : andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

===CSS===
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [#CSS] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [#Einrichten]. In diesen wird dann mit den Befehlen aus [#Globalsreferenz] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-16T17:50:34Z

Sebastian: /* Die dynamische Navigation im Backend */

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Bild:dynmenue01.png|thumb]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Bild:dynmenue02.png|thumb]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Bild:dynmenue03.png|thumb]] und danach auf ''Inhalt bearbeiten'' [[Bild:dynmenue04.png|thumb]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Bild:dynmenue05.png|thumb]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Bild:dynmenue06.png|thumb]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Bild:dynmenue07.png|thumb]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [#Globalsreferenz Funktionsübersicht der dynamischen Navigation]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([#Globalsreferenz]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([#Dynamische_Navigation_im_Backend]). Erweiterte Möglichkeiten ergeben sich durch das [#CSS] und die [#Templates].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Bild:dynmenue08.PNG|200px]].
Auf der Website sieht dies dann wie folgt aus:
[[Bild:dynmenue09.PNG|200px]]
oder auch
[[Bild:dynmenue10.PNG|200px]]
. Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei [#Globalsreferenz z.B. Parameter 'full_load'] und den Einstellungen der Gruppe im Backend.

In diesen Einstellungen kann man z.B. auch bestimmen, dass eine bestimmte Gruppe nicht im Menü der Website sichtbar ist (so zum Beispiel die Gruppe "Diverses" aus der Musterwebsite 3). Die Eigenschaftenseite der Gruppe erreicht man über einen Klick auf:
[[Bild:dynmenue11.PNG|200px]]
. Unter dem Punkt ''Veröffentlichen''
[[Bild:dynmenue12.PNG|200px]])
wählt man nun die Option ''Nein'' aus.

Die Option ''Ja'' führt dazu, dass auf der Website der Navigationspunkt ''Diverses'' erscheint
[[Bild:dynmenue14.PNG|200px]]
. Ist der Punkt ''Diverses'' ausgewählt, erscheinen auch die Untergruppen
[[Bild:dynmenue13.PNG|200px]]
.

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
.................
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> : ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> : Menü soll immer angezeigt werden
*<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> : keine weitere Navigation(Breadcrumb) anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> : kein Link zu Print-Seite anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> : keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> : Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [#Einbinden] einfügen!''')
*<tt>$GLOBALS["DynPG"]->Write_Article();</tt> : Artikel ausgeben
*<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> : andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

===CSS===
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [#CSS] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [#Einrichten]. In diesen wird dann mit den Befehlen aus [#Globalsreferenz] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Dynamische Navigation

2009-08-16T17:47:44Z

Sebastian:

[[Kategorie:Module]]
==Beschreibung==
Die dynamische Navigation ist Bestandteil des kostenlosen Grundmoduls von DynPG und bereits im Standard-DynPG integriert. Es ist keine separate Installation notwendig. Sie ermöglicht es Ihnen einfach und flexibel Navigationen auf Ihrer Homepage zu erstellen. Die Anwendungsmöglichkeiten gestalten sich dabei flexibel als normales Menü oder auch als Sitemap.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend als Menü ab, macht also die logische Struktur ihrer Artikel aus dem Backend auf einer Webseite sichtbar und navigierbar.

Der Vorteil ist, dass man im Backend neue Gruppen o.ä. erstellt und diese dann im Hauptmenü erscheinen. Dies ist auch bei Untergruppen nützlich,
z.B. wenn eine neue Untergruppe ''Lokalnachrichten'' zur Hauptgruppe ''News'' hinzukommt.

Zum Verständnis der Funktionsvielfalt der dynamischen Navigation ist es hilfreich, einmal eine der [[Muster-Web-Sites|Musterwebsites]] zu installieren und in den entsprechenden Dateien der Musterwebsite die unten erklärten Einstellungsmöglichkeiten nachzuvollziehen und vielleicht auch einmal mit den Optionen herumzuspielen.

==Einrichten==
''Anmerkung: Benutzen sie die [[Muster-Web-Sites|Musterwebsites]], so müssen die nachfolgenden zwei Schritte nicht ausgeführt werden, da die dynamische Navigation bereits in den Musterwebsites genutzt wird''

===Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation===
Wählen Sie im Menü des Backends ''Gruppen'' aus [[Bild:dynmenue01.png|thumb]]. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen. Hier wählen wir (die in diesem Falle schon vorhandene) Gruppe ''Startseite/Navigation/Formular'' durch Klick auf ihren Namen aus [[Bild:dynmenue02.png|thumb]].

Mit einem Klick auf ''Artikel Formular anzeigen'' [[Bild:dynmenue03.png|thumb]] und danach auf ''Inhalt bearbeiten'' [[Bild:dynmenue04.png|thumb]] erscheint der Editor.

In diesem wählen Sie das Symbol für die dynamische Navigation [[Bild:dynmenue05.png|thumb]], geben noch einen Titel, etwa ''Neue Seitennavigation'', ein und bestätigen mit einem Klick auf ''Erstellen'' [[Bild:dynmenue06.png|thumb]].

Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen [[Bild:dynmenue07.png|thumb]]. Die Nummer des Artikels benötigen Sie erneut, wenn Sie in eine PHP-Datei mittels eines Globals die dynamische Navigation einbinden.

===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
:*<tt>http-docs/folgeseite.php</tt> : eine andere PHP-Datei der Website
:*<tt>http-docs/inc/navi.php</tt> : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den nötigen Code der <tt>inc/navi.php</tt> kann man anhand der [[Muster-Web-Sites|Musterwebsites]] nachvollziehen (Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die [[Funktionsreferenz/Globals|Globals-Übersicht von DynPG]] und weiter unten die [#Globalsreferenz Funktionsübersicht der dynamischen Navigation]) :
:*'''<tt>inc/navi.php</tt>:'''
<code>[php, N]
<?php
$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'intelligent');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'real_expand', TRUE);
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_groups', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_detail', '../folgeseite.php');
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
0 => Array(
'page' => '../formular.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
15 => Array(
'page' => '../sitemap.php{query}',
'successors' => true
),
16 => Array(
'page' => '../veranstaltungen.php{query}',
'successors' => true
),
21 => Array(
'page' => '../blog.php{query}',
'successors' => true
),
6 => Array(
'page' => '../index.php{query}',
'successors' => true
)
)
);
$GLOBALS["DynPG"]->SetupTemplate('uneditable');
$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);
$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);
$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);
$GLOBALS["DynPG"]->SetParam_A_Article(1);

$GLOBALS["DynPG"]->Write_Article();
$GLOBALS["DynPG"]->SetupTemplate('default');
?>
</code>

Man kann nun in der <tt>index.php</tt> mittels
<code>[php, N]
<?php include("inc/navi.php"); ?>
</code>
die Navigation einbinden, ebenso z.B. auch in der <tt>folgeseite.php</tt>.

Die dynamische Navigation kann nun an verschiedenen Stellen angepasst werden. Neben den Globals in der PHP-Datei ([#Globalsreferenz]) ist dies im Backend durch das Erstellen von Gruppen und Artikeln möglich ([#Dynamische_Navigation_im_Backend]). Erweiterte Möglichkeiten ergeben sich durch das [#CSS] und die [#Templates].

==Die dynamische Navigation im Backend==

Wie bereits erwähnt, bildet die dynamische Navigation die Gruppenstruktur des Backends auf einer Webseite ab. In der Musterwebsite 3 ist im Backend zum Beispiel folgende Gruppenstruktur zu erkennen:
[[Bild:dynmenue08.png|200px]].
Auf der Website sieht dies dann wie folgt aus:
[[Bild:dynmenue09.png|200px]]
oder auch
[[Bild:dynmenue10.png|200px]]
. Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten Globals in der PHP-Datei [#Globalsreferenz z.B. Parameter 'full_load'] und den Einstellungen der Gruppe im Backend.

In diesen Einstellungen kann man z.B. auch bestimmen, dass eine bestimmte Gruppe nicht im Menü der Website sichtbar ist (so zum Beispiel die Gruppe "Diverses" aus der Musterwebsite 3). Die Eigenschaftenseite der Gruppe erreicht man über einen Klick auf:
[[Bild:dynmenue11.png|200px]]
. Unter dem Punkt ''Veröffentlichen''
[[Bild:dynmenue12.png|200px]])
wählt man nun die Option ''Nein'' aus.

Die Option ''Ja'' führt dazu, dass auf der Website der Navigationspunkt ''Diverses'' erscheint
[[Bild:dynmenue14.png|200px]]
. Ist der Punkt ''Diverses'' ausgewählt, erscheinen auch die Untergruppen
[[Bild:dynmenue13.png|200px]]
.

==Globalsreferenz==
===Globals direkt für das Plugin===
''Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden''

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>:
:Hiermit wählt man den Template-Ordner für die dynamische Navigation aus. Diese Template-Ordner liegen in <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Aus diesem Ordner wird die Template-Datei <tt>menu.tpl</tt> zur Generierung des Menüs genommen. Dies ist unabhängig vom Global <tt>$GLOBALS["DynPG"]->SetupTemplate(...);</tt>, der sozusagen das Template des Artikels bestimmt, welcher die dynamische Navigation enthält.

*<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>
:{| class="dynpgwikitable"
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
|-
||<tt>'order'</tt> || <tt>Array('INDEX')</tt> oder <tt>Array('NAME')</tt> || Reihenfolge der Gruppen in der Navigation nach Name oder im Backend gesetzten Index
|-
||<tt>'sort'</tt> || <tt>Array('ASC')</tt> oder <tt>Array('DESC')</tt> || aufsteigende oder absteigende Sortierung
|-
||<tt>'order_articles'</tt> || z.B. <tt>Array('INDEX')</tt> || sortiert Artikel in der dynamischen Navigation (falls diese angezeigt werden)
|-
||<tt>'sort_articles'</tt> || z.B. <tt>Array('ASC')</tt> || bestimmt aufsteigende oder absteigende Sortierreihenfolge der Artikel
|-
||<tt>'href_page_groups'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf den Gruppennamen (ACHTUNG <tt>'../'</tt> wichtig, siehe Ordnerstruktur weiter oben!)
|-
||<tt>'href_page_articles'</tt> || z.B. <tt>'../folgeseite.php'</tt> ||
|-
||<tt>'href_page_detail'</tt> || z.B. <tt>'../folgeseite.php'</tt> || Seite auf die weiterverlinkt wird bei einem Klick auf Artikelnamen in dynamischer Navigation (sofern Artikel angezeigt werden)
|-
||<tt>'href_subpages'</tt> || z.B. <pre>Array(
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE{query}',
'successors' => true
),
.................
GRUPPENNUMMER => Array(
'page' => 'PHP-SEITE',
'successors' => true
)
)</pre> || Ermöglicht für bestimmte Gruppen auf eine andere <tt>PHP-SEITE</tt> zu verlinken
|-
||<tt>'full_load'</tt> || <tt>false</tt> oder <tt>true</tt> || zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
|-
|| <tt>'full_load_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'limit_articles'</tt> || <tt>false</tt> ||
|-
|| <tt>'expand_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall an. Sei Gruppe 4 bspw. die Gruppe ''News'' des Backends, dann werden die beispielhaften Untergruppen ''Lokalnachrichten'' und ''Weltnachrichten'' immer zur Navigation angeboten, auch wenn sich ein Benutzer auf der Website gerade einen Artikel aus der Gruppe ''Kontakt'' anschaut
|-
|| <tt>'implode_subtree'</tt> || <tt>Array(4)</tt> oder <tt>Array(4,5)</tt> etc. || zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter <tt>expand_subtree</tt> überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter <tt>expand_subtree</tt> wichtiger ist.
|-
|| <tt>'real_expand'</tt> || <tt>false</tt> ||
|-
|| <tt>'speed_mode'</tt> || <tt>false</tt> ||
|-
|| <tt>'parent_select'</tt> || <tt>true</tt> ||
|-
|| <tt>'max_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe bis zu der (Unter-)Gruppen angezeigt werden
|-
|| <tt>'min_depth'</tt> || <tt>null</tt> oder <tt>0</tt> oder <tt>1</tt> etc. || Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
|-
|| <tt>'fetch_only'</tt> || <tt>null</tt> ||
|}

===Sinnvolle Globals vom DynPG-CMS===

*<tt>$GLOBALS["DynPG"]->SetupTemplate('uneditable');</tt> : ermöglicht Navigation in der Seite obwohl Editiermodus im Backend angeschaltet ist
*<tt>$GLOBALS["DynPG"]->SetParam_A_Anytime(TRUE);</tt> : Menü soll immer angezeigt werden
*<tt>$GLOBALS["DynPG"]->SetParam_A_CategoryNavigation(FALSE);</tt> : keine weitere Navigation(Breadcrumb) anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_PrintNavigation(FALSE);</tt> : kein Link zu Print-Seite anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_ArticleHeader(FALSE);</tt> : keine Artikelüberschrift (des Artikels mit dem DynMenü-Platzhalter) und kein Artikelleadtext anzeigen
*<tt>$GLOBALS["DynPG"]->SetParam_A_Article(1);</tt> : Artikel mit dem Dynmenü-Platzhalter setzen ('''Hier die Artikelnummer aus [#Einbinden] einfügen!''')
*<tt>$GLOBALS["DynPG"]->Write_Article();</tt> : Artikel ausgeben
*<tt>$GLOBALS["DynPG"]->SetupTemplate('default');</tt> : andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück

===CSS===
Die CSS-Dateien für die dynamische Navigation liegen im Verzeichnis <tt>dynpg/plugins/DPGdynmenu/styles</tt>. Die Datei <tt>menu.css</tt> ist hierbei meist die ausschlaggebende, so zum Beispiel in der Navigation der Musterwebsite 3.

Die CSS-Klassen und -Bezeichner aus dieser Datei sind nach einem bestimmten Schema benannt. Hat man dieses einmal verstanden, so lassen sich leicht Änderungen an speziellen Teilen des Erscheinungsbildes der dynamischen Navigation durchführen.

Die dynamische Navigation wird von einem <tt>div</tt>-Tag mit der Id <tt>course_categories_menu</tt> umschlossen.

Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt.
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
<code>[css, N]
div#course_categories_menu {
margin: 0;
padding: 0;
width: 180px;
}
</code>

Um zu verhindern, dass die CSS-Angaben dieser Datei auch auf andere Teile der Website Einfluss haben, ist vor allen anderen CSS-Definitionen der Datei ebenfalls <tt>div#course_categories_menu</tt> notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Innerhalb des <tt>course_categories_menu</tt> - <tt>div</tt> - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein <div>-Tag mit der CSS-Id <tt>group_fold_NUMMER</tt> wobei <tt>NUMMER</tt> der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<code>[html, N]
<div id="course_categories_menu">
<div id="group_fold_2"></div> 
<div id="group_fold_3"></div> 
<div id="group_fold_9"></div> 
<div id="group_fold_4"></div> 
<div id="group_fold_5"></div> 
<div id="group_fold_21"></div> 
<div id="group_fold_15"></div> 
<div id="group_fold_6"></div> 
</div>
</code>
Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:
<code>[css, N]
div#course_categories_menu div#group_fold_9 {
text-decoration:blink;
}
</code>
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Innerhalb der <tt>group_fold_NUMMER</tt> - <tt>div</tt> - Tags gibt es nun ein <tt>div</tt> - Tag, dass (neben einer weiteren CSS-Id) eine CSS-Klasse hat. Diese CSS-Klasse wird nach folgendem Muster gebildet:

'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''

{| class="dynpgwikitable"
! Buchstabe !! mögliche Werte !! Beschreibung
|-
|| <tt>''A''</tt> || 0 oder 1 oder 2 etc. || gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
|-
|| <tt>''B''</tt> || <tt>r</tt> (nicht letzter), <tt>e</tt> (letzter) || gibt an, ob nach dieser Gruppe noch weitere aufgelistet werden (z.B. in Musterwebsite 3 ist die Gruppe 6 "Home" die letzte des Menüs)
|-
|| <tt>''C''</tt> || <tt>a</tt> (ist aktiv), <tt>i</tt> (ist nicht aktiv) || gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
|-
|| <tt>''D''</tt> || <tt>exp</tt> (ausgeklappt), cll(eingeklappt) || gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
|-
|| <tt>''E''</tt> || <tt>_hover</tt> (Mauszeiger ist über dem Element), nichts (Mauszeiger ist nicht über dem Element) || gibt an, ob sich der Mauszeiger über dem Gruppennamen befindet oder nicht
|}

Mithilfe dieses Schemas kann man nun bestimmen, welche CSS-Klassen man in der CSS-Datei angeben muss um bestimmte Effekte hervorzurufen.
Möchte man beispielsweise, dass alle Elemente der zweitobersten Ebene blinken, wenn der Mauszeiger über dem Element ist, so notiert man in der CSS-Datei:
<code>[css, N]
div#course_categories_menu div#level_1_r_a_exp_hover,
div#course_categories_menu div#level_1_r_a_cll_hover,
div#course_categories_menu div#level_1_r_i_exp_hover,
div#course_categories_menu div#level_1_r_i_cll_hover,
div#course_categories_menu div#level_1_e_a_exp_hover,
div#course_categories_menu div#level_1_e_a_cll_hover,
div#course_categories_menu div#level_1_e_i_exp_hover,
div#course_categories_menu div#level_1_e_i_cll_hover {
text-decoration:blink;
}
</code>

Diese Struktur der <tt>div</tt>-Tags wiederholt sich mit tieferen Gruppenebenen / Untergruppen. Zum Beispiel tauchen die <tt>div</tt>-Tags der Untergruppen vom ''Über uns''-Menüpunkt aus der Muster-Website 3 innerhalb des <tt>group_fold_4</tt> - <tt>div</tt> - Tags auf.

Weitere Informationen über die CSS-Klassen kann man schnell erhalten, indem man sich den HTML-Code eines generierten dynamischen Menüs anschaut, zum Beispiel aus der Muster-Website 3.

==Templates==
Diese Templates liegen im Ordner <tt>dynpg/plugins/DPGdynmenu/templates</tt>. Hier finden sie Ordner, die jeweils eine <tt>menu.tpl</tt> enthalten. Welcher dieser Ordner aktiv ist, bestimmen Sie durch das Global <tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Template('DPGdynmenu', 'TEMPLATEORDNER');</tt>.

Die Templates dienen als Vorlage für die Generierung des HTML-Codes der dynamischen Navigation. In ihnen werden auch die CSS-Klassen definiert, welche in [#CSS] erklärt wurden. Außerdem finden hier Templateplatzhalter der Form <tt><nowiki>{$PLATZHALTER}</nowiki></tt> Verwendung, die DynPG dynamisch durch Inhalt ersetzt.

Das Template ''horizontal'' der Musterwebsite 3 generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.

Modifikationen an den Templates sind recht komplex. Sollten Sie vorhaben hier Änderungen durchzuführen, wenden Sie sich an das DynPG-Forum.

==Feste Links einbauen==

Hierzu erstellt man im Backend eine Gruppe mit dem Namen des festen Links und merkt sich die Gruppennummer. Mittels des Plugin-Parameters <tt>'href_subpages'</tt> setzt man für diese Gruppennummer nun als Ziel die Datei <tt>counter.php</tt> fest und übergibt dieser als Parameter das feste Linkziel. Beispiel: Wir wollen einen Link auf die Google-Webseite setzen. Also erstellen wir im Backend eine Gruppe mit dem Namen ''Google-Websuche'' und notieren die Gruppennummer (z.B. 33). In die PHP-Datei unserer dynamischen Navigation fügen wir nun folgendes ein:
<code>[php, N]
$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
'DPGdynmenu',
'href_subpages',
Array(
33 => Array(
'page' => 'counter.php?inc=http://www.google.com',
'successors' => true
)
)
);
</code>

==Mehrsprachiges Menü==

Hierzu gibt es einen Thread in unserem Forum unter [http://www.dynpg.ch/dynpg-forum.php?t=&read_group=30&thread_id=47&tt=Sprachwechsel]. Die grundsätzliche Idee ist (bei zwei Sprachen) zwei Gruppenbäume im Backend aufzubauen. Die oberste Gruppe des ersten Baumes wäre beispielsweise die Gruppe ''Deutsch'', die oberste Gruppe des zweiten Baumes wäre zum Beispiel ''English''.

In der zweiten Ebene kommen dann unter ''Deutsch'' bzw. ''English'' Untergruppen wie ''News''/''Nachrichten'', ''Produkte''/''Products'', ''Hilfe''/''Support'' und so weiter. Man erstellt sich nun zwei PHP-Dateien (<tt>navi_de.php</tt>, <tt>navi_en.php</tt>) wie oben beschrieben [#Einrichten]. In diesen wird dann mit den Befehlen aus [#Globalsreferenz] der jeweils nicht passende Baum ausgeblendet.

==Siehe auch==
*[[Sitemap-Tutorial]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
*[[Code-Schnipsel Menüeinträge sortieren]]
*[[Snippet-Beispiele]]

Kategorie:Module

2009-08-16T17:47:29Z

Sebastian: /* Artikel zu einzelnen Modulen */

In diesem Bereich sind Informationen über die Integration von Modulen in Ihr DynPG und die anschließende Konfiguration und Verwendung gesammelt.

=== Artikel zu Modulen allgemein ===
*[[Installation von Modulen]]: Kurze Anleitung für das Installieren von Modulen.
*[[Einfügen von Modulen]]: Dokumentation für das Einfügen von Modulen in Artikeltexte. Die Navigation, das Gästebuch, der Blog, die Bildergalerie etc. müssen jeweils als Artikel erstellt werden. Dies wird in dieser kurzen Dokumentaton beschrieben.
*[[XML-Schnittstelle in Modulen|Die XML-Schnittstelle]]: Beschreibt, wie man über die in einigen Modulen integrierte XML-Exportfunktion Daten gewinnt und wie man diese verwendet.

=== Artikel zu einzelnen Modulen ===
*[[Modul Dynamische Navigation]]: Hier wird das Standard-Plugin ''Dynamische Navigation'' erläutert
*[[Bildergalerie-Modul Erstellen einer Bildergalerie|Bildergalerie-Modul: Erstellen einer Bildergalerie]]: Die Dokumentation für das Erstellen einer Bildergalerie. Hier lernen Sie in kürzester Zeit eine effektvolle Bildergalerie mit Diashow zu erstellen.
*[[Newsletter-Modul]]: Die Dokumentation des Newsletter-Moduls
*[[E-Shop Pro Bedienung|e-Shop Pro Bedienung]]: Erläutert beispielhaft die Verwendung des Moduls e-Shop Pro.
*[[Kalender-Modul]]: Die Dokumentation für den Einbau des Kalender-Moduls
*[[Blog]]: Die Benutzer-Dokumentation des DynPG-Blogs
*[[Bedienung des Community-Moduls]]: Das Community-Modul mit seinen verschiedenen Ansichten
*[[Modul Rechnungen und Rapporte]]: Ein neues Modul zum Erfassen von Arbeitszeiten und dem automatischen Generieren von Rechnungen etc.

Kategorie:Module

2009-08-16T17:46:37Z

Sebastian: /* Artikel zu einzelnen Modulen */

In diesem Bereich sind Informationen über die Integration von Modulen in Ihr DynPG und die anschließende Konfiguration und Verwendung gesammelt.

=== Artikel zu Modulen allgemein ===
*[[Installation von Modulen]]: Kurze Anleitung für das Installieren von Modulen.
*[[Einfügen von Modulen]]: Dokumentation für das Einfügen von Modulen in Artikeltexte. Die Navigation, das Gästebuch, der Blog, die Bildergalerie etc. müssen jeweils als Artikel erstellt werden. Dies wird in dieser kurzen Dokumentaton beschrieben.
*[[XML-Schnittstelle in Modulen|Die XML-Schnittstelle]]: Beschreibt, wie man über die in einigen Modulen integrierte XML-Exportfunktion Daten gewinnt und wie man diese verwendet.

=== Artikel zu einzelnen Modulen ===
*[[Modul Dynamische Navigation]]
*[[Bildergalerie-Modul Erstellen einer Bildergalerie|Bildergalerie-Modul: Erstellen einer Bildergalerie]]: Die Dokumentation für das Erstellen einer Bildergalerie. Hier lernen Sie in kürzester Zeit eine effektvolle Bildergalerie mit Diashow zu erstellen.
*[[Newsletter-Modul]]: Die Dokumentation des Newsletter-Moduls
*[[E-Shop Pro Bedienung|e-Shop Pro Bedienung]]: Erläutert beispielhaft die Verwendung des Moduls e-Shop Pro.
*[[Kalender-Modul]]: Die Dokumentation für den Einbau des Kalender-Moduls
*[[Blog]]: Die Benutzer-Dokumentation des DynPG-Blogs
*[[Bedienung des Community-Moduls]]: Das Community-Modul mit seinen verschiedenen Ansichten
*[[Modul Rechnungen und Rapporte]]: Ein neues Modul zum Erfassen von Arbeitszeiten und dem automatischen Generieren von Rechnungen etc.

Kategorie:Integration in eine Webseite

2009-08-16T17:46:07Z

Sebastian: /* Artikel */

=== Artikel ===
Vorschlag einer Reihenfolge zum Lesen:
*[[Integration kurz und knackig]]
*[[Ein erstes kleines Beispiel]]
*[[Die drei Ansichten von DynPG]]
*[[Funktionsreferenz/Globals]]
*[[CSS]]
*[[Templates]]
*[[Implementation eines kompletten Hauptmenüs]]
*[[Einbau der DynPG-Suche]]
*[[Sitemap-Tutorial]]
*[[Snippet-Beispiele]]
*[[Webseiten Suchmaschinen-tauglich machen]]
*[[SEO-Mythos]]

=== Video-Tutorials ===
Hilfestellung erhalten Sie auch in Form von Video-Tutorials:
* Das [[Video Kurze Erklärung des Backends]] gibt Ihnen grundlegenden Einblick in das Backend und damit auch in die Denkart von DynPG. Es ist also durchaus von Interesse für die Implementation von DynPG in eine Webseite.
* Das [[Video Globals in Adobe Dreamweaver]] wird Nutzern von Adobe Dreamweaver oder GoLive den Einstieg mit DynPG erleichtern.

==== Eine Beispiel-Implementierung von DynPG ====
* [[Video Erklärung der Grundstruktur]] -- Teil 1 einer Beispiel-Implementierung von DynPG
* [[Video Einbau eines einzelnen Artikels]] -- Teil 2 der Beispiel-Implementierung
* [[Video Einbau einer Artikelliste]] -- Teil 3 der Folge
* [[Video Einbau einer Gruppenliste]] -- Teil 4 des Tutorials

==== Eine volldynamische Website ====
Ein weitere Reihe von Videos erläutert Ihnen beispielhaft das Erstellen einer kleinen volldynamischen Website in fünf Schritten:
* Teil 1 -- [[Video Volldynamische Website - Einbinden von Globals]]
* Teil 2 -- [[Video Volldynamische Website - Erstellen der Navigation]]
* Teil 3 -- [[Video Volldynamische Website - Aufbau innerhalb dem Backend]]
* Teil 4 -- [[Video Volldynamische Website - Das CSS]]
* Teil 5 -- [[Video Volldynamische Website - Der CSS-Aufbau]]

Datei:Dynmenue14.PNG

2009-08-16T17:45:13Z

Sebastian:

Datei:Dynmenue13.PNG

2009-08-16T17:44:59Z

Sebastian:

Datei:Dynmenue12.PNG

2009-08-16T17:44:52Z

Sebastian: