Opprette en FAQ-side ved hjelp av to looper

Vanlige spørsmålssider er ganske vanlige på nettsteder, spesielt e-handelswebsteder eller de som markedsfører et produkt eller en tjeneste som potensielle kunder vil ha spørsmål om. Å lage en side med ofte stillede spørsmål kan spare tid og penger ved å gi svar uten at kundene må e-post eller ringe til nettstedseieren, og kan bidra til å øke salget.

Men en enkel arkivside som viser alle spørsmålene med svarene nedenfor, kan være for uhåndterlig. Tross alt kan besøkende ikke se alle spørsmålene og kan være motvillige til å bla gjennom mange spørsmål som ikke er relevante for dem, spesielt hvis svarene er lange eller det er mange av dem.

Det enkle svaret er å dele siden i to deler: Spørsmål på toppen og svar på bunnen, med et anlegg for besøkende å klikke på hvert spørsmål som skal tas til svarene. Heldigvis er dette veldig enkelt å gjøre i WordPress bare ved å legge til en ekstra sløyfe på arkivsiden din.

I denne veiledningen vil jeg vise deg hvordan du gjør dette, ved hjelp av fire trinn:

1. Lag et tema, som vil være et barn tema på tjuefemteen
2. Registrer en posttype FAQ og legg til noen data til den
3. Opprett en arkivmal for FAQ-posttypen, basert på indeksmalen i foreldetemaet
4. Legg til to sløyfer til malen: en for spørsmål og en for svar, med en lenke fra den ene til den andre

Hva du trenger

For å fullføre denne opplæringen må du:

• en utviklingsinstallasjon av WordPress
• et fungerende tema (du kan jobbe med ditt eget tema, eller du kan bruke et overordnet tema som jeg har gjort)
• en kodeditor

1. Opprette temaet

Siden denne opplæringen innebærer å opprette en arkivmal må du legge til dette i et tema. Jeg lager et nytt tema som er et barn på tjuefemteen, men du vil kanskje legge til malfilen til ditt eksisterende tema (og funksjonene i min funksjonsfil til din eksisterende funksjonsfil).

For å opprette barnetemaet lager jeg en fil som heter style.css og legg til følgende for det:

/ * Tema Navn: WPTutsPlus Opprette et FAQ Arkiv Bruke To Loops Tema URI: http://rachelmccollin.co.uk/wptutsplus-faq-archive-two-loops/ Beskrivelse: Tema for å støtte WPTutsPlus opplæring om å lage et tilpasset faq arkiv. Barn tema for Twenty Fourteen tema. Forfatter: Rachel McCollin Forfatter URI: http://rachelmccollin.co.uk/ Mal: ​​twentyfourteen Versjon: 1.0 * / @import url ("... /twentyfourteen/style.css");

Jeg har nå et arbeider barn tema.

2. Registrering av posttypen

Det neste trinnet er å opprette FAQ-posttypen. Opprett en fil som heter functions.php i temamappen din og legg til følgende kode. Hvis du jobber med et eksisterende tema som allerede har en funksjonsfil, legger du bare til koden til det:

 array ('name' => 'FAQs', 'singular_name' => 'FAQ'), 'has_archive' => sant, 'public' => true, 'hierarchical' => true, 'supports' => array tittel ',' editor ',' utdrag ',' egendefinerte felt ',' miniatyrbilde ',' sideattributter '),' exclude_from_search '=> true,' capability_type '=>' post ',' rewrite '=> array ('slug' => 'faqs'),));  add_action ('init', 'wptp_create_faq_post_type'); ?>

Dette skaper en ny posttype som heter "FAQ", ved hjelp av register_post_type () funksjon. Legg merke til at jeg har brukt 'omskrive' argument for å endre slug når besøkende er på arkivsiden, så i stedet for at sidens URL slutter med /FAQ/ det vil ende med / FAQs /.

Det neste trinnet er å lage noen data for vanlige spørsmål. Du kan se dette i oversikten for vanlige spørsmål nedenfor:

3. Opprette arkivfilfilen

Du må nå opprette malfilen som vil vise vanlige spørsmål. Opprett en ny fil i temamappen som heter arkiv-faq.php. Ettersom temaet mitt er et tema for barn på tjuefemteen, skal jeg legge til wrapper-koden i min malfil fra det temaet index.php fil, som vist nedenfor. Hvis du bruker ditt eget tema, legger du til din egen wrapper-kode. Dette er i utgangspunktet all koden bortsett fra sløyfen, som du ikke legger til ennå, siden du skal lage to tilpassede sløyfer i neste trinn.

 
 
 
 
 
  
 
Dette gir deg den grunnleggende filen som du legger til i sløyfer.
4. Opprette to løkker for vanlige spørsmål
Malen filen vil inkludere to looper: en oppføring titlene til hver FAQ inne i en lenke til svaret, som vil bli utgitt av den andre sløyfen. Du kan gjøre dette ved å gjenta og redigere standard WordPress loop men du må bruke rewind_posts () etter den første sløyfen går WordPress tilbake til begynnelsen igjen for den andre sløyfen.
The First Loop: Vanlige spørsmål og lenker
Først lager du sløyfen for å skrive ut titlene til hver FAQ. Legg til følgende under åpningen 
 stikkord:
 
Ofte stilte spørsmål - klikk for svar
 
  
> "title =""rel =" bokmerke ">
  
Dette gjør følgende:
 
viser en overskrift i a 
 element
 
starter sløyfen
 
inne i en uordnet liste, utdata tittelen hvis hver FAQ i en liste element, bruker tittelen() 
 
bryter hver tittel i en lenke til #post-, som vil være ID for hvert innlegg i den andre sløyfen din
 
slutter sløyfen
 
Merk: I eksemplet ovenfor har jeg ikke sjekket om spørringen min har innlegg, men det kan hende du ønsker å pakke inn alt i en sjekk for hvis (har_posts ()) slik at arkivmalen din ikke sender ut en overskrift med ingenting under det.
Second Loop: Vanlige spørsmål og svar
Den andre sløyfen vil utgjøre titlene på nytt (tross alt vil besøkende ønske å vite hvilket spørsmål som blir besvart hver gang) med svarene ved å bruke tittelen() og innholdet().
Legg til følgende under din første sløyfe:
   
> 
"title =""rel =" bokmerke ">
 
  
 
 
Dette begynner med å spole sløyfen og deretter løpe en annen sløyfe til utgang:
 
Et elementelement for å legge til hver FAQ
 
Tittel på vanlige spørsmål i a 
 element med #post- som ID, som sikrer koblingen i første loop-arbeid.
 
Innholdet i Vanlige spørsmål.
 
Arkivmalen din er nå ferdig. Lagre arbeidet ditt og test det. Du bør ha en side på yoursite.com/faqs som ser litt ut som dette:
Sammendrag
Slik lager du en FAQ-side med dine spørsmål og svar skilt i to looper. Skjønnheten i denne teknikken er at du bare bruker standard WordPress-sløyfen, og mens du tilpasser den sløyfen, trenger du ikke å opprette en tilpasset spørring.
Nyttige ressurser
 
Malen hierarkiet som er en veiledning for hvordan arkivmaler fungerer
 
The Loop
 
Funksjonen register_post_type ()
 



		
			
	   
	




Kode