Wie entwickle ich eine Drupal Webseite - Teil 2

Der erste Teil von "Wie entwickle ich eine Drupal Webseite" behandelte die Grundlagen der Erstellung eines Drupal Designs nach Vorgabe aus dem Designbüro. Wir hatten das Design analysiert, eine page.tpl.php Schablone und ein Theme Info File erstellt. Außerdem habe ich einen kurzen Blick auf die Verzeichnisstruktur von Drupal geworfen. In diesem Teil der Folge geht es um das Entwickeln der grafisch ansprechenden Tabs, in Drupal auch "Local Tasks" genannt.

Das Ergebnis der Bemühungen sollte so aussehen:

Drupal Themeing - Local Tasks als Tabs

Tabs ins page.tpl.php aufnehmen

Der erste Schritt ist die Aufnahme der Tabs in das Seitentemplate page.tpl.php. Gemäß Designvorgabe sollen die Tabs im Bereich mainContent der Seiten erscheinen:

<div id="mainContent" class="act_<?php print $node->type?>">
<?php if ($tabs): print '<ul class="primtabs mtab">'. $tabs .'</ul>'; endif; ?>
<?php if ($tabs2): print '<ul class="sectabs mtab cl">'. $tabs2 .'</ul>'; endif; ?>
<?php print $content; ?>
</div>

Das war erst einmal einfach. Die Variable $tabs2 existiert aber eigentlich nicht im Raum des main.tpl.php sondern muss hier über ein template.php selbst induziert werden. Die Datei phptemplate.php gehört ins Basisverzeichnis des Theme (sites/www.equira.com/themes/equira) und stellt die $tabs2 über die preprocess_page Funktion zur Verfügung:

function phptemplate_preprocess_page(&$vars) {
$vars['tabs2'] = menu_secondary_local_tasks();
}
function phptemplate_menu_local_tasks() {
return menu_primary_local_tasks();
}

Zusätzlich muss die Funktion menu_local_tasks überschrieben werden da
sie per Default sonst beide Ebenen der Local Tasks rendert.

Tabs mit CSS Backgrounds versehen

Drupal rendert die Local Task Links über die Funktion theme_menu_item_link. Der Default gibt dabei einfaches Markup für eine unordered list aus, beim gezeigten page.tpl.php also z.B.:

<ul class="primtabs mtab">
<li class="active">
    <a class="active" href="/user/1/edit">
      Create new account
    </a>
</li>
</ul>

Die "active" Klassen werden dabei dann erzeugt, wenn es sich bei den Knoten um den aktuellen "Trail", also Klickpfad des Benutzers handelt. Der "active Trail" wird üblicherweise anders dargestellt als sonstige Menüeinträge.

Um die tabs via css mit schönen Hintergründen zu versehen brauchen wir noch ein span-Tag um an Anchor Text, also

<ul class="primtabs mtab">
<li class="active">
    <a class="active" href="/user/1/edit">
     <span>Create new account</span>
    </a>
</li>
</ul>

Um Drupal dazu zu überreden, die span's um den Anchor Text zu legen muss ich die Funktion theme_menu_item_link überschreiben. Folgende Funktion tut das für die localtasks und die primary-links:

Zum Überschreiben von theme_xxx Funktionen steht übrigens eine ganze Reihe von Alternativen zur Verfügung. Eine gute Hilfe für diese Nomenklatur ist der Theme-Developer im devel.module. Mehr dazu gibt es auch hier: http://drupal.org/node/55126.

Das Markup ist also jetzt fertig und kann "ge-themed" werden:

ul.primtabs li {
    display: block;
    float: left;
background: transparent url(parts/tm-left.png) no-repeat
scroll 0 0;
height: 21px;
margin: 0 0px;
}
ul.primtabs li.active {
background: transparent url(parts/tm-leftactive.png) no-repeat scroll 0 0;
}
ul.primtabs li a {
    display: block;
    padding-left: 16px;
}

ul.primtabs li span {
    background: transparent url(parts/tm-right.png) no-repeat scroll 100% 0;
    padding-right: 16px;
    display: block;
}

ul.primtabs li.active span {
background: transparent url(parts/tm-rightactive.png) no-repeat scroll 100% 0;
}

Ich hinterlege also einfach die li's und span's der Menütabs mit Hintergrundbildern. Im Anhang finden sich zwei davon zur Anschauung.

Soweit für diesen Teil des Tutorials. Im nächsten Teil wird es darum gehen, ein equira module einzuführen. Das Modul werden wir verwenden um Daten eines Drittsystems als 'pseudo'-statische Drupalseiten einzubinden.

Anhang	Größe
artikel-p3.png	8.1 KB
tm-left.png	685 Bytes
tm-right.png	378 Bytes

EDV Beratung Feike