Dynamische Navigation: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
K
(Artikel teilweise überarbeitet)
Zeile 3: Zeile 3:
 
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.
 
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.  
+
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.
 
+
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==
 
==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===
 
===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]].
+
''Hauptartikel'': [[DynPG Module einbinden]]
  
Mit einem Klick auf ''Artikel Formular anzeigen'' [[Media:dynmenue03.PNG|Klick]] und danach auf ''Inhalt bearbeiten'' [[Media:dynmenue04.PNG|Klick]] erscheint der Editor.
+
<gallery perrow="7">
 +
Image:dynmenue01.png|1. Wählen Sie im Menü des Backends ''Gruppen'' aus
 +
Image:dynmenue02.png|2. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen (z.B. Diverses).
 +
Image:dynmenue03.PNG|3. Klicken Sie auf ''Artikel Formular anzeigen''.
 +
Image:dynmenue04.PNG|4. und danach auf ''Inhalt bearbeiten''. Es erscheint der Editor.
 +
Image:dynmenue05.PNG|5. In diesem wählen Sie das Symbol für die dynamische Navigation.
 +
Image:dynmenue06.PNG|6. Geben Sie nun noch einen Titel ein und bestätigen mit einem Klick auf ''Erstellen''.
 +
Image:dynmenue07.PNG|7. Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen.
 +
</gallery>
  
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.
+
[[Image:Note.png]] ''Hinweis:'' Die ID 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===
 
===Schritt 2: PHP-Datei für die dynamische Navigation erstellen===
Folgende Ordner-Struktur könnte bei Ihnen vorliegen:
+
Nehmen wir an, es würde folgende Ordner-Struktur vorliegen:
 
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
 
:*<tt>http-docs/dynpg</tt> : hier liegt das DynPG-CMS
 
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
 
:*<tt>http-docs/index.php</tt> : die Hauptseite Ihrer Website
Zeile 29: Zeile 30:
 
:*<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
 
:*<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]]) :
+
Den relativ komplexen 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>:'''
 
:*'''<tt>inc/navi.php</tt>:'''
 
<code>[php, N]
 
<code>[php, N]
Zeile 91: Zeile 92:
  
 
==Die dynamische Navigation im Backend==
 
==Die dynamische Navigation im Backend==
 +
→ ''Hauptartikel'': [[Erstellen des Navigationsmenüs 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:
 
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]].
+
 
 +
[[Image:dynmenue08.PNG]].
 +
 
 
Auf der Website sieht dies dann wie folgt aus:
 
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.  
+
<center>
 +
[[Image:dynmenue09.PNG|400px]] [[Image:dynmenue10.PNG|400px]]
 +
</center>
  
Die Eigenschaftsseite der Gruppe erreicht man über einen Klick auf das Stiftsymbol
+
Welche Untergruppen angezeigt werden, hängt zum einen davon ab, welcher Navigationspunkt gerade aktiv ist (also angeklickt wurde) und zum anderen von den benutzten [[#Globalsreferenz|Globals]] in der PHP-Datei und den [[Versteckte Gruppen#Veröffentlichungsoptionen|Veröffentlichungseinstellungen]] der Gruppe im Backend.
([[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==
 
==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'']].
+
Dieser Abschnitt erklärt die Globals aus dem PHP-Code von [[#Schritt 2: PHP-Datei für die dynamische Navigation erstellen|Schritt 2 des Punkts ''Einrichten'']].
 +
 
 +
 
 +
[[Image:Note.png]] ''Hinweis:'' Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden.
  
===Globals direkt für das Plugin===
+
===Globals 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>'''
 
*'''<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.
 
: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>'''
 
*'''<tt>$GLOBALS["DynPG"]->SetParam_PlugIn_Param('DPGdynmenu', PARAMETERNAME, PARAMETERWERT);</tt>'''
:{| class="dynpgwikitable"
+
:{| class="wikitable"
 
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
 
! <tt>PARAMETERNAME</tt> !! <tt>PARAMETERWERT</tt> !! Beschreibung
 
|-
 
|-
Zeile 151: Zeile 148:
 
     'page' => 'PHP-SEITE{query}',
 
     'page' => 'PHP-SEITE{query}',
 
     'successors' => BOOLEAN
 
     '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>.
 
)</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>.
  
Zeile 202: Zeile 199:
 
:andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück
 
:andere Teile der Website haben sicherlich andere Templates. Wir setzen daher hier wieder auf das Standard-Template zurück
  
==CSS==
+
== CSS ==
 +
 
 +
=== Grober Aufbau ===
 
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-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.
 
+
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:
 
Im <tt>menu.css</tt> der Muster-Website 3 steht beispielsweise:
 
<code>[css, N]
 
<code>[css, N]
Zeile 219: Zeile 214:
 
</code>
 
</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.
+
[[Image:Caution.png]] '''Wichtig:''' 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:
+
=== Div-Tags für Gruppen oberster Ebene ===
 +
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]
 
<code>[html, N]
 
<div id="course_categories_menu">
 
<div id="course_categories_menu">
Zeile 242: Zeile 238:
 
Damit würde der Text der Gruppe ''News'' (und eventueller Untergruppen) in der dynamischen Navigation blinken.
 
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:
+
=== Div-Tags für Unterpunkte ===
 +
 
 +
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>'''
 
'''<tt>level_''A''_''B''_''C''_''D''_''E''</tt>'''
  
{| class="dynpgwikitable"
+
{| class="wikitable"
 
! Buchstabe !! mögliche Werte !! Beschreibung
 
! Buchstabe !! mögliche Werte !! Beschreibung
 
|-
 
|-
Zeile 279: Zeile 277:
 
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.
 
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==
+
== Template ==
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>.
+
Diese Templates für das Navigationsmenü 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.
+
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'' generiert beispielsweise ein horizontales Menü, während das Template ''intelligent'' ein vertikales Menü erzeugt.
  
==Feste Links einbauen==
+
== 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:
 
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:
Zeile 304: Zeile 298:
 
</code>
 
</code>
  
==Mehrsprachiges Menü==
+
== Mehrsprachiges Menü ==
 +
→ ''Hauptartikel'': [[Tutorial - Mehrsprachige Webseiten]]
  
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''.
+
Hierzu gibt es im [[:Kategorie:Tutorials|Tutorialbereich]] ein Tutorial zur [[Tutorial - Mehrsprachige Webseiten|Erstellung mehrsprachiger Webseiten]]. Die grundsätzliche Idee ist bei z.B. 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.
+
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==
 
==Verschiedene Grafiken für Menüpunkte==
Zeile 315: Zeile 310:
  
 
==Siehe auch==
 
==Siehe auch==
*[[Sitemap]]
 
 
*[[Implementation eines kompletten Hauptmenüs]]
 
*[[Implementation eines kompletten Hauptmenüs]]
*[[Code-Schnipsel Einfaches Hauptmenü]]
 
*[[Code-Schnipsel Menüeinträge sortieren]]
 
 
*[[Snippet-Beispiele]]
 
*[[Snippet-Beispiele]]

Version vom 19. Oktober 2010, 14:51 Uhr

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.

Einrichten

Schritt 1: Artikel erstellen mit Platzhalter für die dynamische Navigation

Hauptartikel: DynPG Module einbinden


Note.png Hinweis: Die ID 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

Nehmen wir an, es würde folgende Ordner-Struktur vorliegen:

  • http-docs/dynpg : hier liegt das DynPG-CMS
  • http-docs/index.php : die Hauptseite Ihrer Website
  • http-docs/folgeseite.php : eine andere PHP-Datei der Website
  • http-docs/inc/navi.php : In diese Datei platziert man häufig den Code für die Navigation, dadurch ist er leichter wiederverwendbar

Den relativ komplexen Code der inc/navi.php kann man anhand der Musterwebsites nachvollziehen. Für eine genauere Erklärung der einzelnen verwendeten Globals siehe die Globals-Übersicht von DynPG und weiter unten die Funktionsübersicht der dynamischen Navigation:

  • inc/navi.php:
<?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');  
?>

Man kann nun in der index.php mittels

<?php include("inc/navi.php"); ?>

die Navigation einbinden, ebenso z.B. auch in der folgeseite.php.

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

Hauptartikel: Erstellen des Navigationsmenüs 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:

Dynmenue08.PNG.

Auf der Website sieht dies dann wie folgt aus:

Dynmenue09.PNG Dynmenue10.PNG

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 und den Veröffentlichungseinstellungen der Gruppe im Backend.

Globalsreferenz

Dieser Abschnitt erklärt die Globals aus dem PHP-Code von Schritt 2 des Punkts Einrichten.


Note.png Hinweis: Die Parameter haben Default-Werte, müssen also nicht immer gesetzt werden.

Globals für das Plugin

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


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

Passen Sie auf, dass nach jedem GRUPPENNUMMER => Array(...) ein Komma notiert ist, allerdings nicht beim letzten.

'full_load' false oder true zeigt unabhängig von angeklickten Gruppen den kompletten Navigationsbaum mit Untergruppen an (oder auch nicht)
'full_load_articles' false
'limit_articles' false 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.
'expand_subtree' Array(4) oder Array(4,5) 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
'implode_subtree' Array(4) oder Array(4,5) etc. zeigt die Untergruppen von Gruppe 4 (bzw. 4 und 5) in jedem Fall NICHT an. Anmerkung: der Parameter expand_subtree überschreibt diese Einstellung! Ist also eine Gruppe in beiden Parametern aufgeführt, so werden die Untergruppen dieser Gruppe immer angezeigt, da der Parameter expand_subtree wichtiger ist.
'real_expand' false oder true Verwenden Sie das Template intelligent für die dynamische Navigation, setzen Sie diesen Parameter auf true, ansonsten auf false
'parent_select' true
'max_depth' null oder 0 oder 1 etc. Tiefe bis zu der (Unter-)Gruppen angezeigt werden
'min_depth' null oder 0 oder 1 etc. Tiefe, die eine Gruppe mindestens haben muss um angezeigt zu werden, z.B. 1 um oberste Ebene der Gruppen aus dem Backend auszublenden
'fetch_only' null oder int Selektiert nur die angegebene Gruppe und deren Untergruppen oder alles falls null
'parse_article_lead' false oder true Falls true wird das Text ersetzen auf nicht leere Leadfelder der Artikel ausgeführt und kann zur Verlangsamung des Menus führen. Das sollte nur eingeschaltet werden, wenn der Lead innerhalb des Menus auch wirklich dynamischen Inhalt enthält, welcher dort auch angezeigt werden soll
'parse_group_shorttext' false oder true Falls true wird das Text ersetzen auf nicht leere Shorttextfelder der Gruppen ausgeführt und kann zur Verlangsamung des Menus führen. Das sollte nur eingeschaltet werden, wenn der Shorttext innerhalb des Menus auch wirklich dynamischen Inhalt enthält, welcher dort auch angezeigt werden soll
'hide_not_public_groups' false oder true Falls true werden nicht publizierte Gruppen und deren Untergruppen vom Menu nicht zurückgegeben

Sinnvolle Globals vom DynPG-CMS

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

CSS

Grober Aufbau

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

Die dynamische Navigation wird von einem div-Tag mit der Id course_categories_menu umschlossen. Diese Angaben gelten also grundsätzlich für die gesamte dynamische Navigation und werden gegebenenfalls weitervererbt. Im menu.css der Muster-Website 3 steht beispielsweise:

div#course_categories_menu {
  margin: 0;
  padding: 0;
  width: 180px;
}

Caution.png Wichtig: 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 div#course_categories_menu notiert. Dadurch wirken sich die Angaben nur auf die dynamische Navigation aus.

Div-Tags für Gruppen oberster Ebene

Innerhalb des course_categories_menu - div - Tags gibt es für jede Gruppe der obersten angezeigten Gruppenebene ein
-Tag mit der CSS-ID group_fold_NUMMER wobei NUMMER der Gruppennummer der Gruppe aus dem Backend entspricht. In der Navigation der Muster-Website 3 gibt es also folgende Tags:
<div id="course_categories_menu">
  <div id="group_fold_2"></div>  <!--Produkte-->
  <div id="group_fold_3"></div>  <!--Support-->
  <div id="group_fold_9"></div>  <!--News-->
  <div id="group_fold_4"></div>  <!--Über uns-->
  <div id="group_fold_5"></div>  <!--Kontakt-->
  <div id="group_fold_21"></div> <!--Blog-->
  <div id="group_fold_15"></div> <!--Sitemap-->
  <div id="group_fold_6"></div>  <!--Home-->
</div>

Möchte man nun Eigenschaften nur an einem bestimmten Teil der Navigation machen, so könnte man im CSS-File folgende Angabe machen:

div#course_categories_menu div#group_fold_9 {
  text-decoration:blink;
}

Damit würde der Text der Gruppe News (und eventueller Untergruppen) in der dynamischen Navigation blinken.

Div-Tags für Unterpunkte

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

level_A_B_C_D_E

Buchstabe mögliche Werte Beschreibung
A 0 oder 1 oder 2 etc. gibt das Level der Gruppe an, also die Verzweigungstiefe in der sich die Navigation befindet
B r (nicht letzter), e (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)
C a (ist aktiv), i (ist nicht aktiv) gibt an, ob die Gruppe aktiv ist, d.h. ob sie durch einen Klick ausgewählt wurde
D exp (ausgeklappt), cll (eingeklappt) gibt an, ob die Untergruppen dieser Gruppe ausgeklappt sind oder nicht
E _hover (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:

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;
}

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

Template

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

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 {$PLATZHALTER} Verwendung, die DynPG dynamisch durch Inhalt ersetzt. Das Template horizontal generiert beispielsweise ein horizontales Menü, während das Template intelligent ein vertikales Menü erzeugt.

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 'href_subpages' setzt man für diese Gruppennummer nun als Ziel die Datei counter.php 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:

$GLOBALS["DynPG"]->SetParam_PlugIn_Param(
  'DPGdynmenu',
  'href_subpages',
  Array(
	33 => Array(
      'page' => 'counter.php?inc=http://www.google.com',
      'successors' => true
    )		
  )
);

Mehrsprachiges Menü

Hauptartikel: Tutorial - Mehrsprachige Webseiten

Hierzu gibt es im Tutorialbereich ein Tutorial zur Erstellung mehrsprachiger Webseiten. Die grundsätzliche Idee ist bei z.B. 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 (navi_de.php, navi_en.php) wie oben beschrieben einrichten. In diesen wird dann mit den Befehlen aus 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, einem Artikel aus einer Reihe einführender Wiki-Artikel zu DynPG.

Siehe auch