Share
Oggi inizieremo la miniserie su come inserire i post attraverso il front-end. Copriremo una serie di aspetti diversi in questo tutorial, iniziando con la convalida del modulo e inserendo post. Quindi, prepariamoci e cominciamo!
Il nostro obiettivo dopo aver completato questa mini serie dovrebbe consentire all'utente di inviare post tramite il front-end, insieme alla modifica e all'invio del post nel cestino; tutto senza essere nella Dashboard di WordPress. Questi metodi possono essere utilizzati in un tema o in un plug-in e sono molto adattabili per ottenere presentazioni molto avanzate e complesse.
La demo e i file di download sono un tema ridotto che è stato creato per gli scopi di questo tutorial.
Quindi apri il tuo editor di testo preferito e cominciamo!
Iniziamo creando un modulo che consenta all'utente di inserire i dettagli per quanto riguarda la creazione di un post. Mentre stiamo creando questo in un tema, iniziamo creando un nuovo modello di pagina e chiamiamolo template-insert-posts.php. Inizieremo quindi a costruire il nostro modulo e ad inserire alcune etichette e campi di input per il titolo del post e la textarea per il corpo:
Quello che abbiamo appena creato è un modulo molto semplice che ha un input di testo per l'utente per inserire il titolo e una textarea per il contenuto del post.
Ora che abbiamo impostato i nostri fondamentali, avremo bisogno di eseguire una convalida del modulo per garantire che stiamo ricevendo contenuti corretti e che non abbiamo attacchi malevoli contro i nostri contributi.
Utilizzeremo due diverse forme di convalida. Utilizzeremo il plugin di convalida jQuery, insieme alla tradizionale convalida di PHP. Iniziamo con il lato jQuery della convalida e inizializziamo lo script di convalida. Ci assicureremo di registrare e accodare gli script all'interno del nostro functions.php file. Insieme a questo, creeremo un file JavaScript vuoto dove gestiremo tutte le nostre jQuery personalizzate; ricorda di registrare e accodare questo file per l'inizializzazione. Questo dovrebbe assomigliare a questo:
Accentsconagua
// jquery personalizzato wp_register_script ('custom_js', get_template_directory_uri (). '/js/jquery.custom.js', array ('jquery'), '1.0', TRUE); wp_enqueue_script ('custom_js'); // validazione wp_register_script ('validation', 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js', array ('jquery')); wp_enqueue_script ('validation'); Ottimo, abbiamo registrato e accodato tutti i nostri script necessari. Ora apriremo il nostro file jQuery personalizzato e inizieremo a inizializzare il nostro javery Validation Plugin; apriremo il nostro file JavaScript vuoto e scriveremo la seguente riga di codice per creare la nostra validazione jQuery:
jQuery (document) .ready (function () jQuery ("# primaryPostForm"). validate ();); Tutto ciò che abbiamo fatto qui è ottenere l'ID del nostro modulo e applicare il convalidare metodo per questo. Ora che abbiamo questo, torneremo al nostro template-insert-posts.php file e assicurarsi che abbiamo messo il necessario classe nei campi di input che sono richiesti.
Tutta la validazione di jQuery è a posto, passiamo alla validazione di PHP.
La nostra convalida dovrebbe garantire che inseriremo un titolo e, se la convalida jQuery fallisce, ritornerà alla convalida PHP. Lo facciamo creando innanzitutto una variabile PHP per memorizzare il messaggio di errore, quindi creare alcuni test condizionali.
Inizialmente verifichiamo se l'utente ha inviato il modulo, quindi testiamo se la nostra variabile di messaggio di errore PHP è vuota. Abbiamo bisogno di inserire il seguente codice che lo fa proprio sopra il nostro :
La nostra validazione PHP è a posto, faremo in modo che il valore che stiamo inviando sia lo stesso valore inserito dall'utente, e lo facciamo inserendo il seguente codice nel nostro titolo del post Campo di inserimento:
value =""
Dobbiamo anche fare lo stesso per la nostra area di testo, ma funziona in modo leggermente diverso; invece di impostare un valore, inseriamo il seguente codice all'interno del nostro postContent tag textarea:
Infine, dobbiamo assicurarci che stiamo trasmettendo il nostro messaggio di errore, e lo facciamo controllando se la nostra variabile di messaggio di errore è vuota. Se la nostra variabile non è vuota, invia il messaggio altrimenti non viene visualizzato nulla. Il seguente codice raggiunge questo:
Ora che abbiamo impostato il nostro modulo con la convalida, possiamo passare all'inserimento del contenuto in un post. Andiamo avanti…
Ora invieremo i nostri dati del modulo in un post effettivo. Lo facciamo usando la funzione WordPress wp_insert_post. Questa funzione ci consente di inserire post, quindi lo utilizzeremo a nostro vantaggio.
Iniziamo innanzitutto creando una variabile per contenere tutti i nostri diversi elementi. Puoi definire un intero gruppo di elementi diversi e puoi leggere nel codice WordPress. Inserisci il seguente codice, appena sotto il codice di convalida del modulo:
$ post_information = array ('post_title' => wp_strip_all_tags ($ _POST ['postTitle']), 'post_content' => $ _POST ['postContent'], 'post_type' => 'post', 'post_status' => 'in sospeso '); wp_insert_post ($ post_information); Il codice appena inserito crea una matrice e assegna valori ai diversi elementi. Per il titolo del post elemento, noi POSTA nostro titolo del post valore, e noi POST la nostra postContent a noi POST_CONTENT elemento.
Abbiamo anche impostato il nostro tipo di post su inviare, poiché invieremo il tipo di post predefinito, ma in questo campo puoi passare qualsiasi tipo di post personalizzato. Infine, stiamo impostando lo stato del post in attesa che l'amministratore possa confermare il post prima di pubblicarlo.
Quindi eseguiamo la funzione wp_insert_post e passa il nostro array con tutti i nostri elementi e i dati a loro assegnati.
Questo è tutto! Ora siamo in grado di aggiungere post tramite il front-end, ma non abbiamo ancora finito. Abbiamo alcuni problemi di sicurezza che dobbiamo compensare. Iniziamo inserendo a wp_nonce_field. Se non sai cosa sia un campo nonce, il codice WordPress lo spiega perfettamente:
Il campo nonce viene utilizzato per convalidare che il contenuto del modulo proviene dalla posizione sul sito corrente e non da qualche altra parte.
Questo ci aiuterà contro eventuali problemi di sicurezza e previene eventuali attacchi dannosi. Tutto ciò che dobbiamo fare è inserire il codice seguente appena prima del pulsante di invio:
Insieme a questo, modificheremo la convalida del nostro modulo per garantire che stiamo solo inviando il contenuto una volta confermato il campo nonce che stiamo inviando il contenuto dal sito Web, lo facciamo sostituendo la nostra dichiarazione condizionale di convalida. Il tuo codice finale con convalida e invio dei dati dovrebbe essere il seguente:
if (isset ($ _POST ['submitted']) && isset ($ _POST ['post_nonce_field']) && wp_verify_nonce ($ _POST ['post_nonce_field'], 'post_nonce')) if (trim ($ _POST ['postTitle' ]) === ") $ postTitleError = 'Per favore inserisci un titolo.'; $ hasError = true; $ post_information = array ('post_title' => wp_strip_all_tags ($ _POST ['postTitle']), 'post_content' = > $ _POST ['postContent'], 'post_type' => 'post', 'post_status' => 'in sospeso'); wp_insert_post ($ post_information); Infine, solo per un extra, imposteremo un reindirizzamento una volta che l'utente ha inviato le informazioni, in modo che gli utenti non possano premere invio più volte e continuare a inserire gli stessi dati nei nostri post. Lo faremo a un livello molto semplice.
Come wp_insert_post restituisce un ID che useremo a nostro vantaggio e restituire l'ID a una variabile che verrà utilizzata per garantire che non stiamo reindirizzando se non è stato creato alcun post.
Lo faremo assegnando il nostro wp_insert_post funzione a una variabile, come segue:
$ post_id = wp_insert_post ($ post_information);
Quindi eseguiremo un'istruzione condizionale per reindirizzare solo se abbiamo un ID post, quindi utilizzare WordPress reindirizzare funzione e passare il HOME_URL a questo. Il codice che inserirai è il seguente:
if ($ post_id) wp_redirect (home_url ()); Uscita;
Tutto fatto…
Ecco le basi e i fondamenti su come inserire i post attraverso il front-end. Abbiamo coperto molto, creando prima un modulo, convalidando i moduli e inviando i nostri dati in un post in attesa!
Nella parte successiva, scaveremo un po 'più in profondità nell'editing e nell'eliminazione dei post tramite il front end, che diventa un po' più complicato ma può essere molto utile!
Mi piacerebbe dire un ENORME grazie per aver dedicato del tempo a leggere il mio tutorial, spero che sia stato di aiuto. Sentitevi liberi di lasciare commenti e farò del mio meglio per aiutarli e rispondervi, se non potete contattarmi direttamente attraverso il mio sito web: www.VinnySingh.co o Twitter @VinnySinghUK
Resta sintonizzato per la parte 2!
