Come sviluppare un sito di appartenenza con WordPress parte 3

Cosa starai creando

All'inizio della serie abbiamo spiegato come personalizzare i moduli di login e registrazione di WordPress. Abbiamo quindi aggiunto alcuni campi personalizzati al nostro modulo di registrazione. Oggi, nella terza e ultima parte di questa serie, tratteremo come sviluppare una sezione "il mio account" per gli utenti del tuo sito in cui gli utenti possono modificare le informazioni del loro profilo. 

Impostazione della pagina

La prima cosa che vogliamo fare è creare un modello di pagina per ospitare i nostri contenuti. Mi piace anteporre i miei modelli di pagina alla parola "modello". Quindi il mio file si chiama template-user-profile.php e il PHP di apertura si presenta così: 

L'ho salvato nella radice della mia directory dei temi. Se non hai familiarità con i modelli di pagina di WordPress ti suggerisco di leggere il link qui sopra. Sono estremamente utili.

Ora andiamo al back-end di WordPress e creiamo una pagina denominata "profilo", e nel Attributi della pagina meta box assegna il modello di pagina appena creato. Una volta pubblicata questa pagina, dovresti avere una pagina vuota sul front-end: http: // tuo dominio / profilo. 

Ora per iniettare alcuni contenuti nella nostra pagina. Vogliamo che la struttura sia il contenuto della pagina (ad esempio, qualsiasi cosa sia scritta nel WYSIWYG WordPress) e quindi il nostro modulo profilo da seguire. 

È spesso utile ottenere il codice da page.php e utilizzarlo come punto di partenza per i tuoi modelli di pagina. Questo codice differisce un po 'a seconda del tema, ma molto probabilmente contiene un ciclo che sputa del contenuto di una pagina. La parte del contenuto viene normalmente recuperata utilizzando la funzione di WordPress get_template_part (). Proprio sotto il punto in cui è stato recuperato il contenuto, inseriamo il nostro modulo HTML. Quindi, per ricapitolare:

  1. Copia e incolla il codice da page.php nel nostro modello di pagina.
  2. Trova dove viene prodotto il contenuto.
  3. Subito sotto, inserisci il seguente codice e poi lo attraverseremo:

Non c'è niente di pazzesco in corso qui: il modulo sta usando il markup Bootstrap poiché il nostro tema è basato su Bootstrap. Altre cose da notare sono che il modulo viene inviato utilizzando il metodo POST e abbiamo incluso un wp_nonce_field: si tratta di un tipo di token di sicurezza che aiuta a prevenire attacchi dannosi. Se non hai familiarità con Nonces di WordPress, ti suggerisco di leggere questo articolo. 

Recupero dei dati

Con quello sul posto, dovreste avere una forma sulla parte anteriore del luogo, ma non sta facendo molto. Vogliamo che mostri i dati che abbiamo per l'utente che ha effettuato l'accesso. Potresti aver notato che gli attributi di valore nel nostro modulo fanno eco ad alcuni PHP. 

value ="nome di battesimo; ?>"

Proprio ora $ USER_INFO l'oggetto non esiste perché non abbiamo ancora scritto il codice, quindi iniziamo da lì. Incolla il seguente codice prima del nostro modulo in template-user-profile.php.

Utilizzando alcune funzioni native di WordPress, ottiene l'ID dell'utente corrente e con questo siamo in grado di ottenere i dati dell'utente. Questo è memorizzato in un oggetto chiamato $ USER_INFO, e come dimostrato sopra possiamo recuperare facilmente i dati dell'utente. Per vedere tutti i dati memorizzati in quell'oggetto, puoi eseguire a var_dump così: . Questo può essere utile per il debug o semplicemente per vedere a cosa è possibile accedere. 

Elaborazione dei dati

C'è un ultimo tassello del puzzle, che è quello di elaborare i dati, consentendo così agli utenti di modificare i loro profili. Al fine di mantenere le cose organizzate, ho messo il codice di appartenenza in un file giustamente chiamato membership.php. Questo è nel lib directory ed è stato incluso nel nostro file functions.php. Una volta fatto questo, apri il tuo file membership.php appena creato in un editor di codice e creiamo la funzione che elaborerà i dati degli utenti. 

Per prima cosa, corriamo velocemente attraverso la logica. Quando viene premuto il pulsante di invio, vogliamo controllare che il nostro campo nonce sia stato inviato: questo controlla che i dati provengano dal posto giusto. 

Se questa condizione è soddisfatta, vogliamo ottenere l'ID dell'utente corrente in quanto ci servirà per archiviare i dati. Quindi vogliamo organizzare i nostri dati in una struttura che piace a WordPress, in questo caso è un array con chiavi specifiche. Prima di salvare i dati, vogliamo anche convalidarli e disinfettarli. E infine vogliamo mostrare messaggi al nostro utente, sia di successo che di errori.

E il codice per tutto quello che assomiglia a questo:

 sanitize_text_field ($ _POST ['first_name']), 'last_name' => sanitize_text_field ($ _POST ['last_name']), 'user_email' => sanitize_email ($ _POST ['email']), 'twitter_name' => sanitize_text_field ( $ _POST ['twitter_name']), 'user_pass' => $ _POST ['pass1'],); if (! empty ($ user_data ['user_pass'])) // Convalida le password per verificare che siano uguali. if (strcmp ($ user_data ['user_pass'], $ _POST ['pass2'])! == 0) wp_redirect ('? password-error = true'); Uscita;  else // Se i campi password non sono impostati, non salvare. unset ($ user_data ['user_pass']);  // Salva i valori nel post. foreach ($ user_data as $ key => $ value) $ results = "; // http://codex.wordpress.org/Function_Reference/wp_update_user if ($ key == 'twitter_name') $ results = update_user_meta ($ user_id, $ key, $ value); unset ($ user_data ['twitter_name']); elseif ($ key == 'user_pass') wp_set_password ($ user_data ['user_pass'], $ user_id); unset ($ user_data ['user_pass']); else // Salva i valori rimanenti. $ results = wp_update_user (array ('ID' => $ user_id, $ chiave => $ valore)); if (! is_wp_error ($ results) ) wp_redirect ('? profile-updated = true'); wp_redirect ('? profile-updated = false'); exit; add_action ('tutsplus_process_user_profile', 'tutsplus_process_user_profile_data');

Ora potresti notare che i dati vengono salvati utilizzando tre diverse funzioni di WordPress:

  • update_user_meta () per il nome di Twitter
  • wp_set_password () per la password
  • wp_update_user () per i restanti dati

E hai ragione a chiedertelo. Fondamentalmente i metadati personalizzati (il nome di Twitter) devono essere elaborati utilizzando la funzione relativa e non la funzione utente di aggiornamento generale. Per quanto riguarda la password, mentre può funzionare con wp_update_user (), Ho avuto problemi con esso e preferisco usare questo metodo. Ricorda che questa è solo una guida e spesso il codice è mirato a dimostrare diversi metodi per raggiungere i tuoi requisiti. 

Ok, ora abbiamo la nostra funzione per elaborare i dati, ma non viene chiamato da nessuna parte. Alla fine della nostra funzione puoi vedere che c'è un'azione associata ad essa. Quindi per chiamare quella funzione abbiamo solo bisogno di usare il WordPress fornito: do_action () ;. Quindi incollare questa linea sopra il modulo nel modello di pagina del profilo utente creato in precedenza:

Con quello in atto, quando inviamo il nostro modulo dovrebbe funzionare attraverso la nostra funzione ed elaborare i dati. 

Messaggi di errore e di successo

Il nostro modulo profilo dovrebbe salvare o rifiutare i dati ora. Forse le due password non erano le stesse e non salvate. Non ci sono messaggi per fornire feedback degli utenti. Salviamo il dolore agli utenti e diamo loro alcuni messaggi. 

Nel nostro tutsplus_process_user_profile () funzione che potresti aver notato accoda diverse stringhe di query all'URL in base al risultato dell'elaborazione. Quindi se tutto viene salvato e completato, il nostro URL verrà aggiunto ?profile-aggiornato = true, e questi variano in base ai risultati. Quello che dobbiamo fare è attivare un messaggio basato su queste risposte. 

Sotto ho usato un filtro per afferrare il contenuto e attraverso la magia di $ _GET possiamo controllare i parametri e sputare ciò di cui abbiamo bisogno. 

Ok, non proprio lì - stiamo usando una funzione chiamata tutsplus_get_message_markup () sopra, ma non l'abbiamo ancora definito. Include due parametri:

  • una stringa: il messaggio da visualizzare
  • una stringa: la gravità dell'avviso da mostrare in base a Bootstrap  

Quindi definiamo il nostro tutsplus_get_message_markup () funzione:

'; $ output. = ''; $ output. = '

'. $ messaggio. '

'; $ output. = '
'; restituire $ output;

Grande. Ora i nostri membri possono vedere se i loro dati vengono salvati o meno. 

Credito extra

Quindi ora abbiamo un prototipo funzionante per un sito di appartenenza. Gran parte di questa funzionalità viene fornita con WordPress, ma è stata messa a punto e ottimizzata per renderla un'esperienza migliore per i nostri utenti. Quindi ora puntiamo i nostri "Io" e incrociamo le "T" per migliorare l'esperienza un po 'di più. 

In primo luogo, vogliamo mantenere gli utenti non loggati dalla possibilità di accedere alla pagina del profilo. Lo farà un semplice reindirizzamento verso la home page. Ho creato una funzione che fa proprio questo, e la chiamo sulle pagine a cui voglio accedere esclusivamente dagli utenti registrati. 

Ecco la funzione, che è inserita in membership.php: 

Ora possiamo semplicemente chiamare la funzione nella parte superiore del modello di pagina del profilo utente. 

Prossimo passo vogliamo mantenere gli utenti, bene, gli abbonati-fuori dall'area di amministrazione. E per di più, andiamo rimuovere la barra di amministrazione per gli utenti connessi. Di nuovo mettiamo questo nel nostro membership.php.

E infine, non è molto facile navigare tra le schermate di login / logout. Aggiungiamo un po ' navigazione specifica dell'utente. Quello che ho fatto è creare una funzione che emetta il codice rilevante, e questo viene poi chiamato nei nostri template / header.php dove viene mostrata la navigazione principale. 

'; if (is_user_logged_in ()) echo '
  • '; eco '' . $ welcome_message. ''; eco '
  • '; eco '
  • '; eco '' . __ ("Esci", "saggio"). ''; eco '
  • '; else echo '
  • '; eco '' . __ ("Accedi", "saggio"). ''; eco '
  • '; eco '';

    Sommario

    WordPress è una base sorprendente per un'applicazione di iscrizione. Ha già molte delle funzionalità associate a questo tipo di applicazione. Oltre a ciò, gli utenti di WordPress hanno reso molto facile aggancio agli eventi e filtro dei contenuti in modo da poter estendere ciò che è già lì. 

    Spero che questo ti abbia fornito metodi, idee e conoscenze per sviluppare i tuoi siti di appartenenza. Questa non è affatto una guida completa su questo argomento, ma piuttosto serve da base.

    Qualsiasi commento è benvenuto e farò del mio meglio per rispondere a qualsiasi domanda nei commenti.

    Cose da notare

    Nota: se stai scaricando il codice dal repository GitHub, include tutti i file per far funzionare il tema. L'idea è che puoi prendere il repository ed eseguire i comandi Gulp e Bower necessari e sarai via! Se si desidera solo i file che contengono codice specifico per questa serie, i file sono elencati di seguito: 

    • tutti i file nella directory di amministrazione  
    • lib / admin.php 
    • lib / membership.php
    • template-user-profile.php