Inhalt
- 01. Installieren Sie eine neue Kopie von WordPress
- 02. Standard-Plugins entfernen
- 03. Fügen Sie einen benutzerdefinierten Beitragstyp hinzu
- 04. Die Benutzeroberfläche zum Hinzufügen / Bearbeiten von benutzerdefinierten Beitragstypen
- 05. Erstellen Sie einen benutzerdefinierten Umschreibblock
- 06. Unterstützung für benutzerdefinierte Felder hinzufügen
- 07. Benutzerdefinierte Felder hinzufügen
- 08. Richten Sie die Felder ein
- 09. Erstellen Sie die WordPress-Vorlagendatei
- 10. Erstellen Sie ein Einzelpfostenlayout in voller Breite
- 11. Starten Sie die Schleife und erstellen Sie den Inhalt
- 12. Verwenden Sie PHP, um dynamische Werte aufzurufen
- 13. Machen Sie einen Testkunden mit einigen Dummy-Daten
- 14. Behandeln Sie Fehler für fehlende Daten
- 15. Räumen Sie die Schnittstelle auf
- 16. Schließen Sie es von der Sitemap aus
Ein Bereich, in dem Benutzer sich anmelden und Dokumente herunterladen oder anzeigen können, wird von Verbrauchern erwartet, von Telefonverträgen bis hin zu Versorgungsunternehmen.
Wenn Designer jedoch mit ihren Kunden zusammenarbeiten, kann alles schnell in ein Wirrwarr von E-Mails, Links zu Modellen und Anhängen zerfallen.
Dieses WordPress-Tutorial zeigt, wie Sie WordPress (andere Webhosting-Dienste sind verfügbar) in ein Kundenportal erweitern können, in dem Dokumente, Videos und Zeichnungen gespeichert werden können, sodass ein Kunde an einem Ort auf alle zugreifen kann. Das Portal bietet jedem Kunden einen eindeutigen und passwortgeschützten Link, der in der regulären Navigation nicht angezeigt wird.
Benutzerdefinierte Beitragstypen und Felder werden zum Speichern der Daten verwendet und über Plugins hinzugefügt, um Datenverlust zu vermeiden, falls sich das Thema ändert. Das Thema wird leicht geändert.
Mit einem Kundenportal können Kunden jederzeit und überall am selben Ort auf ihre Dateien zugreifen, ähnlich wie bei der Verwendung von Cloud-Speicher. Es bietet eine Reihe von Geschäftsvorteilen, einschließlich der Anzeige verfügbarer Upsells, oder kann verwendet werden, um von Anfang an einen Überblick über den Arbeitsprozess zu geben, indem die zu erbringenden Leistungen visuell dargestellt werden.
Laden Sie die Dateien herunter für dieses Tutorial.
- Wie man WordPress in einen visuellen Builder verwandelt
01. Installieren Sie eine neue Kopie von WordPress
Auf dem Entwicklungsserver wird eine neue Kopie von WordPress installiert, und das Thema "Understrap" wurde ausgewählt, um eine Grundlage für das Boilerplate zu schaffen, damit die Arbeit schnell beginnen kann. Das UI-Plugin für benutzerdefinierte Beitragstypen wird verwendet, damit unsere benutzerdefinierten Beitragstypen unabhängig vom Thema sind.
02. Standard-Plugins entfernen
Wenn Standard-Plugins mit der Kopie von WordPress geliefert wurden, löschen Sie diese. Die für dieses Tutorial benötigten Plugins sind "Erweiterte benutzerdefinierte Felder" und "Benutzerdefinierte Benutzeroberfläche für Post-Typen". "Classic Editor" wurde ebenfalls installiert.
03. Fügen Sie einen benutzerdefinierten Beitragstyp hinzu
Fügen Sie über die Benutzeroberfläche des benutzerdefinierten Beitragstyps einen neuen Beitragstyp mit dem Namen "Kunde" hinzu. Verwenden Sie bei der Eingabe des "Post Type Slug" Unterstriche anstelle von Leerzeichen und schreiben Sie in Singularform, da dies das spätere Erstellen von Vorlagen erleichtert. Das Präfix tu_ wurde hinzugefügt, um die Wahrscheinlichkeit eines Konflikts zu verringern.
04. Die Benutzeroberfläche zum Hinzufügen / Bearbeiten von benutzerdefinierten Beitragstypen
Fügen Sie einen Plural mit der Bezeichnung "Kunden" und den Singular "Kunde" hinzu, wie dies im WordPress-Administratormenü angezeigt wird. In diesen Feldern wird Groß- und Kleinschreibung akzeptiert, wodurch das WordPress-Menü aufgeräumter wird.
05. Erstellen Sie einen benutzerdefinierten Umschreibblock
Wenn Sie ein Präfix für den Post-Type-Slug verwenden, werden Kunden, die dem Portal hinzugefügt wurden, mit einem Link erstellt, der wie folgt aussieht: "/ tu_customer / example-company". Dies sieht nicht ordentlich aus, und der benutzerdefinierte Umschreibeschlitz wird verwendet, um dies zu verbessern. Wenn Sie den Umschreib-Slug auf "Kunden" setzen, wird der benutzerdefinierte Beitragstyp als / customers / example-company angezeigt.
06. Unterstützung für benutzerdefinierte Felder hinzufügen
Die letzte Option, die für den benutzerdefinierten Beitragstyp aktiviert ist, ist "Unterstützungen> Benutzerdefiniertes Feld" am unteren Rand der Seite. Aktivieren Sie dieses Kontrollkästchen und klicken Sie unten auf der Seite auf "Beitragstyp hinzufügen". Dadurch werden die Änderungen übermittelt und der Beitragstyp registriert.
07. Benutzerdefinierte Felder hinzufügen
Benutzerdefinierte Felder müssen jetzt hinzugefügt und dem gerade erstellten Beitragstyp zugewiesen werden. Das Hinzufügen einer Feldgruppe mit dem Namen "Kundenportal" ist der erste Schritt, gefolgt vom Hinzufügen benutzerdefinierter Felder mit der Schaltfläche "Feld hinzufügen". Das erste Feld "brief" wird als Feldtyp "file" festgelegt, mit dem der Administrator eine Datei an dieser Stelle hochladen kann. Setzen Sie den Rückgabewert auf "Datei-URL".
08. Richten Sie die Felder ein
Das nächste hinzuzufügende Feld ist "Markenfragebogen". Dies besteht aus einem Link zu einem Google-Formular, das der Kunde ausfüllen sollte. Der dafür am besten geeignete Feldtyp ist "URL". Dieselbe Methode kann für alle Felder verwendet werden, die mit einem externen Dienst verknüpft werden. Wenn Sie fertig sind, scrollen Sie nach unten zum Feld "Standort" und verwenden Sie die Logik "Show if Post Type" = "Customer". Veröffentlichen Sie dann die Feldgruppe.
09. Erstellen Sie die WordPress-Vorlagendatei
WordPress muss wissen, wie ein Kunden-Dashboard angezeigt wird. Dazu wird die WordPress-Vorlagenhierarchie befolgt, um eine Vorlagendatei für diesen bestimmten Beitragstyp zu erstellen. Erstellen Sie eine Datei mit dem Namen single-tu_customer.php im Stammverzeichnis.
10. Erstellen Sie ein Einzelpfostenlayout in voller Breite
Öffnen Sie die Datei single-tu_customer.php und fügen Sie die WordPress-Funktionen get_header und get_footer hinzu. Erstellen Sie zwischen diesen Funktionen ein Layout in voller Breite, um den Inhalt aufzunehmen, der mit Ihrem Thema funktioniert.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Inhalt -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Starten Sie die Schleife und erstellen Sie den Inhalt
Rufen Sie im main> -Element the_post auf und erstellen Sie die Containerelemente, die Informationen enthalten sollen. Verwenden Sie Platzhalterinformationen, um sich ein Bild vom Layout zu machen und die Elemente zu formatieren. Die Kartenelemente sind Bootstrap-Karten mit einem Header, einer Beschreibung und einem Link.
main id = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Inhalt / div> div> Inhalt / div> div> Inhalt / div> / div> / div>? php endwhile; // Ende der Schleife. ?> var13 -> / main>! - #main ->
12. Verwenden Sie PHP, um dynamische Werte aufzurufen
Mit der Funktion "the_field", einer Funktion, die mit dem erweiterten Plugin für benutzerdefinierte Felder geliefert wird, wird der dynamische Inhalt aus den benutzerdefinierten Feldern in die Kundenvorlage eingegeben. Der Feldname ist der Wert, der in Schritt 3 eingegeben wurde.
div> div> h5> Brief / h5> p> Dies ist Ihr ursprüngliches Briefdokument / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Open / a > / div> / div>
13. Machen Sie einen Testkunden mit einigen Dummy-Daten
Beim Zugriff auf das WordPress-Dashboard kann über die linke Leiste ein neuer Kunde hinzugefügt werden. Kunden> Neuen Kunden hinzufügen. Die Post-Ansicht ist bekannt, aber wenn Sie nach unten scrollen, werden alle neuen benutzerdefinierten Felder angezeigt. Geben Sie einige Testdaten ein, um sicherzustellen, dass alles ordnungsgemäß funktioniert.
14. Behandeln Sie Fehler für fehlende Daten
Wenn ein Dokument vergessen wird oder es einfach zu früh im Prozess ist, um verfügbar zu sein, kann es für einen Kunden verwirrend sein, wenn die Schaltfläche nicht funktioniert. Wenn Sie vor dem Anzeigen einen Scheck hinzufügen, dass ein Wert vorhanden ist, können Sie eine "fehlende Feld" -Variante der Karte anzeigen. Durch Hinzufügen einer Klasse "deaktiviert" zur Karte, wenn der Wert fehlt, können wir nicht verfügbare Karten formatieren.
? php if (get_field ('field_name')):?> var13 -> wird angezeigt, wenn der field_name einen Wert hat? php else: // field_name hat false zurückgegeben?> var13 -> wird angezeigt, wenn das Feld nicht existiert? php endif ;; // Ende der if-Feldname-Logik?> var13 ->
15. Räumen Sie die Schnittstelle auf
Nachdem die Struktur der Schnittstelle fertiggestellt ist, kann sie ordnungsgemäß gestaltet werden. Mit CSS kann das Aussehen der Karten und Farben auf der Seite verbessert werden. Die Farbe für die Navigation wurde in ein helleres Blau geändert, und die Benutzerrichtung wurde durch Hinzufügen von Einführungstext verbessert.
16. Schließen Sie es von der Sitemap aus
Die benutzerdefinierten Beitragstypen sollten nicht in Suchmaschinenergebnissen gefunden werden. Der Beitragstyp muss entweder über ein SEO-Plugin oder manuell mithilfe eines Meta-Tags und robots.txt von der Sitemap der Website ausgeschlossen werden.
meta name = "robots" content = "noindex, nofollow" /> User-Agent: * Disallow: / customers /
Möchten Sie eine neue Website entwerfen? Verwenden Sie einen brillanten Website-Builder, um den Vorgang zu vereinfachen.
