Contenuto
- 01. Installa una nuova copia di WordPress
- 02. Rimuovi i plugin predefiniti
- 03. Aggiungi un tipo di post personalizzato
- 04. L'interfaccia di aggiunta / modifica del tipo di post personalizzato
- 05. Crea uno slug di riscrittura personalizzato
- 06. Aggiungere il supporto per i campi personalizzati
- 07. Aggiungi campi personalizzati
- 08. Imposta i campi
- 09. Crea il file modello di WordPress
- 10. Creare un layout a colonna singola a larghezza intera
- 11. Avviare il ciclo e creare il contenuto
- 12. Usa PHP per richiamare valori dinamici
- 13. Crea un cliente di prova con alcuni dati fittizi
- 14. Gestire gli errori per i dati mancanti
- 15. Riordinare l'interfaccia
- 16. Escluderlo dalla mappa del sito
Disporre di un'area che consenta agli utenti di accedere e scaricare o visualizzare i documenti è diventato molto richiesto dai consumatori, dai contratti telefonici alle utenze.
Quando i designer lavorano con i loro clienti, tuttavia, tutto può rapidamente trasformarsi in un groviglio di e-mail, collegamenti a modelli e allegati.
Questo tutorial di WordPress mostrerà come estendere WordPress (sono disponibili altri servizi di web hosting) in un portale client in grado di archiviare documenti, video e disegni, in modo che un cliente possa accedervi tutti in un unico posto. Il portale fornirà a ogni cliente un collegamento univoco e protetto da password che non viene visualizzato nella normale navigazione.
I tipi di post e i campi personalizzati verranno utilizzati per memorizzare i dati e questi verranno aggiunti tramite plug-in, per evitare la perdita di dati in caso di modifica del tema. Il tema verrà leggermente modificato.
Avere un portale clienti offre ai clienti la comodità di accedere ai propri file tutti nello stesso posto, ogni volta che ne hanno bisogno, proprio come quando si utilizza l'archiviazione cloud. Presenta una serie di vantaggi aziendali, inclusa la visualizzazione di up-sell disponibili, oppure può essere utilizzato per fornire una panoramica del processo di lavoro dall'inizio delineando visivamente i risultati finali.
Scarica i file per questo tutorial.
- Come trasformare WordPress in un visual builder
01. Installa una nuova copia di WordPress
Una nuova copia di WordPress è installata sul server di sviluppo e il tema "understrap" è stato scelto per fornire una base fondamentale per iniziare rapidamente il lavoro. Verrà utilizzato il plug-in Custom Post Type UI in modo che i nostri tipi di post personalizzati siano indipendenti dal tema.
02. Rimuovi i plugin predefiniti
Se con la copia di WordPress sono stati forniti plug-in predefiniti, eliminarli. I plugin necessari per questo tutorial sono "Advanced Custom Fields" e "Custom Post Type UI". È stato installato anche "Classic Editor".
03. Aggiungi un tipo di post personalizzato
Utilizzando l'interfaccia utente del tipo di post personalizzato, aggiungi un nuovo tipo di post chiamato "cliente". Quando si immette lo "Slug del tipo di articolo", utilizzare i trattini bassi invece degli spazi e scrivere in forma singolare, poiché ciò renderà più semplice la creazione di modelli in un secondo momento. Il prefisso tu_ è stato aggiunto per ridurre la possibilità di un conflitto.
04. L'interfaccia di aggiunta / modifica del tipo di post personalizzato
Aggiungi un plurale etichettato "clienti" e un singolare "cliente", poiché questo apparirà nel menu di amministrazione di WordPress. Le maiuscole sono accettate in questi campi, il che renderà più ordinato il menu di WordPress.
05. Crea uno slug di riscrittura personalizzato
L'uso di un prefisso per il tipo di post slug significherà che i clienti aggiunti al portale verranno creati con un collegamento simile a "/ tu_customer / example-company". Questo non sembra ordinato e lo slug di riscrittura personalizzato viene utilizzato per migliorarlo. L'impostazione dello slug di riscrittura su "clienti" consente al tipo di post personalizzato di apparire come / customers / example-company.
06. Aggiungere il supporto per i campi personalizzati
L'ultima opzione abilitata per il tipo di post personalizzato è "Supporti> Campo personalizzato" che si trova nella parte inferiore della pagina. Spunta questo, quindi "aggiungi tipo di articolo" in fondo alla pagina. Questo invia le modifiche e registra il tipo di post.
07. Aggiungi campi personalizzati
I campi personalizzati ora devono essere aggiunti e assegnati al tipo di post appena creato. L'aggiunta di un gruppo di campi denominato "portale clienti" è il primo passaggio, seguito dall'aggiunta di campi personalizzati con il pulsante Aggiungi campo. Il primo campo "brief" verrà impostato come tipo di campo "file", che consente all'amministratore di caricare un file in questa posizione. Imposta il valore di ritorno su "file url".
08. Imposta i campi
Il campo successivo da aggiungere è "questionario marchio". Consisterà in un collegamento a un modulo Google che il cliente dovrà compilare. Il tipo di campo più adatto per questo è "URL". Questo stesso metodo può essere utilizzato per tutti i campi che si collegheranno a un servizio esterno. Al termine, scorri verso il basso fino alla casella "location" e utilizza la logica "Show if Post Type" = "Customer". Quindi pubblica il gruppo di campi.
09. Crea il file modello di WordPress
WordPress deve sapere come visualizzare una dashboard del cliente. Per questo, la gerarchia dei modelli di WordPress viene seguita per creare un file modello per questo tipo di post specifico. Crea un file chiamato single-tu_customer.php nella directory del tema principale.
10. Creare un layout a colonna singola a larghezza intera
Apri il file single-tu_customer.php e aggiungi le funzioni get_header e get_footer di WordPress. Tra queste funzioni, crea un layout a larghezza intera per contenere il contenuto che funziona con il tuo tema.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Contenuto -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Avviare il ciclo e creare il contenuto
All'interno dell'elemento main>, chiama the_post e crea gli elementi contenitore per contenere le informazioni. Usa le informazioni segnaposto per avere un'idea del layout e iniziare a dare uno stile agli elementi. Gli elementi della carta saranno carte bootstrap con un'intestazione, una descrizione e un collegamento.
main id = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Content / div> div> Content / div> div> Content / div> / div> / div>? php endwhile; // fine del ciclo. ?> var13 -> / main>! - #main ->
12. Usa PHP per richiamare valori dinamici
Utilizzando la funzione "the_field", una funzione fornita con il plug-in avanzato dei campi personalizzati, il contenuto dinamico dei campi personalizzati viene inserito nel modello del cliente. "Field_name" è il valore immesso nel passaggio 3.
div> div> h5> Brief / h5> p> Questo è il tuo breve documento originale / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Apri / a > / div> / div>
13. Crea un cliente di prova con alcuni dati fittizi
Accedendo alla dashboard di WordPress, è possibile aggiungere un nuovo cliente dalla barra di sinistra. Clienti> Aggiungi nuovo cliente. La visualizzazione del post risulterà familiare, ma scorrendo verso il basso verranno rivelati tutti i nuovi campi personalizzati. Inserisci alcuni dati di prova per assicurarti che tutto funzioni correttamente.
14. Gestire gli errori per i dati mancanti
Se un documento viene dimenticato o è semplicemente troppo presto nel processo perché quel documento sia disponibile, potrebbe creare confusione per un cliente quando il pulsante non funziona. L'aggiunta di un controllo dell'esistenza di un valore prima di mostrarlo dà la possibilità di mostrare una variazione "campo mancante" della carta. L'aggiunta di una classe "disabilitata" alla carta quando il valore è mancante ci consentirà di applicare uno stile alle carte non disponibili.
? php if (get_field ('field_name')):?> var13 -> visualizzato quando il field_name ha un valore? php else: // field_name ha restituito false?> var13 -> visualizzato quando il campo non esiste? php endif ; // fine della logica if field_name?> var13 ->
15. Riordinare l'interfaccia
Ora che la struttura dell'interfaccia è finalizzata, può essere stilizzata correttamente. Utilizzando CSS, l'aspetto delle carte e dei colori sulla pagina può essere migliorato. Il colore della navigazione è stato modificato in un blu più chiaro e la direzione dell'utente è stata migliorata aggiungendo del testo introduttivo.
16. Escluderlo dalla mappa del sito
I tipi di post personalizzati non dovrebbero essere trovati nei risultati dei motori di ricerca. Il tipo di post deve essere escluso dalla mappa del sito del sito web, tramite un plug-in SEO o manualmente utilizzando un meta tag e il file robots.txt.
meta name = "robots" content = "noindex, nofollow" /> User-agent: * Disallow: / customers /
Vuoi progettare un nuovo sito web? Usa un brillante costruttore di siti web per rendere il processo semplicissimo.
