Come aggiungere le pagine del profilo dei membri del personale in WordPress

Mettere in mostra le persone dietro il tuo sito Web è un ottimo modo per guadagnare la fiducia dei clienti. In precedenza, ti abbiamo mostrato come creare una semplice lista del personale in WordPress. Alcuni dei nostri utenti volevano estendere i loro elenchi di personale aggiungendo link accanto al singolo membro dello staff che conduceva alle loro pagine di profilo. In questo articolo, ti mostreremo come aggiungere pagine del profilo membro dello staff in WordPress.

Nota: Questo tutorial richiede alcune conoscenze di base dei temi WordPress e HTML / CSS. Si noti inoltre che poiché modificheremo i file dei temi, si consiglia vivamente di eseguire almeno un backup dei file del tema prima di apportare modifiche.

La prima cosa che devi fare è installare e attivare il plug-in Simple Staff Lists. Aggiungi i membri dello staff visitando Membri dello staff »Aggiungi nuovo. Per ulteriori istruzioni su come aggiungere membri dello staff, consulta questo tutorial.

Dopo aver aggiunto i membri dello staff, puoi visualizzarli creando una nuova pagina di WordPress e aggiungendo questo shortcode:

[Semplice-personale-list]

Finora abbiamo creato una semplice lista di personale, elencando tutti i membri dello staff.

La parte successiva è creare una singola pagina per ogni membro dello staff per visualizzare i loro profili completi.

Il semplice elenco di liste dello staff crea un tipo di messaggio personalizzato chiamato membro del personale per memorizzare i profili dei membri del personale. Inserendo lo shortcode in una pagina, abbiamo trasformato quella pagina in una pagina di archivio del tipo di post personalizzata per il tipo di post membro dello staff.

In WordPress ogni post ha una propria pagina singola indipendentemente dal tipo di messaggio in cui è memorizzato. Per impostazione predefinita, il plugin non mostra quella singola pagina. Nei prossimi passi, modificheremo il tema di WordPress per visualizzare la pagina di un membro dello staff.

Per prima cosa devi andare Membri dello staff »Modelli. Sostituisci il modello che vedi sotto Staff Loop Template con questo codice:

 [Staff_loop]     [nome-personale-formattato] [staff-position-formatted] [staff-bio-formatted] [staff-email-link] [/ staff_loop] 

Non dimenticare di sostituire example.com con il tuo nome di dominio.

Ora apri la tua pagina di elenco dello staff e vedrai che i profili dello staff e le foto saranno collegati alle loro pagine di profilo individuali. Tuttavia, facendo clic su queste pagine verrà visualizzata solo una pagina con il nome del Membro dello staff su di essa.

Aggiunta di un modello di profilo di membro dello staff nel tema WordPress

Per visualizzare il tuo singolo membro dello staff, devi creare un modello nel tuo tema WordPress per gestire il tipo di post del membro dello staff. Inizia creando un nuovo file nella directory dei temi di WordPress (wp-content / themes / yourthemename /).

Dai un nome a questo file single-personale-member.php. Usando il nome del tipo di post personalizzato con la parola singolo, abbiamo creato un singolo modello di post per il tipo di post personalizzato del membro dello staff.

Questo modello di membro dello staff è ancora vuoto, quindi permettilo di riempirlo. Apri i tuoi temi single.php file e copia incolla il suo contenuto nel modello membro-membro-membro.php.

Un problema che incontrerai quando copi i contenuti del tuo single.php il file è che alcuni temi potrebbero utilizzare il modello di contenuto nel file single.php. Ad esempio, il tema predefinito Twenty Thirteen utilizza i modelli di contenuto nel file single.php come questo:

Se il tuo tema usa parti di template, allora dovresti aprire il file template (content.php) e copiare il suo contenuto incollandolo nel tuo file single-staff-member.php, sostituendo la linea get_template_part.

A questo punto il tuo file member-member-member.php sarà esattamente uguale al tuo file single.php. Ora dobbiamo prepararlo, in modo che possa mostrare i campi dei membri dello staff.

Ecco il nostro single-personale-member.php file, è basato sul file single.php di Twenty Thirteen. Per prima cosa dai un'occhiata al codice.

 ';  else $ t_photo_url = "; $ t_photo =";  $ email_mailto = '' .antispambot ($ email). ''; ?> 
            
Facebook | cinguettio
      

Nella prima parte del codice subito dopo aver caricato l'intestazione, abbiamo raccolto dati dal nostro post personalizzato in variabili. Quindi all'interno del ciclo abbiamo usato queste variabili per visualizzare i campi dal tipo di post personalizzato.

È tutto. Potrebbe essere necessario regolare l'aspetto delle pagine del profilo tramite CSS. Abbiamo usato questo CSS per adattare il bio del membro del personale intorno alla foto.

 img.staff-member-page-photo float: left; margin: 5px;  

Speriamo che questo articolo ti abbia aiutato ad aggiungere pagine del profilo membro dello staff in WordPress. Sentiti libero di giocare con i modelli per ottenere il risultato desiderato.

Se ti è piaciuto questo articolo, quindi iscriviti al nostro canale YouTube per ulteriori tutorial video di WordPress. Puoi trovarci anche su Twitter e Google+.