7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Eine 15-minütige surreale CMS-Integration

Scroll to top
Read Time: 11 mins

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

Sie haben Ihre Website bereits erstellt, aber wie werden Sie sie pflegen? In diesem Tutorial erfahren Sie, wie Sie Ihre Website in weniger als 15 Minuten in Surreal CMS integrieren. Wir werden einige Fehler durchgehen und Sie in kurze Zeit praktisch jede statische Website bearbeiten lassen.


Überblick

SurrealCMSSurrealCMSSurrealCMS

Sie fragen sich wahrscheinlich, wie Sie Ihre gesamte Website in nur 15 Minuten in ein CMS integrieren können. Die Wahrheit ist, dass es mit dem jüngsten Trend zu "leichteren" Content-Management-Systemen einfacher als je zuvor ist, kleine bis mittelgroße statische Websites zu erhalten und zu betreiben.

Was ist ein leichtes CMS? Für dieses Tutorial definiere ich es als ein benutzerfreundliches, unauffälliges Content-Management-System, das Sie nicht installieren müssen. Das Schöne an diesen Systemen ist, dass Sie sie nicht einmal selbst hosten müssen, weshalb die Integration sehr wenig Zeit in Anspruch nimmt.

Es gibt tatsächlich eine Handvoll dieser CMS-Produkte, einschließlich CushyCMS, Pagelime und SimpleCMS. Die meisten dieser Systeme arbeiten nach dem gleichen Grundprinzip: Sie fügen fast jedem HTML-Element class="something" hinzu, verknüpfen Ihre Website mit ihrem System und fertig. Das Beste ist, dass jedes System eine kostenlose Version bietet.

Obwohl jedes leichte CMS-Produkt seine Vor- und Nachteile hat, habe ich mich aufgrund des umfangreichen Funktionsumfangs und der einfachen Benutzeroberfläche für die Zusammenarbeit mit Surreal CMS entschieden. Sie werden gleich sehen, was ich meine, aber in der Zwischenzeit ist hier der allgemeine Prozess der Integration in jedes leichte CMS:

  • Erstellen Sie Ihre Website
  • Verknüpfen Sie es mit dem CMS
  • Webseiten aktivieren
  • Fügen Sie einen oder mehrere Editoren hinzu
  • Beginnen Sie mit der Bearbeitung

Um Sie mit dem Tool vertraut zu machen, mit dem wir arbeiten werden, finden Sie hier einen kurzen Einblick in den Bearbeitungsbildschirm der Webseite von Surreal CMS:


Entwurfsüberlegungen

Bevor Sie mit einem leichten CMS arbeiten, sollten Sie sich immer Gedanken über die Zeichencodierung und die Art und Weise machen, wie Sie auf Bilder und andere Ressourcen verlinken. Surreal CMS bevorzugt die UTF-8-Zeichencodierung, die so einfach ist wie das Hinzufügen des folgenden Meta-Tags zum Abschnitt <head > jeder Webseite:

Es ist auch wichtig, dass Sie auf eine Weise mit Dokumenten, Bildern und anderen Ressourcen verknüpfen, die das CMS verstehen kann. Surreal CMS funktioniert am besten, wenn Sie root-relative oder absolute Verknüpfungen verwenden:

Das Letzte, aber wahrscheinlich Wichtigste, was Sie berücksichtigen müssen, bevor Sie Ihre Website mit Surreal CMS verknüpfen, ist die Platzierung Ihrer Inhaltsregionen. Hier ist ein hervorragendes Beispiel für eine sehr einfache Webseite mit einem Navigationsmenü, einer Seitenleiste und einem Hauptinhaltsbereich:

Möglicherweise haben Sie bemerkt, dass ich der Seitenleiste und dem Hauptinhaltsbereich bearbeitbare Klassen hinzugefügt habe. Auf diese Weise weiß das CMS, welche Abschnitte Ihrer Seite Sie bearbeiten können sollen. Sie können die bearbeitbare Klasse zu fast jedem HTML-Tag hinzufügen und auf jeder Seite so viele haben, wie Sie möchten.

Eine andere Sache, die Sie vielleicht bemerkt haben, war, dass die Navigation aus einer separaten Datei über PHP aufgenommen wird. Mit Surreal CMS können Sie mit solchen enthaltenen Dateien arbeiten, sodass Sie die Navigation Ihrer gesamten Site aktualisieren können, ohne jede Seite einzeln bearbeiten zu müssen.

Sobald Sie Ihre Seiten vorbereitet und bearbeitbare Regionen eingerichtet haben, können Sie Ihre Website in Surreal CMS integrieren.


Hinzufügen Ihrer Website zum CMS

Surreal CMS bietet sowohl kostenlose als auch kostenpflichtige Konten. Das kostenlose Konto unterliegt nur sehr wenigen Einschränkungen und wird für dieses Tutorial mehr als ausreichend sein. Gehen Sie einfach auf ihre Website und erstellen Sie ein kostenloses Konto.

Melden Sie sich nach dem Erstellen Ihres Kontos beim CMS unter http://edit-content.com/ an. Dies ist das Gateway zur Surreal CMS-Anwendung.

Nachdem Sie sich angemeldet haben, klicken Sie auf die Schaltfläche Website hinzufügen. Hier ist das Formular, das Sie sehen werden:

Geben Sie die URL, den Server (normalerweise ftp.your-domain.com), den FTP-Benutzernamen und das FTP-Passwort Ihrer Website ein. Sie können überprüfen, ob Sie alles richtig eingegeben haben, indem Sie auf Verbindung testen klicken.

Für das Website-Stammverzeichnis klicken Sie am besten auf die Schaltfläche Browsen und verwenden Sie das Browsing-Tool. Im Wesentlichen ist Ihr Website-Stammverzeichnis der Ordner, der Ihre Homepage enthält. Es ist wichtig, dass dieser Ordner der eigentliche Ordner ist, in dem sich Ihre Homepage befindet, damit das CMS URLs ordnungsgemäß Bildern und anderen Dateien zuordnen kann.

Wenn Sie benutzerdefinierte Pfade für Dokumente, Bilder und Mediendateien angeben möchten, wählen Sie die Option Erweitert. Wenn Sie benutzerdefinierte Pfade festlegen, wird dem CMS mitgeteilt, wo andere Personen, die Ihre Website bearbeiten, Dateien hochladen dürfen. Im Moment können Sie diese leer lassen.


Aktivieren Ihrer Webseiten

Nachdem Ihre Website zum CMS hinzugefügt wurde, müssen Sie als Nächstes Ihre Webseiten aktivieren. Bei anderen Light CMS-Produkten kann dies Ihre Zeit etwas belasten, aber Surreal CMS verfügt über eine nette Scanfunktion, die Webseiten mit nur einem Klick automatisch aktiviert.

Um Seiten zu aktivieren, wählen Sie Ihre Website aus der Liste aus:

Wählen Sie dann Webseiten aktivieren aus. Der folgende Dialog wird angezeigt:

Wählen Sie die Seite(n) aus, die Sie im CMS bearbeiten möchten. Wenn Sie sie auswählen, werden sie einzeln im Hintergrund angezeigt. Als Verknüpfung können Sie zu einem beliebigen Verzeichnis auf Ihrer Website navigieren und auf Nach bearbeitbaren Seiten suchen klicken. Dadurch wird das CMS angewiesen, alle Seiten im aktuellen Verzeichnis zu aktivieren, die das Attribut class="editable" enthalten. Wenn Sie fertig sind, wählen Sie Fertig.

Standardmäßig verwendet jede Seite, die Sie aktivieren, den <title> der Seite als Beschriftung. Sie können dies leicht in etwas CMS-freundlicheres ändern, indem Sie auf Label bearbeiten klicken. Beispielsweise können Sie die Bezeichnung für index.php in "Homepage" und die Bezeichnung für nav.php in "Navigation" ändern.


Aktualisieren Sie Ihre Inhalte

Ob Sie es glauben oder nicht, der schwierige Teil ist vorbei. Jetzt geht es nur noch darum, hineinzukommen und Inhalte zu bearbeiten. Ein Grund, warum ich Surreal CMS so sehr mag, ist, dass es den größten Teil des Setups rationalisiert. Lassen Sie uns nun mit der Bearbeitung von Inhalten fortfahren.

Nachdem Sie eine oder mehrere Webseiten aktiviert haben, beginnen Sie im nächsten Schritt mit der Bearbeitung. Wählen Sie einfach eine der Seiten aus, die Sie aktiviert haben, indem Sie auf die entsprechende Seitenbezeichnung klicken. Dadurch gelangen Sie in den Webseiten-Editor, in dem Sie die meiste Zeit mit diesem großartigen CMS verbringen.

Im Webseiten-Editor sehen Sie vier Registerkarten:

  • Inhalt - Hier finden Sie alle Ihre Inhaltsbereiche.
  • Eigenschaften - Hier können Sie den Seitentitel, die Schlüsselwörter und die Beschreibung bearbeiten.
  • Verlauf - Zeigen Sie jede Revision dieser Seite an, die bis zu 90 Tage lang veröffentlicht wird.
  • Editoren - Zeigen Sie eine Liste aller Editoren an, die Zugriff auf die Seite haben.

Angenommen, Ihre Seite verfügt über mindestens eine bearbeitbare Region, wird auf der Registerkarte Inhalt Folgendes angezeigt:

In diesem Beispiel gibt es zwei bearbeitbare Bereiche, über die wir bereits gesprochen haben: sidebar und main_content. Sie werden feststellen, dass das CMS die durch Unterstriche getrennten IDs in Kleinbuchstaben für die Ästhetik in durch Leerzeichen getrennte Beschriftungen in Camel Case konvertierte. Wenn Sie mehr als einen bearbeitbaren Bereich auf einer Seite haben, können Sie zwischen diesen wechseln, indem Sie auf die entsprechende Schaltfläche klicken.

Zu diesem Zeitpunkt funktioniert die Bearbeitung genauso wie in vielen anderen Content-Management-Systemen und Textverarbeitungsanwendungen. Sie können Text formatieren, die Ausrichtung ändern, Bilder, Listen usw. einfügen. Surreal CMS verfügt sogar über einen integrierten Dateimanager, mit dem Sie Dateien und Ordner anzeigen, hochladen, umbenennen und löschen können. Um das Ganze abzurunden, gibt es auch einen Bildeditor, mit dem Sie Bilder in der Größe ändern, zuschneiden, drehen und spiegeln können.

Abhängig von der Art des Elements, zu dem Sie class="editierbar" hinzufügen, bietet Surreal CMS ein geeignetes Bearbeitungswerkzeug. Als Beispiel sehen Sie hier, wie ein bearbeitbares <img> aussieht:

Die Schaltfläche Bild bearbeiten startet den Bildeditor, über den ich zuvor gesprochen habe. Es ist wirklich einfach zu bedienen, so dass Sie keine Probleme haben sollten, Ihre Fotos zu manipulieren. So sieht es aus:

Sobald Sie mit der Bearbeitung fertig sind, können Sie eine Vorschau Ihrer Änderungen anzeigen, indem Sie auf Vorschau klicken. Ein neues Fenster wird geöffnet und Sie sehen Ihre Seite genau so, wie sie bei Veröffentlichung angezeigt wird. Wenn Sie mit Ihren Änderungen zufrieden sind, werden sie durch Klicken auf Veröffentlichen auf Ihrer Website gespeichert.


Lassen Sie zu, dass andere Personen Ihre Website bearbeiten

Wäre es nicht schön, wenn Sie jetzt wissen, wie Sie Ihre Website einrichten und selbst bearbeiten können, auch anderen Personen Zugriff zu gewähren? Dies ist besonders nützlich für Designer, die Kunden nur eingeschränkten Zugriff auf die Bearbeitung ihrer eigenen Websites gewähren möchten, und es ist einfach einzurichten.

Wählen Sie zunächst an einer beliebigen Stelle im CMS die Registerkarte Editoren aus und klicken Sie auf Editor hinzufügen. Das folgende Formular wird angezeigt:

Geben Sie einfach den Namen und die E-Mail-Adresse der Person ein, um zu beginnen. Wählen Sie dann die Website aus, denen er oder sie zugewiesen werden soll. Wenn Sie möchten, können Sie den Abschnitt Erweitert öffnen und dem Editor erlauben, Seiten zu klonen, Seiten zu löschen und Seiteneigenschaften zu bearbeiten. Sie können von hier aus auch jede Option in der Rich-Text-Editor-Symbolleiste aktivieren oder deaktivieren.

Wenn Sie alle erforderlichen Informationen eingegeben haben, wählen Sie Editor hinzufügen. Der Benutzer wird dem CMS hinzugefügt. Standardmäßig wird eine E-Mail mit ihrem Benutzernamen und Passwort an sie gesendet. Sie können dies jedoch deaktivieren, und das CMS zeigt Ihnen das temporäre Kennwort an, das Sie manuell eingeben können.

Es gibt einige Dinge, die Sie über Editor-Konten wissen müssen. Erstens haben sie nicht Zugriff auf alles, was Sie als Designer tun - Redakteure haben nur Zugriff auf die Websites und Berechtigungen, die Sie ihnen zuweisen. Zweitens haben Redakteure keinen Zugriff auf Dinge wie die Bearbeitung von ganzseitigem Quellcode und das Tidy-Tool, über das wir in Kürze sprechen werden. Der beste Weg, um den Unterschied zwischen einem Designer- und einem Editor-Konto zu erkennen, besteht darin, sich einen Test-Editor mit einer alternativen E-Mail-Adresse zu erstellen.

Bevor wir fortfahren, sollten Sie noch eine weitere Funktion über Editoren kennen. Sie können sie daran hindern, bestimmte Seiten pro Benutzer zu bearbeiten. Öffnen Sie einfach eine Seite zum Bearbeiten und wählen Sie die Registerkarte Editoren. Neben Ihrem Editor befindet sich eine Option zum Deaktivieren der Bearbeitung. Wenn Sie darauf klicken, kann der Benutzer die aktuelle Seite nicht bearbeiten.


Weitere praktische Funktionen

Bisher haben wir alles von der Integration von Surreal CMS in Ihre Website bis zur Bearbeitung von Seiten behandelt. Der Spaß hört hier jedoch nicht auf. Hier ist eine Liste von Funktionen, die Sie nutzen können, wenn Sie sich eingehender mit den Angeboten von Surreal CMS befassen:

Klonen von Webseiten

Sie können neue Seiten erstellen, indem Sie vorhandene duplizieren. Dies ist besonders nützlich, da Sie eine oder mehrere leere Vorlagenseiten einrichten und Ihre Benutzer nach Bedarf Seiten erstellen lassen können. Sie können dies auch für jeden Benutzer aktivieren oder deaktivieren, damit erfahrene Redakteure mehr Kontrolle über die Site haben.

Styling des Rich-Text-Editors

Wenden Sie Stile von Ihrer Website auf den Rich-Text-Editor an, um Benutzern ein ähnliches Erscheinungsbild wie der Website zu verleihen. Um auf diese Funktion zuzugreifen, wählen Sie die Registerkarte Websites an einer beliebigen Stelle im CMS und wählen Sie eine Website aus. Sie sehen eine Schaltfläche mit der Bezeichnung Editor-Stile ändern.

Bearbeiten von CSS-, JavaScript- und XML-Dateien

Sie können Stylesheets, Skripte und XML-Dateien wie jede andere Webseite aktivieren. Natürlich bearbeiten Sie den Rohquellcode, sodass Sie möglicherweise unerfahrene Benutzer daran hindern möchten, auf diese Dateitypen zuzugreifen, wenn Sie sie aktivieren.

Bearbeiten des vollständigen HTML-Quellcodes

Während Sie eine Webseite bearbeiten, sehen Sie eine Schaltfläche mit der Bezeichnung "Inhaltsbereiche bearbeiten". Auf diese Weise können Sie auf den vollständigen Quellcode der Seite zugreifen. Redakteure haben keinen Zugriff auf dieses Tool.

Reparieren von unordentlichem HTML-Code mit Tidy

Surreal CMS verfügt über ein integriertes Tool, das die beliebte HTML Tidy-Bibliothek verwendet. Dies ist nützlich, um verschachtelte Tags oder ungültigen HTML-Code zu reparieren, die beim Bearbeiten Probleme verursachen können. Sie können auf dieses Tool über die vollständige Quellcode-Bearbeitungsseite zugreifen.

Editor-Aktivität anzeigen

Sie können sehen, was Ihre Redakteure vorhatten! Dies schließt ein, auf welche Seiten sie zugegriffen haben, wann sie bearbeitet wurden und sogar zu welchen Zeiten sie sich beim CMS angemeldet haben. Um diese Informationen anzuzeigen, wählen Sie die Registerkarte Editoren an einer beliebigen Stelle im CMS aus und wählen Sie einen Editor aus. Klicken Sie auf den Namen des Editors, um dessen letzte Aktivität anzuzeigen.

PRO Funktionen

Surreal CMS kann kostenlos für bis zu drei Websites verwendet werden. Danach werden Sie gebeten, 25 USD pro Monat für ihren kostenpflichtigen Service zu zahlen, aber Pro-Konten bieten noch einige weitere nützliche Funktionen. Sie können beispielsweise von Ihrer eigenen Domain oder Subdomain (d. H. Cms.your-domain.com) auf das CMS zugreifen.

Mit einem Pro-Konto können Sie auch Ihr eigenes Logo hochladen und das Thema anpassen. Dies ist ideal für Designer, die das CMS als Lösung für ihre Kunden verwenden möchten. Hier ist ein Beispiel dafür, was Sie erwarten können, wenn Sie das CMS als Ihr eigenes brandmarken:


Zusätzliche Ressourcen

Nachdem Sie alle Grundlagen (und auch einige fortgeschrittene Tipps!) Kennen, finden Sie hier einige nützliche Ressourcen für die Arbeit mit Surreal CMS:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.