Come sviluppare un sito di appartenenza con WordPress parte 1

WordPress viene già fornito con un sacco di cose buone per creare un sito di appartenenza. Sfortunatamente la maggior parte del processo viene gestita attraverso il back-end del sito e idealmente vogliamo tenere gli utenti lontani dall'area di amministrazione. Quindi, in questa serie in tre parti, sposteremo questo processo nella parte anteriore del sito, apportando alcune personalizzazioni e adattandolo lungo la strada.

Alla fine della serie dovresti avere un sito dove le persone possono registrarsi, accedere e modificare i dettagli del proprio account. Dato che è un argomento così ampio, non saremo in grado di coprire tutto, ma farò del mio meglio per darti una solida base per un sito di appartenenza.

In poche parole, questo è quello che ci si aspetta dalla serie:

• Prima parte: Moduli di registrazione e accesso
• Seconda parte: Aggiunta di campi personalizzati al modulo di registrazione
• Parte terza: Sviluppo di una sezione "profilo utente"

Ora, prima di iniziare, c'è una buona argomentazione per la realizzazione di questo codice come plugin, dopotutto è abbastanza funzionale. Ma a causa della quantità di "tematizzazione"Lo faremo, è assolutamente ragionevole che il codice sia ospitato nel nostro tema.  

Cerchiamo di entrare

Come sviluppatore di WordPress uso Sage come tema di partenza, quindi lo svilupperò usando questo. Se non hai usato Sage (precedentemente noto come Roots) in precedenza, c'è una leggera curva di apprendimento poiché usa Bower e Gulp, quindi avrai bisogno di avere un po 'di esperienza nell'usarli. Detto questo, potresti facilmente applicare i principi qui a qualsiasi tema. C'è molto altro da dire sui temi degli starter, ma salviamolo per un'altra volta.

Quindi, senza ulteriori indugi, entriamo nella sezione di registrazione del tuo sito. Ci sono fondamentalmente due approcci, e ho provato entrambi. Il primo consiste nello sviluppare un modulo personalizzato ed elaborare autonomamente la registrazione, mentre il secondo riguarda l'estensione della registrazione nativa e dei moduli di accesso. Preferisco quest'ultimo, ed ecco perché: nativo è sempre meglio, è più facile da mantenere, e ci sono molte meno parti in movimento.

Uno svantaggio sull'utilizzo dei moduli nativi per l'accesso e la registrazione è che ottieni gli URL nativi: http://AnExampleDomain.com/wp-admin e http://AnExampleDomain.com/login/?register.

Non preoccuparti, perché ci sono modi per riscriverli, quindi non sarà ovvio che sia un sito WordPress.

Ottenere la nostra casa in ordine  

Mi piace mantenere una casa pulita, quindi nelle mie funzioni.php includerò un file chiamato admin.php che conterrà tutte le nostre funzioni relative all'amministratore. Il codice riportato di seguito (riga 12) indica come includere il file se si utilizza il tema Sage WP Starter.  

Se non stai usando Sage puoi semplicemente usare qualcosa come: 
require_once locate_template ('/lib/admin.php');
Nota a margine: Questo non è correlato a questo argomento, ma ti consigliamo di includere più funzioni nel tuo file functions.php e poi nei rispettivi file. Mantiene i file più puliti e leggibili. 
Manterremo i nostri asset amministratore (CSS e immagini) in un separato Admin directory. Questo è facoltativo, ma ricorda di cambiare il percorso quando fai riferimento a questi file se utilizzi una struttura diversa.  
Iniziamo con il CSS
Vogliamo sovrascrivere gli stili che WordPress ha applicato alle pagine di login e registro.
 
http://AnExampleDomain.com/wp-admin
 
http://AnExampleDomain.com/wp-login.php?action=register
 
Per fare questo, abbiamo bisogno di includere un foglio di stile nel nostro tema. Il modo per farlo in WordPress è usare la funzione wp_enqueue_style.
Quindi il piano è caricare un foglio di stile diverso per ogni modulo. Per fare ciò controlleremo il parametro GET passato e caricherete il rispettivo stile. Se stai pensando, "Che diavolo è un parametro GET?", Allora non preoccuparti. È fondamentalmente l'URL. Questo è tutto ciò che devi veramente sapere per quello che stiamo facendo. 
Quindi la logica è: se l'URL è x, carica x il foglio di stile, e se l'URL è y, carica il foglio di stile y. Quindi crea un file admin.php e copia questo codice, quindi salvalo nel file lib cartella.  
Stiamo utilizzando l'azione login_head qui per caricare i nostri stili nella pagina di accesso. Questa azione è particolarmente progettata per questo scopo. Se non conosci le azioni e i filtri in WordPress, ti consiglio di dedicare un po 'di tempo all'apprendimento. Sono pilastri dello sviluppo di WordPress.  
Ora per lo stesso CSS. Per mantenere lo scopo di questo tutorial, scriveremo semplicemente vanilla CSS. No MENO o Sass. Il DOM in realtà non ci dà molto da vedere su queste pagine, quindi dobbiamo essere un po 'furbi. 
Per aggiungere stili di intestazione e piè di pagina, usiamo gli pseudo elementi prima e dopo. Ho catturato un'immagine da http://unsplash.com per lo sfondo della nostra pagina di accesso. È una grande risorsa ma manca di capacità di ricerca. Fortunatamente Arthur Weill ha creato uno strumento per cercare le immagini.
Puoi prendere o visualizzare i file CSS qui sotto:
 
 Modulo di accesso CSS
 
 
 Registrati modulo CSS
 
 
Questo CSS serve solo come guida. I punti principali sono:
 
Per ottenere un'intestazione / piè di pagina, utilizzare prima e dopo elementi pseudo.
 
Utilizzare le query multimediali per assicurarsi che i moduli possano ridimensionarsi in modo corretto. Potresti volere che vengano utilizzati in modal / iframe o per accedere da un tablet o un telefono.
 
Alcuni tocchi finali
Il logo sulle nostre pagine si collega a http://wordpress.org, che non è l'ideale. Fortunatamente WordPress ha un comodo filtro che possiamo usare per cambiarlo, login_headerurl. Quindi includiamo questo frammento nel nostro admin.php.
Un'altra cosa è che nella nostra pagina di registrazione c'è un po 'di testo introduttivo. Non è molto informativo: "Registrati su questo sito". Andiamo a modificare anche questo. Ancora una volta c'è un'azione (login_message) da collegare e modificarla. Non è semplice come il filtro precedente, ma usando gli strpos della funzione PHP possiamo controllare una certa copia ("Registrare") e quindi restituire la nostra copia modificata. 
'. $ register_intro. '
';  else return $ message;  add_action ('login_message', 'tutsplus_register_intro_edit');
E, ultimo ma non meno importante, cambiamo questi URL. Ci sono molti modi per farlo. Potresti usare .htaccess, ma mi piace usare iThemes Security Plugin. All'interno delle impostazioni è possibile modificare gli URL nell'area di amministrazione. Ho cambiato il mio in /accesso. Ci sono molte altre grandi cose che puoi fare con il plugin, quindi ti consiglio di verificarlo.
Qual'è il prossimo?
Siamo partiti alla grande per il nostro sito di appartenenza. Nella seconda parte illustreremo come aggiungere campi meta personalizzati al nostro modulo di registrazione e un breve tocco su come personalizzare le e-mail che vengono inviate dal nostro sito. Spero che questo tutorial sia facile da seguire. Qualsiasi feedback, domande e commenti sono i benvenuti.
Cose da notare
Nota: se stai scaricando il codice dal repository GitHub che 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
 
templates / header.php 
 



		
			
	   
	




Codice