Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Software & Infrastruktur

Flexibilität bis zum Abwinken: Das CMS „ProcessWire“ im t3n-Test

    Flexibilität bis zum Abwinken: Das CMS „ProcessWire“ im t3n-Test

ProcessWire ist ein CMS mit Fokus auf Flexibilität. Statt ein großes Feld für alle Inhalte bereitzustellen, arbeitet es mit mehreren Feldern für kleinere Abschnitte. Wir stellen euch das CMS kurz vor.

Wie schon im Teaser angerissen, geht ProcessWire bei der Verwaltung von Inhalten einen etwas anderen Weg als beispielsweise WordPress. Statt ein großes Feld für den kompletten Inhalt einer Seite zu benutzen, arbeitet ProcessWire mit mehreren Feldern, die die Flexibilität deutlich erhöhen. Aber beginnen wir am Anfang.

ProcessWire-Installation

Auswahl der Websiteprofils für die ProcessWire-Installation. (Screenshot: eigene Installation)
Auswahl der Websiteprofils für die ProcessWire-Installation. (Screenshot: eigene Installation)

Zur Installation könnt ihr euch das CMS ProcessWire von der offiziellen Download-Seite runterladen. Es gibt drei Download-Pakete – ich habe für diesen Artikel die 3.0.5-Version gewählt. Nachdem ihr das ZIP-Archiv auf eurem Server entpackt habt, müsst ihr einfach den Pfad zu den Dateien aufrufen, um die Installation zu starten.

Direkt nach dem Welcome-Screen könnt ihr ein Website-Profil auswählen, das installiert werden soll – das ist besonders praktisch, wenn ihr noch nicht mit ProcessWire gearbeitet habt und nicht von Null starten wollt. Wir wählen das Profil „Default (Beginner Edition)“ aus und gehen weiter zum nächsten Schritt. Hier wird geprüft, ob die Server-Umgebung alle erforderlichen Voraussetzungen erfüllt. Im Anschluss müssen die Zugangsdaten für die MySQL-Datenbank sowie Zeitzone und Zugriffsrechte für Dateien angegeben werden – Standardrechte sind hier 755 für Ordner und 644 für Dateien. Zudem sollten die Host-Namen angegeben werden, unter denen die Installation laufen wird.

Die Ansicht des ProcessWire-Backends nach dem ersten Login mit den Beispiel-Seiten. (Screenshot: eigene Installation)
Die Ansicht des ProcessWire-Backends nach dem ersten Login mit den Beispiel-Seiten. (Screenshot: eigene Installation)

Im Anschluss wird die Datenbankverbindung überprüft und der Nutzer kann die URL, unter der das Admin-Login-Formular erscheinen soll, sowie das Farbschema für das Admin-Panel angeben. Außerdem muss ein Admin-Account angelegt werden, und optional kann die Installation von unnötigen Dingen befreit werden – wie dem Installer und ungenutzten Website-Profilen.

Danach ist die Installation abgeschlossen und das Backend kann aufgerufen werden, das normalerweise über die URL /processwire zugänglich ist. Der erste Blick ins Backend sieht aus, wie in dem Screenshot oben.

Die Inhaltsverwaltung von ProcessWire verstehen

Ansicht des Templates „basic-page“ mit den zugehörenden Feldern. (Screenshot: eigene Installation)
Ansicht des Templates „basic-page“ mit den zugehörenden Feldern. (Screenshot: eigene Installation)

Wie schon erwähnt, arbeitet ProcessWire nicht mit einem einzigen großen Inhaltsfeld, sondern mit kleineren Unterteilungen. Jeder Inhaltsseite muss zuerst ein Template zugewiesen werden – alle Inhalte werden in einem Seitenbaum organisiert. Für diese Templates wiederum können Felder festgelegt werden, die der Nutzer dann für eine Seite mit diesem Template ausfüllen kann. So gibt es beispielsweise das Template basic-page mit den Feldern title, headline, summary, body und sidebar – wenn im Backend über den Menüpunkt „Setup“ › „Templates“ ein Template gewählt wird, können auch neue Felder hinzugefügt werden, die schon angelegt sind. Außerdem kann hier eingesehen werden, welche Seiten das Template benutzen. Diese Ansicht ist im Screenshot oben zu sehen. Ein Template muss aber nicht unbedingt Felder haben – für ein Blog-Template könnten beispielsweise alle Informationen aus den Unterseiten geholt werden, die dann die einzelnen Blogbeiträge darstellen würden.

Die „About“-Seite im ProcessWire-Backend. (Screenshot: eigene Installation)
Die „About“-Seite im ProcessWire-Backend. (Screenshot: eigene Installation)

Wenn wir jetzt in unserer Installation mit der Beispiel-Site im Backend die Inhaltsseite „About“ wählen, können wir die Felder des Templates sehen und verändern, wie im Screenshot oben abgebildet ist.

Um ein neues Feld anzulegen oder alle Felder zu sehen, die schon angelegt wurden, gehen wir über den Menüpunkt „Fields“ unter „Setup“ – die Ansicht seht ihr unten im Screenshot. Hier sehen wir ganz links den Namen der Felder, daneben die Beschriftung, die im Seiten-Editor angezeigt wird, den Typ des Felds und die Anzahl der Templates, die das Feld nutzen. Wie geschrieben, kann hier auch ein neues Feld angelegt werden, beispielsweise eine Checkbox, ein Datumsfeld oder ein Upload-Dialog. Beim Anlegen des Felds können jeweils noch Einschränkungen gemacht werden, wie etwa die maximale Anzahl von Dateien, die hochgeladen werden können.

Alle Felder der ProcessWire-Installation. (Screenshot: eigene Installation)
Alle Felder der ProcessWire-Installation. (Screenshot: eigene Installation)

Inhalte auf der Website anzeigen

Jetzt haben wir grob umrissen, wie die Inhalte im Backend angelegt und organisiert werden, es fehlt uns noch die Möglichkeit, Inhalte auf der Website anzuzeigen. Dafür ist eine PHP-Datei zuständig, die immer mit einem Template gekoppelt ist. Die Dateien befinden sich im Ordner site/templates der Installation. Beim Anlegen eines neuen Templates im Backend versucht ProcessWire automatisch, eine passende PHP-Datei zu finden und sucht dabei nach einer Datei gleichen Namens. Für das Template basic-page gibt es daher im templates-Ordner die Datei basic-page.php. Es ist am einfachsten, wenn ihr vor dem Anlegen eines neuen Templates zuerst eine entsprechende Template-Datei anlegt, damit ProcessWire die Zuordnung automatisch vornehmen kann.

Die About-Seite im Frontend. (Screenshot: eigene Installation)
Die About-Seite im Frontend. (Screenshot: eigene Installation)

Wie die Ausgabe gehandhabt wird, werden wir uns beispielhaft mit dem basic-page-Template angucken, dem beispielsweise die About-Seite zugewiesen ist. Wie die Seite im Frontend aussieht, seht ihr im Screenshot oben. Der Inhalt der Datei basic-page.php sieht – gekürzt um ein paar Kommentare – folgendermaßen aus:

<?php
include('./_head.php'); // include header markup ?>
<div id='content'><?php 
    // output 'headline' if available, otherwise 'title'
    echo "<h1>" . $page->get('headline|title') . "</h1>";
    // output bodycopy
    echo $page->body; 
    // render navigation to child pages
    renderNav($page->children); 	
?></div><!-- end content -->
<div id='sidebar'> 1) {
        // output sidebar navigation
        // see _init.php for the renderNavTree function
        renderNavTree($section);
    }
    // output sidebar text if the page has it
    echo $page->sidebar; 
?></div><!-- end sidebar -->
<?php include('./_foot.php'); // include footer markup ?>

Zuerst wird der Kopfbereich des Templates eingebunden, in dem die Navigation und andere Infos bereitgestellt werden, die auf jeder Seite eingebunden werden sollen. In der fünften Zeile seht ihr dann den ersten Inhaltsbereich, der ausgegeben wird: Die Headline beziehungsweise der Title, wenn keine Headline hinterlegt ist. Dafür wird die get()-Methode des $page-Objekts genutzt und mehrere Namen von Feldern übergeben, getrennt von einem senkrechten Strich. Das erste Feld, das nicht leer ist, wird ausgegeben.

Um den Inhalt des Felds body auszugeben, muss lediglich echo $page->body ausgeführt werden. Nach demselben Prinzip kann auf alle Felder zugegriffen werden, die im Backend angelegt sind und die eine Seite nutzt. Einige Feldtypen sind etwas komplexer, wie beispielsweise Felder zum Hochladen von Bildern. Nähere Infos zu den verfügbaren Methoden für einzelne Feldtypen gibt es auf der entsprechenden Doku-Seite.

Mit renderNav($page->children); wird eine Verlinkung auf die Child-Seiten der aktuellen Seite ausgegeben, inklusive Ausgabe des Summary-Felds. Soweit ich gesehen habe, ist diese Funktion nicht offiziell dokumentiert, ein Blick in den Quellcode schafft aber schnell Klarheit.

In der Sidebar soll ein Baum des aktuellen Seiten-Zweigs abgebildet werden, wenn die erste Ebene des Zweigs – in unserem Fall die Seite „About“ – mehr als eine Unterseite hat. Dafür wird über $page->rootParent zuerst die oberste Seite des Zweiges ermittelt und dann geprüft, ob hasChildren eine Zahl größer 1 ergibt. Ist das der Fall, wird renderNavTree aufgerufen. Wie im Code zu sehen, kann neben den Seiten auch noch eine maximale Tiefe des Baumes angegeben werden, sowie ein oder mehrere Feldnamen, die mit ausgegeben werden sollen – beispielsweise eine kurze Beschreibung jeder Seite.

Die _head.php-Datei werden wir uns nicht komplett anschauen, sondern nur ein paar Dinge herauspicken.

$homepage = $pages->get('/');
$children = $homepage->children();
// make 'home' the first item in the navigation
$children->prepend($homepage); 
// render an <li> for each top navigation item
foreach($children as $child) {
    if($child->id == $page->rootParent->id) {
        // this $child page is currently being viewed (or one of it's children/descendents)
        // so we highlight it as the current page in the navigation
        echo "<li class='current'><a href='$child->url'>$child->title</a></li>";
    } else {
        echo "<li><a href='$child->url'>$child->title</a></li>";
    }
}

In diesem Code-Block wird die Hauptnavigation ausgegeben. Zuerst wird mit $pages->get('/'); die Startseite gespeichert und anschließend alle Kindelemente mit $homepage->children(); ermittelt. Um auch die Startseite in der Navigation einzufügen, wird diese Seite mittels $children->prepend($homepage); an den Anfang des Arrays eingefügt. Danach wird in einer Schleife die Navigation ausgegeben.

Um für angemeldete Nutzer mit den notwendigen Rechten einen Link zur Bearbeitungsansicht der aktuellen Seite anzuzeigen, genügt folgender Code:

if($page->editable()) {
    echo "<li class='edit'><a href='$page->editUrl'>Edit</a></li>";
}

In der _foot.php, die wir hier ebenfalls nicht komplett ausbreiten werden, findet sich noch folgender interessanter Schnipsel:

if($user->isLoggedin()) {
    // if user is logged in, show a logout link
    echo "<a href='{$config->urls->admin}login/logout/'>Logout ($user->name)</a>";
} else {
    // if user not logged in, show a login link
    echo "<a href='{$config->urls->admin}'>Admin Login</a>";
}

Über $user->isLoggedin() kann getestet werden, ob der aktuelle Nutzer eingeloggt ist.

Fazit

ProcessWire ist ein tolles CMS, das vor allem durch seine große Flexibilität besticht – darüber hinaus ist es leichtgewichtiger als die „großen“ Systeme. Durch intelligenten Einsatz der Felder können viele Informationen von Seiten anderswo wiederverwendet werden, ohne sie erneut anlegen zu müssen.

Eine tolle Funktion für jemanden, der hauptsächlich das Bild-Management von WordPress gewohnt ist: Bilder können direkt vor der Ausgabe in der Template-Datei auf die richtige Größe zugeschnitten oder skaliert werden – es werden keine Bildgrößen beim Upload angelegt.

Dazu kommt, dass der Einstieg nicht wirklich schwierig ist, wenn die grundlegende Art der Felder und Templates verstanden wurde. Ein näherer Blick lohnt sich auf jeden Fall!

Finde einen Job, den du liebst

9 Reaktionen
Felix
Felix

Ap­ro­pos Customizing: Der Name des Backend-Verzeichnisses kann im PW-Installationsdialog direkt angepasst werden, wenn man dies z.B. aus Sicherheitsgründen wünscht - es muss also nicht der Standard-Name /processwire verwendet werden. Dass man das Admin-Verzeichnis derart einfach umbenenennen kann, ist mir von keinem anderen CMS bekannt.

Antworten
Felix
Felix

Wie templates, fields und pages in PW prinzipiell zusammenarbeiten, erklärt niemand besser als Ryan Cramer selbst in diesem kleinen Tutorial:

https://processwire.com/docs/tutorials/hello-worlds/

... und es lässt erahnen, warum PW so unglaublich anpassungsfähig ist.

Sehr hilfreich bei der Erstellung von Templates ist auch das API Cheatsheet:

http://cheatsheet.processwire.com/

Antworten
grep

Hallo ...,

für Nischenseiten bzw. Webseiten welche keine extremen 'Lastspitzen' haben, wären CMS welche auf sog. 'flat file databases' aufsetzen ggf. eine performantere, trivialere und sichere Option zu anderen CMS welche (No)SQL-Datenbanken verwenden.

Ich empfehle in diesem Kontext (z. B.) Nibbleblog.

Ciao, Sascha.

Antworten
Chris
Chris

Man sollte eine Warnung anbringen, denn ProcessWire macht definitiv süchtig. Wenn man sich immer wieder die Finger dabei gebrochen hat, andere CMSe um einzelne Funktionen zu erweitern, wird man bei ProcessWire schnell in Begeisterung ausbrechen.

Gerade der Verzicht auf eine fest verdrahtete Template-Engine ist eine der großen Stärken von PW. Es ist zuallererst ein Content Management Framework, dann ein CMS, und entsprechend durchdacht und leichtgewichtig ist die Oberfläche. Es lässt sich jede Template-Engine ziemlich einfach anbinden (für die bekanntesten sind auch entsprechende Module verfügbar), aber nach kurzer Zeit kehren die meisten ohnehin zu "purem PHP" zurück. Dank short open tags entsteht dabei auch kein Overhead, ganz im Gegenteil, und die Flexibilität die man erhält, wenn man nicht über Workarounds die Logik in die Template-Sprache zwängen muss, ist teilweise atemberaubend - und das, ohne Lesbarkeit zu opfern.

Man kann mit PW ganz einfach alles von der rein im Inline-Editor erstellten Seite bis zum komplexen Szenario mit MVC-Pattern, wählbaren Sidebar-Widgets, Template-Engine und externen Datenquellen abbilden. Die API ist intuitiv und homogen. Einer der wichtigesten Punkte, die hochperformanten Selektoren, hat der Artikel nicht erwähnt. Ich möchte die zehn zuletzt hinzugefügten Events? Dann reicht es, den String 'template=event, sort=-created, limit=10' an die find-Methode von PW zu übergeben. PW löst viele Aufgabenstellungen direkt in der API wo man bei anderen CMSen schon den Datenbank-Layer bemühen oder eigene Plugins schreiben muss.

Antworten
Chris
Chris

@ Marcel : der User kongondo hat ein Modul erstellt welches dir einen Blog mitsamt sehr sehr feiner API zusammenstellt. Das ganze nennt sich ProcessBlog für das backend und markupblog für das Frontend. Dazu gibt es einen sehr ausführlichen thread im Pw forum, das Teil ist schnell integriert und dank recht hübscher API auch schnell verwendet.

Antworten
Marcel
Marcel

Super! Danke für den Hinweis! Das schau ich mir gleich mal an. :)

Antworten
Marcel
Marcel

Ich benutze es auch schon eine Weile. Bin aber noch viel am rum experimentieren. Das CMS ist Hammer und die Community sehr hilfsbereit. Aus den Kommentaren würde mich natürlich brennend interessieren welche ecommerce Lösung benutzt wird und ob es noch eine gute Möglichkeit gibt einen Blog zu integrieren. Das Blog Profile von Ryan Cramer ist schon echt toll. Leider hat er als Template File inc Dateien benutzt. Das ist als Anfänger dann schon etwas schwieriger zu verstehen.

Antworten
David Karich

Als Blog-Modul kannst du auch einfach folgendes verwenden: http://modules.processwire.com/modules/process-blog/

E-Commerce haben wir uns selber gebaut, es gibt aber mit Padloper auch eine kostenpflichtige fertige Lösung (https://www.padloper.pw).

Antworten
David Karich

Ich kann ProcessWire nur empfehlen. Ich setze es seit 3 Jahren für jegliche Projekte ein. Ob kleine Webpage, Intranet, als API-Schnittstelle oder im e-Commerce-Bereich. Ob nur ein paar Pages innerhalb von PW oder Seiten mit 50.000+ Pages. Es ist unglaublich performant und flexibel. Man kann das Backend in windeseile nach Kundenwunsch zusammenbauen. Und für alle Anwendungsfälle gibt es auch ein passendes Plugin, falls mal dem Core eine Funktion fehlt – was selten der Fall ist. Unter Anderen unser AIOM+ Plugin zur Minimierung von Assets. http://flpzm.de/pw Reinschauen lohnt auf jeden Fall.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen