Hvordan lage en enkel FAQ-plugin for WordPress

Vi har sett mange bloggtips og verktøy før. Vel, i dag lærer vi hvordan du lager et godt verktøy for bloggen din – en FAQ-plugin. Men det viktigste er ikke bare selve pluginen, men hva du kan gjøre med dette prinsippet. Du lærer hvordan du lagrer alle typer data på WP-nettstedet ditt og hvordan du integrerer dem med eksterne biblioteker (som jQuery UI) og lager egendefinerte komponenter for nettstedet ditt. La oss komme i gang!


Ideen, demonstrasjon & nedlasting

demo

Målet vårt her er å lage en plugin som kan brukes til mange ting, men som passer ganske bra for vanlige sider.

Men bortsett fra at hovedoppnåelsen vår vil være forståelsen av WordPress tilpassede innleggstyper, kortkoder, interaksjoner med ekstern JS / jQuery-plugin. Med denne ideen kan du lage mange ting basert på andre sprø plugins du kanskje finner der, dette er bare utgangspunktet for deg, kjære Padawan.

Så her kan du finne jQuery API-demo for komponenten vi bruker – men de virkelig kule greiene er koden som brukes til å generere den komponenten (PHP).

Oppvarming – Plugin-fil og tilpasset innleggstype

Først av alt må vi lage en tilpasset innleggstype for å lagre dataene våre.

Tilpassede innleggstyper er en stor del av WPs magi, den lar deg lage en ny datatype (slags innlegg, sider, vedlegg ..) slik at den kan kalles og manipuleres ved hjelp av WPs funksjoner. Dette kan virke enkelt for nybegynnere, men bare de gamle PHP-programmererne (er det fortsatt en ting?) Vet hvor vanskelig det var bare å koble til og lagre data i din DB. La si dynamisk lage nye datatyper, dette er subtilt, men gir en stor fleksibilitet i koden vår.

For at vi skal ha dette trenger vi en plugin, men sannsynligvis er du kjent med dette konseptet allerede. Plugins er som Lego-blokker for WordPress, de legger til eller transformerer den gjeldende funksjonaliteten ved hjelp av noen kode som enkelt kan kobles til (duh!) Eller også koble fra hvis du vil.

For å lage en plugin på en måte som WP gjenkjenner den, trenger du to ting:

  1. Lag en fil inne i wp-innhold / plugins /
  2. Legg til metadata i begynnelsen av filen slik at WP kan forstå hva det handler om

Husk at filnavnet må være unikt, så når noen installerer plugin-en din (til og med deg selv), vil det ikke være konflikter med gjeldende plugins. I tilfelle for en bedre organisasjon vil vi legge til en ny mappe med navnet faq-whsr, og inni den en fil som heter faq-whsr.php.

Nå for metadaen, bare legg til noe slikt i begynnelsen av plugins-filen (rett etter <?php):

meta_01

Som betyr:

  • Plugin Name: Det fine navnet som vil vises i wp-admin > plugins grensesnitt
  • Plugin URI: Hvis du vil legge til en kobling til plugin-siden (dokumenter, eksempler, salgsside)
  • Beskrivelse: Dette er det lille avsnittet som vises i wp-admin > plugins grensesnitt. Hold det enkelt, slik at brukerne vil huske hva det er til for
  • Forfatter / forfatter URI: Personen / selskapet som opprettet plugin og en lenke for studiepoeng
  • Lisens: Så brukere vil vite hva de kan / ikke kan gjøre med pluginen din

OK, nå har vi laget plugin-en vår, lagt til noen relevante metadata. Så snart du lagrer plugin-filen, skal du kunne se den i wp-admin-grensesnittet

La oss aktivere det og se hva som skjer.

Vent, ingenting? Vel, det er bra, hvis noe var galt akkurat nå, ville du se en feil. La oss gå videre til den egendefinerte posttypen vår nå.

I vårt tilfelle er CPT en FAQ-artikkel, men du kan lage bøker, videoer, attester og så videre. Det viktige å huske på her er: funksjoner navn skal være unike. Gjenta med meg nå: funksjonsnavn skal være unike, funksjonsnavn skal være unike. Har det? Bra dette vil spare deg for mye problemer til vi kan bruke OOP (kanskje i neste opplæring).

Veiviseren er ferdig med denne koden:

cpt

Og dette er hva de relevante delene betyr:

  • $ labels – er et utvalg med etikettene og teksten for forskjellige deler av wp-admin-området. Så WP vil vite den riktige måten å ringe varene våre på
  • støtter – denne forteller hva du kan se i wp-admin > FAQ > ny skjerm. I vårt tilfelle har vi tittelen, redaktøren (hovedinnholdsboksen), forfatter, revisjoner og tilpassede felt (i tilfelle du vil ha dem).
  • taksonomier – her forteller du WP hvilke taksonomier som er tillatt (kategorier, koder eller tilpassede taksonomier)
  • register_post_type (‘faq_whsr’, $ args) – dette forteller WP “Hei, lag en ny tilpasset innleggstype med ID-en som faq_whsr ved å bruke argumentene fra $ args”.

Lagre det og hold pusten. Du bør se en ny seksjon i wp-admin-menyen

Vent, det er det? Yeah. Dette utdraget skaper hele CPT-funksjonaliteten. Hvis du ikke synes dette er kult, vent at det blir kjøligere i neste avsnitt.

Før vi forlater wp-admin, legger du til noen dummy-data (noen få faqs med minst 2 kategorier).

Front-End – WP x jQuery-interaksjon

Nå er det endelig tid for å se noe, og vi bruker jQuery UI-trekkspillelementet for dette.

jQuery UI har stort sett de samme fordelene som jQuery selv:

  • Mange utviklere som jobber med det
  • Cross-browser og mobil-klar kode
  • Veldokumentert
  • Spiller fint med WP (WP bruker dem selv)

Spørsmålet nå er: Hvordan kaller vi det?

Det er to tilnærminger til dette:

  1. Den dårlige ren / taggene i wp_head
  2. Den fine wp_enqueue

Vi mister ikke for mye tid med feil tilnærming i dag, men den gode forteller i utgangspunktet WP “hei kompis, vi trenger jQuery UI på et tidspunkt i koden vår, vær så snill å ta det med på siden”. På denne måten kan WP sjekke om noen andre allerede har inkludert det eller inkludert en annen versjon av den og unngå mye problemer med dupliserte biblioteker. OK, hvordan kan du oversette den fine chatten til kode?

Bruke enqueue-funksjonen:

enqueue_02

Kortkoden

Og nå er vi tilbake til wp-admin. Vi har FAQ-elementene, og vi har biblioteket til å style elementene som vi vil, hva annet mangler? Vi må ringe varene!

Vi har mange alternativer for dette, men det enkleste for denne saken er å lage en kortkode. Shortcode er noe du legger til i innholdsfeltet ditt (for sider, innlegg, CPT-er…), og WP vil faktisk søke etter en funksjon som skal kjøres på den. Det er to typer kortkoder:

  1. [selvforseglende] – Som tagger eller
    denne typen kortkoder kaller bare en funksjon på et tidspunkt – dette er vår fyr
  2. [innpakket] Innhold [/ innpakket] – Denne er som etiketter

    eller faktisk kan transformere innholdet, eller bruke innholdet som argumenter.

La oss se hvordan det fungerer da. Lag en ny side i wp-admin og legg denne koden der:

[Faq-whsr]

Lagre og besøk den siden og se hva som skjer …

Bare tuller, det vil ikke gjøre noe riktig? Vel, det er fordi vi ikke har opprettet en funksjon for den ennå.

Legg til dette i plugin-filen:

shortcode_02

Oppdater siden din, og jeg lover at noe kult vil skje.

Kult, ikke sant? Nå kan du se at den løper og himmelen er grensen for deg nå. Hva den koden gjør er bare å fortelle WP at det er en kortkode som kalles [faq-whsr], og hvis WP finner den, bør WP kjøre en funksjon i det punktet på siden.

I vårt tilfelle må vi oppnå denne strukturen for at jQuery UI-panelet skal opprettes:

api_02

Og for det oppretter vi en WP-spørring, laster våre FAQ-elementer og deres innhold. Erstatt kortkodefunksjonen med denne:

Kortnummer-basic_02

OK, nå blir FAQ-elementene dine ringt. Det vi har gjort er å ringe wp_query for å kalle den egendefinerte posttypen, og deretter sende den til kortkodetilgangen slik at WP vil vise dem alle etter ønsket struktur.

Det er bra, men noe mangler, ikke sant? Hva med noen alternativer der? Vel, vi kan legge til alternativer for en kortkode. La oss se hvordan du oppretter noen få WP_Query-argumenter i kortkoden:

snarvei-final_02

På denne måten kan du ringe elementer ved å bruke følgende argumenter (du kan kombinere så mange du vil):

  • katt – kategori-ID (flere lagt til som matrise) [faq-whsr cat = 1]
  • kategorienavn – kategorinavn [faq-whsr kategorinavn = ”mat”]
  • ordre – ASC eller DESC (DESC er standard) [faq-whsr order = ”ASC”]
  • orderby – endre kriteriene for bestilling av varer [faq-whsr orderby = ”title”]
  • posts_per_page – endre antall lastede elementer [faq-whsr posts_per_page = 5]

Men som sagt, himmelen er grensen for deg min venn. Her er noen alternativer for WP_Query som du kan implementere og bruke:

  • Forfatter
  • Kategori (legge til ekskluderingsalternativer med not_in)
  • Søk (kult hvis du vil gi brukerne muligheten til å søke gjennom dem)
  • Tilpasset felt (siden FAQ-elementer har dem, kan du bruke dem til å laste inn elementer med spesifikke tilpassede felt og verdier)

Nå er det din tur

Dette er bare et utgangspunkt for deg, som du kan se. Vi alle kan lære mange andre kule ting for å forbedre denne enkle plugin. Her er noen forslag for å grave dypere:

  • Responsiv utforming
  • Oppretting av widgeter
  • Plugin aktivere / deaktivere kroker
  • internasjonalisering
  • OOP
  • Viser kun om nødvendig (for visse sider)

Ikke glem å legge tankene dine igjen i kommentarene! Og her er vår utfordring for deg: Er det mulig å bruke et “standardelement” -alternativ for kortkoden (så når siden lastes inn, vil et annet element være åpent, det er ikke det første)? Hvordan vil du gjøre det?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map