Min klient säljer några produkter och ville ha ett sätt för besökare att kunna lämna in en recension eller ett testamente om en viss produkt och att visa de recensionerna på deras respektive produktsidor på hans WordPress-webbplats.
Jag arbetade på denna uppgift hela eftermiddagen igår till min stora frustration, och just nu fick den fungera. Jag tänkte på att jag gjorde det mycket hårdare än det verkligen är. Gravity Forms till undsättning!
Det finns några steg i denna process:
Låt oss börja.
Det här är en perfekt situation för en anpassad posttyp - som ett blogginlägg, bara speciellt. Anpassade posttyper är skilda från vanliga blogginlägg. De kan hjälpa dig att göra din webbplats till en filmdatabas eller en receptwebbplats med egna anpassade taxonomier (istället för bloggkategorier, tänk filmdirektörer, skådespelare och genrer).
Medan du manuellt kan skapa en anpassad posttyp (CPT) med kodning, gör vi det här på ett enkelt sätt. Installera anpassat posttyp-gränssnitt och aktivera det. Detta är ett mycket användbart och stabilt plugin som har funnits i många år.
I anpassat posttyp-användargränssnitt ställer du in en ny posttyp. Här är en skärmdump av mig. Namnge det du vill i det här fallet är mina recensioner.
Du kan lämna Etiketter sektionen ensam. Men i inställningar, du kommer att vilja göra några ändringar.
Jag har lämnat de flesta standardinställningarna under inställningar ensam, men har kryssat rutan för Uteslut från Sök eftersom jag inte vill ha granskningsinlägg i sökresultaten. Och i avsnittet stöder, Jag har bara markerat kryssrutorna för de element som jag behöver visa på min recension efterbehandlingssida: Titel, Redaktör, och Anpassade fält.
Om du mus över de röda frågetecknen i panelen Inställningar ser du vad varje objekt gör, du kan alltid komma tillbaka och göra ändringar.
Gravity Forms är ett bra plugin, men det kommer inte att hantera egna inlägg på egen hand. För det måste du installera och aktivera ett annat plugin, Gravity Forms + Anpassade posttyper. Gå vidare och gör det, och vi kommer igång på formuläret.
I Gravity Forms, skapa en ny form; låt oss kalla det Skicka en recension. Spara det och öppna sedan Postfält i den högra kolumnen. Genom att använda dessa fält istället för de vanliga formulärfälten skapas ett nytt inlägg när användaren skickar in formuläret.
Klicka först på Post titel att lägga till det fältet. I det här fallet vill jag titeln på mitt inlägg vara namnet på den person som skickar granskningen - se skärmdumpen nedan.
Namn ditt fält (här är det ditt namn, så det här är etiketten som användaren kommer att se). För Poststatus, du vill förmodligen Förslag; Det innebär att det nya inlägget kommer att vara i Utkast format och kommer inte att publiceras på din webbplats tills du godkänner det.
Standard Post Författare är inställd på dig och det är bra - det spelar ingen roll här - och det kommer inte heller att bli Post kategori eftersom vi använder en anpassad posttyp. Gör det här fältet Nödvändig genom att markera kryssrutan under botten.
Gå sedan till Avancerad flik. Markera rutan för Spara som posttyp och välj den anpassade posttyp du skapade i början av denna handledning.
Klicka sedan Uppdatering för att spara dina ändringar.
Sedan lägger vi till ett e-postfält (från Avancerade fält avsnitt) som med någon form, gör det Nödvändig.
Nästa lägger vi till ett annat postfält, Kropp. Det fungerar precis som fältet Avsnittstext i en vanlig form. Du behöver inte ändra några inställningar för det här fältet annat än Fältetikett och tickar Nödvändig checkbox.
Nästan klar! Nu eftersom min klient har flera produkter vill vi fråga användaren vilken produkt de köpt. För att göra detta ska vi lägga till ett anpassat fält från Postfält område (dra upp det så det syns före kroppsfältet så att flödet är vettigt).
För våra ändamål vill vi att detta anpassade fält ska vara radioknappar, så välj det från Fälttyp. Då måste vi ge vårt eget fält ett namn. Välj den Ny knappen eftersom vi gör det här, och skriv sedan ett namn i textrutan. I det här fallet är det produktnamn.
Fyll sedan i valknappen för valknappen som vanligt, se till att du anger både en etikett (vad användaren ser) och ett värde (som du kan använda för att skilja recensionerna efter produktnamn).
Gör det här fältet Nödvändig (och glöm inte att lägga till din egen Fältetikett överst, för användaren) och uppdatera formuläret. Vi är alla färdiga med del 2.
Jag hoppas att du redan vet hur man gör det här, men om inte, det är väldigt enkelt. Gå till sidan där du vill sätta in din blankett och redigera sidan.
Placera markören där du vill lägga till formuläret. Klick Lägg till formulär högst upp, välj din nya blankett, avmarkera Titel och Beskrivning kryssrutor och klicka Infoga formulär. Det lägger till en kortnummer på sidan.
Det är allt. Och så här ser formuläret ut på sidan.
Gå vidare och försök formuläret och lägg till ett par recensioner. Jag föreslår att du lägger till recensioner för minst två eller tre produkter, så att vi får något att arbeta med i nästa del av denna handledning. Du kan alltid ta bort dina testrecensioner senare.
Nu kommer vi till den del som har många möjligheter. Om du tittar i Administration meny till vänster, har du nu ett nytt menyalternativ - i mitt fall heter det recensioner. Om du tittar på det ser du testrecensionerna du skickade in (om det inte finns någon, hoppade du över den sista delen av steg 3 - gå till din blankett och skicka testrecensioner, åtminstone för några produkter, som vi behöver lite material att arbeta med för detta steg).
Det här är blogginlägg, men de har sitt eget menyalternativ på grund av din anpassade posttyp. Detta hjälper dig att hålla saker åtskilda på din webbplats; du kan ha en vanlig blogg och sedan ett antal anpassade posttyper för att hantera mer specialiserad information. Ganska coolt, ja?
Öppna en av dessa inlägg och du får bara se de saker du kryssade under Stöder tillbaka i steg 1 när du ställer in din anpassade posttyp. I det här fallet är det titeln, redaktören och anpassade fält. Vi tycker om att hålla det så enkelt som möjligt. Titta på det anpassade fältet och du ser att det har både ett namn (etiketten du angav) och ett värde (vilket du också angav). Det värdet kan användas för att kontrollera vilka recensioner som visas i en anpassad mall.
Visar inlägg på din webbplats kan göras med kodning i dina temafiler eller med plugins; det finns många många sätt att göra detta. För den här handledningen kommer vi att lägga till recensionerna i en sidofält-widget. Jag visar dig två sätt att göra detta med ett plugin: en enkel och en bättre.
I det här exemplet använder vi pluginprogrammet Special Recent Posts. Installera och aktivera det och gå sedan till Inställningar> Widgets. Dra widgeten i ett sidofält.
När du öppnar den ser du många alternativ. För det här exemplet är det de inställningar jag brukade få inläggslistan som visas här, men du kan använda vad som helst som fungerar med din webbplats.
Så här ser det ut i mitt sidofält:
Det fungerar ganska bra direkt ur lådan, men du kan anpassa skärmen om du vet något CSS. Men du har inte mycket kontroll över vad som visas. Du kan inte välja att visa recensioner för en produkt och gömma dem för en annan. Men jag ska visa dig hur man gör det i nästa del.
Anpassad innehålls kortkod är ett otroligt användbart plugin som låter dig visa vilken typ av innehåll som helst på din webbplats, inklusive widgets. Det har lite av en inlärningskurva, men den har också stor dokumentation som ingår i en referens sektion direkt i din kontrollpanel. Det ger mycket kontroll över vad som visas, och kommer inte att göra dig besviken om du tar lite tid att lära dig hur du använder den. Det är ett verktyg du kan använda om och om igen på din webbplats eller blogg.
Du måste vara lite bekväm med HTML och CSS för att utforma visningen av den här widgeten - bara att låta dig veta. Det ser inte ut som mycket rätt ur lådan. Du kan lägga till stilar till ditt temas style.css-fil.
Låt oss använda Custom Content Shortcode för att skapa en annan widget, men den här gången begränsar vi vad som visas så vi kan bara visa recensioner för en viss produkt.
I Inställningar> Widgets, dra en text widget till ett sidofält och lägg till din titel.
Jag ska visa dig hur du ställer in kortnummeret för det här exemplet, men jag rekommenderar starkt att du tittar igenom Referens avsnittet för plugin, som du kommer till i plugins sida (du får se en länk för den under pluginnamnet). Det är ett mycket kraftfullt verktyg!
Här är den kortnummer jag använder. Jag ska gå igenom den linjen för rad.
[loop type = "review" field = "product_name" value = "boulder_case"] [innehåll] [fält titel] [fält datum] [/ loop]
För slinga typ
, ange namnet på ditt eget fält, antagligen singular (om det inte fungerar, försök plural).
Fält
är det anpassade fältnamnet du använde i Gravity Forms. Värde
är värdet associerat med radioknappen i Gravity Forms.
Dessa element kontrollerar slingan, vilket innebär att det kommer att gå igenom varje "gransknings" -post en efter en visar dem med värdet "boulder_case" tills det ses på dem alla.
Så inuti din slinga kommer det att visa tre saker: Innehållet i inlägget (från fältet Body in Gravity Forms), titeln (användarens namn) och det publicerade datumet.
Går det förnuftigt? Skriv eller kopiera det här till din textdisplay, ersätt objekten i avsnittet med dina egna namn, spara det och kolla på vad det genererar.
Det ser nog ut som en röra-men innehållet är allt där, och du kommer märka att endast inlägg med det särskilda värdet du skrev in visas. Detta är kraftfullt; det betyder att du kan skapa en gransknings widget för varje produkti stället för att ha alla recensioner jumbled tillsammans.
Så nu måste du göra lite formatering för att få saker att se bättre ut - lite HTML behövs.
[loop type = "review" field = "product_name" count = "3"][/slinga][innehåll]- [fält titel]
[fält datum]
Detta gör sakerna mycket lättare att läsa, men nu behövs en del CSS för att stile den. Jag lägger till några klasser i denna kod för styling.
/ * Recensioner * / # sidebar-primär .widget .review-loop .review margin-bottom: 1.5em; # sidebar-primär .widget .review-loop div.text p margin: 0; # sidebar-primär .widget .review-loop div.text p: före innehåll: '\ 201C'; # sidebar-primär .widget .review-loop div.text p: efter innehåll: '\ 201D'; # sidebar-primär .widget .review-loop .author font-size: 1.5rem; linjehöjd: 2.1rem; typsnittstyp: kursiv; marginal: 0.5em 0 0.2em; textjustera: höger; # sidebar-primär .widget .review-loop .date margin: 0; typsnittstorlek: 1.4rem; linjehöjd: 1,96rem; typsnittstyp: kursiv; textjustera: höger;
Och här är den färdiga produkten allt stylad och redo för mer innehåll.
Så nu vet du:
I en uppföljning till det här inlägget visar jag hur du visar ditt nya anpassade innehåll på en sida med en anpassad mall och en slinga. Det är lite svårare, men ger dig möjlighet att verkligen kontrollera ditt användarinnehållet innehåll. Och då kan du tänka på andra sätt att använda användarinnehåll - skicka bilder till ett galleri, till exempel. Att få besökare involverade är ett bra sätt att marknadsföra din företags webbplats.