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.

https://gist.github.com/miniMAC/35e9d1e33be09667e4cfc07ccaec3bc5

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.

https://gist.github.com/miniMAC/396ef8268d066a5a2d1d9c48179b9baf

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.

https://gist.github.com/miniMAC/5326a038289f6b2145d572a621c426f4

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

https://gist.github.com/miniMAC/2a4e07b54337f698d069115f701c64af

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

https://gist.github.com/miniMAC/08f5a1c2d08188b24e79bfd904b0bed4

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.

https://gist.github.com/miniMAC/c93afa037992ac5147344604fc7c7fad

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!

https://gist.github.com/miniMAC/6976bf54d057f6ac0ca156e9c9d4e2be

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.

https://gist.github.com/miniMAC/28edc2454faafde7bc6e9d4a15b9c502

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

https://gist.github.com/miniMAC/a9e9097d6805491ea0467ce1ad06eb36

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!

2 commenti

  1. Ciao ti faccio personalmente già i miei complimenti per questo script perchè è quello che cercavo ….Ti posso chiedere dove posso imparare a programmare su wordpress poichè vorrei evitare tanti plugin inutili.Se mi dai un link o dei riferimenti mi aiuteresti tanto.Grazie e buona giornata

    • Ciao Andrea, credo che non esista un riferimento unico nel campo, ma sicuramente devi seguire più tutorial che trovi in rete e poi provare e riprovare 🙂

Lascia una risposta

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