In diesem Anfänger-Tutorial erfahren Sie, wie Sie eigene ProcessWire CMS-Designs erstellen. Wir erstellen eine extrem einfache Site, die Vorlagen, Felder, Themenstruktur und PHP-Variablen abdeckt.

Vergessen Sie nicht, sich auf den neuesten Stand zu bringen, indem Sie das erste unserer Tutorials zur Installation und Einrichtung von ProcessWire CMS befolgen.

Wo Sie Ihr ProcessWire-Design finden können

Im Gegensatz zu anderen CMSs wie WordPress verfügt ProcessWire nicht über einen Prozess zur Auswahl von Designs als Teil des Administrators, bei dem Sie durch Drücken einer gut beschrifteten Schaltfläche zwischen Themen wechseln können. Dies ist jedoch nicht unbedingt eine schlechte Sache. ProcessWire verfügt über ein eigenes System: den Ordner „Site / Templates“, der alle Dateien enthält, die mit Ihrem Design verknüpft sind.

Ein leeres Design erstellen

Am besten erstellen Sie ein leeres Design, indem Sie das auswählen Site-Blank Profil während der Installation von ProcessWire (PW). Site-Blank enthält die grundlegendste Site-Struktur in Ihrem Ordner "Site / Templates" - dazu gehören Ordner und Dateien 

• / Skripte
• / Stile
• / fehler 
• home.php
• basic-page.php 
• admin.php

Wenn Sie möchten, können Sie nach der Installation einen neuen Ordner "site / templates" mit Ihren eigenen Dateien erstellen, anstatt mit dem Profil für leere Site zu beginnen. Stellen Sie jedoch sicher, dass mindestens die oben aufgeführten Dateien vorhanden sind.

Processwire Theme-Struktur

Routing

Wenn Sie wissen, wie PW seine Seiten weiterleitet, können wir später unsere benutzerdefinierten Vorlagen erstellen.

Wenn eine PW-Seite angefordert wird (z. B. www.benbyford.com/about), prüft PW die Seite im CMS und prüft, welche Vorlage zugewiesen ist. In diesem Fall habe ich die Vorlage "Basis-Seite" zugewiesen. Die Datei "basic-page.php" innerhalb von "site / templates /" wird gerendert und der angeforderte HTML-Code wird an den Benutzer gesendet (PW ermöglicht auch die Verwendung anderer Formate wie JSON oder XML)..

SpitzeStandardmäßig werden Vorlagen innerhalb von PW mit demselben Namen wie ihre PHP-Vorlagendatei bezeichnet. Sie können jedoch den Namen der Vorlage und die zugehörige Datei jederzeit nach der Erstellung im PW-Administrator ändern.

Als Beispiel fügen wir unserer Datei "home.php" HTML & PHP hinzu:

      
Titel; ?>
   

Gehen Sie nun zu Ihrer Site-URL im Browser und beachten Sie die Titel und h1 sollte nun mit dem Titel Ihrer Homepage gefüllt sein (standardmäßig: Zuhause).

Einschließlich anderer PHP-Dateien

Das Erstellen vieler Vorlagendateien mit sehr ähnlichem HTML ist nicht sehr effizient. Lassen Sie uns also ein paar .inc-PHP-Dateien erstellen, die in jede Vorlage eingefügt werden können. Ein übliches Strukturmuster innerhalb des Themings ist das Erstellen von "head.inc" - und "foot.inc" -Dateien, die zum Erstellen von allgemeinem HTML-Code wie unserem verwendet werden , Navigation, Logo, Fußzeile und Skripte.

Lassen Sie uns unsere "home.php" -Datei erneut bearbeiten, um das obige zu implementieren:

 
Titel; ?>
 

Füge unseren head.inc hinzu:

Und fuß.

Warum Sie den .inc-Dateityp verwenden, von dem Sie hören, dass er gefragt wird? Wenn Sie eine neue Vorlage in PW's Admin hinzufügen, sucht das System im Ordner site / templates / nach neuen .php-Dateien, die noch nicht von einer Vorlage verwendet wurden. Durch die Verwendung des .inc-Dateityps anstelle von .php werden Sie nicht zwischen Vorlagendateien und gewünschten Dateien verwirrt umfassen in deiner Vorlage.

Neue Vorlagen mit dem CMS verknüpfen

Sie können beliebig viele Vorlagen für die Seiten Ihrer PW-Site erstellen, Dreh durch! Lassen Sie uns beispielsweise eine neue Vorlage für eine neue Seite mit dem Namen "Kontakt" erstellen. Ich fange an mit: 

• Dupliziere mein "home.php"Datei und Aufrufen der neuen Datei “contact-page.php ”
  
• Navigieren Sie im PW-Administrator zu Setup> Vorlagen> Neue Vorlage hinzufügen
  
• Wählen Sie Ihre "Kontaktseite.php" ausWählen Sie in der Checkliste "Zuhause" aus.aus der Liste der doppelten Felder, und klicken Sie auf Vorlagen hinzufügen

Der CMS kennt nun Ihre neue Vorlagendatei und wird beim Erstellen einer neuen Seite jetzt als Vorlagenoption angezeigt. Erstellen Sie eine neue Seite unter Ihrem ZuhauseSeite, Nennen Sie es "Kontakt" und wählen Sie unsere neue Kontaktseitenvorlage aus. Sie haben jetzt mindestens zwei aktive Vorlagen in Ihrer Site: "home" und “Kontaktseite".

Tolle! Wir wissen jetzt, wie Sie Vorlagendateien erstellen, sie zu PW hinzufügen und Seiten mit unseren neuen Vorlagen erstellen.

ProcessWire-Variablen

Schließlich möchten wir wissen, wie der PW-Admin in unseren Vorlagen hinzugefügte Inhalte gerendert wird und sogar Vanilla PHP auf unserer Website verwendet wird. Eine meiner liebsten Sachen bei PW ist, dass der Themenkodierer sofortigen Zugriff auf Inhalte über Variablen und eine Reihe nützlicher Funktionen für die einfachsten Funktionen bietet. Was immer Sie nicht haben, können Sie selbst in PHP schreiben, ohne sich Gedanken darüber zu machen, was das System mit Ihrem Code anfangen könnte. Sie müssen auch nicht strengen Klassenstrukturen oder Hooks folgen (ich schaue Ihnen Drupal an). Mit anderen Worten: Sie erhalten eine Reihe von Tools und können Ihnen dann aus dem Weg gehen.

Eine zusammenfassende Liste aller Variablen und Funktionen in PW finden Sie im Processwire API Cheatsheet. Weitere Erläuterungen finden Sie in den PW-Variablendokumenten.

Lassen Sie uns einige der wichtigsten Variablen kurz erläutern, damit unsere Vorlagen funktionaler werden.

Wenn Sie unser home.php erneut bearbeiten, fügen Sie den Seitentitel, den Hauptteil und den Inhalt der Seitenleiste mithilfe von hinzu $ Seite Variable. $ Seitegibt Ihnen Zugriff auf alle Inhalte, die auf diese Seite im PW-Administrator hochgeladen wurden.

 
 ". $ page-> title.""; // Ausgangstext kopieren echo $ page-> body;?> 
 
 Seitenleiste; ?> 
 

Fügen Sie unserem head.inc eine einfache Navigation hinzu, indem Sie die $ Seiten Variable. $ Seiten ermöglicht Ihnen den Zugriff auf andere Seiten Ihrer Website, die Sie dann nach Inhalt abfragen können.

Nächste Schritte

Nun kennen Sie einige der Grundlagen des Themings in PW. Ich möchte Sie dazu auffordern, sich einige der anderen Site-Profile anzusehen, die im PW-Download enthalten sind, um zu sehen, wie sie strukturiert sind. Meines Erachtens kann es auch von großem Nutzen sein, zu experimentieren und Feedback von der Community zu erhalten.

SpitzeAuf der Modulseite finden Sie viele Module, die Ihnen bei der Erstellung Ihrer Site helfen können. Wenn Sie ein Liebhaber von LESS und der Minimierung von Skripts sind, empfehle ich das AIOM-Modul.

Achten Sie bei Envato Tuts natürlich auf zukünftige Tutorials+.