Costruisci un portale client con WordPress

Sep 12, 2025
Come si fa
Build a client portal with WordPress
(Immagine di credito: Web Designer)

Avere un'area che consente agli utenti di accedere e scaricare o visualizzare i documenti è previsto dai consumatori, dai contratti telefonici alle utilità.

Quando i progettisti funzionano con i loro clienti, tuttavia, tutto può rapidamente abbattere in un confusione di e-mail, collegamenti a Mockups. e allegati.

Questo Tutorial di WordPress. mostrerà come estendere WordPress (altro web hosting Sono disponibili servizi) in un portale client in grado di memorizzare documenti, video e disegni, quindi un client può accedervi tutti in un unico posto. Il portale servirà ad ogni cliente con un collegamento unico e protetto da password che non viene visualizzato nella navigazione normale.

Tipi di post personalizzati e campi verranno utilizzati per memorizzare i dati e questi saranno aggiunti tramite i plugin, per evitare la perdita di dati in caso di modifica del tema. Il tema verrà modificato leggermente.

Avere un portale client offre ai clienti la comodità di accedere ai loro file tutto nello stesso posto, ogni volta che ne hanno bisogno, proprio come usare deposito cloud. . Ha una serie di vantaggi aziendali, incluso la visualizzazione di vendita disponibile o può essere utilizzato per fornire una panoramica del processo di lavoro dall'inizio delineando visivamente i risultati dei risultati.

Scarica i file. per questo tutorial.

  • Come girare WordPress in un costruttore visivo

01. Installare una copia fresca di WordPress

Una nuova copia di WordPress è installata sul server di sviluppo e il tema "sottomarrap" è stato scelto per dare una base di caldaietta per iniziare rapidamente il lavoro. Il plugin dell'interfaccia utente di tipo personalizzato verrà utilizzato in modo che i nostri tipi di posti personalizzati siano indipendenti dal tema.

02. Rimuovi i plugin predefiniti

Se i plugin predefiniti sono venuti con la copia di WordPress, elimina quelle. I plugin necessari per questo tutorial sono "campi personalizzati avanzati" e "UI del tipo di post personalizzato". Anche il "editor classico" è stato installato.

03. Aggiungi un tipo post personalizzato

Utilizzando l'interfaccia UI del tipo Post personalizzato, aggiungi un nuovo tipo di post chiamato "Cliente". Quando si entra nella "Slug di post-tipo", utilizzare caratteri di sottolineatura anziché spazi e scrivere in forma singolare, in quanto ciò renderà più facile creare modelli in seguito. Il prefisso Tu_ è stato aggiunto per ridurre la possibilità di un conflitto.

04. L'interfaccia di tipo Aggiungi / modifica interfaccia post personalizzata

Build a client portal with WordPress: The add/edit custom post type interface

Aggiungi etichette singolari che plurali (Immagine di credito: Web Designer)

Aggiungi un "cliente" etichettato plurale e "cliente" singolare, in quanto questo apparirà nel menu di amministrazione WordPress. La capitalizzazione è accettata in questi campi, che renderà il manuale del menu WordPress.

05. Creare una slug di riscrittura personalizzata

Build a client portal with WordPress: Create a custom rewrite slug

Utilizzare la slug di riscrittura personalizzata per un'esperienza utente migliore (Immagine di credito: Web Designer)

L'utilizzo di un prefisso per il tipo di post slug significherà che i clienti aggiunti al portale verranno creati con un link che sembra "/ tu_customer / example-company". Questo non sembra in ordine, e lo slug di riscrittura personalizzato viene utilizzato per migliorare questo. Impostazione della slug di riscrittura su "I clienti" consente al tipo di post personalizzato di apparire come / clienti / esempio-società.

06. Aggiungi supporto per campi personalizzati

Build a client portal with WordPress: Add support for custom fields

Spunta l'opzione "Campo personalizzato" e invia le modifiche (Immagine di credito: Web Designer)

L'ultima opzione abilitata per il tipo di post personalizzato è "Supports & GT, campo personalizzato" che si trova vicino alla parte inferiore della pagina. Spunta questo, quindi "Aggiungi il tipo di post" nella parte inferiore della pagina. Questo invia le modifiche e registra il tipo di post.

07. Aggiungi campi personalizzati

Build a client portal with WordPress: Add custom fields

Ora devi aggiungere campi personalizzati al tuo nuovo post post (Immagine di credito: Web Designer)

I campi personalizzati ora devono essere aggiunti e assegnati al tipo post appena creato. L'aggiunta di un gruppo di campo denominato "Portal cliente" è il primo passo, seguito aggiungendo campi personalizzati con il pulsante Aggiungi campo. Il primo campo "BREVE" sarà impostato come il file "File", che consente all'amministratore di caricare un file in questa posizione. Impostare il valore di ritorno su "URL del file".

08. Impostare i campi

Il prossimo campo da aggiungere è "questionario del marchio". Ciò consisterà in un collegamento a un modulo di Google che il cliente dovrebbe compilare. Il tipo di campo più adatto per questo è "URL". Questo stesso metodo può essere utilizzato per tutti i campi che collegheranno a un servizio esterno. Al termine, scorrere verso il basso fino alla casella "Posizione" e utilizzare la logica "Mostra se il tipo di messaggio" = "Cliente". Quindi pubblicare il gruppo di campi.

Generate CSS

Prenota i tuoi biglietti per generare css ora per risparmiare £ 50 (Immagine di credito: Getty / Future)

09. Creare il file del modello di wordpress

WordPress deve sapere come visualizzare un dashboard del cliente. Per questo, la gerarchia del modello WordPress è seguito per creare un file modello per questo tipo specifico. Creare un file chiamato single-tu_customer.php nella directory tematica principale.

10. Creare un layout singolo a larghezza totale

Build a client portal with WordPress: Create a full-width single post layout

Fai una layout a larghezza completa per il tuo contenuto (Immagine di credito: Web Designer)

Aprire il file single-tu_customer.php e aggiungi le funzioni Get_Header e Get_Footer WordPress. Tra queste funzioni, creare un layout a larghezza totale per tenere il contenuto che funziona con il tema. 

 & lt;? Php get_header ();? & Gt;
& lt; div class = "wrapper" id = "single-wrapper" & gt;
& lt; div class = "contenitore" id = "contenuto" tabindex = "- 1" & gt;
& lt; div class = "riga" e gt;
& lt; div class = "col-md content-area" id = "primario" & gt;
& lt; Main class = "sito-principale" id = "Main" & gt; & lt; -! Contenuto - & GT; & lt; / Main & GT;
& lt; / div & gt;
& lt; / div & gt; & lt;! - .row - & gt;
& lt; / div & gt; & lt;! - #content - & gt;
& lt; / div & gt; & lt;! - # wapper singolo - & gt;
& lt;? php get_footer ();? & gt;

11. Avvia il loop e crea il contenuto

Build a client portal with WordPress: Start the loop and create the content

Utilizzare i segnaposto per stendere il tuo contenuto (Immagine di credito: Web Designer)

All'interno del & lt; main & gt; Elemento, chiama il_post e crea gli elementi del contenitore per contenere le informazioni. Utilizzare le informazioni segnalerato per ottenere un'idea del layout e iniziare a modellare gli elementi. Gli elementi della carta saranno carte bootstrap con un'intestazione, una descrizione e un collegamento. 

 & lt; Main Class = "Site-Main" ID = "Main" & GT;
& lt;? php while (have_posts ()): the_post (); ? & GT;
& lt; div class = "container" & gt;
& lt; div class = "riga" e 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; // fine del ciclo. ? & GT;
& lt; / main & gt; & lt;! - #main - & gt;

12. Utilizzare PHP per chiamare i valori dinamici

Usando la funzione "The_field", una funzione fornita con il plug-in avanzato dei campi personalizzati, il contenuto dinamico dai campi personalizzati viene inserito nel modello del cliente. Il 'field_name' è il valore che è stato inserito nel passaggio 3. 

 & lt; div class = "carta testo-center" e GT;
& lt; div class = "card-body" e gt;
& lt; h5 class = "card-title" & gt; brief & lt; / h5 & gt;
& lt; p class = "card-text" & gt; Questo è il tuo breve documento originale & Lt; / P & GT;
& lt; un href = "& lt;? php the_field ('brief');? & gt;" target = "none" class = "btn btn-primario" & gt; open & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;

13. Fai un cliente di prova con alcuni dati fittizi

Build a client portal with WordPress: Make a test customer with some dummy data

Vai al cruscotto di WordPress per creare un cliente fittizio (Immagine di credito: Web Designer)

Accesso al cruscotto di WordPress, un nuovo cliente può essere aggiunto dalla barra a sinistra. Clienti e GT; Aggiungi un nuovo cliente. La vista post sarà familiare, ma lo scorrimento verso il basso rivelerà tutti i nuovi campi personalizzati. Inserisci alcuni dati di prova per assicurarsi che tutto funzioni correttamente.

14. Gestire errori per eventuali dati mancanti

Build a client portal with WordPress: Handle errors for any missing data

Assicurati che sia chiaro quando i documenti non sono disponibili (Immagine di credito: Web Designer)

Se un documento è dimenticato, o è semplicemente troppo presto nel processo per quel documento da disposizione, potrebbe essere confuso per un cliente quando il pulsante non funziona. Aggiunta di un controllo che un valore esista prima di visualizzarlo dà la possibilità di mostrare una variazione "campo mancante" della carta. Aggiunta di una classe "disabilitato" alla scheda quando manca il valore ci permetterà di risolvere le carte non disponibili. 

 & lt;? Php if (get_field ('field_name')) :? & gt;
visualizzato quando il field_name ha un valore
& lt;? Php Else: // field_name restituito false? & gt;
visualizzato quando il campo non esiste
& lt;? PHP EDIF; // fine se field_name logic? & gt;

15. Tidy up l'interfaccia

Ora che la struttura dell'interfaccia è finalizzata, può essere disegnata correttamente. Utilizzando CSS, l'aspetto delle carte e dei colori sulla pagina può essere migliorato. Il colore per la navigazione è stato modificato in un blu più leggero e la direzione dell'utente è stata migliorata aggiungendo il testo di introduzione.

16. Escluderlo dalla Sitemap

I tipi di post personalizzati non devono essere trovati nei risultati dei motori di ricerca. Il tipo di posta deve essere escluso dal sito del sito del sito web, tramite un plugin SEO o utilizzando manualmente un meta tag e robots.txt. 

 & lt; meta name = "robot" content = "noindex, nofollow" / & gt;
User-Agent: *
Non consentire: / clienti /

Vuoi progettare un nuovo sito web? Utilizzare un brillante Builder del sito web rendere il processo super-semplice.

Articoli Correlati:

  • I migliori servizi di hosting di WordPress nel 2019
  • 13 grandi strumenti per pitching ai clienti
  • Siti Web di WordPress: 14 Esempi fantastici

Come si fa - Articoli più popolari

Come evitare un primo giorno del primo giorno di Amazon Fall

Come si fa Sep 12, 2025

(Immagine di immagine: Amazon) Anche se non conosciamo ancora la data esatta di Amazon Prime Giorno 2020 ..

Come creare Digital Plein Air Paintings

Come si fa Sep 12, 2025

Ottieni all'aperto per creare una grande arte (Immagine di credito: Mike Mc Cain) Ci sono così tanti fan..

Aggiungi filtri SVG con CSS

Come si fa Sep 12, 2025

SVG è in circolazione fin dai primi anni 2000, eppure ci sono ancora modi interessanti che i designer stanno trovando per usarlo..

Come combinare l'arte 3D e comica in Zbrush

Come si fa Sep 12, 2025

Pagina 1 di 2: Pagina 1 Pagina 1 Pagina 2 Lo specialista 3D Gl..

Livello Up Your VR Art

Come si fa Sep 12, 2025

Ho iniziato a utilizzare il cinema 4D pochi mesi dopo aver ottenuto il mio auricolare VR un anno fa. Fino a quando potrei usare ..

Crea migliori animazioni del personaggio in Maya

Come si fa Sep 12, 2025

Ant Ward sarà uno dei nostri artisti che rispondono alle tue domande specifiche a Vertice ..

Creature organiche in inchiostro

Come si fa Sep 12, 2025

Disegno con inchiostro produce vaste possibilità. Ci sono modi semplici ma efficaci per creare trame belle e organic..

Top Suggerimenti per affinare le tue tecniche di illustrazione disegnate a mano

Come si fa Sep 12, 2025

Ho fatto Matita Art. Dalla mia infanzia, quando porterei una matita e una carta in giro con me. La colorazione e l..

Categorie