Contao - Content Management System

Contao ist ein Open Source CMS = Content Management System. Dies ist eine Software um Webseiten zu erstellen, und dann die Inhalte zu verwalten.

Warum Contao?

  • Viele der wichtigen Funktionen sind in Contao selber enthalten. Die Grundausstattung ist sehr hoch und die Einsetzbarkeit ist sehr vielseitig.

Sehr umfangreiche Core-Features sind mit in Contao enthalten: Kontaktformulare, verschiedene Layouts (mit oder ohne Spalten, Fußzeile & Kopfzeile) für verschiedene Seiten der Website, Social Media Share Buttons, Tabelle, Bildergallerie, Kalender, Layoutmöglichkeiten, Navigationsmenüs, Untermenüs, Newslettermöglichkeit, extra Navigationsmenüs, Lightbox, Passwortbereich, Eventkalender usw. Diese müssen natürlich eingerichtet werden, aber die Grundlage dazu bietet Contao selber.

Wann lohnt sich Contao?

Wenn diejenigen die Texte und Bilder einstellen, nicht viel Ahnung von Webdesign haben. Z.B. nicht wissen wie man eine CSS Klasse vergibt und dann die CSS-Styles anpasst. Wenn man z.B. ein Bild neben den Text stellen will, wird es für „Uneingeweihte“ bei z.B. Joomla oder Wordpress schnell zur Unmöglichkeit. Mit dem Inhaltselement „Text“ und den dazugehörigen Bildoptionen kann man das in Contao mit wenigen Klicks erledigen.

  • Wenn es mal nachträglich zur Änderung von Inhalten kommt und Navigationsmenüs verändert werden, ist Contao das passende Werkzeug.
  • Wer eine hohe Übersichtlichkeit, Strukturiertheit und Fähigkeiten zur Verwaltung von Inhalten haben will. Hier kann Wordpress schlichtweg nicht mithalten.
  • In Contao können Artikel eigens strukturiert werden. Man ist nicht nur an einen Editor gebunden.
  • Wer Benutzerrechte vergeben will.
  • Wer nicht ständig am PHP was verändern will, wenn er Änderungen dran sind, ist mit Contao sehr gut beraten. Wordpress ist dagegen recht „PHP-intensiv“, wenn am Theme was geändert wurde und es zu Updates kommt.
  • Kleinunternehmer und mittelständische Unternehmen sind mit Contao gut beraten.
  • Wer ein europäisches System nutzen will.
  • Gestalten, Verwalten, Templateanpassungen, Medien und Anordnen sind die Stärken von Contao. Will man das hingegen mit Wordpress machen, muss man an den Code ran gehen.
  • Mit einem eingeschränkten Benutzerzugang hat der Kunde / Redakteur / Unternehmer ein sehr übersichtliches Backend mit dem er ausreichend Möglichkeiten hat. Ohne das Gefühl zu haben eingeschränkt zu sein. Oder in der Gefahr zu stehen die Webseite zu zerschießen.
  • Vereinfacht gesagt: Man muss Wordpress können um Wordpress zu nutzen und Designs in Artikeln anzupassen. Mit Contao ist ein Redakteur mit dem eingeschränkten Backend sehr gut bedient und zufrieden.
  • Bei Contao muss nicht ständig nach einem Plugin suchen, um ein Widget zu erstellen, oder ein Plugin suchen um eine relativ einfache Sache zu erledigen. Das ist in Contao schneller gemacht.
  • Contao hat viele Inhaltselement schon in mit drin. Z.B. Formular, Gallerie, Hyperlinks, Content-Slider, Bilder, Artikel-Teaser, Akkordeon, Downloads, Überschriften, Kommentare, Tabelle, Events, Code, etc.
  • Contao ist extrem flexibel im Vergleich zu Wordpress was die Designmöglichkeiten betrifft.
  • Man ist als Redakteur schnell in Contao eingearbeitet.
  • Mit Contao ist man weniger abhängig von externen Plugins als wie das bei Wordpress der Fall ist. Und wer Plugins kennt, weiß dass die nicht immer aktuell sind, oder irgendwann einfach nicht mehr gepflegt werden.
  • Wordpress wird eigentlich erst via Plugins zu einem CMS. Dabei besteht ständig die Gefahr, dass einem das Plugin um die Ohren fliegt und unbeabsichtigte Konsequenzen im Layout und der Funktion entstehen, wenn es mal ein Update gibt.
  • Eine Seite in Wordpress individuell zu gestalten ist Expertenarbeit.

Suchmaschinenoptimierung sowieso. Das beherrschen eigentlich alle CMS. Eigentlich muss man es anders sagen. Google kann SEO, und ist inzwischen sehr gut in der Lage zu erkennen ob eine Seite in den Suchergebnissen relevant ist oder nicht. Wordpress war vor wenigen Jahren darin Top, und zwar weil Google noch nicht so gut war wie heute. Inzwischen ist fast nur noch der Title-Tag und Description-Tag wichtig. Und dann die passenden Inhalte, bei denen Google sehr gut in der Lage ist zu erkennen, ob die relevant sind oder nicht.

Der Kern von Contao ist schlank. Es sind viele Erweiterungen in Contao verfügbar. Weitere externe Erweiterungen Z.B. Backup, Hintergrundanimationen etc. können mit integriert werden.

Responsive / Mobile schon enthalten. Das feinere Layouten kann mittels Media Queries angepasst werden. Somit kann das ganze Spektrum von kleinen Bildschirmen bis zum Desktop sinnvoll abgedeckt werden. (Zur Demo. Klicken Sie auf www.markustrauernicht.com auf „Home“ und verkleinern Sie dann den Bildschirm. Schauen Sie sich die Seite mal auf Tablet, Mobiltelefon etc. an. Die Seite wird dann je nach Bildschirm anders dargestellt.

Das Backend ist sehr aufgeräumt und übersichtlich.

  • Da wo man bei Wordpress an die Grenzen des Themes kommt, fängt Contao richtig an. Z.B. Schnell ist ein eigenes Layout / Seitentemplate für eine Seite innerhalb der Webseite erstellt. Oder ein Suchfeld im Header platziert – ohne nach einem passenden Plugin zu suchen.
  • LTS (Long Term Support) – Versionen: 4 Jahre Support mit Updates
  • Relative geringe Kosten zum Aufsetzen im Vergleich zu den „großen“ CMS.
  • Integrierte Suchmaschine

Hier mal ein Einblick in das Backend von Contao

Wie man sieht sind viele Elemente schon im Core von Contao enthalten, ohne sich für jede kleine Änderung auf die Suche nach einem passenden externen Plugin zu machen. 

Seitenlayouts können sehr genau angepasst werden

Grundeinstellungen des Seitenlayouts
Grundeinstellungen des Seitenlayouts
Einbinden der CSS-Stylesheets je nach Seitenlayout
Einbinden der CSS-Stylesheets je nach Seitenlayout
Seitenlayout wird mit Inhalten gefüllt
Seitenlayout wird mit Inhalten gefüllt
jQuery und MooTools Skripte werden individuell nach Layout aktiviert
jQuery und MooTools Skripte werden individuell nach Layout aktiviert

Übersichtliche Seitenstruktur, welche den Aufbau der Webseite darstellt. Diese Seiten können schnell verschoben, durch Passwort geschützt, oder zeitlich gesteuert veröffentlicht werden, oder vom Netz genommen werden.

Die Seitenstruktur ist die Basis für die Artikelstruktur.

Ein einzelner Artikel wird aus verschiedenen Elementen zusammengestellt. Diese sind dann auch beliebig hin- und her- verschiebbar, um den Artikel zu verbessern. 

Artikelaufbau - Contao
Hier zum Beispiel die Elemente: Überschrift (h2), Inhaltselement ID 0 welches ein Accordeon ist, Gallerie, Text, Gallerie

So sieht die Seite dann aus, hier der Link: Kaninchengeheimnisse
(Inhaltselement ID 0 ist deaktiviert)

Im Artikel können verschiedene Elemente eingebaut werden. Für die einzelnen Texte innerhalb des Artikels ist ein eigener Editor vorhanden!

 

Fertige Frontend-Module: Diese Module können innerhalb Contao anhand von Modulvorlagen erstellt werden. Z.B. eigene Navigationen, geteilte Navigation, eigener HTML-Code wo natürlich CSS Klassen und Id’s mit vergeben werden können.

Und noch mehr Frontendmodule
Vorbereitete Frontendmodule

Die Module werden dann in den einzelnen Seitenlayouts aktiviert, oder auch nicht. Somit ist die Gestaltung extrem flexibel und kann je nach Layout anders gemacht werden. 

Module im Seitenlayout

Formulargenerator:

Formulare können individuell angepasst werden, und dann nachträglich via CSS gestyled werden. 

Beliebig viele CSS-Stylesheets: Besonders bei Media Queries und verschiedenen Breakpoints der Webseite ist das zur besseren Übersicht sehr hilfreich. Die CSS-Stylesheets werden dann von Contao automatisch zu einem einzigen Stylesheet zusammengefasst, um die Webseiten-Ladegeschwindigkeit zu optimieren.

Die CSS-Stylesheets werden in einzelnen Layouts (z.B. Home, Newsletter, Seite ohne Spalten links und rechts) dann aktiviert oder deaktiviert. 

Stylesheet aktiviert und deaktiviert im Stylesheet

Eigenes CSS-Framework integriert.

CSS-Klick-Editor: Dieser kann auch mit externen eigenen Stylesheets kombiniert werden. Dieser CSS-Editor nimmt die Browserkompatibilität weitgehend ab. Vor allem spart man sich viel Zeit bei der Fehlersuche… wenn mal ein Punkt wo fehlt, oder ein Buchstabendreher drin ist.

CSS-Editor

JQuery & MooTools schon eingebaut und werden dann in einzelnen Seitenlayouts aktiviert oder deaktiviert.

Wie sehen sind viele der wichtigen Funktionen direkt in Contao enthalten. 

Was bedeutet das für Sie als Unternehmer?

Es bedeutet, dass man nicht ständig am Kern von Contao am PHP herumbasteln muss, und dann beim nächsten Update zittern muss, dass ständig die Seite zerschossen ist. Contao geht den Weg, dass wenn am PHP was geändert werden muss, z.B. durchgehender Footer, dass ein eigenes PHP-Template dafür erstellt wird. Und zwar wird einfach eine Kopie vom Original erstellt, so dass am Kern von Contao nicht herumgebastelt wird. Und dann kommt diese Kopie des PHP Templates jeweils zum Einsatz. Fängt man jetzt in der Entwicklung an einen Fehler in der Kopie zu machen, kann man einfach diese Kopie löschen, und Contao greift automatisch auf die entsprechende Datei im Core zurück. 

Im folgenden Beispiel ist z.B. einfach der Footer aus dem Wrapper heraus genommen worden, um einen durchgehenden Footer zu erzeugen. Dabei wird die originale Datei nicht verändert. Sondern die Kopie wird bearbeitet. Beim Update wird dann die originale Datei verändert, aber nicht die Kopie. 

<!DOCTYPE html>
<?php /* <html> bekommt die id="menu" */ ?>
<html lang="<?= $this->language ?>"<?php if ($this->isRTL): ?> dir="rtl"<?php endif; ?> id="menu">
<head>

  <?php $this->block('head'); ?>
    <meta charset="<?= $this->charset ?>">
    <title><?= $this->title ?></title>
    <base href="<?= $this->base ?>">

    <?php $this->block('meta'); ?>
      <meta name="robots" content="<?= $this->robots ?>">
      <meta name="description" content="<?= $this->description ?>">
      <meta name="keywords" content="<?= $this->keywords ?>">
      <meta name="generator" content="Contao Open Source CMS">
    <?php $this->endblock(); ?>

    <?= $this->viewport ?>
    <?= $this->framework ?>
    <?= $this->stylesheets ?>
    <?= $this->mooScripts ?>
    <?= $this->head ?>

    <?php $this->block('html5shiv'); ?>
      <!--[if lt IE 9]><script src="<?= TL_ASSETS_URL ?>assets/html5shiv/<?= $GLOBALS['TL_ASSETS']['HTML5SHIV'] ?>/html5shiv-printshiv.min.js"></script><![endif]-->
    <?php $this->endblock(); ?>
  <?php $this->endblock(); ?>

</head>
<body id="top" class="unknown other <?php if ($this->class) echo ' ' . $this->class; ?>"<?php if ($this->onload): ?> onload="<?= $this->onload ?>"<?php endif; ?>>

  <?php $this->block('body'); ?>
    <?php $this->sections('top'); ?>
    
    
<?php $this->block('header'); ?>
        <?php if ($this->header): ?>
          <header id="header">
            <div class="inside">
              <?= $this->header ?>
            </div>
          </header>
        <?php endif; ?>
      <?php $this->endblock(); ?>
    <div id="wrapper">

      

      <?php $this->sections('before'); ?>

      <?php $this->block('container'); ?>
        <div id="container">

          <?php $this->block('main'); ?>
            <div id="main">
              <div class="inside">
                <?= $this->main ?>
              </div>
              <?php $this->sections('main'); ?>
            </div>
          <?php $this->endblock(); ?>

          <?php $this->block('left'); ?>
            <?php if ($this->left): ?>
              <aside id="left">
                <div class="inside">
                  <?= $this->left ?>
                </div>
              </aside>
            <?php endif; ?>
          <?php $this->endblock(); ?>

          <?php $this->block('right'); ?>
            <?php if ($this->right): ?>
              <aside id="right">
                <div class="inside">
                  <?= $this->right ?>
                </div>
              </aside>
            <?php endif; ?>
          <?php $this->endblock(); ?>

        </div>
      <?php $this->endblock(); ?>

      <?php $this->sections('after'); ?>

     

    </div>
 <?php $this->block('footer'); ?>
        <?php if ($this->footer): ?>
          <footer id="footer">
            <div class="inside">
              <?= $this->footer ?>
            </div>
          </footer>
        <?php endif; ?>
      <?php $this->endblock(); ?>
    <?php $this->sections('bottom'); ?>
  <?php $this->endblock(); ?>

  <?= $this->mootools ?>

</body>
</html>

Lange Rede kurzer Sinn: Natürlich bringt jede Webseite und jedes Update einen Wartungsaufwand mit sich. Es liegt aber in der Natur der Dinge, dass dieser deutlich geringer ausfällt, wenn man aufgrund des Aufbaus von Contao nicht am PHP des Kern herumbastelt.

Wie im folgenden Bild zu sehen besteht der Kern natürlich aus sehr vielen PHP-Dateien, die notfalls angepasst werden können. Meist muss man das aber gar nicht. Und wenn, wird eine Kopie erstellt die dann bearbeitet wird. 


Und spätestens an dieser Stelle relativiert sich das Argument von Wordpress, dass so viele fertige Themes vorhanden sind. Was machen Sie denn z.B. bei Wordpress, wenn nach einem Update Ihr vorhandenes Theme noch nicht gleich mit vom Theme-Ersteller geupdatet wird? Dann entstehen viele notwendige Programmierstunden und nachzubessern. 

Nicht dass der falsche Eindruck entsteht - ich nutze Wordpress selber seit ca. 10 Jahren. Und auch heute noch.