{"id":992,"date":"2018-03-30T13:56:59","date_gmt":"2018-03-30T11:56:59","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=992"},"modified":"2018-03-30T15:57:48","modified_gmt":"2018-03-30T13:57:48","slug":"joomla-template-2-die-index-php","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2018\/03\/30\/joomla-template-2-die-index-php\/","title":{"rendered":"Joomla-Template 2: die index.php"},"content":{"rendered":"

Das Grundger\u00fcst f\u00fcr den Seitenaufbau: die index.php<\/h2>\n

Diese kann man sich bei einem anderen Template mopsen, oder eine der vielen Online-Vorlagen kopieren und modifizieren, z.B. bei joomla templates erstellen<\/a> (Template-Installation) als zip-Datei herunterladen oder in der Joomla-Doku nachlesen<\/a>. Meine index.php ist ein kleiner Bastard, den ich aus mehreren Vorlagen zusammenkopiert habe. Der Dateiheader sieht folgendermassen aus:<\/p>\n

<?php\r\n\r\ndefined('_JEXEC') or die;\r\n\r\n\r\n\/* The following line gets the application object for things like displaying the site name *\/\r\n$app = JFactory::getApplication();\r\n?>\r\n\r\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\r\n<html xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\" \/>\r\n<jdoc:include type=\"head\" \/>\r\n<link rel=\"stylesheet\" href=\"<?php echo $this->baseurl ?>\/templates\/<?php echo $this->template ?>\/css\/formate.css\" type=\"text\/css\" \/><\/pre>\n
Im einleitenden PHP-Teil wird das Joomla-Applicationobject geladen, damit wir auf Systemvariable wie z.B. den Namen der Website zugreifen k\u00f6nnen. Dann folgt ein HTML-Header (hab ich auch so aus der Joomla-Doku kopiert) mit Einbindung unseres Stylesheets. Die Zeile:<\/p>\n
<jdoc:include type=\"head\" \/><\/pre>\n
erzeugt einen kompletten Header, das kann man sich im Seitenquelltext anschauen, hier mal ein Ausschnitt:<\/p>\n
\"head\"
head<\/p><\/div>\n
Jetzt wirds dann aber interessant, denn jetzt kommen die Inhalte. In der Joomla-Doku<\/a> ist ein sehr basic gehaltenes Beispiel gezeigt:<\/p>\n
<<\/span>body<\/span>><\/span>\r\n<<\/span>jdoc<\/span>:<\/span>include<\/span> type<\/span>=<\/span>\"modules\"<\/span> name<\/span>=<\/span>\"top\"<\/span> \/><\/span> \r\n<<\/span>jdoc<\/span>:<\/span>include<\/span> type<\/span>=<\/span>\"component\"<\/span> \/><\/span>\r\n<<\/span>jdoc<\/span>:<\/span>include<\/span> type<\/span>=<\/span>\"modules\"<\/span> name<\/span>=<\/span>\"bottom\"<\/span> \/><\/span>\r\n<\/<\/span>body<\/span>>\r\n\r\n<\/span><\/pre>\n
Erstaunlich, aber das reicht f\u00fcr den Anfang.<\/p>\n
    \n
  • In der zweiten Zeile wird eine Modulposition namens „top“ erzeugt und Joomla mitgeteilt, dass es hier Module laden kann.<\/li>\n
  • In der dritten Zeile wird die Component geladen, das ist der Kern der Seite und enth\u00e4lt den relevanten Beitrag.<\/li>\n
  • In der vierten Zeile wird eine zweite Modulposition namens Bottom erzeugt.<\/li>\n<\/ul>\n
    Das Ganze passiert innerhalb des body-tags und reicht schon aus, um eine simple Seite anzuzeigen. Das ganze m\u00fcssen wir jetzt auf die Modulpositionen anpassen, die wir in unserer templateDetails.xml definiert haben. Kurz zur Erinnerung, das sah im ersten Ansatz so aus:<\/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 <\/positions><\/pre>\n
    Wir packen das Ganze noch in einen div namens wrap, der hat nichts anderes zu tun als die Breite auf 1260px zu setzen, und dann sieht unser body erstmal so aus:<\/p>\n
    <div id=\"wrap\">\r\n<div id=\"header\">\r\n<a href=\"<?php echo $this->baseurl ?>\"><img src=\"<?php echo $this->baseurl ?>\/templates\/<?php echo $this->template ?>\/images\/logo.jpg\" alt=\"Logo\" \/><\/a>\r\n<!-- end #header -->\r\n<\/div>\r\n\r\n\u00a0\u00a0 \u00a0<div id = \"oben\">\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"modules\" name=\"oben\" style=\"xhtml\" \/>\r\n\u00a0\u00a0 \u00a0<\/div>\r\n\r\n\r\n\u00a0\u00a0 \u00a0<div id=\"sidebarLeft\">\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"modules\" name=\"left\" style=\"xhtml\" \/>\r\n\u00a0\u00a0 \u00a0<!-- end #sidebarLeft --><\/div>\r\n\r\n\u00a0\u00a0 \u00a0<div id=\"content\">\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"component\" \/>\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"message\" \/>\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"modules\" name=\"debug\" \/>\r\n\u00a0\u00a0 \u00a0<!-- end #content --><\/div>\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0<div id=\"sidebarRight\">\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"module\" name=\"search\" style=\"xhtml\" \/>\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"modules\" name=\"right\" style=\"xhtml\" \/>\r\n\u00a0\u00a0 \u00a0<!-- end #sidebar2 --><\/div>\r\n\r\n<!-- end #wrap --><\/div><\/pre>\n
    Nicht irritieren lassen, ich hab die breadcrumbs und den footer einfach weggelassen.<\/p>\n
    Aber ansonsten ist der Aufbau eigentlich eher einfach. Erst definiere ich mir eine header-div, die tut nichts anderes als mein Headerbild aufnehmen und einen Link auf die Startseite setzen, das passiert mit der Zeile:<\/p>\n
    <a href=“<?php echo $this->baseurl ?>“><img src=“<?php echo $this->baseurl ?>\/templates\/<?php echo $this->template ?>\/images\/logo.jpg“ alt=“Logo“ \/><\/a><\/em><\/p>\n
    Hab ich aus der Joomla-Doku so kopiert und nur Pfad und Namen zur Bilddatei angepasst.<\/p>\n
    Dann gibt f\u00fcr jede Modulposition eine div, und der wird mitgeteilt wie sie heisst und was sie zu tun hat. Wir fangen oben an:<\/p>\n
    <div id = \"oben\">\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"modules\" name=\"oben\" style=\"xhtml\" \/>\r\n\u00a0\u00a0 \u00a0<\/div><\/pre>\n
    Hier setze ich sp\u00e4ter mein Modul f\u00fcr das Hauptmen\u00fc rein, dar\u00fcber nachher mehr.<\/p>\n
    Die linke Seitenleiste kriegt den Platz f\u00fcr meine neuesten Beitr\u00e4ge reserviert, das ist ebenfalls ein Modul.<\/p>\n
    <div id=\"sidebarLeft\">\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"modules\" name=\"left\" style=\"xhtml\" \/>\r\n\u00a0\u00a0 \u00a0<!-- end #sidebarLeft --><\/div><\/pre>\n
    In der Mitte ist Platz f\u00fcr unseren Seiteninhalt, die \u00fcberaus wichtige Component, und f\u00fcr Fehlermeldungen:<\/p>\n
    <div id=\"content\">\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"component\" \/>\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"message\" \/>\r\n\u00a0\u00a0 \u00a0<jdoc:include type=\"modules\" name=\"debug\" \/>\r\n\u00a0\u00a0 \u00a0<!-- end #content --><\/div><\/pre>\n
    In der rechten Seitenleiste platzieren wir das Suchformular und eine weiter Modulposition, in die kommt nachher meine Liste mit den Rezeptkategorien.<\/p>\n
    <div id=\"sidebarRight\">\r\n <jdoc:include type=\"module\" name=\"search\" style=\"xhtml\" \/>\r\n <jdoc:include type=\"modules\" name=\"right\" style=\"xhtml\" \/>\r\n <!-- end #sidebar2 --><\/div><\/pre>\n
    Das wars auch schon. Jetzt k\u00f6nnten wir unser (noch komplett ungestyltes) Template schon mal anschauen.<\/p>\n
    Die Installation<\/h2>\n
    Wir packen jetzt den gesamten Inhalt unseres Arbeitsordners in eine ZIP-Archiv:<\/p>\n
    \"zip-datei-erzeugen\"
    zip-datei-erzeugen<\/p><\/div>\n
    Dann gehen wir im Kontrollzentrum unter Erweiterungen->Verwalten->Installieren->Paketdatei hochladen und laden unser ZIP-Archiv. Ich hatte beim ersten Versuch einen Fehler, weil in der templateDetails.xml eine falsche Dateieendung f\u00fcr das Logo angegeben war, bitte gegebenenfalls korrigieren:<\/p>\n
    <filename>images\/logo.jpg<\/strong><\/filename><\/p>\n
    Das sollte es aber gewesen sein, unter Erweiterungen->Templates->Stile sollte jetzt unser neues Template auftauchen, und wir k\u00f6nnen es als Standard setzen.<\/p>\n
    \"standard-setzen\"
    standard-setzen<\/p><\/div>\n
    Wenn wir jetzt unsere Webseite anschauen, kommt das nat\u00fcrlich noch sehr traurig weil komplett ungestylt daher:<\/p>\n
    \"ungestylt\"
    ungestylt<\/p><\/div>\n
    Aber darum k\u00fcmmern wir uns gleich. Zuerst schauen wir uns mal an, was wir auf welche Modulposition geladen haben, das ist n\u00e4mlich gar nicht viel:<\/p>\n
    \"modulpositionen\"
    modulpositionen<\/p><\/div>\n
    Auf left sitzen die neuesten Beitr\u00e4ge, auf oben das Main Men\u00fc, und auf right die Rezeptkategorien. Die Suche ist hier leider nicht mit im Bild, die sitzt auf Position search. Das wars auch schon!<\/p>\n
    Jetzt gehen wir dran, unseren Seitenaufbau zu stylen. Was jetzt noch kommt ist fast reines CSS , und daf\u00fcr gibt es einen neuen Beitrag.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Das Grundger\u00fcst f\u00fcr den Seitenaufbau: die index.php Diese kann man sich bei einem anderen Template mopsen, oder eine der vielen Online-Vorlagen kopieren und modifizieren, z.B. bei joomla templates erstellen (Template-Installation) als zip-Datei herunterladen oder in der Joomla-Doku nachlesen. Meine index.php ist ein kleiner Bastard, den ich aus mehreren Vorlagen zusammenkopiert habe. Der Dateiheader sieht folgendermassen […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[44],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/992"}],"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=992"}],"version-history":[{"count":6,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/992\/revisions"}],"predecessor-version":[{"id":1005,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/992\/revisions\/1005"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=992"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=992"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}