Tutorial - Einbau einer Sitemap

Dieser Artikel ist Teil der Tutorialreihe "Erstellen einer einfachen Webseite".

Teil 1: Planung und Erstellung der Webseite im Backend | Teil 2: Aufbau einer einfachen Webseite | Teil 3: Anpassen des dynamischen Menüs | Teil 4: Einbau einer Sitemap | Teil 5: Meta-Daten und dynamische Seitentitel | Teil 6: Die dynamische Suche | Teil 7: Der Home-View

Einleitung

Eine Sitemap ist ein Bereich der Webseite, in dem der gesamte Inhalt in strukuturierter Form dargestellt wird. Dies bietet Besuchern der Webseite die Möglichkeit, eine Übersicht über die gesamten Webinhalte zu erhalten. Außerdem dient Sie der Suchmaschinenoptimierung, da alle in der Seite enthaltenen Dokumente aufgelistet werden und dadurch leichter zu erfassen sind. Mit DynPG kann sehr leicht eine dynamische Sitemap erstellt werden. Sie zeigt immer alle aktuellen Inhalte in einer hierarchischen Form an, auch wenn diese sich von Zeit zu Zeit ändern sollten.

Wir wollen nun also unsere Beispielwebseite so erweitern, dass sie bei einem Klick auf den Navigationspunkt Sitemap, den wir dem Navigationsmenü hinzufügen wollen, eine Ausgabe der folgenden Form erzeugt:

Den Code für dieses Beispiel finden Sie hier: Download

Bemerkung:

Beachten Sie bitte die Hinweise zur Konfiguration des Beispiel-Codes.

Erzeugen der Sitemap

Um eine Sitemap mit DynPG zu erstellen, brauchen wir keinen neuen Artikel zu erstellen. Wir werden stattdessen das dynamische Menü verwenden, da es mit einigen wenigen Änderungen bereits möglich ist, die notwendigen Links zu erzeugen. Dazu verwenden wir das folgende Sitemap-Snippet:

sitemap.php

<?php
    // sitemap settings
    $DynPG->SetParam_PlugIn_Template('DPGdynmenu', 'sitemap');
    $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'hide_not_public_groups', TRUE);
    $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'full_load', TRUE);
 
    $DynPG->SetParam_A_Anytime(TRUE);                  // always show navigation
    $DynPG->SetParam_A_CategoryNavigation(FALSE);      // no breadcrumb navigation 
    $DynPG->SetParam_A_PrintNavigation(FALSE);         // no print button
    $DynPG->SetParam_A_ArticleHeader(FALSE);           // no article header
    $DynPG->SetParam_A_Article(<DynPG menu article>);  // set article which contains the dynamic menu
 
    $DynPG->Write_Article();
?>

Es lässt sich erkennen, dass es hier nur wenige Unterschiede zum dynamischen Menü gibt. In der ersten Zeile wird lediglich das entsprechende Template geladen und in den darauffolgenden Zeilen die versteckten Gruppen ausgeblendet, sowie die Ausgabe der gesamten Gruppenstruktur veranlasst. Sie müssen in diesem Codefragment nur noch den Platzhalter durch die ID des Artikels ersetzen, der das dynamische Menü enthält.

Einbau in die Webseite

Dieser Code soll immer dann aufgerufen werden, wenn der entsprechende Punkt im Menü angeklickt wird. Zuerst müssen wir dazu diesen Menüpunkt natürlich noch erzeugen. Dies geschieht im Backend durch das Anlegen einer neuen Gruppe. Geben sie dieser den Namen "Sitemap" und platzieren Sie sie in der Gruppenstruktur dort, wo sie später im Menü auftauchen soll, ggf. durch die Vergabe eines Sortierindexes.

Nun können wir den Code der Webseite so abändern, dass immer wenn die Sitemap angeklickt wurde, der obige Code anstatt der Gruppen- und Artikelansichten verwendet wird. Dies kann zum Beispiel durch folgenden Code erreicht werden:

content.php

<?php
    // if the sitemap group was clicked, display sitemap
    if ((isset($_GET['read_group']) && $_GET['read_group'] == <ID of sitemap group>)
        || (isset($_GET['read_category']) && $_GET['read_category'] == <ID of sitemap group>)) {
	include("contents/sitemap.php");
   } else if ...
 
?>

Anpassen mit CSS

Für die Sitemap werden separate CSS-Klassen und Identifier erzeugt. Dies erlaubt Ihnen, das Aussehen der Sitemap nach Ihren Wünschen anzupassen. Dazu können Sie z.B. die bereits vorhandene CSS Datei verwenden, welche sich im DynPG-Ordner unter "\plugins\DPGdynmenu\styles\sitemap.css" befindet. Diese ist nach dem gleichen Prinzip, wie die CSS Klassen des dynamischen Menüs. Im Beispiel-Code wird eine stark vereinfachte Version verwendet, welche Sie alternativ auch als Grundlage für Ihre Anpassungen verwenden können. Die gewünschte Ausgabe aus dem obigen Bild können Sie bereits mit dem folgenden Code erreichen.

sitemap.css

/* all divs inside the sitemap div */
div#sm_course_categories_menu div {
	padding-left: 20px; /* indentation */
	cursor: pointer;
}
 
/* list definition for articles*/
div#sm_course_categories_menu p.sm_articles {
	line-height: 20px;
	list-style-type: square;
	list-style-position: outside;
	display: list-item;
}