{"id":983,"date":"2018-03-30T13:34:13","date_gmt":"2018-03-30T11:34:13","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=983"},"modified":"2018-04-03T18:20:56","modified_gmt":"2018-04-03T16:20:56","slug":"ein-einfaches-joomla-template-erstellen","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/03\/30\/ein-einfaches-joomla-template-erstellen\/","title":{"rendered":"Ein einfaches Joomla-Template erstellen"},"content":{"rendered":"

Eine hervorragende Anleitung zum Erstellen eines einfachen Joomla-Templates findet man hier bei http:\/\/joomla-templates-erstellen.de<\/a>, und auch die Joomla-Doku gibt einiges her zm Thema Understanding Joomla Templates<\/a>. Ich versuche hier trotzdem einmal eine Zusammenfassung der absoluten Basics, damit man mal einen kurzen \u00dcberblick bekommt.<\/p>\n

Die Vorlage: ein TwentyFourteen-Scribble<\/h2>\n

Mein Template soll am Ende so aussehen wie mein geliebtes WordPress-Theme Twenty-Fourteen, das ist sch\u00f6n schlicht und ohne Schnickschnack. Das Layout ist simpel:<\/p>\n

\"scribble\"

scribble<\/p><\/div>\n

Die Inhalte leihe ich mir mal beim Inselfisch-Kochbuch. Das Logo = Headerbild soll die gesamte Breite von 1260 px einnehmen, darunter kommt der Titel der Seite, evtl. auch der Untertitel = Slogan. Ich habe nur ein einfaches lineares Men\u00fc ohne Untermen\u00fcs. In die rechte Seitenleiste sollen die neuesten Beitr\u00e4ge, in die linke Seitenleiste meine Rezeptkategorien. In die Mitte kommt der jeweilige Content, der Footer schliesst die Sache nach unten ab. Das war schon alles, auf wieterf\u00fchrende Features wie Breadcrumb Navi oder sekund\u00e4res Men\u00fc verzichte ich gro\u00dfz\u00fcgig, der \u00dcbersicht halber.<\/p>\n

Schritt 1: Die Verzeichnisstruktur erstellen<\/h2>\n

Zun\u00e4chst geht das erstmal im Trockenkurs, es gibt einiges an Vorarbeit zu erledigen, ehe man sich die Ergebnisse auch wirklich in Joomla anschauen kann. Wir fangen mal mit dem leichten Teil an: zwei Screenshots von unserem Templateentwurf f\u00fcr die Vorschau im Template-Manager. Einen nenne ich template_preview.png, 400x300px, den zweiten template_thumbnail.png, 200×50 px. Beide kommen in mein Template-Verzeichnis, das hat den Arbeitstitel Evis2014.<\/p>\n

\"template_preview\"

template_preview<\/p><\/div>\n

Dann lege ich noch einen Unterordner namens css und einen zweiten namens images an. Das w\u00e4re schonmal die komplette Verzeichnisstruktur.<\/p>\n

\"verzeichnisstruktur\"

verzeichnisstruktur<\/p><\/div>\n

Die erste Template-Datei: templateDetails.xml<\/h2>\n

Dreh- und Angelpunkt unseres neuen Templates ist die definierende xml-Datei. Wie die f\u00fcr die einzelnen Joomla-Versionen aussehen sollte, ist hier bei joomla-templates<\/a> hervorragend dokumentiert, dort ist vor allem auch erkl\u00e4rt welche Komponenten Pflicht sind und welche nur kann.<\/p>\n

Meine templateDetails.xml ist sehr schlicht gehalten, Den Header habe ich mir bei joomla-templates kopiert:<\/p>\n

<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<!DOCTYPE install PUBLIC \"-\/\/Joomla! 1.6\/\/DTD template 1.0\/\/EN\" \"http:\/\/www.joomla.org\/xml\/dtd\/1.6\/template-install.dtd\">\r\n<extension version=\"3.0\" type=\"template\" client=\"site\"><\/pre>\n
Darauf folgen die pers\u00f6nlichen Informationen \u00fcber Templatenamen und Author:<\/p>\n
<name>Evis2014<\/name>\r\n<author>Evi Leu<\/author>\r\n<creationDate>30. M\u00e4rz 2018<\/creationDate>\r\n<description>Mein Joomla-Nachbau des WordPress-Templates Twenty Fourteen<\/description><\/pre>\n
Jetzt wirds gehaltvoller: man muss Joomla mitteilen, welche Dateien mit im Spiel sind (die Liste werden wir nachher noch abspecken):<\/p>\n
<files>\r\n<filename>component.php<\/filename>\r\n<filename>error.php<\/filename>\r\n<filename>index.html<\/filename>\r\n<filename>index.php<\/filename>\r\n<filename>offline.php<\/filename>\r\n<filename>template_preview.png<\/filename>\r\n<filename>template_thumbnail.png<\/filename>\r\n<filename>templateDetails.xml<\/filename>\r\n\r\n<filename>css\/formate.css<\/filename>\r\n<filename>images\/logo.png<\/filename>\r\n\r\n<\/files>\r\n\r\n\r\n<\/pre>\n
Die Dateien existieren nat\u00fcrlich noch gar nicht alle, aber wir werden sie jetzt der Reihe nach anlegen.<\/p>\n
Der letzte Abschnitt: die Template Positions (eine Arbeitsversion, das wird sich sp\u00e4ter noch etwas \u00e4ndern:<\/p>\n
<positions>\r\n<position>oben<\/position>\r\n<position>left<\/position>\r\n<position>breadcrumb<\/position>\r\n<position>search<\/position>\r\n<position>right<\/position>\r\n<position>footer<\/position>\r\n<\/positions><\/pre>\n
Fehlt noch das schliessende Tag f\u00fcr die Extension:<\/p>\n
<\/extension><\/pre>\n
Das wars erstmal, und jetzt gehen wir dran, unsere Dateien auch anzulegen.<\/p>\n
Die weiteren Template-Dateien<\/h2>\n
    \n
  • index.html: eine leere HTML-Seite<\/li>\n
  • component.php, error.php, offline.php : kann man sich von einem anderen Joomla-Template kopieren oder auch weglassen (dazu sp\u00e4ter mehr)<\/li>\n
  • css\/formate.css legen wir zun\u00e4chst als leere Datei im Ordner css an<\/li>\n
  • images\/logo.png wird unser Headerbild, das sollte 1260px breit sein.<\/li>\n<\/ul>\n
    Das sollte f\u00fcr den Anfang mal gen\u00fcgen. F\u00fcr die index.php, das Grundger\u00fcst unserer Seite, gibts einen neuen Beitrag.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Eine hervorragende Anleitung zum Erstellen eines einfachen Joomla-Templates findet man hier bei http:\/\/joomla-templates-erstellen.de, und auch die Joomla-Doku gibt einiges her zm Thema Understanding Joomla Templates. Ich versuche hier trotzdem einmal eine Zusammenfassung der absoluten Basics, damit man mal einen kurzen \u00dcberblick bekommt. Die Vorlage: ein TwentyFourteen-Scribble Mein Template soll am Ende so aussehen wie mein […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,44],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/983"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=983"}],"version-history":[{"count":7,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/983\/revisions"}],"predecessor-version":[{"id":1073,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/983\/revisions\/1073"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}