Haupt / Wie Man

Verwandeln Sie HTML mit konkreten5 in eine CMS-Site

Dieser Artikel erschien zuerst in Ausgabe 233 of .net magazine - das weltweit meistverkaufte Magazin für Webdesigner und Entwickler.

Die meisten Designer, Entwickler und Kunden tendieren eher zu bekannten Content-Management-Systemen (CMS) wie WordPress oder Joomla, als sich für eine ihnen fremde Plattform zu entscheiden.

Wie unterscheidet sich konkrete5?

Bei konkreten5 besteht ein wesentlicher Unterschied darin, dass Sie Inhalte auf der Seite bearbeiten können, die Sie in Ihrem Browser anzeigen. Diese Funktionalität allein ist ein wertvolles Verkaufsargument, insbesondere für Ihre weniger internetaffinen Kunden. Ihre Kunden werden es genießen, Inhalte zu bearbeiten und zu ihrer Website hinzuzufügen, und zufriedene Kunden sorgen für ein profitables Geschäft.

Diese Benutzerfreundlichkeit beeinträchtigt jedoch nicht die Funktionalität. Das native Framework ist zwar unglaublich leistungsfähig, aber auch sehr erweiterbar. Das folgende Tutorial zeigt Ihnen, wie Sie Ihren HTML-Code in kürzester Zeit in eine vollwertige CMScrete5-Website verwandeln können.

Einstieg

In diesem Tutorial wird davon ausgegangen, dass Sie die Frontend-Seiten Ihrer Website bereits in HTML erstellt haben und alle CSS, Inhalte und Bilder bereit haben. Je häufiger Sie konkrete5 verwenden, desto geschickter werden Sie darin, das gesamte CSS im Voraus für die verschiedenen Funktionen und Add-Ons einzurichten. Sie müssen jetzt ein Konto einrichten und Laden Sie die neueste Version voncrete5 herunter . Wir empfehlen, ein Konto bei konkreten5 zu registrieren, damit Sie Ihre Websites über Ihren eigenen Projektbereich verwalten können. Laden Sie alle Ihre Dateien auf Ihren Server oder (L) AMP-Stack hoch und richten Sie eine saubere Datenbank ein. Um die Systemanforderungen für Beton5 herauszufinden, überprüfe hier .

Auf dem Installationsbildschirm voncrete5 werden alle Servereinstellungen hervorgehoben, die Sie möglicherweise ändern müssen. Überprüfen Sie diese sorgfältig, bevor Sie mit einem neuen Dokument beginnen

Schritt 1: Installieren Sie Beton5

Öffnen Sie Ihren Browser und geben Sie die URL ein, auf der sich die Site-Dateien gerade befinden. Sie erhalten einen Installationsbildschirm, auf dem alle noch erforderlichen Fehler oder Konfigurationen angezeigt werden. Wenn Sie auf der ganzen Linie grüne Häkchen haben, klicken Sie auf Fahren Sie mit der Installation fort Taste. Geben Sie im nächsten Bildschirm Ihre Datenbankinformationen ein und erstellen Sie einen Benutzernamen und ein Kennwort. Wenn Sie möchten, können Sie den mit konkreten5 gelieferten Beispielinhalt installieren. Andernfalls wählen Sie leere Seite . Installieren Sie Beton5. Bewegen Sie den Mauszeiger nach der Installation über die Instrumententafel Klicken Sie auf die Schaltfläche in der oberen Bearbeitungsleiste und wählen Sie Beton verlängern5 . Verbinden Sie die Site mit dem von Ihnen registrierten Konto.

Schritt 2: Einrichten Ihrer Themenstruktur

konkrete5 arbeitet mit Themen und Seitentypen (Seitenvorlagen). Erstellen Sie einen Ordner im Themenordner der obersten Ebene und geben Sie ihm einen für Ihre Website relevanten Namen. In diesem Fall rufen wir den Ordner auf clarity_law .

Die klare und einfach gestaltete Themenstruktur voncrete5 macht es selbst für den am wenigsten erfahrenen Entwickler leicht verständlich

Erstellen Sie in diesem Ordner die folgenden Dateien und Ordner: description.txt , ein Ordner namens elements (darin werden die Dateien erstellt header.php und footer.php ), home.php , default.php , ein Ordner namens Bilder , right_sidebar.php (Dies ist im Wesentlichen Ihre Hauptvorlage für Unterseiten), screen.css (Ihre Haupt-CSS-Datei), thumbnail.png , typography.css (Platzieren Sie alle Ihre Schriftstile darin, damit der Editor voncrete5 sie aufnehmen kann.) und schließlich a view.php Datei. Unser Design verwendet auch eine benutzerdefinierte Schriftart, in diesem Fall Museo. Legen Sie einen Ordner namens ab Schriftarten in das Themenverzeichnis und erstellen Sie eine separate CSS-Datei für Ihre Schriftarten.

Schritt 3: Einrichten der Dateien

Zuerst bearbeiten description.txt . Dies wird verwendet, um den Vorlagennamen im Administrationsbereich anzuzeigen. Normalerweise setzen wir den Namen des Kunden in die erste Zeile und eine 'Website erstellt von ...' in die zweite Zeile. Speicher die Datei. Als nächstes erstellen / öffnen Sie die thumbnail.png Datei im Bildeditor Ihrer Wahl und erstellen Sie eine Grafik für Ihr Thema. Dies sollte auf 120x90px eingestellt sein. Speichern Sie Ihre Datei. Kopieren Sie alle Ihre Website-Bilder in den Bilderordner und alle Schriftarten, falls vorhanden, in den Schriftarten Mappe.

Öffne dein screen.css Datei und kopieren und fügen Sie alle Ihre CSS, außer den Schriftstilen ( h1 , h2 , p Tags und so weiter) in diese Datei. Speichern. Öffne dein typography.css Datei und kopieren Sie und fügen Sie alle Ihre Schriftstile in diese Datei ein. Speichern. Wenn Sie benutzerdefinierte Schriftarten haben, öffnen / erstellen Sie eine Datei mit dem Namen fontface.css und geben Sie die wichtigsten @ fontface-Stile CSS ein und verknüpfen Sie sie mit Ihrem Schriftarten Mappe. Wenn Sie @ font-face nicht verwenden, lesen Sie bitte die Dokumentation für das von Ihnen ausgewählte System.

Öffnen Sie die beiden Dateien in der Elemente Mappe, header.php und footer.php . Innerhalb header.php Geben Sie den folgenden Code ein:

/fontface.css' />/screen.css' />/typography.css' />

Damit Ihr CSS ordnungsgemäß mit dem Themenordner Ihrer Site verknüpft werden kann, müssen Sie über Folgendes verfügen getThemePath ()?> / vor dem Namen Ihrer CSS-Datei. Sie können den DOCTYPE auch ändern, wenn Sie weitere Metainformationen benötigen und hinzufügen. Fügen Sie jedoch keinen Metatitel, keine Beschreibung oder keine Schlüsselwörter hinzu, da Sie dies mit konkreten5 tun Seiteneigenschaften Abschnitt, sobald Sie im Administrationsbereich Ihrer Website angemeldet sind. Speichern Sie diese Datei. Wir werden auf die zurückkommen footer.php Datei.

Durch einfaches Ersetzen Ihrer Inhalte durch einfache PHP-Tags macht konkrete5 diese automatisch zu bearbeitbaren Bereichen

Schritt 4: Einrichten des Haupt-HTML

Nehmen Sie nun Ihr HTML und machen Sie es konkret5-bereit. Dazu müssen Sie drei Arten von PHP-Tags kennen, damit Bereiche Ihrer Site bearbeitet werden können. Diese sind:

inc('elements/your-file.php'); ?>

Dies wird verwendet, um die Kopf- und Fußzeilendateien einzuschließen.

display($c); ?>

Dies wird für globale Bereiche auf der Site verwendet. Beispielsweise wird das Firmenlogo auf jeder Seite angezeigt. Verwendung der GlobalArea Mit dem Tag können Sie Inhalte einmal eingeben und sie werden auf der gesamten Website angezeigt.

display($c); ?>

Dies wird für bearbeitbare Bereiche verwendet, die nicht global sind.

Öffnen Sie Ihr Homepage-HTML in einem Editor Ihrer Wahl. In diesem Fall verwenden wir Dreamweaver. Öffnen home.php und fügen Sie den Code aus Ihrer Homepage-Datei ein. Löschen Sie alle Code und ersetzen durch:

inc('elements/header.php'); ?>

Ersetzen Sie alle Inhalte, die als global gelten würden, durch Anzeige ($ c); ?> . Ersetzen Name des bearbeitbaren Bereichs mit dem Namen des Inhalts, den Sie ersetzen. Für das Clarity Law-Design werden das Logo, die sozialen Symbole, die Telefonnummer, die Hauptnavigation, der Slogan, die Schaltfläche zum Aufrufen von Aktionen, der Twitter-Header, der Twitter-Feed, das Kontaktformular, die Kontaktdetails und fünf Fußzeilenspalten in globale Bereiche unterteilt. Für andere nicht globale Aspekte, die bearbeitet werden sollen, ersetzen Sie Ihre Inhalte durch Anzeige ($ c); ?> . Wieder ersetzen Name des bearbeitbaren Bereichs mit dem Namen des Inhalts. Wir haben verwendet Einführungstext , Diashow , und Main . (Beton5 erkennt Main als Hauptinhaltsbereich: Wir empfehlen, dies zu verwenden). Speichern Sie Ihre Datei.

Sie können verschiedene Themen installieren und diese auf Ihrer Website verwenden, sodass Sie jeder Seite ein anderes Thema geben können, wenn Sie möchten

Öffnen footer.php liegt in den Elemente Mappe. Innerhalb home.php , markieren und schneiden Sie den gesamten Fußzeilencode, aber behalten Sie das Ende und Stichworte. Fügen Sie dies in Ihre ein footer.php Datei. Als Nächstes fügen wir einen Code ein, der das Zeichen in einer Schaltfläche anzeigt, mit der Benutzer sich anmelden und die Website bearbeiten können. Geben Sie in der Fußzeile über einem der bearbeitbaren Bereiche den folgenden Code ein:

display($c); ?>        isRegistered()) { ?> url('/profile') . ''>' . $u->getUserName() . ' '; } else { $userName = $u->getUserName(); } ?> %s .', $userName)?>  '>    '>

Geben Sie abschließend die folgende Codezeile am Ende des ein footer.php Datei:

Speichern Sie Ihre footer.php und schließen. Zurück in home.php , eingeben:

inc('elements/footer.php'); ?>

Dies schließt Ihre ein footer.php Datei. Speichern. Entweder duplizieren home.php oder kopieren Sie den Code und fügen Sie ihn ein default.php . Speichern. Für Ihre Unterseiten haben Sie möglicherweise ein anderes Layout als für Ihre Homepage. Befolgen Sie daher den gleichen Vorgang wie in Schritt 5. Für das Klarheitsgesetz verwenden wir eine Vorlage auf der gesamten Website, sodass Sie entweder duplizieren können home.php und umbenennen right_sidebar.php oder kopieren Sie den Code und fügen Sie ihn in diese Datei ein. Speichern. Zum Schluss öffnen view.php . Diese Datei wird für Seiten verwendet, die automatisch von konkreten5 generiert werden und für die keine separate benutzerdefinierte Vorlage erforderlich ist. Dies kann beispielsweise für die Anmeldeseite und die nicht gefundene Seite verwendet werden. Fügen Sie Ihren home.php-Code in die view.php ein. Entweder über oder unter dem Anzeige ($ c); ?> PHP-Tag, geben Sie den folgenden Code ein:

Speichern Sie Ihre Datei. Laden Sie Ihr Themenverzeichnis auf Ihren Server hoch.

Schritt 5: Aktivieren Sie Ihr Thema

Besuchen Sie die Homepage Ihrer Installation von Beton5 und rollen Sie über die Instrumententafel Schaltfläche in der oberen Leiste des Browserfensters. Klicke auf das Themen Verknüpfung. Ihnen wird das Themenauswahlfenster angezeigt. Drücke den Installieren Schaltfläche neben Ihrem neu erstellten Thema. Das nächste Fenster zeigt die Dateien, die installiert werden. Klicken OK . Jetzt müssen Sie es aktivieren. Drücke den Zurück zu den Themen Klicken Sie dann auf die Schaltfläche aktivieren Sie Schaltfläche neben Ihrem Thema. Sie werden gefragt, ob Sie das Thema auf der gesamten Website aktivieren möchten. Klicken OK . Das ist es. Sie haben jetzt Ihr HTML in eine inhaltsverwaltete Website verwandelt!

Um die Bereiche, die vom Benutzer bearbeitet werden können, werden gepunktete Linien angezeigt, damit der weniger erfahrene Benutzer leichter sehen kann, wo Änderungen vorgenommen werden können

Schritt 6 Hinzufügen von Inhalten

Jetzt können Sie Ihrer Site Inhalte hinzufügen. Zuerst würde ich die Bilder Ihrer Website (z. B. Firmenlogo und Diashow-Bilder) in konkrete5 hochladen. Rollen Sie über die Instrumententafel Schaltfläche und wählen Sie Dateimanager . Klicken mehrere hochladen und dann Dateien hinzufügen im Popup-Fenster. Navigieren Sie zum Bildordner und wählen Sie claritylaw-scotland.jpg und temp-image01-05.jpeg . Upload starten. Kehren Sie nach dem Hochladen zum Hauptfenster des Dateimanagers zurück, und Sie sehen eine Liste aller Bilder. Aktivieren Sie das Kontrollkästchen neben allen temporären Bilddateien und wählen Sie in der Dropdown-Liste aus Sets . Klicken Neues Set hinzufügen und nenne das Diashow . Klicken aktualisieren .

Bewegen Sie den Mauszeiger über das Dashboard und wählen Sie Stapel . Mit Stacks können Sie Blöcke an mehreren Stellen auf Ihrer Site wiederverwenden. Da wir unserem HTML-Code globale Bereiche zugewiesen haben, sollte eine Liste der bereits vorhandenen globalen Stapel angezeigt werden. Klicke auf das Logo stapeln und dann Block hinzufügen . Wir möchten Inhalte hinzufügen, wählen Sie also die aus Inhaltsblock . Dies zeigt einen TinyMCE-Editor an. Klicken Bild hinzufügen und wählen Sie das Logo aus, das wir zuvor hochgeladen haben. Klicken Hinzufügen . Klicken Sie in der Stapelliste auf den Tagline-Stapel und dann erneut auf Block hinzufügen und auswählen Inhaltsblock . Fügen Sie Ihren Text in den Editor ein. Sie können Ihre Schriftstile auswählen, wenn Sie dies wünschen. Hier behalten wir sie jedoch als Absatz-Tag bei. Klicken Hinzufügen . Fügen Sie den Rest Ihres Inhalts mithilfe des Inhaltsblocks hinzu, abgesehen von Kontakt Formular , Twitter-Feed und Header Nav Stapel.

Wenn der gesamte globale Inhalt vorhanden ist, wählen Sie Header Nav von Ihrer Stapelliste. Wir wollen das hinzufügen Auto Nav Block. Von hier aus haben Sie eine Reihe von Optionen, wie Ihre Navigation angezeigt werden soll. Wenn Ihre Site über ein Dropdown-Menü verfügt, können Sie festlegen, wie viele Ebenen von untergeordneten Seiten angezeigt werden sollen. Wir werden die Standardeinstellungen verwenden, also klicken Sie auf Hinzufügen . Klicken Sie anschließend auf Twitter-Feed Stapel. Abhängig davon, wie Sie Ihre Twitter-Feeds implementieren, können Sie den HTML-Block auswählen und den von Twitter generierten Feed-Code hinzufügen.

Hier verwenden wir eines der kostenlosen Add-Ons von konkreten5. Tweetcrete . Sie können Add-Ons über das konkrete Dashboard oder über Ihr Konto installieren. Klicken Sie in Ihrer Stapelliste auf Twitter-Feed stapeln und hinzufügen Tweetcrete Block. Befolgen Sie die Anweisungen zum Autorisieren mit Ihrem Twitter-Konto und klicken Sie auf Hinzufügen . Klicken Sie anschließend auf Kontakt Formular Stapel. Wähle aus Bilden Block. Fügen Sie die gewünschten Felder hinzu: Hier verwenden wir Name , Email , Telefon , Dienstleistungen und Botschaft . Fügen Sie auf der Registerkarte 'Optionen' die E-Mail hinzu, an die das Formular gesendet werden soll, sowie alle gewünschten Captcha-Filter aus dem Add-On-Bereich von konkrete5. Klicken Hinzufügen .

Endgültige Version der Website mit allen Inhalten. Beachten Sie, wie ähnlich die Textelemente der bearbeitbaren Version rechts aussehen

Drücke den Zurück zur Website Schaltfläche in der oberen Bearbeitungsleiste. Sie werden sehen, wie Ihre Homepage Gestalt annimmt. Als letztes fügen Sie eine Diashow hinzu. Bewegen Sie den Mauszeiger über die Bearbeiten Schaltfläche und wählen Sie Seite bearbeiten . In diesem Modus sehen Sie alle Bereiche, die auf dieser Seite bearbeitet werden können, hervorgehoben durch eine gepunktete Linie.

Sie können jeden der Blöcke direkt auf der Seite bearbeiten. Durch das Bearbeiten globaler Bereiche werden Sie zu diesem bestimmten Stapel weitergeleitet. Drücke den Diashow Bereich und wählen Block hinzufügen und wählen Sie dann die Diashow Block. Unter dem Art Dropdown, wählen Sie Bilder aus dem Dateisatz . Wählen Sie das zuvor erstellte Set mit dem Namen Diashow . Klicken Hinzufügen . Jetzt schwebe über dem Bearbeiten Schaltfläche und wählen Sie Seite veröffentlichen . Die Bilder werden automatisch eingezogen.

Das ist es. Sie haben jetzt eine fertige Homepage mit Inhalten. Da wir die globalen Bereiche eingerichtet haben, werden jedes Mal, wenn Sie der Site eine neue Seite hinzufügen, alle sich wiederholenden Inhalte automatisch auf der Seite platziert, sodass Sie nur für diese Seite spezifische Inhalte hinzufügen können.