Recenzii simple de utilizatori cu formulare de gravitate și un tip de post particularizat

Ce veți crea

Clientul meu vinde câteva produse și dorea o modalitate prin care vizitatorii site-ului să poată trimite o recenzie sau mărturie despre un anumit produs și să afișeze acele recenzii pe paginile produselor respective pe site-ul său WordPress.

Am lucrat la această sarcină toată ziua după-amiaza ieri la marea mea frustrare și tocmai acum am reușit să lucrez. Mi-am dat seama că făceam asta mult mai tare decât este cu adevărat. Gravitatea formează salvarea!

Există câțiva pași în acest proces:

  • Creați un tip de post personalizat.
  • Creați un formular în formularul Gravity pentru a permite utilizatorilor să trimită mesaje de lucru utilizând tipul dvs. de post personalizat.
  • Adăugați formularul la o pagină.
  • Afișați postările de pe site-ul dvs..

Să începem.

1. Creați un tip de post particularizat

Aceasta este o situație perfectă pentru un post post particularizat, cum ar fi un post pe blog, doar special. Tipurile de postări personalizate sunt separate de postările regulate de pe blog; ele vă pot ajuta să transformați site-ul într-o bază de date de filme sau într-un site de rețete, cu propriile taxonomii personalizate (în loc de categoriile de bloguri, gândiți la regizorii filmului, actori și genuri).

În timp ce puteți crea manual un tip de post personalizat (CPT) utilizând codarea, hai să facem acest lucru ușor. Instalați interfața personalizată a tipului postului și activați-o. Acesta este un plugin foarte util și stabil, care a fost în jur de mulți ani.

În interfața personalizată de tip Post Post, veți crea un nou post. Iată o captură de ecran a mea. Denumiți-vă ce doriți; în acest caz, mine este Recenzii.

Puteți să părăsiți etichete numai secțiunea. Dar în Setări, veți dori să faceți câteva modificări.

Am lăsat majoritatea defecțiunilor sub Setări singur, dar ați bifat caseta pentru Excludeți din Căutarea deoarece nu vreau postări de examinare în rezultatele căutării. Și în secțiune suporturi, Am bifat doar casetele de selectare pentru elementele pe care trebuie să le afișez în pagina de editare a postărilor de examinare: Titlu, Editor, și câmpuri customizate.

Dacă faceți clic pe mouse peste semnele de întrebare roșii din panoul Setări, veți vedea ce face fiecare element; vă puteți întoarce mereu și puteți face schimbări.

2. Creați un formular în Forme de gravitate

Gravity Forms este un plugin extraordinar, dar nu se va ocupa de posturile personalizate pe cont propriu. Pentru aceasta, va trebui să instalați și să activați un alt plugin, Gravity Forms + Custom Posts Type. Dă-i drumul și faci asta și vom începe să fim pe formular.

În Formele de gravitate, creați un nou formular; să o numim Trimiteți o recenzie. Salvați-o și apoi deschideți-o Câmpurile postale în coloana din dreapta. Folosirea acestor câmpuri în locul câmpurilor formularului obișnuit va crea un nou post când utilizatorul va trimite formularul.

Mai întâi, faceți clic pe Titlul postului pentru a adăuga acel câmp. În acest caz, vreau ca titlul postului meu să fie numele persoanei care a trimis recenzia - a se vedea imaginea de mai jos.


Denumiți câmpul (aici este Numele dvs., deci aceasta este eticheta pe care utilizatorul o va vedea). Pentru Post Stare, probabil că doriți Proiect; aceasta înseamnă că noua postare va fi în format de versiune și nu va fi publicată pe site până când nu o aprobați.

Mesajul autorului implicit ți se potrivește și asta e bine - nu contează aici - și nici nu vor Postați categoria deoarece folosim un tip de post personalizat. Faceți acest câmp Necesar bifând caseta de selectare de jos.

Apoi du-te la Avansat tab. Bifați caseta pentru Salvați ca tip de mesaj și alegeți tipul de post personalizat pe care l-ați creat la începutul acestui tutorial.


Apoi apasa Actualizați pentru a salva modificările.

Apoi vom adăuga un câmp de e-mail (de la Câmpuri avansate secțiune) ca și cu orice formă, făcând-o Necesar.

Înainte vom adăuga un alt câmp de postare, Corp. Aceasta funcționează la fel ca câmpul Text paragraf într-o formă normală. Nu trebuie să modificați nicio altă setare pentru acest câmp decât pentru Etichetă de câmp și bifând Necesar Caseta de bifat.

Aproape gata! Acum, deoarece clientul meu are mai multe produse, vrem să întrebăm utilizatorul ce produs a cumpărat. Pentru a face acest lucru, vom adăuga un câmp particularizat din Câmpurile postale (trageți-o astfel încât să apară înaintea câmpului Corp, astfel încât fluxul să aibă sens).

Pentru scopurile noastre vrem ca acest câmp personalizat să fie butoane radio, deci alegeți de la Tip de câmp. Apoi trebuie să dăm câmpului nostru personalizat un nume. Alege Nou de când o facem aici, apoi introduceți un nume în caseta de text. În acest caz este numele produsului.


Apoi completați opțiunile butonului radio ca de obicei, asigurându-vă că introduceți atât o etichetă (ceea ce văd utilizatorul), cât și o valoare (pe care o puteți utiliza pentru a separa recenziile după numele produsului).

Faceți acest câmp Necesar (și nu uitați să adăugați propriul dvs. Etichetă de câmp în partea de sus, pentru utilizator) și actualizați formularul. Am terminat cu partea a 2-a.

3. Adăugarea formularului la o pagină

Sper că deja știți cum să faceți acest lucru, dar dacă nu, este foarte simplu. Accesați pagina pe care doriți să puneți formularul și să editați pagina.

Puneți cursorul în locul în care doriți să adăugați formularul. Clic Adăugați un formular în partea de sus, alegeți noul dvs. formular, deselectați Titlu și Descriere casete de selectare și faceți clic pe Inserați formularul. Acesta va adăuga un shortcode la pagină.

Asta e. Și așa arată forma pe pagină.


Continuați și încercați formularul, adăugând câteva comentarii. Aș sugera adăugarea de recenzii pentru cel puțin două sau trei produse, astfel încât să avem de lucru cu ce să lucrăm în următoarea parte a acestui tutorial. Puteți să ștergeți întotdeauna recenziile de testare mai târziu.

4. Afișați postările de pe site-ul dvs.

Acum ajungem la partea care are multe posibilități. Dacă te uiți în admin din partea stângă, veți avea acum un nou element de meniu - în cazul meu, se numește opinii. Dacă te uiți la asta, vei vedea recenziile pe care le-ai trimis (dacă nu există, ai sărit peste ultima parte a pasului 3 - mergi la formularul tău și trimiteți recenzii de testare, cel puțin pentru câteva produse, așa cum am au nevoie de ceva material pentru a lucra cu acest pas).

Acestea sunt postări de blog, dar au propriul element de meniu din cauza tipului dvs. de post personalizat. Acest lucru vă ajută să păstrați lucrurile separate pe site; puteți avea un blog obișnuit și apoi orice număr de posturi personalizate pentru a gestiona mai multe informații specializate. Destul de cool, da?

Deschideți unul dintre aceste postări și veți vedea numai elementele pe care le-ați bifat în secțiunea Suportă înapoi la pasul 1 atunci când configurați tipul dvs. de post personalizat. În acest caz, acesta este titlul, editorul și câmpurile personalizate. Ne place să-l păstrăm cât mai simplu posibil. Uitați-vă la câmpul personalizat și veți vedea că are atât un nume (eticheta pe care ați introdus-o), cât și o valoare (pe care ați introdus-o și ea). Această valoare poate fi utilizată pentru a controla ce recenzii sunt afișate într-un șablon personalizat.

Afișarea postărilor de pe site-ul dvs. se poate face cu codarea în fișierele tematice sau cu pluginuri; Sunt multe, multe modalități de a face acest lucru. Pentru acest tutorial, vom adăuga recenziile la un widget lateral al barei laterale. Vă voi arăta două modalități de a face acest lucru cu un plugin: unul ușor și unul mai bun.

Afișarea postărilor personalizate într-un widget: Calea simplă

Pentru acest exemplu, vom folosi pluginul Special Posts Special. Instalați și activați-l și apoi mergeți la Setări> Widgeturi. Glisați widget-ul într-o bară laterală.

Când o deschizi, vei vedea o mulțime de opțiuni. Pentru acest exemplu, acestea sunt setările pe care le-am folosit pentru a obține lista de postări afișate aici, dar puteți folosi orice lucru care funcționează cu site-ul dvs..

  1. Am schimbat-o Titlu widget la Recenzii recente si Post Limită la 2.
  2. Nu există miniaturi, deoarece nu sunt asociate cu recenzii.
  3. Sub Opțiuni postare Am ales să utilizez lungimea completă pentru Postare lungime conținut. Bifați caseta cu Activați filtrele WordPress, pentru că vom folosi mai târziu.
  4. Nu se modifică opțiunile de postare avansate 1 sau 2.
  5. Sub Opțiuni de filtrare, tastați numele postului personalizat în ultima casetă (dacă nu funcționează, încercați versiunea singulară de revizuire sau recenzii).
  6. Salvați widgetul.

Iată cum arată în bara mea laterală:


Funcționează destul de bine din cutie, dar puteți personaliza afișarea dacă știți unele CSS. Cu toate acestea, nu aveți prea mult control asupra a ceea ce se afișează; nu puteți alege să afișați recenzii pentru un produs și să le ascundeți pentru altul. Dar vă voi arăta cum să faceți asta în următoarea parte.

Afișarea postărilor particularizate într-un widget: cu control total

Codul Shortcod de conținut personalizat este un plugin uimitor de util, care vă va permite să afișați orice tip de conținut oriunde pe site-ul dvs., inclusiv widget-uri. Are o curbă de învățare, dar are și o documentație excelentă care este inclusă într-o secțiune de referință chiar din tabloul de bord Admin. Oferă mult control asupra a ceea ce este afișat și nu va dezamăgi dacă vă dați puțin timp să învățați cum să îl utilizați. Este un instrument pe care îl puteți folosi din nou și din nou pe site-ul dvs. sau pe blog.

Va trebui sa fiti putin confortabil cu HTML si CSS pentru a modela afisarea acestui widget - doar sa va informeze. Nu pare prea mult din cutie. Puteți adăuga stilurile în fișierul style.css al temei.

Să folosim codul scurt pentru conținut pentru a crea un alt widget, dar de această dată vom limita afișările, astfel încât să putem afișa numai recenzii pentru un anumit produs.

În Setări> Widgeturi, trageți un widget de text într-o bară laterală și adăugați titlul.

Vă voi arăta cum să configurați codul scurt pentru acest exemplu, dar vă recomand să aruncați o privire prin Referinţă secțiune pentru plugin, la care ajungeți în Plugin-uri (veți vedea un link pentru el sub numele pluginului). Este un instrument foarte puternic!

Iată codul scurt pe care îl folosesc. Voi trece prin linie.

[loop type = "review" field = "product_name" value = "boulder_case"] [conținut] [titlu de domeniu]

Pentru tip buclă, introduceți numele câmpului dvs. personalizat, probabil unic (dacă nu funcționează, încercați plural).

Camp este numele câmpului personalizat pe care l-ați utilizat în Formularele gravitaționale. Valoare este valoarea asociată cu butonul radio din formularul Gravity.

Aceste elemente controlează bucla, ceea ce înseamnă că va trece prin fiecare post de "revizuire" unul câte unul afișând cele cu valoarea "boulder_case" până când se uită la ele toate.

Deci, în interiorul buclă dvs., va afișa trei lucruri: conținutul postului (din câmpul Corp în Gravity Forms), titlul (numele utilizatorului) și data publicată.

Are sens? Tastați sau copiați acest lucru în widgetul dvs. text, înlocuind elementele din secțiune cu numele dvs., salvați-l și aruncați o privire la ceea ce generează.

Probabil că arată ca o mizerie, dar conținutul este tot acolo și veți observa că sunt afișate numai posturile cu valoarea specificată pe care ați introdus-o. Acest lucru este puternic; înseamnă că poți crea un widget de revizuire pentru fiecare produsîn loc de a avea toate comentariile amestecate împreună.

Deci, acum va trebui să faceți niște formatări pentru a face lucrurile să arate mai bine - este nevoie de un pic de HTML.

[tip buclă = "revizuire" domeniu = "nume de produs" count = "3"]
[conţinut]

- [titlu de domeniu]

[data terenului]

[/buclă]

Acest lucru face lucrurile mult mai ușor de citit, dar acum unele CSS sunt necesare pentru al modela. Voi adăuga câteva clase la acest cod pentru stil.

/ * Recenzii * / # sidebar-primar .widget .review-buclă .review margin-bottom: 1.5em;  # sidebar-primar .widget .review-loop div.text p (margine: 0;  # bara laterală-primară .widget .review-loop div.text p: înainte de content: '\ 201C';  # bara laterală-primară .widget .review-loop div.text p: după content: '\ 201D';  # bara laterală-primară .widget .review-loop .author font-size: 1.5rem; linia-înălțime: 2.1rem; font-style: italic; marjă: 0,5 și 0,2; text-aliniere: drept;  # bara laterală-primară .widget .review-loop .date marja: 0; dimensiune font: 1.4rem; linia-înălțime: 1.96rem; font-style: italic; text-aliniere: drept; 

Și aici este produsul finit toate stil și gata pentru mai mult conținut.


Înfășurarea în sus

Deci acum știi:

  • cum și când să creați un tip de post personalizat
  • cum să creați un formular pentru colectarea conținutului de utilizator pentru tipul dvs. de post personalizat
  • cum să afișați formularul respectiv pe o pagină sau o postare
  • cum să afișați postările dvs. personalizate într-un widget utilizând un plugin simplu
  • cum să afișați postările personalizate cu mai mult control

Într-o urmărire la acest post, vă voi arăta cum să afișați noul conținut personalizat într-o pagină utilizând un șablon personalizat și o buclă. Este un pic mai dificil, dar vă va oferi puterea de a controla cu adevărat conținutul trimis de utilizatori. Apoi, puteți să vă gândiți la alte modalități de a utiliza, de exemplu, fotografiile conținute de utilizatori în cadrul unei galerie. Obținerea vizitatorilor implicați este o modalitate excelentă de a vă promova site-ul companiei.

Cod