Creare un sistema di recensioni in WordPress (System Reviews)

Oggi andremo a creare un sistema che possa permettere ad un utente registrato al nostro sito, di poter recensire un articolo oppure un vostro custom post type. Realizzeremo anche un sistema di votazione con le stelle e tutto questo in Ajax.

Vedrete che questo codice vi risulterà comodo per esempio, nel caso vogliate far recensire un vostro prodotto o semplicemente avere un parere dai vostri clienti.

Prima di tutto creiamo un custom post type per le recensioni e poi un custom meta box per inserire la valutazione con le stelle, esattamente un radio box da 1 a 5 opzioni. Inseriamo ora tutto questo codice in un file a parte chiamato cpt-ratings.php e che richiameremo dal nostro file functions.php successivamente.

In pratica il codice di cui sopra, inserisce un custom post type, mentre la classe finale si occupa di inserire un custom meta box per il custom post type appena creato per le reviews.

Ecco nel frattempo il risultato del nostro codice:

risultato_iniziale_wordpress

Nella parte sinistra ho inserito appunto il rating da 1 a 5 e per la creazione della review è necessario un titolo ed una breve descrizione.

Ora abbiamo bisogno di richiamare alcuni files necessari, per questo esempio ho utilizzato la versione beta (ed ultima) di Bootstrap ed un pacchetto di icone che amo tantissimo, Ionicons. Ora potete inserire questi richiami nel vostro file functions.php.

Se notate ho inserito anche la chiamata Ajax da usare a breve nella creazione del form di invio recensione.

Ora scegliamo dove inserire il nostro form. Di solito si inserisce nel file single.php e più esattamente va inserito dentro al ciclo while.

Per richiamare il file che poi creeremo successivamente, andiamo ad inserire nel posto più consono, il form per inviare le recensioni.

Questo per intenderci è un esempio di ciclo while che trovate nella maggior parte dei temi per WordPress.

Nel frattempo inseriamo anche altri 2 files, richiamandoli sempre dal nostro file functions.php

NB: I percorsi che ho usato sono fittizi, nell’esempio di inclusione noterete che ho inserito all’interno della cartella del tema, appunto la cartella “minimac”.

Bene, ora ci siamo, arriva la parte più bella di questo tutorial, ovvero inseriamo il vero e proprio form di invio recensione.

Non abbiamo ancora finito, infatti dobbiamo inserire la funzione che invia e crea il custom post type nel frontend del sito. Per fare questo chiamiamo il file custom-functions.php e lo inserite nel percorso che più vi aggrada, poco sopra ho ribadito che metterò questo file in una cartella fittizia che ho chiamato appunto “minimac“, ma siete liberi di chiamare la cartella come più volete!

Ora, creiamo un file scripts.js che inseriremo dentro una cartella chiamata “js”. Questa funzione abiliterà Ajax per l’invio del form o per eventuali errori.

Ed ora un po di CSS per rendere il tutto più gradevole!

Risultato

Finalmente abbiamo il nostro form stilizzato e pronto all’uso per gli utenti loggati.

form_recensione_finale

L’utente ora ha la possibilità di inviare una sua recensione personale con un voto da 1 a 5 e per rendere il tutto più credibile e veritiero, ho fatto che per ogni utente è possibile inserire una sola recensione e che la recensione stessa non viene subito pubblicata, ma prima deve essere approvata da un Amministratore.

Questo un esempio di recensione:

esempio_recensione_lista_e_form_wordpress

E questo un esempio con recensione, ma con un messaggio per l’utente che ha già votato e che quindi non deve essere più in grado di recensire lo stesso post:

esempio_recensione_gia_inserita_wordpress

Nel caso invece che vi sia un errore, verrà mostrato, sempre in Ajax e quindi senza dover ricaricare la pagina, un messaggio:

recensione_messaggio_di_errore_wordpress

Se invece l’utente compila correttamente tutti i campi, allora comparirà un messaggio nel quale gli diremo che la sua recensione è stata pubblicata e che presto un amministratore provvederà alla pubblicazione della stessa.

recensione_inviata_wordpress

Rating e Reviews System (e non solo!)

Per facilitare l’amministrazione di tutte le recensioni che gli utenti pubblicheranno sul sito per ogni prodotto, post o qualsivoglia, sarà possibile avere una lista di tutte le recensioni, un po come è ora WordPress per la gestione dei posts tradizionali, e la possibilità quindi di manipolare e modificare sia la votazione, sia il testo della votazione.

lista_recensioni_wordpress

modifica_recensione_wordpress

Se riscontrate difficoltà nella implementazione di questo sistema nel vostro sito o semplicemente volete aggiungere qualche funzione in più rispetto allo standard che ho creato, allora contattatemi e sarò lieto di aiutarvi nella creazione e personalizzazione del vostro sito!

 

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *