Php Application Framework Zikula - Theme-Entwicklung 2

Theme Entwicklung - Teil 2 - Header und Footer verändern

Wie im letzten Artikel zur Theme-Entwicklung angekündigt, folgt nun der 2. Artikel in meiner Artikelreihe zur Theme-Entwicklung.

Nun geht es um die ersten Änderungen im Header und Footer. Wo kann man Header und Footer ändern? Welche templates müssen dazu bearbeitet werden?

Ich beantworte diese Fragen und zeige auch, wie man einen Html Block einbindet.

 


Das Standard-Bootstrap-Theme in Zikula bietet ein separates template für den Header und für den Footer.

Header im theme bearbeiten

Um den Header für Deine Homepage zu verändern, öffnest Du innerhalb des themes im Ordner 'Resources/views/Include' die Datei 'header.html.twig' mit dem Editor Deiner Wahl.

Den Standard Code in diesem template zeigt das folgende Bild.

Header Standard

Die Seite sieht standardmäßig so aus.

Header Standard Seite

Um z.B. ein Jumbotron (siehe auch die Homepage von Bootstrap) unterhalb des horizontalen Menüs einzufügen, könntest Du folgendes tun.

Header Jumbotron

Werbung

cshow.php?s=2096714&v=10075&q=329435&r=529521

Das Ergebnis siehst Du im folgenden Bild.

Header Jumbotron Seite

Footer im theme bearbeiten

Um den Footer zu verändern, öffnest Du im Ordner 'Resources/views/Include' die Datei 'footer.html.twig'.

Diese sieht standardmäßig folgender Maßen aus.

Footer Standard klein

Auf der Seite sieht das so aus.

Header Standard Seite

Im Footer steht lediglich 'Powered by Zikula'.

Zur Einbindung eines Html Blocks im Footer, kannst Du folgenden Code im template schreiben.

Blockposition Footer

Die doppelten öffenenden und schleißenden Klammern sind typisch für Twig, die template-Engine, die Zikula seit der Versionsreihe 1.5.x nutzt.

Mit der Ergänzung sagst Du Zikula und der Twig-Engine, dass hier sämtliche Blöcke, die der Blockposition 'footer' zugeordnet sind, angezeigt werden sollen.

Html Block anlegen

Da per default nur einige Blöcke angelegt sind, bist Du nun gefordert, einen neuen Block an zu legen. Wir nehmen dazu das Block Module und rufen dies auf.

Der Link 'Block erstellen' führt uns zu folgendem Formular.

Block anlegen und Typ auswählen

Im Auswahlmenü stehen diverse Blockarten zur Verfügung. Wenn Du den Html Block auswählst, gelangst Du zu folgendem Formular.

Block erstellen

Wenn Du etwas nach unten scrollst, kannst Du einen Inhalt eingeben und die Blockposition auswählen. Die Position 'footer' ist hier die richtige Wahl.

Inhalt eingeben und Blockposition auswählen

Nach Speichern Deiner Eingabe landet Du auf der Liste der Blöcke und Du kannst den neuen Html Block dort finden.

Neuer Block in Liste

Dein Block ist nun im Footer eingebunden und Du kannst das Ergebnis sehen.

Hmtl Block im Footer

Fazit

Zikula bietet hohe Flexibilität bei der Anpassung Deiner eigenen Homepage.

Das ist alles kein Hexenwerk, sondern ein Einstieg ist recht einfach.

Du solltest nun wissen, wo Du Header und Footer beeinflußen kannst. Um Inhalte im Header einzubinden, musst Du Deinen Code unterhalb von '<body>' platzieren.

Außerdem hast Du einen ersten Blick in die Funktionen des BlocksModules werfen können. Blöcke eignen sich hervorragend zur Strukturierung Deiner Homepage. Blöcke sind schnell erstellt. Die Anzahl von Blocktypen wächst mit der Installation weiterer Module, die meistens eigene Blöcke mitbringen. Auch Blockpositionen lassen sich schnell erstellen. Dazu folgt sicher bald ein weiteres Tutorial.

Ähnliche Artikel mit entsprechenden Themen


Php Application Framework Zikula - Theme-Entwicklung 1
Mit diesem Artikel starte ich meine Tutorial-Artikelserie zu den technischen Grundlagen der Theme-Entwicklung. Diese... Mehr
Php Application Framework Zikula - Theme-Entwicklung 3
Theme Entwicklung - Teil 3 - Blockposition und Block anlegen Für die Theme-Entwicklung ist es manchmal... Mehr
Php Application Framework Zikula - Theme-Entwicklung 4
Überschreiben von Templates Im Theme unproblematisch Das Bearbeiten von templates in Deinem eigenen... Mehr

Kategorien

  • Themes

Erstellung und Aktualisierung

Erstellung
Erstellt von michael.ueberschaer am 19.05.2018, 16:49
Letzte Aktualisierung
Aktualisiert von michael.ueberschaer am 27.10.2018, 14:38
Kategorien im Blog
Partner
Werbung


Die neuesten Downloads
  • Zikula 1.5.9
    Mehr lesen
  • Zikula 2.0.12
    Mehr lesen
  • Bootstrap Standard Theme
    Für Zikula 2.0.11 oder höher - For Zikula 2.0.11 or higher. Dieses Theme ist als...
    Mehr lesen
  • Blogging 1.1.0
    Mehrsprachiges Bloggen - Multilingual blogging
    Mehr lesen
  • AutoLinks 1.0.1
    Automatische Linkerstellung - Automatic link creation
    Mehr lesen