Template Programmierung mit Joomla!

Transkript

1 Joomla! DAY TM AUSTRIA 2015 Template Programmierung mit Joomla!

2 Inhalt Einstieg in die Joomla! Template Programmierung

3 Inhalt Einleitung Planung Joomla! Template Programmierung Joomla! Template Demo Fragen und Antworten

4 Einleitung Einstieg in die Joomla! Template Programmierung

5 Vorstellung Sprecher: Stefan Polzer Webdesigner Webentwickler Fachtrainer Seit 2012 eigene Firma Polzer Stefan IT -

6 Grundlagen für den Vortrag Gutes Grundverständnis über Joomla! Wie installiert & konfiguriert man Templates Was ist eine Komponente Was ist ein Modul und wie binde ich es ein Erfahrung mit HTML & CSS Basiswissen über PHP

7 Planung eines Templates Einstieg in die Joomla! Template Programmierung

8 Planung eines Templates Voraussetzung ist ein Screendesign für jedes Seitenlayout das es geben wird Aufteilung der Seiten in Komponenten Module Template Einstellungen

9 Planung eines Templates

10 Planung eines Templates

11 Planung eines Templates

12 Planung eines Templates

13 Planung eines Templates

14 Planung eines Templates

15 Planung eines Templates

16 Planung eines Templates

17 Planung eines Templates Zusammengefasst haben wir den Komponentenbereich drei Module für Inhalt: menu, banner, right Template config: Logo & Social Media Links Template config: eigenes JavaScript den Bereich für Joomla! Nachrichten Modul für Debugging

18 Template Programmierung Einstieg in die Joomla! Template Programmierung

19 Template Verzeichnisstruktur Die zwei primären Dateien sind index.php templatedetails.xml

20 Template Verzeichnisstruktur Weitere nennenswerte Dateien favicon.ico template_preview.png template_thumbnail.png error.php component.php

21 Template Verzeichnisstruktur Gängige Verzeichnisse css Template CSS fonts Template Web Fonts html Template overrides images Bilder für das Template Layout js Template JavaScripts language Dateien für mehrsprachige Seiten

22 templatedetails.xml <?xml version="1.0" encoding="utf-8"?> <extension type="template" version="3.0" client="site" > <name>jd15at</name> <creationdate>november 2015</creationDate> <author>ing. Stefan Polzer</author> <authorurl> <copyright> Polzer Stefan IT. All rights reserved.</copyright> <license>gpl-3.0+ GNU General Public License v3.0 or later</license> <version>1.0.0</version> <description>template Description</description>

23 templatedetails.xml <files> <folder>css</folder> <folder>fonts</folder> <folder>html</folder> <folder>images</folder> <filename>favicon.ico</filename> <filename>index.php</filename> <filename>template_preview.png</filename> <filename>template_thumbnail.png</filename> <filename>templatedetails.xml</filename> </files>

24 templatedetails.xml <positions> <position>banner</position> <position>menu</position> <position>right</position> <position>debug</position> </positions> <languages folder="language"> <language tag="en-gb">en-gb/en-gb.tpl_jd15at.ini</language> <language tag="en-gb">en-gb/en-gb.tpl_jd15at.sys.ini</language> <language tag="de-de">de-de/de-de.tpl_jd15at.ini</language> <language tag="de-de">de-de/de-de.tpl_jd15at.sys.ini</language> </languages>

25 templatedetails.xml <config> <fields name="params"> <fieldset name="advanced"> <field name="logo-image" type="media" default="" label="logo" description= "Logo Einfügen" /> <field name="logo-title" type="text" default="" label="logo Title" description= "Logo Titel Einfügen" filter="string" /> </fieldset> </fields> </config> </extension>

26 Aufbau des field-tags <field type="text" name="logo-title" label="tpl_jd15at_logo_title_label" description="tpl_jd15at_logo_title_desc" default="" filter="string" /> <field type="textarea" name="javascript" label="tpl_jd15at_javascript_label" description="tpl_jd15at_javascript_desc" />

27 Language Dateien Dateinamen - Konvention <Sprach-Tag>.tpl_<templatename>.ini <Sprach-Tag>.tpl_<templatename>.sys.ini Beispiele für unser Template de-de.tpl_jd15at.ini de-de.tpl_jd15at.sys.ini en-gb.tpl_jd15at.ini en-gb.tpl_jd15at.sys.ini

28 Language Dateien Syntax Eine Zeile pro Eintrag Speichern im UTF-8 Format Bei Templates beginnt der Name mit TPL Der zweite Teil ist der Name des Templates TPL_JD15AT_SOCIAL_MEDIA_COLOR_LABEL="Social Media Farbe" TPL_JD15AT_MESSAGE_NO_JS ="JavaScript ist deaktiviert"

29 index.php Enthält Die HTML Struktur von <html> bis </html> Platzhalter für Einträge im <head> Platzhalter für die Komponente & Messages Platzhalter für Module PHP für Logik und um Parameter anzuzeigen

30 index.php jdoc:include Platzhalter type="head" type="message" type="component" type="modules" name="<name der Modul-Position>" style="<modul-style z.b. none, html5, xhtml, usw.>"

31 index.php jdoc:include Platzhalter <jdoc:include type="head" /> <jdoc:include type="message" /> <jdoc:include type="component" /> <jdoc:include type="modules" name="menu" style="html5" /> <jdoc:include type="modules" name="right" style="none" /> <jdoc:include type="modules" name="debug" style="none" />

32 index.php PHP Anweisungen am Beginn <?php defined('_jexec') or die; $this->addstylesheet(' $this->addstylesheet(juri::root(true). '/templates/'. $this->template. '/css/template.css'); $this->addscript(juri::root(true). '/templates/'. $this->template. '/js/template.js');?>

33 index.php HTML Aufbau - simplifiziert <!doctype html> <html> <head><jdoc:include type="head" /></head> <body> <jdoc:include type="modules" name="menu" style="none" /> <jdoc:include type="message" /> <jdoc:include type="component" /> </body> </html>

34 index.php Häufig verwendete PHP Anweisungen <?php echo JText::_('TPL_JD15AT_MESSAGE_NO_JS', true);?> <?php echo $this->params->get('javascript');?> <?php if ($this->countmodules('right')) :?> <div id="right"> <jdoc:include type="modules" type="right" style="none"/> </div> <?php endif;?>

35 Template fertigstellen Erstellen einer CSS Datei Erstellen von weiteren opt. Ressourcen JavaScript Bilder z.b. Sprites Template Overrides ZIP-Datei erstellen

36 Joomla! Template Demo Einstieg in die Joomla! Template Programmierung

37 Joomla! Template Demo Webseite Direktlink zur Demo Seite cdn.posit.at/c6df Direktlink zu mehr Infos & Downloads cdn.posit.at/90f9

38 Fragen und Antworten Einstieg in die Joomla! Template Programmierung

39 Joomla Day Austria 2015 Danke an unsere Sponsoren