Dynamische Navigation: Unterschied zwischen den Versionen

Aktuelle Version vom 26. September 2011, 15:31 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 eine dynamisches Navigationsmenü auf Ihrer Homepage zu erstellen.

Ein dynamisches Menü bildet die Gruppenstruktur im Backend, also die Abfolge von Gruppen, Untergruppen und Artikeln in einer Gruppe, als Menü ab. Sie macht also die logische Struktur ihrer Artikel aus dem Backend in der 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

• 

  1. Wählen Sie im Menü des Backends Gruppen aus

• 

  2. Suchen Sie sich nun eine Gruppe, in der Sie einen Artikel erfassen wollen (z.B. Diverses).

• 

  3. Klicken Sie auf Artikel Formular anzeigen.

• 

  4. und danach auf Inhalt bearbeiten. Es erscheint der Editor.

• 

  5. In diesem wählen Sie das Symbol für die dynamische Navigation.

• 

  6. Geben Sie nun noch einen Titel ein und bestätigen mit einem Klick auf Erstellen.

• 

  7. Hat alles geklappt, können Sie im unteren Teil der Seite den neuen Artikel sehen.

Bemerkung:

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:

Datei 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:

.

Auf der Website sieht dies dann wie folgt aus:

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.

Bemerkung:

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 das Template der Artikelansichten bestimmt.

• $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
'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.
'load_articles'	true oder false	Bestimmt ob Artikel im Menü angezeigt werden sollen. Bei false werden nur Gruppen im Menü angezeigt und keine Artikel (unabhängig von anderen Einstellungen, d.h. diese Eigenschaft überschreibt andere). Bei true werden Artikel im Menü angezeigt, es sei denn bestimmte Artikel werden durch andere Einstellungen ausgeblendet.
'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
'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 Textersetzen 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 Textersetzen auf nicht leere Kurztextfelder der Gruppen ausgeführt und kann zur Verlangsamung des Menus führen. Das sollte nur eingeschaltet werden, wenn der Kurztext 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;
}

Achtung:

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 <div>-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

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

Anpassen des Navigationsmenüs

Siehe Artikel: Anpassen des Navigationsmenüs

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.

Siehe auch

• Implementation eines kompletten Hauptmenüs
• Anpassen des Navigationsmenüs
• Snippet-Beispiele