ProcessWire CMS – Ein Leitfaden für Einsteiger

ProcessWire ist ein Content-Management-System (CMS), das unter der Mozilla Public License Version 2.0 (MPL) und der MIT-Lizenz vertrieben wird. Es ist von Grund auf darauf ausgelegt, die Probleme anzugehen, die durch genau diese Art von Eigensinn verursacht werden (was unweigerlich zu frustrierten Entwicklern und Benutzern führt), indem es – Sie haben es erraten – nicht eigensinnig ist. Im Kern basiert es auf ein paar einfachen Kernkonzepten und bietet eine außergewöhnlich einfach zu bedienende und leistungsstarke API zur Handhabung von Inhalten jeglicher Art. Lassen Sie uns direkt darauf eingehen!

Weiterführende Literatur zu SmashingMag:

• Design für Content-Management-Systeme
• Warum statische Website-Generatoren das nächste große Ding sind
• Content-Management-System (CMS)-Icon-Set (12 kostenlose Icons)
• Erste Schritte mit Content-Management-Systemen

Die Admin-GUI

Nach der Installation von ProcessWire (für das PHP 5.3.8+, MySQL 5.0.15+ und Apache erforderlich sind) sehen Sie die Startseite der Standard-Admin-GUI:

Hinweis: Die Seiten, die Sie im hierarchischen Seitenbaum sehen (dazu später mehr), sind dort, weil ich während des Installationsvorgangs das Website-Profil „Standard (Beginner Edition)“ ausgewählt habe. Dies ist völlig optional. Sie können auch mit einem leeren Website-Profil beginnen, mit dem Sie alles von Grund auf neu erstellen können.

Sie können tatsächlich aus vielen Admin-Designs wählen, obwohl für ProcessWire 2.6+ das Standarddesign oder das Reno-Design empfohlen wird. Da Reno mit jeder ProcessWire-Installation vorinstalliert ist, ist der Wechsel ziemlich einfach: Installieren Sie es einfach und wählen Sie es in Ihrem Benutzerprofil aus.

Werfen wir einen kurzen Blick auf die Haupt-Backend-Navigation:

• „Seiten“ Dies ist der Einstiegspunkt der Admin-GUI. Es zeigt den hierarchischen Seitenbaum und damit alle Inhalte Ihrer Website im Backend.
• „Setup“ Hier können Sie die allgemeine Datenmodellarchitektur Ihrer Installation über Vorlagen und Felder einrichten (dazu später mehr). Hier fügen ProcessWire-Module auch oft einen Eintrag für ihre spezifische Funktionalität und Benutzeroberfläche hinzu – zum Beispiel die Visualisierung von Log-Meldungen direkt in der Admin-GUI oder die Verwaltung aller verschiedenen Sprachen beim Umgang mit mehrsprachigen Inhalten.
• „Module“ Hier verwalten Sie alle Module Ihrer Website. Stellen Sie sich ProcessWire-Module als WordPress-Plugins vor: Sie erweitern und passen das System an.
• „Zugriff“ Hier verwalten Sie Benutzer, Benutzerrollen und Benutzerberechtigungen.

Drei einfache Kernkonzepte

Die Kernkonzepte, die die gesamte Datenmodellarchitektur von ProcessWire bilden, sind genau drei: Seiten, Felder und Vorlagen . Schauen wir uns jeden einzeln an.

Alles ist eine Seite: Oder ein Seitenbaum, um sie alle zu beherrschen

Eine Seite in ProcessWire kann eine normale Seite im Frontend Ihrer Website generieren, die bereit ist, von Ihren Benutzern besucht zu werden (wie „Home“ und „Info“ im obigen Screenshot). Eine Seite kann aber auch nur im Backend ohne Frontend-Gegenstück existieren – zum Beispiel eine versteckte Einstellungsseite, auf der Sie den globalen Slogan, das Logo und den Copyright-Hinweis Ihrer Website speichern. Wenn ich bei ProcessWire sage „alles ist eine Seite“, dann meine ich das auch so. Selbst die Hauptnavigationslinks in der Admin-GUI bestehen aus versteckten Seiten im hierarchischen Seitenbaum!

Das ist so meta, dass ich an ein bestimmtes Xzibit-Mem erinnert werde. Aber belassen wir es dabei.

Das Konzept, dass eine Seite nur im Backend sichtbar ist, ist ziemlich mächtig, da es eine ganze Welt von Möglichkeiten eröffnet, wie Sie Daten über andere Seiten strukturieren und darauf zugreifen können (Ihre Vorstellungskraft ist die einzige Grenze). Sie könnten einen riesigen Produktkatalog oder eine Intranet-Anwendung mit Hunderttausenden von Artikeln basierend auf einer komplexen Seitenhierarchie erstellen oder einfach nur ein einfaches Blog mit den üblichen Blog-Kategorien und -Tags (jede Kategorie und jedes Tag ist eine Seite im Seitenbaum). .

Joss Sanglier, ein angesehenes Mitglied der ProcessWire-Community, schlüsselt das Konzept der Seiten folgendermaßen auf:

[I]n ProcessWire-Seiten sind […] keine großen Informationshaufen, sondern winzig kleine Dinge, nichts weiter als ein Link zu der interessanteren Welt der Felder und Vorlagen; nur ein kleiner Datenausschnitt in Ihrer riesigen faszinierenden Datenbank.

Seiten in ProcessWire werden für alle möglichen Dinge verwendet. Sie können als Markierung in Ihrer Seitenliste verwendet werden. Sie können als übergeordnete Gruppe für andere Seiten verwendet werden. Sie können als Kategorien, Tags oder Listen oder Benutzer verwendet werden. Und sie können sogar für einfache Dropdown-Auswahlen verwendet werden – nur um eine Bezeichnung und einen Wert bereitzustellen.

Lassen Sie uns ein wenig mit dem hierarchischen Seitenbaum interagieren:

Wie Sie sehen, können Seiten bearbeitet, verschoben oder gelöscht werden, und sie können eine unendliche Anzahl von untergeordneten und untergeordneten Elementen haben.

Öffnen wir die Seite „Home“:

Damit kommen wir zum nächsten Kernkonzept von ProcessWire, den Feldern.

Felder sind die Container, in die Sie Daten einfügen

Felder sind im Grunde die Container, in denen Sie Daten ablegen. An dieser Stelle ist es wichtig zu erkennen, dass ProcessWire nicht das Konzept benutzerdefinierter Felder hat, wie es WordPress tut, da jedes Feld in ProcessWire ein benutzerdefiniertes Feld ist . Wenn Sie ein Feld erstellen, können Sie ihm eine Bezeichnung, eine Beschreibung und einige zusätzliche Hinweise geben, die darunter erscheinen.

Lassen Sie uns das Feld „Titel“ bearbeiten und eine Beschreibung und eine Notiz hinzufügen:

Die vorinstallierten Feldtypen decken die meisten grundlegenden Dateneingabeanforderungen ab. Beispielsweise können Sie Dinge wie Kontrollkästchen, Datumsauswahlen, Feldsätze (ein Feld, das andere Felder in visuell logische Einheiten gruppiert), Datei- und Bild-Uploader und natürlich Text- und Textbereichsfelder erstellen (der standardmäßige WYSIWYG-Editor ist CKEditor ).

Es stehen auch viele vorgefertigte Feldtypen und Feldtypen von Drittanbietern zur Auswahl. Ein nützliches Kernmodul, das standardmäßig nicht installiert ist, ist das Repeater-Feld . Damit können Sie Reihen von Datensätzen dynamisch erstellen.

ProcessWire eignet sich auch gut für den Umgang mit Bildern . Sie können beispielsweise entscheiden, welche Bildvarianten ProcessWire automatisch nach dem Hochladen eines Bildes erstellen soll (was nette Anwendungsfälle für responsive Bilder ermöglicht). Und die Auswahl eines Thumbnails für ein Bild ist ein Kinderspiel.

Ein weiterer nützlicher Feldtyp ist der Seitenfeldtyp . Sie können andere Seiten mit der Seite, die Sie gerade bearbeiten, verknüpfen und so eine Beziehung zwischen ihnen herstellen. In den Feldeinstellungen können Sie entscheiden, wie die Eingabe aussehen und mit dem Feld interagieren soll – zum Beispiel, ob eine einzelne Seite oder mehrere Seiten auswählbar sein sollen oder ob nur die untergeordneten Seiten einer bestimmten übergeordneten Seite auswählbar sein sollen. Wenn Sie beispielsweise einen Blogbeitrag schreiben, können Sie festlegen, dass nur Kategorien von Blogbeiträgen automatisch vervollständigt werden.

Eine nette Funktion, die Sie in den Einstellungen eines Felds einschalten können, ist die Möglichkeit , den Inhalt des Felds im Frontend Ihrer Website zu bearbeiten . Sobald sich ein Benutzer im Backend von ProcessWire angemeldet hat, kann er zum Frontend der Website wechseln und den Inhalt direkt dort bearbeiten und speichern, wo er schließlich gerendert wird.

Nachdem Sie sich Seiten und Felder in ProcessWire angesehen haben, fragen Sie sich vielleicht: Woher weiß eine Seite, welche Felder sie hat? Und wo kann ich definieren, wie die Felder auf einer Seite angeordnet und gerendert werden? Kommen wir also zum letzten Kernkonzept, den Vorlagen.

Vorlagen sind die Blaupausen von Seiten

Jedes Mal, wenn Sie eine Seite im hierarchischen Seitenbaum erstellen, muss ProcessWire wissen, welche Vorlage damit verknüpft ist. Das liegt daran, dass eine Seite wissen muss, welche Felder sie darstellen muss, und diese Informationen sind immer Teil des jeweiligen Templates.

Um es kurz zu machen: Vorlagen enthalten alle Informationen, die die Seite über ihren Inhalt wissen muss (welche Felder sie hat, wie diese Felder gerendert werden und wie sie sich verhalten).

Öffnen wir die Vorlage „Home“ aus unserer Beispielinstallation.

Das Wichtigste, was zu beachten ist, ist die Anzahl der Einstellungen. Hier gibt es wirklich viel zu entdecken. Sie können beispielsweise den Zugriff auf die mit dieser Vorlage erstellten Seiten auf bestimmte Benutzerrollen beschränken. Oder Sie können entscheiden, ob mit dieser Vorlage erstellte Seiten für eine bestimmte Zeit zwischengespeichert werden sollen (um die Leistung zu verbessern), sowie die Bedingungen, unter denen der Cache geleert werden muss.

Eine weitere leistungsstarke Einstellung verbirgt sich im Reiter „Familie“. Hier können Sie festlegen, ob mit dieser Vorlage erstellte Seiten untergeordnete Seiten haben dürfen und welche Vorlagen für die übergeordnete Seite bzw. deren untergeordnete Seiten zulässig sind. Auf diese Weise können Sie genau den gewünschten Typ von Vorlagenfamilienhierarchie erstellen. Es ist eine flexible und praktische Möglichkeit (und tatsächlich eine der leistungsstärksten), Ihre Daten zu strukturieren, und es ist eine der vielen Möglichkeiten, wie ProcessWire seine Flexibilität unter Beweis stellt.

Wenden wir uns der Liste der Felder in einer Vorlage zu. Wenn Sie sich den obigen Screenshot ansehen, können Sie sehen, dass die Reihenfolge der Felder der Reihenfolge ähnelt, in der die Felder auf der Startseite gerendert werden. Sie können Felder einfach per Drag-and-Drop verschieben, um die Reihenfolge in der Liste zu ändern und so die Reihenfolge des Erscheinens beim Bearbeiten der Homepage zu ändern.

Sie können auch die Breite eines Felds auf der Seite ändern. Klicken Sie einfach auf ein Feld und ändern Sie es. Lassen Sie uns die Felder „Titel“ und „Überschrift“ nebeneinander platzieren.

Ein weiteres Beispiel dafür, wie Sie die Benutzeroberfläche einer Seite und ihrer Felder anpassen und anpassen können, sind Eingabefeldabhängigkeiten. Mit diesen können Sie die Bedingungen festlegen, unter denen ein bestimmtes Feld im Seiteneditor angezeigt wird oder erforderlich ist. Machen wir das Feld „Überschrift“ nur dann in der Benutzeroberfläche sichtbar, wenn der Benutzer etwas in das Feld „Titel“ eingibt, und markieren wir das Feld „Zusammenfassung“ nur dann als erforderlich, wenn der Benutzer etwas in das Feld „Überschrift“ eingibt:

Hier ist ein Video, das Ihnen zeigt, wie Eingabefeldabhängigkeiten verwendet werden können, um die Benutzererfahrung bei der Arbeit mit ProcessWire zu verbessern:

Die Anzahl, Reihenfolge und das Erscheinungsbild der Felder auf einer Seite liegen vollständig unter Ihrer Kontrolle. Sie können nur ein Feld in eine Vorlage einfügen, gar keins (nicht sehr nützlich) oder mehr als 50 Felder, 100 oder sogar mehr. Sie können sie beliebig anordnen, angeben, welche erforderlich oder sichtbar sind und welche nicht, und angeben, unter welchen Umständen sie erforderlich oder sichtbar sein sollen. Hier glänzt der unparteiische Ansatz von ProcessWire.

Zusammenfassung: Seiten, Felder, Vorlagen

Lassen Sie uns die technische Beziehung zwischen Seiten, Feldern und Vorlagen noch einmal zusammenfassen: Sie fügen Vorlagen Felder hinzu und wählen eine Vorlage aus, wenn Sie eine neue Seite erstellen. Die Felder, die Sie beim Bearbeiten einer Seite sehen, sind die Felder, die Sie der ausgewählten Vorlage hinzugefügt haben.

Eine andere Möglichkeit, dies zu betrachten, wäre eine Analogie aus der Programmierwelt:

• Vorlagen sind wie Klassen.
• Felder sind wie die Eigenschaften von Klassen.
• Seiten sind Instanzen von Klassen.

Sobald Sie diese Konzepte verinnerlicht haben, sind Sie mit allem ausgestattet, was Sie wissen müssen, um in ProcessWire zu entwickeln. Und der Grund dafür ist, dass die Philosophie von ProcessWire ausschließlich auf diesen drei Konzepten basiert. Ziemlich cool, oder?

Vorlagendateien und die API: Ein Paar, das zusammengehört

Der Ort, an dem Sie die im Backend von ProcessWire eingegebenen Daten abrufen und im Frontend ausgeben, ist natürlich das Dateisystem – genauer gesagt der Ordner /site/templates/ Ihrer ProcessWire-Installation. Einer Vorlage kann eine physische PHP-Datei mit demselben Namen zugeordnet sein; Das home Template hätte also eine home.php -Datei im Ordner /site/templates/ .

Hinweis: Wie Sie Ihre Vorlagendateien entwickeln, liegt ganz bei Ihnen. Wenn Sie mit dem WordPress-Stil der Entwicklung vertraut sind, können Sie so weitermachen, wie Sie es gewohnt sind. Wenn Sie ein ziemlich komplexes und umfangreiches Setup haben und eine anspruchsvollere Architektur erstellen möchten, können Sie einen MVC-inspirierten Ansatz verwenden, der genauso gut funktionieren würde. Ryan Cramer hat ein ziemlich gutes Einführungstutorial mit dem Titel „How to Structure Your Template Files“, in dem Sie verschiedene Ansätze zur Entwicklung von Vorlagendateien in ProcessWire kennenlernen können.

Der Code, den Sie in eine Vorlagendatei schreiben, besteht hauptsächlich aus grundlegenden PHP-Konstrukten ( if -Bedingungen, foreach -Schleifen, echo -Anweisungen), HTML-Markup und der API von ProcessWire. Die API ist stark von jQuery inspiriert – es ist also wirklich so, als würden Sie den Inhalt, den Sie im Backend eingegeben haben, über Methoden, Selektoren und Verkettungsfunktionen (fließende Schnittstellen) iterieren und durchlaufen. Es ist einfach zu bedienen und sehr ausdrucksstark, genau wie jQuery.

Sehen wir uns zunächst einige einfache Beispiele an, um Ihnen den Einstieg in die API zu erleichtern. Aber bevor wir beginnen, denken Sie daran, den ProcessWire-API-Spickzettel mit einem Lesezeichen zu versehen, einer hilfreichen Referenz mit einem Überblick über alle verfügbaren API-Methoden.

Zunächst wollen wir auf den Inhalt eines Seitenfeldes zugreifen und ihn ausgeben. Die API stellt uns eine Variable zur Verfügung, um damit umzugehen: $page .

Abrufen der aktuellen Seite mit der $page Variablen

Die $page Variable enthält alle Felder einer einzelnen Seite. Dazu gehören integrierte Felder (wie der Name einer Seitenvorlage) sowie die Felder, die Sie als Entwickler der Seitenvorlage hinzugefügt haben.

Öffnen home.php , die Vorlagendatei der home Vorlage, und fügen diese Zeile hinzu:

 echo $page->title;

Dies weist ProcessWire an, das „Title“-Feld der Seite, auf der wir uns gerade befinden („Home“), zu greifen und es auszugeben. Nehmen wir an, wir haben auch ein Feld „Überschrift“ auf der Seite, das wir anstelle des Felds „Titel“ verwenden möchten, aber nur, wenn der Benutzer etwas darin eingegeben hat.

 echo $page->get("headline|title");

Wir haben die get -Methode verwendet, um auf das Feld einer Seite zuzugreifen ( $page->get(“title”) entspricht also im Grunde dem ersten Codebeispiel oben), und wir haben “headline|title” in die get -Methode geschrieben. Dadurch wird ProcessWire angewiesen, zunächst das Feld „Überschrift“ zu prüfen und den Inhalt der Überschrift auszugeben. Wenn das Feld „Überschrift“ jedoch leer ist, wird das Feld „Titel“ als Fallback verwendet.

Die Verwendung von API-Variablen in PHP-Strings ist ebenfalls möglich. Äquivalent sind die beiden folgenden echo -Anweisungen zur Ausgabe der Anzahl der Kinder einer Seite:

 echo "This page has " . $page->numChildren . " children pages."; echo "This page has {$page->numChildren} children pages.";

Holen wir uns die Kinder unserer Stammseite (denken Sie daran, wir befinden uns immer noch in home.php ) und geben Sie sie als Liste von Links aus:

 echo "<ul>"; foreach ($page->children as $child) { echo "<li><a href='{$child->url}'>{$child->title}</a></li>"; } echo "</ul>";

Ein weiteres Beispiel für ein eingebautes Feld (wie children und url im obigen Beispiel) ist das Durchlaufen aller Eltern einer Seite und das Erstellen einer Breadcrumb-Navigation:

 echo "<ul>"; foreach ($page->parents as $parent) { echo "<li><a href='{$parent->url}'>{$parent->title}</a></li>"; } // output the page itself at the end echo "<li>{$page->title}</li>"; echo "</ul>";

Auf der Stammseite („Home“) würde dies nur den Titel ausgeben, da $page->parents leer wäre.

Zuvor habe ich Ihnen gezeigt, wie Sie Miniaturansichten von Bildern in der Admin-GUI erstellen. Das Erstellen von Miniaturansichten kann auch programmgesteuert mit Hilfe der API erfolgen. Lassen Sie uns alle in das Feld „Bilder“ hochgeladenen Bilder durchlaufen, eine große Bildvariante mit einer Breite von 600 Pixeln und einer proportionalen Höhe und einem 150 × 150 Pixel großen Miniaturbild mit spezifischen Optionen wie Zuschneideeinstellungen und Bildqualität erstellen. Am Ende möchten wir das Miniaturbild mit dem großen Bild verknüpfen. Klingt kompliziert? Es ist nicht.

 $options = array( "quality" => 90, "cropping" => "northwest" ); foreach ($page->images as $image) { $large = $image->width(600); $thumbnail = $image->size(150, 150, $options); echo "<a href='{$large->url}'><img src='{$thumbnail->url}' alt='></a>"; }

ProcessWire ist in dieser Hinsicht ziemlich schlau, weil es Bilder in beliebigen Größen im laufenden Betrieb erstellt und einen Cache von ihnen speichert, sodass die Versionen nur einmal erstellt werden müssen.

Hier ist ein letztes $page Beispiel, um Ihnen zu zeigen, dass sich die API sehr so ​​anfühlt, als würden Sie mit dem DOM interagieren, wenn Sie jQuery verwenden. Holen wir uns das letzte untergeordnete Element der übergeordneten Seite, auf der wir uns gerade befinden.

 $wantedPage = $page->parent->children()->last();

Neben der Variable $page stellt die API eine weitere wichtige Variable zur Verfügung: $pages .

Abrufen aller Seiten mit der $pages Variablen

Mit $pages haben Sie Zugriff auf alle Seiten Ihrer ProcessWire-Installation. Mit anderen Worten, Sie haben von überall aus Zugriff auf alle Ihre Inhalte .

Sie könnten beispielsweise eine versteckte (d. h. im Frontend nicht zugängliche) Einstellungsseite in Ihrer ProcessWire-Installation haben; Sie könnten globale Einstellungen wie den Titel und die Beschreibung Ihrer Website hinzufügen; und Sie können auf diese Inhalts-Blobs aus jeder gewünschten Vorlagendatei zugreifen und sie ausgeben.

 $settings = $pages->get("template=settings"); echo "<h1>{$settings->global_title}</h1>"; echo "<p>{$settings->global_description}</p>";

Ein häufiger Anwendungsfall für eine einzelne Themenseite eines Blogs besteht darin, alle Blogbeiträge anzuzeigen, in denen auf das Thema verwiesen wird. Einfach in die Template-Datei des Themas schreiben:

 $pages->find("template=blog-post, topics=$page");

Hinweis: topics ist ein Feld in der blog-post Vorlage, in dem Sie alle Themenkategorien hinzufügen würden, die für den Blogpost spezifisch sind.

Eine weitere leistungsstarke Einstellung verbirgt sich im Reiter „Familie“. Hier können Sie festlegen, ob mit dieser Vorlage erstellte Seiten untergeordnete Seiten haben dürfen und welche Vorlagen für die übergeordnete Seite bzw. deren untergeordnete Seiten zulässig sind. Auf diese Weise können Sie genau den gewünschten Typ von Vorlagenfamilienhierarchie erstellen. Es ist eine flexible und praktische Möglichkeit (und tatsächlich eine der leistungsstärksten), Ihre Daten zu strukturieren, und es ist eine der vielen Möglichkeiten, wie ProcessWire seine Flexibilität unter Beweis stellt.

Wenden wir uns der Liste der Felder in einer Vorlage zu. Wenn Sie sich den obigen Screenshot ansehen, können Sie sehen, dass die Reihenfolge der Felder der Reihenfolge ähnelt, in der die Felder auf der Startseite gerendert werden. Sie können Felder einfach per Drag-and-Drop verschieben, um die Reihenfolge in der Liste zu ändern und so die Reihenfolge des Erscheinens beim Bearbeiten der Homepage zu ändern.

Sie können auch die Breite eines Felds auf der Seite ändern. Klicken Sie einfach auf ein Feld und ändern Sie es. Lassen Sie uns die Felder „Titel“ und „Überschrift“ nebeneinander platzieren.

Ein weiteres Beispiel dafür, wie Sie die Benutzeroberfläche einer Seite und ihrer Felder anpassen und anpassen können, sind Eingabefeldabhängigkeiten. Mit diesen können Sie die Bedingungen festlegen, unter denen ein bestimmtes Feld im Seiteneditor angezeigt wird oder erforderlich ist. Machen wir das Feld „Überschrift“ nur dann in der Benutzeroberfläche sichtbar, wenn der Benutzer etwas in das Feld „Titel“ eingibt, und markieren wir das Feld „Zusammenfassung“ nur dann als erforderlich, wenn der Benutzer etwas in das Feld „Überschrift“ eingibt:

Hier ist ein Video, das Ihnen zeigt, wie Eingabefeldabhängigkeiten verwendet werden können, um die Benutzererfahrung bei der Arbeit mit ProcessWire zu verbessern:

Die Anzahl, Reihenfolge und das Erscheinungsbild der Felder auf einer Seite liegen vollständig unter Ihrer Kontrolle. Sie können nur ein Feld in eine Vorlage einfügen, gar keins (nicht sehr nützlich) oder mehr als 50 Felder, 100 oder sogar mehr. Sie können sie beliebig anordnen, angeben, welche erforderlich oder sichtbar sind und welche nicht, und angeben, unter welchen Umständen sie erforderlich oder sichtbar sein sollen. Hier glänzt der unparteiische Ansatz von ProcessWire.

Zusammenfassung: Seiten, Felder, Vorlagen

Lassen Sie uns die technische Beziehung zwischen Seiten, Feldern und Vorlagen noch einmal zusammenfassen: Sie fügen Vorlagen Felder hinzu und wählen eine Vorlage aus, wenn Sie eine neue Seite erstellen. Die Felder, die Sie beim Bearbeiten einer Seite sehen, sind die Felder, die Sie der ausgewählten Vorlage hinzugefügt haben.

Eine andere Möglichkeit, dies zu betrachten, wäre eine Analogie aus der Programmierwelt:

• Vorlagen sind wie Klassen.
• Felder sind wie die Eigenschaften von Klassen.
• Seiten sind Instanzen von Klassen.

Sobald Sie diese Konzepte verinnerlicht haben, sind Sie mit allem ausgestattet, was Sie wissen müssen, um in ProcessWire zu entwickeln. Und der Grund dafür ist, dass die Philosophie von ProcessWire ausschließlich auf diesen drei Konzepten basiert. Ziemlich cool, oder?

Vorlagendateien und die API: Ein Paar, das zusammengehört

Der Ort, an dem Sie die im Backend von ProcessWire eingegebenen Daten abrufen und im Frontend ausgeben, ist natürlich das Dateisystem – genauer gesagt der Ordner /site/templates/ Ihrer ProcessWire-Installation. Einer Vorlage kann eine physische PHP-Datei mit demselben Namen zugeordnet sein; Das home Template hätte also eine home.php -Datei im Ordner /site/templates/ .

Hinweis: Wie Sie Ihre Vorlagendateien entwickeln, liegt ganz bei Ihnen. Wenn Sie mit dem WordPress-Stil der Entwicklung vertraut sind, können Sie so weitermachen, wie Sie es gewohnt sind. Wenn Sie ein ziemlich komplexes und umfangreiches Setup haben und eine anspruchsvollere Architektur erstellen möchten, können Sie einen MVC-inspirierten Ansatz verwenden, der genauso gut funktionieren würde. Ryan Cramer hat ein ziemlich gutes Einführungstutorial mit dem Titel „How to Structure Your Template Files“, in dem Sie verschiedene Ansätze zur Entwicklung von Template-Dateien in ProcessWire kennenlernen können.

Der Code, den Sie in eine Vorlagendatei schreiben, besteht hauptsächlich aus grundlegenden PHP-Konstrukten ( if -Bedingungen, foreach -Schleifen, echo -Anweisungen), HTML-Markup und der API von ProcessWire. Die API ist stark von jQuery inspiriert – es ist also wirklich so, als würden Sie den Inhalt, den Sie im Backend eingegeben haben, über Methoden, Selektoren und Verkettungsfunktionen (fließende Schnittstellen) iterieren und durchlaufen. Es ist einfach zu bedienen und sehr ausdrucksstark, genau wie jQuery.

Sehen wir uns zunächst einige einfache Beispiele an, um Ihnen den Einstieg in die API zu erleichtern. Aber bevor wir beginnen, denken Sie daran, den ProcessWire-API-Spickzettel mit einem Lesezeichen zu versehen, einer hilfreichen Referenz mit einem Überblick über alle verfügbaren API-Methoden.

Zunächst wollen wir auf den Inhalt eines Seitenfeldes zugreifen und ihn ausgeben. Die API stellt uns eine Variable zur Verfügung, um damit umzugehen: $page .

Abrufen der aktuellen Seite mit der $page Variablen

Die $page Variable enthält alle Felder einer einzelnen Seite. Dazu gehören integrierte Felder (wie der Name einer Seitenvorlage) sowie die Felder, die Sie als Entwickler der Seitenvorlage hinzugefügt haben.

Öffnen home.php , die Vorlagendatei der home Vorlage, und fügen diese Zeile hinzu:

 echo $page->title;

Dies weist ProcessWire an, das „Title“-Feld der Seite, auf der wir uns gerade befinden („Home“), zu greifen und es auszugeben. Nehmen wir an, wir haben auch ein Feld „Überschrift“ auf der Seite, das wir anstelle des Felds „Titel“ verwenden möchten, aber nur, wenn der Benutzer etwas darin eingegeben hat.

 echo $page->get("headline|title");

Wir haben die get -Methode verwendet, um auf das Feld einer Seite zuzugreifen ( $page->get(“title”) entspricht also im Grunde dem ersten Codebeispiel oben), und wir haben “headline|title” in die get -Methode geschrieben. Dadurch wird ProcessWire angewiesen, zunächst das Feld „Überschrift“ zu prüfen und den Inhalt der Überschrift auszugeben. Wenn das Feld „Überschrift“ jedoch leer ist, wird das Feld „Titel“ als Fallback verwendet.

Die Verwendung von API-Variablen in PHP-Strings ist ebenfalls möglich. Äquivalent sind die beiden folgenden echo -Anweisungen zur Ausgabe der Anzahl der Kinder einer Seite:

 echo "This page has " . $page->numChildren . " children pages."; echo "This page has {$page->numChildren} children pages.";

Holen wir uns die Kinder unserer Stammseite (denken Sie daran, wir befinden uns immer noch in home.php ) und geben Sie sie als Liste von Links aus:

 echo "<ul>"; foreach ($page->children as $child) { echo "<li><a href='{$child->url}'>{$child->title}</a></li>"; } echo "</ul>";

Ein weiteres Beispiel für ein eingebautes Feld (wie children und url im obigen Beispiel) ist das Durchlaufen aller Eltern einer Seite und das Erstellen einer Breadcrumb-Navigation:

 echo "<ul>"; foreach ($page->parents as $parent) { echo "<li><a href='{$parent->url}'>{$parent->title}</a></li>"; } // output the page itself at the end echo "<li>{$page->title}</li>"; echo "</ul>";

Auf der Stammseite („Home“) würde dies nur den Titel ausgeben, da $page->parents leer wäre.

Zuvor habe ich Ihnen gezeigt, wie Sie Miniaturansichten von Bildern in der Admin-GUI erstellen. Das Erstellen von Miniaturansichten kann auch programmgesteuert mit Hilfe der API erfolgen. Lassen Sie uns alle in das Feld „Bilder“ hochgeladenen Bilder durchlaufen, eine große Bildvariante mit einer Breite von 600 Pixeln und einer proportionalen Höhe und einem 150 × 150 Pixel großen Miniaturbild mit spezifischen Optionen wie Zuschneideeinstellungen und Bildqualität erstellen. Am Ende möchten wir das Miniaturbild mit dem großen Bild verknüpfen. Klingt kompliziert? Es ist nicht.

 $options = array( "quality" => 90, "cropping" => "northwest" ); foreach ($page->images as $image) { $large = $image->width(600); $thumbnail = $image->size(150, 150, $options); echo "<a href='{$large->url}'><img src='{$thumbnail->url}' alt='></a>"; }

ProcessWire ist in dieser Hinsicht ziemlich schlau, weil es Bilder in beliebigen Größen im laufenden Betrieb erstellt und einen Cache von ihnen speichert, sodass die Versionen nur einmal erstellt werden müssen.

Hier ist ein letztes $page Beispiel, um Ihnen zu zeigen, dass sich die API sehr so ​​anfühlt, als würden Sie mit dem DOM interagieren, wenn Sie jQuery verwenden. Holen wir uns das letzte untergeordnete Element der übergeordneten Seite, auf der wir uns gerade befinden.

 $wantedPage = $page->parent->children()->last();

Neben der Variable $page stellt die API eine weitere wichtige Variable zur Verfügung: $pages .

Abrufen aller Seiten mit der $pages Variablen

Mit $pages haben Sie Zugriff auf alle Seiten Ihrer ProcessWire-Installation. Mit anderen Worten, Sie haben von überall aus Zugriff auf alle Ihre Inhalte .

Sie könnten beispielsweise eine versteckte (d. h. im Frontend nicht zugängliche) Einstellungsseite in Ihrer ProcessWire-Installation haben; Sie könnten globale Einstellungen wie den Titel und die Beschreibung Ihrer Website hinzufügen; und Sie können auf diese Inhalts-Blobs aus jeder gewünschten Vorlagendatei zugreifen und sie ausgeben.

 $settings = $pages->get("template=settings"); echo "<h1>{$settings->global_title}</h1>"; echo "<p>{$settings->global_description}</p>";

Ein häufiger Anwendungsfall für eine einzelne Themenseite eines Blogs besteht darin, alle Blogbeiträge anzuzeigen, in denen auf das Thema verwiesen wird. Einfach in die Template-Datei des Themas schreiben:

 $pages->find("template=blog-post, topics=$page");

Hinweis: topics ist ein Feld in der blog-post Vorlage, in dem Sie alle Themenkategorien hinzufügen würden, die für den Blogpost spezifisch sind.

Lassen Sie uns ein wenig mehr mit der Selektor-Engine von ProcessWire arbeiten. Lassen Sie mich Ihnen einige Beispiele zeigen, indem ich Sie auf die Demo-Website von ProcessWire verweise, ein Verzeichnis von US-Wolkenkratzern. Die Demo-Website enthält viele Seiten und hat eine interessante Datenmodellarchitektur (dh Dinge wie Architekten, Städte, Gebäude und Orte, die aufeinander verweisen), und es ist ein guter Anwendungsfall, um zu zeigen, was Sie mit Selektoren machen können.

Dieses Beispiel findet alle Wolkenkratzer, die den Ausdruck „Empire State Building“ in ihrer Textkopie erwähnen:

 $pages->get("template=cities")->find("template=skyscraper, body*=empire state building");

Hinweis: Zuerst erhalten wir die Seite mit den cities ; dann erhalten wir alle Seiten mit dem Template skyscraper . Der Grund, warum wir die Methoden auf diese Weise verketten können, liegt darin, dass alle Skyscraper-Seiten untergeordnete Elemente der Seite „Städte“ sind.

Finden wir alle Wolkenkratzer der Architekten Adrian Smith, Eric Kuhne oder William Pereira und sortieren die Ergebnisse nach Höhe aufsteigend:

 $adrian = $pages->get("template=architect, name=adrian-smith"); $eric = $pages->get("template=architect, name=eric-kuhne"); $william = $pages->get("template=architect, name=william-pereira"); $skyscrapers = $pages->find("template=skyscraper, architects=$adrian|$eric|$william, sort=height");

Sie könnten den Code optimieren, indem Sie alle angeforderten Architekten in einem einzigen Schritt finden, anstatt in drei:

 $architects = $pages->find("template=architect, name=adrian-smith|eric-kuhne|william-pereira"); $skyscrapers = $pages->find("template=skyscraper, architects=$architects, sort=height");

Hinweis: Die get -Methode gibt potentiell immer eine Seite zurück; Die find Methode gibt potenziell immer mehrere Seiten zurück.

Sie können den Code weiter überarbeiten, indem Sie Unterselektoren verwenden (ja, Sie können Selektoren innerhalb von Selektoren haben):

 $skyscrapers = $pages->find("template=skyscraper, architects=[name=adrian-smith|eric-kuhne|william-pereira], sort=height");

Andere API-Variablen

$page und $pages sind nicht die einzigen API-Variablen, mit denen Sie arbeiten können. Es gibt noch viele andere, wie $session (um Benutzer an- und abzumelden und auf andere Seiten umzuleiten), $user (um eine Verbindung zu dem Benutzer herzustellen, der gerade die Seite betrachtet) und $config (die für Einstellungen, die für Ihre ProcessWire-Installation spezifisch sind). Schauen wir uns zwei Beispiele an.

Lassen Sie uns zuerst den Benutzer auf die Startseite umleiten:

 $session->redirect($pages->get("template=home")->url);

Und lassen Sie uns etwas tun, wenn der aktuelle Benutzer angemeldet ist:

 if ($user->isLoggedin()) { /* do something */ }

Erweiterung der Funktionalität von ProcessWire mit Modulen

ProcessWire baut auf einer modularen und leicht erweiterbaren Architektur auf, und das zeigt: Jede Installation besteht aus dem ProcessWire-Kern (der Essenz von ProcessWire, der die Grundfunktionalität ermöglicht) und einem Satz vorgefertigter Module (sog. Kernmodule), die darauf sitzen des Kerns und erweitern Sie ihn.

Kern Module

Einige dieser vorgefertigten Module werden standardmäßig installiert und aktiviert, andere werden standardmäßig deinstalliert. Beispielsweise ist das eingebaute Kommentarsystem von ProcessWire ein Modul, das Sie jederzeit ein- oder ausschalten können. Auch Dinge wie das Repeater-Feld , über das wir zuvor gesprochen haben, und die mehrsprachige Unterstützung für Inhalte sind im Grunde nur Module, die Sie installieren können, wenn Sie sie in Ihrem Projekt benötigen.

Other examples of neat little core modules are Page Names , which validates text input when you're typing a page name (automatically transforming, say, umlauts like a to ae ), and Page Path History , which keeps track of past URLs where pages have lived and automatically redirects to the new location whenever an old URL is accessed.

Finding and Installing Modules

The official modules repository is the main spot where you can find and download ProcessWire modules. On a module's page, you will find the description and purpose of the module and links to the respective GitHub repository and support forum. Module authors are highly encouraged to post their modules in the official repository because it has the highest visibility and is the place people think of first when they want to find a ProcessWire module.

Installing a module is as easy as dragging the module's files to the /site/modules/ directory and installing it in the admin GUI. There are other ways to install a module, such as by installing the Modules Manager, which enables you to browse (and install) modules without leaving the admin GUI.

Commercial Modules

While most modules are free, there are a few commercial ones, too. The ones being promoted in ProcessWire's store are by the lead developer, Ryan Cramer. There you will find the following modules:

• ProDrafts enables you to maintain separate draft and live versions of any page. It also provides a comparison and diff tool, as well as automatic saving capabilities.
• ProFields are a group of ProcessWire modules that help you manage more data with fewer fields, saving you time and energy.
• ProCache (among other things) provides an impressive performance boost for your website by completely bypassing PHP and MySQL and enabling your web server to deliver pages of your ProcessWire website as if they were static HTML files.

Don't miss the screenshots and videos on the module pages to get a first impression. This is finely executed software.

There are also commercial modules outside of the official website, such as Padloper, an e-commerce platform built on top of ProcessWire. To be fair, what is definitely missing in the ProcessWire cosmos is a way for module authors to easily publish their commercial modules in a centralized spot.

How Do ProcessWire Modules Generally Compare to WordPress Plugins?

The reason why ProcessWire has so fewer modules than WordPress (approximately 400 versus more than 40,000) is not so much because it is less popular (an understatement, of course), but more because the core itself is already so feature-rich that adding a ton of modules to extend it is simply not necessary. For example, you don't need a module to create a gallery slideshow or to get the first child of something or to generate thumbnails. All of that (and much more) is already covered out of the box.

So, whereas in WordPress your typical method of solving a problem would be to search for a plugin, in ProcessWire you would first look to the tools available in core; in 90% of cases, that would provide you with the solution.

What You Can Build With ProcessWire

Because ProcessWire behaves more like a framework than a CMS (the core is actually a framework, and the CMS is an application built on top of it), the use cases for building things with ProcessWire are pretty broad. You may want to check out some websites powered by ProcessWire (especially the most liked websites).

ProcessWire is a good fit if you want to develop a JSON REST API, an image-resizing app for employees, a front end for managing millions of products (scalability is pretty impressive — you can have literally millions of pages on a single installation), a web application for displaying the financial results of companies, a simple blog, a website for a big university, or just a simple one-page informational website.

Where To Go From Here: There's A Lot To Discover

Naturally, a beginner's guide can't talk about everything the tool has to offer. So, here is a short list of other ProcessWire features, facts, links and tools worth mentioning:

• Check out ProcessWire Weekly and ProcessWire's blog to stay up to date on the latest news.
• ProcessWire has built-in caching mechanisms (for example, a template and markup cache).
• Wireshell is a command-line interface for ProcessWire based on the Symphony Console component.
• Security is a top priority for ProcessWire.
• Visit grab.pw (isn't that the coolest domain name ever?) to download the latest stable version of ProcessWire (ZIP file, 10MB).
• ProcessWire has a small and friendly community. The discussion board is the central place to discuss any questions and problems.
• ProcessWire has good multi-language support. The multi-language modules are part of the prepackaged core modules.
• ProcessWire has a transparent roadmap, and development is very active. There is a new minor release nearly every week.
• See what others have to say about ProcessWire in the reviews section and on alternativeTo. There's also an interesting Quora thread titled “How does ProcessWire compare to WordPress.”
• ProcessWire.tv is a searchable collection of ProcessWire tutorial videos.

Zusammenfassung

ProcessWire is a system that rewards you [for] being curious. We aim to show you how to fish so that you can catch the big fish.

This statement by Ryan Cramer, the creator of ProcessWire, encapsulates what ProcessWire is all about.

I think what resonates with a lot of people is that ProcessWire is a system that goes from simple to complex, not the other way around. It doesn't assume what you want to build, but instead lays a strong, non-opinionated foundation by offering you effective, powerful tools and leaving the rest to you. That conceptual aesthetic has, to me, a certain appeal to it.