Joomla 1.5 Template Tutorial

Beitragsseiten
Joomla 1.5 Template Tutorial
Entwicklung eines CSS-basierten Joomla! 1.5 Template
Was ist ein Joomla! 1.5 Template?
Ein einfaches leeres Template
CSS für den Aufbau eines tabellenfreien Layout
Ein Joomla! 1.5 Template
Weitere Templateeigenschaften
Schlußwort
Alle Seiten

Seite 7 von 8

Weitere Templateeigenschaften

Joomla! 1.5 bietet eine Anzahl von weiteren Templateeigenschaften. Wir haben bereits ein Beispiel gesehen, die Möglichkeit, den Output der Module anzupassen. Wir werden diese der Reihe nach betrachten:

Template Parameter
Template Overrides

Template Parameter

Die Parametrierung von Templates ist neu in Joomla! 1.5. Dabei werden dem Template Variablen übergeben, welche im Backend eingestellt worden sind. Wir fügen eine relativ einfache Parameterfunktion unserem Template hinzu. Dies geschieht in der Datei templateDetails.xml :

<params>
<param name="template_width" type="list" default="fluid" label="Template Width"
            description="Width style of the template">
<option value="fluid">Fluid with maximum and minimum</option>
<option value="medium">Medium</option>
<option value="small">Small</option>
</param>
</params>

Ebenso benötigen Sie eine Datei params.ini in Ihrem Templateordner. Diese Datei kann leer sein, Joomla benötigt diese um dort Ihre Einstellungen zu speichern. Ein Beispiel:

template_width=2

Diese Datei muss beschreibbar sein.Sie wird in der templateDetails.xml aufgenommen. Im Template Manager sehen Sie die Einstellungen für das Template (Bild 9.11)

9.11 Templateparameter im Backend

Wir sehen eine simple Dropdown-Box mit drei Optionen.

<param name="template_width" type="radio" default="0" label="Template Width"
            description="Change width setting of template">
<option value="0">800x600</option>
<option value="1">1024x756</option>
<option value="2">fluid (min/max with FF and IE7, 80% with IE6)</option>
</param>

Wir ändern den Body Tag in der index.php :

<body class="width_<?php echo $this->params->get('template_width'); ?>">

Das CSS wird ergänzt:

body.width_0 div#wrap {
width:760px;
}

body.width_1 div#wrap {
width:960px;
}

body.width_2 div#wrap {
min-width:760px;
max-width:960px;
width:auto !important;
}

#wrap {
text-align:left;
margin:0 auto;
}

Wir erhalten nun drei Optionen: feste kleinere Breite, fixe große Breite und eine fluide Version. Templateparameter geben dem Administrator Flexibilität hinsichtlich der Änderung von vielen Templateeigenschaften, zum Beispiel die Breite, die Farben usw. Diese werden mit PHP Anweisungen gesteuert.

Template Overrides

Das mächtigste neue Feature für Templates in Joomla! 1.5 ist die Möglichkeit, den Core Output einfach zu übersteuern. Dies wird mit sogenannten Templatedateien ermöglicht, welche mit den Layoutsichten von Komponenten und Modulen korrespondieren. Joomla! prüft in jedem Fall ob sich eine solche Datei im Templateordner befindet und, wenn vorhanden, benutzt diese und übersteuert damit die Standardausgabe.

Override Struktur

Alle Layoutansichten und Templates befinden sich im Maincore in einem /tmpl/ Ordner. Bei Komponenten gibt es im Vergleich zu Modulen einen kleinen Unterschied. Module haben nämlich nur eine einzige Ansicht. Beispiel:

modules/mod_newsflash/tmpl/
modules/mod_poll/tmpl/
components/com_login/views/login/tmpl/
components/com_content/views/section/tmpl/

Die Grundstruktur aller Komponenten und Module ist View>Layout>Templates

Diese Tabelle zeigt einige Beispiele, Module haben nur ein View.

View	Layout	Templates
Category	Blog.php	blog_item.php blog_links.php
Category	default.php	default_items.php
(Newsflash module)	default.php horz.php vert.php	_item.php

In der Regel sind für ein bestimmtes Layout mehere Templatefiles zuständig. Sie haben eine gemeinsame Namensgebung:

Namensgebung	Beschreibung	Beispiel
layoutname.php	Das Master Layouttemplate	blog.php
layoutname_templatename.php	Ein vom Mastertemplate aufgerufenes Template (childtemplate)	blog_item.php blog_links.php
_templatename.php	Ein von verschiedenen Layouts aufgerufenes allgemeines Template	_item.php

Overriding von Modulen

Jedes Modul hat einen neuen Dateiordner tmpl , welcher die Templates beinhaltet. In diesem befinden sich PHP-Dateien, welche den Output generieren. Beispiel:

/modules/mod_newsflash/tmpl/default.php
/modules/mod_newsflash/tmpl/horiz.php
/modules/mod_newsflash/tmpl/vert.php
/modules/mod_newsflash/tmpl/_item.php

Die ersten drei sind die drei Layouts von Newsflash, abhängig davon, welche Moduloption gewählt wurde. Die Datei _item.php ist ein allgemeines Template, welches von allen dreien aufgerufen wird.

In dieser Datei befindet sich folgender Code:

<?php // no direct access defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>
<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
  <tr>
    <td class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>"
              width="100%"><?php if ($params->get('link_titles') && $item->
              linkOn != '') : ?>
      <a href="<?php echo $item->linkOn;?>" class="contentpagetitle<?php echo
              $params->get( 'moduleclass_sfx' ); ?>"> <?php echo $item->title;?>
              </a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
     </td>
  </tr>
</table>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : echo $item->afterDisplayTitle; endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
  <tr>
    <td valign="top" colspan="2"><?php echo $item->text; ?></td>
  </tr>
</table>
<?php if (isset($item->linkOn) && $item->readmore) : echo '<a href="'.$item->
          linkOn.'">'.JText::_('Read more').'</a>'; endif; ?>

Wir könnten hier die Tabellenausgaben entfernen, um es ein wenig mehr zugänglich zu machen (accessible):

<?php // no direct access defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>

<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
  <div class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<?php if ($params->get('link_titles') && $item->linkOn != '') : ?>
<a href="<?php echo $item->linkOn;?>" class="contentpagetitle<?php echo $params->
get( 'moduleclass_sfx' ); ?>"> <?php echo $item->title;?> </a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
  </div>
</div>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : echo $item->afterDisplayTitle; endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>"> <
?php echo $item->text; ?>
</div>
<?php if (isset($item->linkOn) && $item->readmore) : echo '<a href="'.$item->
linkOn.'">'.JText::_('Read more').'</a>'; endif; ?>

Die neue Datei wird in einem Dateiordner html wie folgt aufgenommen:

templates/templatetutorial15bold/html/mod_newsflash/_item.php

Komponenten Override

Bei Komponenten funktioniert es ähnlich, außer, daß bei vielen Komponenete mehrere Views vorhanden sind. Im Dateiordner com_content sind zum Beispiel mehrere Views definiert:

/components/com_content/views/
/components/com_content/views/archive
/components/com_content/views/article
/components/com_content/views/category
/components/com_content/views/section

In diesem Fall referenziert die default.php auf das Standardlayout, welches Artikel als Linkliste darstellt. In der Datei blog_item.php sehen wir die Tabellen, die benutzt werden. Um dessen Ausgabe zu übersteuern, erzeugen wir in unserem Template im Ordner template/html/ordner eine entsprechende Datei. Beispiel:

templates/templatetutorial15bold/html/com_content/category/blog_item.php

Es ist relativ simpel, all diese Views per Copy & Paste aus den /components und /modules Ordnern in den templates/yourtemplate/html Ordner zu übertragen. Diese Override Funktionalität ist ein mächtiges Werkzeug, die Joomla! Seite mit dem Template zu steuern. Sie können Templates erzeugen, die sich im Schwerpunkt mit der Suchmaschinenoptimierung, Accesibility oder besonderen Wünschen Ihres Kunden befassen.

Joomla 1.5 bietet neue Features für Templates, welche es ermöglichen, den Code und die Präsentation einer Joomla! Webseite vollständig zu kontrollieren.

Tabellenfreies Joomla!

Joomla! beinhaltet ein Template Beez , das die Override-Funktionalität anwendet. Das Design und Accessibility Team hat einen kompletten Satz von Override Dateien im html Ordner aufgebaut.

Unser abschließendes Beispiel ist ein Template, daß diese Overrides anwendet, um alle Tabellenausgaben vom Joomla!-Output zu entfernen.

CSSTemplateTutorialStep4

Wir haben nun ein Template realisiert, welches auf einem comp (oder Design) basiert. Zusätzliche Typographie wurde zugefügt, und dynamisch versteckte Spalten und ein tabbasiertes Menü wurden integriert. Weiterhin haben wir durch Overrides die Ausgabe von Joomla! übersteuert, um die Ausgabe von Tabellen zu unterdrücken. Ein installationsfähiges Template befindet sich in der
Compass library: CSSTemplateTutorialStep4.zip

<< Zurück - Weiter >>

Joomla-Tipps.net