Erstellen Sie ein Clientportal mit WordPress

Sep 17, 2025

wie man

(Bildkredite: Webdesigner)

Mit einem Bereich, mit dem Benutzer den Anmeldemöglichkeiten und den Download von Dokumenten erleichtern können, ist von den Verbrauchern von Telefonverträgen bis hin zu Dienstprogrammen erwartet.

Wenn Designer mit ihren Kunden zusammenarbeiten, kann alles jedoch schnell in ein Durcheinander von E-Mails zusammenbrechen, Links zu Mobile und Anhänge.

Dies WordPress-Tutorial. zeigt, wie man WordPress verlängern kann (andere Web-Hosting Dienstleistungen sind verfügbar) In ein Clientportal, das Dokumente, Videos und Zeichnungen speichern kann, sodass ein Client an einem Ort auf sie zugreifen kann. Das Portal dient jedem Kunden mit einem einzigartigen und passwortgeschützten Link, der in der regulären Navigation nicht angezeigt wird.

Benutzerdefinierte Posttypen und -felder werden zum Speichern der Daten verwendet, und diese werden über Plugins hinzugefügt, um Datenverlust zu vermeiden, sollte das Thema ändern. Das Thema wird leicht modifiziert.

Ein Clientportal hat den Kunden den Komfort, auf ihre Dateien alle am selben Ort zuzugreifen, wann immer sie sie benötigen, ähnlich, wie Sie es verwenden Cloud-Speicherung. . Es verfügt über ein Array an Geschäftsvorteilen, einschließlich der Anzeigen verfügbarer Up-Verkaufs, oder kann verwendet werden, um einen Überblick über den Arbeitsprozess von Anfang an zu ergeben, indem er die Ergebnisse visuell umralisiert.

Laden Sie die Dateien herunter für dieses Tutorial.

So drehen Sie WordPress in einen visuellen Erbauer

01. Installieren Sie eine frische Kopie von WordPress

Eine frische Kopie von WordPress ist auf dem Entwicklungsserver installiert, und das Thema "Unterstraps" wurde ausgewählt, um eine Boilerplate-Stiftung zu ergeben, um schnell mit der Arbeit beginnen zu können. Das benutzerdefinierte Post-Typ-UI-Plugin wird verwendet, sodass unsere benutzerdefinierten Posttypen unabhängig vom Thema sind.

02. Default-Plugins entfernen

Wenn ein Standard-Plugins mit der Kopie von WordPress geliefert wurde, löschen Sie diese. Die für dieses Tutorial benötigten Plugins sind "Advanced Custom Felder" und "Custom Post Type UI". "Classic-Editor" wurde ebenfalls installiert.

03. Fügen Sie einen benutzerdefinierten Beitrag hinzu

Fügen Sie mit der benutzerdefinierten Post-Typ-Benutzeroberfläche einen neuen Posttyp namens "Customer" hinzu. Verwenden Sie beim Eintritt in den "Posttyp-Slug" Unterstriche anstelle von Leerzeichen und schreiben Sie in der Singularform, da dies das Erstellen von Vorlagen später erleichtert wird. Das Präfix TU_ wurde hinzugefügt, um die Chance eines Konflikts zu reduzieren.

04. Die Option "Benutzerdefinierte Post-Typ" hinzuzufügen / bearbeiten

Build a client portal with WordPress: The add/edit custom post type interface — Fügen Sie sowohl einzelne als auch mehrere Etiketten hinzu (Bildkredite: Webdesigner)

Fügen Sie einen Plural-markierten "Kunden" und singular "Kunde" hinzu, da dies im WordPress-Admin-Menü angezeigt wird. Die Großschreibung wird in diesen Feldern akzeptiert, wodurch das WordPress-Menü TIDIER erstellt wird.

05. Erstellen Sie einen benutzerdefinierten Umschreibungs-Slug

Build a client portal with WordPress: Create a custom rewrite slug — Verwenden Sie die benutzerdefinierte Rewrite-Slug für ein besseres Benutzererfahrung (Bildkredite: Webdesigner)

Die Verwendung eines Präfixes für den Postentyp-Slug bedeutet, dass Kunden, die dem Portal hinzugefügt werden, mit einem Link erstellt werden, der aussieht, der wie "/ tu_customer / Beispiel-Unternehmen" aussieht. Dies sieht nicht auf ordentlich aus, und die benutzerdefinierte REWRITE-Slug wird verwendet, um dies zu verbessern. Die Einstellung der Umschreibungs-Slug auf "Kunden" ermöglicht es dem benutzerdefinierten Post-Typ, als / Kunden / Beispiel-Unternehmen zu erscheinen.

06. Unterstützung für benutzerdefinierte Felder hinzufügen

Build a client portal with WordPress: Add support for custom fields — Aktivieren Sie das "Benutzerdefinierte Feld" und senden Sie die Änderungen vor (Bildkredite: Webdesigner)

Die letzte Option, die für den benutzerdefinierten Posttyp aktiviert ist, ist "Supports & GT; Custom Field", das in der Nähe des Bodens der Seite gefunden wird. Zerden Sie ankreuzen, und dann "Posttyp hinzufügen" am unteren Rand der Seite. Dies gilt die Änderungen und registriert den Posttyp.

07. Fügen Sie benutzerdefinierte Felder hinzu

Build a client portal with WordPress: Add custom fields — Jetzt müssen Sie Ihrem neuen Posttyp benutzerdefinierte Felder hinzufügen (Bildkredite: Webdesigner)

Benutzerdefinierte Felder müssen jetzt hinzugefügt und dem gerade erstellten Posttyp zugewiesen werden. Das Hinzufügen einer Field-Gruppe mit dem Namen "Customer Portal" ist der erste Schritt, gefolgt von dem Hinzufügen von benutzerdefinierten Feldern mit dem Feld "Feld" hinzugefügt. Das erste Feld "KURZ" wird als Feldtyp "Datei" eingestellt, mit dem der Administrator eine Datei an diesem Speicherort hochladen kann. Stellen Sie den Rückgabewert auf "Datei-URL" ein.

08. Richten Sie die Felder ein

Das nächste Feld, das hinzugefügt werden soll, ist "Markenfragebogen". Dies besteht aus einem Link zu einem Google-Formular, das der Kunde ausfüllen soll. Der am besten geeignete Feldtyp dafür ist "URL". Diese gleiche Methode kann für alle Felder verwendet werden, die auf einen externen Dienst verknüpft werden. Wenn Sie fertig sind, scrollen Sie nach unten zum Feld "Location" und verwenden Sie die Logik "Show IF Posttyp" = "Kunde". Veröffentlichen Sie dann die Feldgruppe.

Generate CSS — Buchen Sie Ihre Tickets, um CSS jetzt zu generieren, um 50 £ zu sparen (Bildkredite: Getty / Zukunft)

09. Erstellen Sie die WordPress-Vorlagendatei

WordPress muss wissen, wie ein Kunde-Dashboard angezeigt wird. Dafür wird die WordPress-Template-Hierarchie befolgt, um eine Vorlagendatei für diesen spezifischen Posttyp zu erstellen. Erstellen Sie eine Datei namens Single-TU_CUSTOMER.php im Root-Themenverzeichnis.

10. Erstellen Sie ein volles Breiten-Single-Post-Layout

Build a client portal with WordPress: Create a full-width single post layout — Machen Sie ein Full-Width-Layout für Ihren Inhalt (Bildkredite: Webdesigner)

Öffnen Sie die Datei Single-TU_CUSTOMER.php und fügen Sie die Funktionen von get_header und get_footer hinzu. Erstellen Sie zwischen diesen Funktionen ein Full-Width-Layout, um den Inhalt zu halten, der mit Ihrem Thema arbeitet.

 & lt;? Php get_header ();? & Gt;
& lt; div class = "wrapper" id = "Single-Wrapper" & gt;
& lt; Div Class = "Container" ID = "Inhalt" tabindex = "- 1" & gt;
& lt; Div Class = "Reihe" & GT;
& lt; Div Class = "COL-MD Content-Area" ID = "Primary" & GT;
& lt; Hauptklasse = "Site-Main" ID = "Main" & GT; & lt; -! Inhalt - & gt; & lt; / main & gt;
& lt; / div & gt;
& lt; / div & gt; & lt;! - .Row - & GT;
& lt; / div & gt; & lt;! - #content - & gt;
& lt; / div & gt; & lt;! # Single-Wrapper - & gt;
& lt; PHP get_footer ();? & Gt;

11. Starten Sie die Schleife und erstellen Sie den Inhalt

Build a client portal with WordPress: Start the loop and create the content — Verwenden Sie Platzhalter, um Ihren Inhalt herauszulegen (Bildkredite: Webdesigner)

Innerhalb des & lt; Main & GT; Element, rufen Sie the_post an und erstellen Sie die Containerelemente, um Informationen zu halten. Verwenden Sie Platzhalterinformationen, um eine Vorstellung von dem Layout zu erhalten, und beginnen Sie mit dem Stil der Elemente zu stylen. Die Kartenelemente sind Bootstrap-Karten mit einem Header, einer Beschreibung und einem Link.

 & lt; Hauptklasse = "Site-Main" ID = "Main" & GT;
& lt; PHP während (haß_posts ()): the_post (); ? & gt;
& lt; div class = "container" & gt;
& lt; Div Class = "Reihe" & GT;
& lt; div class = "col-sm-4" & gt; content & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; content & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; content & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; PHP Endwhile; // Ende der Schleife. ? & gt;
& lt; / haupt & gt; & lt;! - #main - & gt;

12. Verwenden Sie PHP, um dynamische Werte anzurufen

Mit der Funktion "the_field", einer Funktion, mit der mit den erweiterten Benutzerfieldaten-Plugin ausgestattet ist, wird der dynamische Inhalt der benutzerdefinierten Felder in die Kundenvorlage eingegeben. Der "Field_name" ist der Wert, der in Schritt 3 eingegeben wurde.

 & lt; div class = "card text-center" & gt;
& lt; Div Class = "Kartenkörper" & GT;
& lt; H5-Klasse = "Kartentitel" & gt; kurz & lt; / h5 & gt;
& lt; P Class = "Card-Text" & GT; Dies ist Ihr ursprünglicher Kurz-Dokument & lt; / p & gt;
& lt; ein href = "& lt;? php the_field ('kurz');? & gt;" target = "none" Klasse = "BTN BTN-Primary" & GT; Open & lt; / A & gt;
& lt; / div & gt;
& lt; / div & gt;

13. Machen Sie einen Testkunden mit einigen Dummy-Daten

Build a client portal with WordPress: Make a test customer with some dummy data — Gehen Sie zum WordPress-Dashboard, um einen Dummy-Kunde zu erstellen (Bildkredite: Webdesigner)

Zugriff auf das WordPress-Dashboard, ein neuer Kunde kann aus der linken Bar hinzugefügt werden. Kunden & GT; Neuen Kunden hinzufügen. Die Postansicht ist bekannt, aber das Scrollen von unten zeigt alle neuen benutzerdefinierten Felder. Geben Sie einige Testdaten ein, um sicherzustellen, dass alles ordnungsgemäß funktioniert.

14. Tragen Sie Fehler für alle fehlenden Daten

Build a client portal with WordPress: Handle errors for any missing data — Stellen Sie sicher, dass es klar ist, wenn Dokumente nicht verfügbar sind (Bildkredite: Webdesigner)

Wenn ein Dokument vergessen wird, oder es ist einfach zu früh in dem Prozess, für das dieses Dokument verfügbar ist, um verfügbar zu sein, kann es für einen Kunden verwirrend sein, wenn der Knopf nicht funktioniert. Hinzufügen einer Überprüfung, dass ein Wert vor dem Anzeigen besteht, dass er eine Chance bietet, ein "fehlendes Feld" -Verweichung der Karte anzuzeigen. Wenn Sie eine Klasse "deaktiviert", um die Karte hinzuzufügen, wenn der Wert fehlt, ermöglicht es uns, nicht verfügbare Karten zu stylen.

 & lt; PHP if (get_field ('field_name')):? & Gt;
angezeigt, wenn der Field_name einen Wert hat
& lt; PHP sonst: // field_name kehrte falsch zurück? & gt;
angezeigt, wenn das Feld nicht vorhanden ist
& lt;? PHP Endif; // Ende von feld_name logisch? & gt;

15. Aufräumen der Schnittstelle

Nun, da die Struktur der Schnittstelle abgeschlossen ist, kann es ordnungsgemäß gestaltet werden. Mit CSS können das Aussehen der Karten und der Farben auf der Seite verbessert werden. Die Farbe für die Navigation wurde in ein leichteres Blau geändert, und Benutzerrichtung wurde durch Hinzufügen von Einführungstext verbessert.

16. schließen Sie es aus der Sitemap aus

Die benutzerdefinierten Posttypen sollten nicht in Suchmaschinen ergibt. Der Posttyp muss von der Sitemap der Website entweder über ein SEO-Plugin oder manuell mit einem Meta-Tag und robots.txt ausgeschlossen werden.

 & lt; Meta Name = "Roboter" Inhalt = "Noindex, Nofollow" / & gt;
User-Agent: *
Nicht zulassen: / Kunden /

Möchten Sie eine neue Website entwerfen? Verwenden Sie einen brillanten Webseitenersteller um den Prozess super einfach zu machen.

Zum Thema passende Artikel:

Die besten WordPress-Hosting-Services im Jahr 2019
13 Tolle Werkzeuge zum Pitching an Kunden
WordPress-Websites: 14 Awesome Beispiele

Erstellen Sie ein Clientportal mit WordPress

01. Installieren Sie eine frische Kopie von WordPress

02. Default-Plugins entfernen

03. Fügen Sie einen benutzerdefinierten Beitrag hinzu

04. Die Option "Benutzerdefinierte Post-Typ" hinzuzufügen / bearbeiten

05. Erstellen Sie einen benutzerdefinierten Umschreibungs-Slug

06. Unterstützung für benutzerdefinierte Felder hinzufügen

07. Fügen Sie benutzerdefinierte Felder hinzu

08. Richten Sie die Felder ein

09. Erstellen Sie die WordPress-Vorlagendatei

10. Erstellen Sie ein volles Breiten-Single-Post-Layout

11. Starten Sie die Schleife und erstellen Sie den Inhalt

12. Verwenden Sie PHP, um dynamische Werte anzurufen

13. Machen Sie einen Testkunden mit einigen Dummy-Daten

14. Tragen Sie Fehler für alle fehlenden Daten

15. Aufräumen der Schnittstelle

16. schließen Sie es aus der Sitemap aus

wie man - Die beliebtesten Artikel

Ist Ihr Apple iCloud-Speicher voll? So können Sie den Raum freimachen

So erstellen Sie eine Fotocollage in Photoshop CC

So erreichen Sie Skala in Ihren Gemälden

Wie man ein Elfenmädchen malt

Verwendung von Texturen in Photoshop

Machen Sie realistische 3D-Haare und -fell in 3ds Max und V-Ray

Meister-Negativmalerei in Aquarell

Erstellen Sie 3D-Kleidung mit realistischen Falten und Falten

Kategorien