In 50 Min zur Website: Kirby CMS Schritt für Schritt – Wir programmieren eine Webseite

Als einen guten WordPress Ersatz habe ich ja Kirby CMS gefunden. Dieses CMS aus Deutschland hat alles was ich als Webentwickler brauche und überlässt mir die Freiheit alle Webprojekte zu machen die ich will. Der einzige „Nachteil“ ist, dass man alles selbst programmieren muss. Es gibt kein Plugin Archiv mit +100’000 von Plugins sondern nur eine „Handvoll“.

Ich habe j bereits in einem Beitrag Kirby mal kurz vorgestellt und euch gezeigt wie der Start gelingen kann (Wie installiert man Kirby CMS? Was muss ich genau tun? Hier eine kurze Anleitung).

Da aber der Plainkit von Kirby CMS wirklich sehr leer ist zeige ich euch heute nun wie ihr eine sehr einfache Webseite bauen könnt. Ich zeige euch wie ihr Unterseiten anlegt, ein Menu einbaut, die einzelnen Elemente miteinander verlinkt und dann auch noch wie man das Dashboard designen kann.

Video

Einloggen ins Backend

Man könnte natürlich eine Webseite ganz ohne Backend verwenden und die Texte direkt in die „Datenbank“ also das Filesystem eintragen und alles nur über den Codeeditor programmieren. Wir möchten aber die CMS Funktionen verwenden womit man alles Online updaten kann. Darum müssen wir uns zuerst einloggen. Geh auf die folgende URL (pass natürlich die Domain an)

https://www.meinedomain.ch/panel

Und jetzt bist du im Backend

Templates

Will man eine neue Unterseite anlegen muss man ein php File anlegen, und zwar zum Beispiel so:

site/templates/home.php

Hier kann man sich dann mit HTML und CSS austoben die diese Unterseite designen.

Damit man den ganzen HTML Aufbau nicht jedesmal machen muss, trennt man den Head und den Footer verbaut die als Snippets.

Snippets

Wenn ich also einen Header und Footer verwenden möchte, dann erstelle ich ein header.php und footer.php file und speichere es hier ab:

site/snippets/...

CSS / JS

Damit eine Webseite ja nicht nur S/W ist und auch Effekt hat, brauchen wir CSS und JS und die würde ich immer im Root Ordner zb unter Assets abspeichern und dort dann getrennt in CSS und Javascsript

assets/css/style.css
assets/js/aktionen.js

Jetzt müsst ihr das eigentlich nur noch im Header-File einbauen mit

<?= css('assets/css/style.css') ?>

Und wenn man Javascript verknüpfen möchte gibts den folgenden Befehl

<?= js('assets/css/style.css') ?>

Menu

Wenn ihr ein Menu haben möchte, dann könnt ihr das natürlich von Hand einprogrammieren – nur wäre das ziemlich mühsam. Jetzt gibts in Kirby ja mehrere Seiten „zustände“ / „Status“ zb gelistet, ungelistet und entwurf. Jetzt möchte ich natürlich nur alle gelisteten Seiten im Menu haben und nicht alle ERROR Seiten und Landingpage Success Seiten. Also baue ich im Head bereich auch noch den folgenden Code ein:

<?php foreach ($site->children()->listed() as $seiten): ?>
  <a href="<?= $seiten->URL() ?>"><?= $seiten->Title() ?></a>
<?php endforeach ?>

Blueprint

Jede Seite bekommt ja ein eigenes Dashboard wo man dann die Texte und Bilder eingeben kann – sonst wäre es ja kein CMS. Und dafür verwendet man sogenannte Blueprints.
Ein Blueprint baut man zum Beispiel so ein.

site/blueprints/pages/home.yml

Wie immer alle Seitennamen sind immer gleich im Filename…

Und hier könnt ihr dann wie ein Docker Compose (auch ein yml File) das ganze designen.

Field Modus

Wenn ihr zum Beispiel den folgenden Blueprint verwendet, habt ihr bei Home 2 Input Felder für Texte – einmal feld1 mittel gross und einmal feld 2 ganz gross

title: Home

fields:
  feld1:
    type: textarea
    size: medium
  feld2:
    type: textarea
    size: huge

Jetzt müsst ihr die einzelnen Felder dann nur noch mit der Unterseite verknüpfen und zwar macht man das im Template Ordner auf der gewünschten Seite. In diesem Beispiel läuft alle wieder unter home.php ab.

<?php snippet('header') ?>
<h1><?= $page->title() ?></h1>

<p><?= $page->feld1() ?></p>

<p><?= $page->feld2()->nl2br() ?></p>
<?php snippet('footer') ?>

Blocks Modus

Es gibt natürlich auch ein Block System mit dem man einzelne Module anklicken kann und so eine Seite aufbauen kann. Ja das sieht dann sehr ähnlich aus wie in DIVI oder Elementor. Hier muss man den Blueprint aber ein wenig anders aufbauen und zwar zb so

title: Über mich

fields:
  blockname:
    type: blocks
    fieldsets:
      - text
      - headding

In diesem Beispiel kann ich dann nur Titel und Texte eingeben – alle anderen Module sind ausgeschaltet. Wenn ihr alles verwenden möchtet, dann gebt den folgenden ein:

title: Über mich

fields:
  blockname:
    type: blocks

Und auch jetzt muss man dieses Blocks Element ins Template einbauen, damit man was sehen kann.

So könnte dann das ganze aufgebaut sein

<?php snippet('header') ?>

<h1><?= $page->title() ?></h1>

<?= $page->blockname()->toBlocks() ?>

<?php snippet('footer') ?>

Fazit

So jetzt wisst ihr wie man Seiten Template anlegt und diese mit Snippets erweitert und man sich so viel arbeiten sparen kann. Ebenfalls haben wir kurz angeschaut wie man denn die CMS Funktionen aktivieren kann und diese PHP Befehle ins Template einbauen kann. Auch kennen wir nur ein sehr einfacher Aufbau von Blueprints.

Jetzt habt ihr mal eine sehr einfache Webseite und könnt nun mit dem designen anfangen.

Ich wünsche euch viel Spass.