Sådan opretter du et simpelt FAQ-plugin til WordPress

Vi har før set en masse blogtips og værktøjer. Nå, i dag lærer vi hvordan man opretter et godt værktøj til din blog – et FAQ-plugin-side. Men det vigtigste er ikke kun selve plugin, men hvad du kan gøre med dette princip. Du lærer, hvordan du gemmer enhver type data på dit WP-sted, og hvordan du integrerer dem med eksterne biblioteker (som jQuery UI), og skaber brugerdefinerede komponenter til dit websted. Lad os komme igang!


Ideen, Demo & Hent

demo

Vores mål her er at oprette et plugin, der kan bruges til en masse ting, men passer temmelig godt til FAQ-sider.

Men bortset fra det vil vores vigtigste præstation være forståelsen af ​​WordPress brugerdefinerede posttyper, kortkoder, interaktioner med ekstern JS / jQuery-plugin. Med denne idé kan du oprette en masse ting baseret på andre skøre plugins, som du måske finder ud der, dette er bare udgangspunktet for dig, kære Padawan.

Så her kan du finde jQuery API-demo til den komponent, vi bruger – men de virkelig seje ting er koden, der bruger til at generere den komponent (PHP).

Opvarmning – Plugin-fil og tilpasset posttype

Først og fremmest har vi brug for at oprette en tilpasset posttype for at gemme vores data.

Tilpassede indlægstyper er en stor del af WPs magi, det giver dig mulighed for at oprette en ny datatype (slags lignende indlæg, sider, vedhæftede filer ..) så det kan kaldes og manipuleres ved hjælp af WP’s funktioner. Dette kan virke enkelt for begyndere, men kun de gamle PHP-programmerere (er det stadig en ting?) Ved, hvor svært det var bare at oprette forbindelse og gemme data i din DB. For ikke at sige dynamisk oprette nye datatyper, dette er subtilt, men giver en stor fleksibilitet i vores kode.

For at vi skal have dette har vi brug for et plugin, men sandsynligvis kender du allerede dette koncept. Plugins er som Lego-blokke til WordPress, de tilføjer eller transformerer den aktuelle funktionalitet ved hjælp af en kode, der let kan tilsluttes (duh!) Eller også kobles fra, hvis du vil.

For at oprette et plugin på en måde, som WP genkender det, har du brug for to ting:

  1. Opret en fil inde i dit wp-indhold / plugins /
  2. Tilføj metadata i begyndelsen af ​​denne fil, så WP kan forstå, hvad det handler om

Husk, at filnavnet skal være unikt, så når nogen installerer dit plugin (selv dig selv), er der ingen konflikter med de nuværende plugins. I vores tilfælde for en bedre organisation tilføjer vi en ny mappe med navnet faq-whsr, og inde i den en fil kaldet faq-whsr.php.

Nu til metada, skal du blot tilføje noget som dette i begyndelsen af ​​din plugins-fil (lige efter <?php):

meta_01

Hvilket betyder:

  • Plugin Navn: Det pæne navn, der vises i din wp-admin > plugins interface
  • Plugin URI: Hvis du vil tilføje et link til din plugins side (dokumenter, eksempler, salgsside)
  • Beskrivelse: Dette er det lille afsnit, der vises i din wp-admin > plugins interface. Hold det enkelt, så brugerne kan huske, hvad det er til
  • Forfatter / forfatter URI: Den person / virksomhed, der oprettede plugin og et link til kreditter
  • Licens: Så brugerne ved hvad de kan / ikke kan gøre med dit plugin

Ok, nu har vi oprettet vores plugin, tilføjet nogle relevante metadata. Så snart du gemmer din plugin-fil, skal du kunne se den i din wp-admin-interface

Lad os aktivere det og se, hvad der sker.

Vent, intet? Det er godt, hvis der var noget galt lige nu, ville du se en fejl. Lad os gå videre til vores brugerdefinerede oprettelse af posttype nu.

I vores tilfælde er CPT en FAQ-artikel, men du kan oprette bøger, videoer, attester og så videre. Den vigtige ting at huske her er: Funktionsnavne skal være unikke. Gentag med mig nu: Funktionsnavne skal være unikke, funktionsnavne skal være unikke. Forstået? Godt, dette sparer dig for mange problemer, indtil vi kan bruge OOP (måske i den næste tutorial).

Guiden udføres med denne kode:

cpt

Og det er, hvad de relevante dele betyder:

  • $ labels – er en matrix med etiketterne og teksten til forskellige sektioner i dit wp-admin-område. Så WP vil vide den rigtige måde at kalde vores varer på
  • understøtter – denne fortæller, hvad du kan se i wp-admin > Ofte stillede spørgsmål > ny skærm. I vores tilfælde har vi titlen, redigereren (hovedindholdsfeltet), forfatter, revisioner og brugerdefinerede felter (i tilfælde af at du vil have dem).
  • taksonomier – her fortæller du WP hvilke taksonomier der er tilladt (kategorier, tags eller brugerdefinerede taxonomier)
  • register_post_type (‘faq_whsr’, $ args) – dette fortæller WP “Hej, opret en ny brugerdefineret posttype med ID’et som faq_whsr ved hjælp af argumenterne fra $ args”.

Gem det og hold vejret. Du skal nu se et nyt afsnit i din hoved wp-admin-menu

Vent, det er det? Ja. Dette uddrag skaber hele CPT-funktionaliteten. Hvis du ikke finder det cool, skal du vente på, at det bliver køligere i det næste afsnit.

Før vi forlader wp-admin, skal du tilføje nogle dummy-data (et par faqs med mindst 2 kategorier).

Front-End – WP x jQuery-interaktion

Nu er det endelig tid til at se noget handling, og vi bruger jQuery UI Accordion-element til dette.

jQuery UI har stort set de samme fordele som jQuery selv:

  • En masse udviklere, der arbejder på det
  • Cross-browser og mobil-klar kode
  • Veldokumenteret
  • Spiller pænt med WP (WP bruger selv dem)

Spørgsmålet er nu: Hvordan kalder vi det?

Der er to tilgange til dette:

  1. Den dårlige ren / tags i dit wp_head
  2. Den dejlige wp_enqueue

Vi mister ikke for meget tid med den forkerte tilgang i dag, men den gode fortæller dybest set WP “hej ven, vi har brug for jQuery UI på et tidspunkt i vores kode, skal du medtage det på siden”. På denne måde kan WP kontrollere, om nogen andre allerede har inkluderet det eller inkluderet en anden version af det og undgå en masse problemer med duplikerede biblioteker. Ok, hvordan du oversætter den dejlige chat til kode?

Brug af enqueue-funktionen:

enqueue_02

Kortkoden

Og nu er vi tilbage til wp-admin. Vi har spørgsmålene med ofte stillede spørgsmål, og vi har biblioteket til at style emnerne, som vi vil, hvad ellers mangler der? Vi skal kalde varerne!

Vi har mange muligheder for dette, men det nemmeste for denne sag er at oprette en kortkode. Kortkode er noget, du tilføjer i dit indholdsfelt (til sider, indlæg, CPT’er …), og WP vil faktisk søge efter en funktion, der skal køres på den. Der er 2 typer kortkoder:

  1. [selvindesluttende] – Kan lide tags eller
    denne type kortkode kalder bare en funktion på et tidspunkt – dette er vores fyr
  2. [indpakket] Indhold [/ indpakket] – Denne er som tags

    eller faktisk kan transformere dets indhold eller bruge indholdet som argumenter.

Lad os se, hvordan det fungerer da. Opret en ny side i din wp-admin og tilføj denne kode der:

[Faq-whsr]

Gem og besøg den side, og se hvad der sker …

Bare narre, det gør ikke noget rigtigt? Det skyldes, at vi endnu ikke har oprettet en funktion til det.

Tilføj dette i din plugin-fil:

shortcode_02

Opdater nu din side, og jeg lover, at der virkelig sker noget cool.

Sej, hej? Nu kan du se, at det kører, og himlen er grænsen for dig nu. Hvad den kode gør er bare at fortælle WP, at der er en kortkode, der kaldes [faq-whsr], og hvis WP finder den, skal WP køre en funktion i det punkt på siden.

I vores tilfælde er vi nødt til at opnå denne struktur for at oprette jQuery UI-panelet:

api_02

Og til det opretter vi en WP-forespørgsel, indlæser vores ofte stillede spørgsmål og deres indhold. Udskift kortkodefunktionen med denne:

kortkode-basic_02

Ok, nu bliver dine FAQ-poster opkaldt. Det, vi har gjort, er at ringe til wp_query for at kalde vores brugerdefinerede posttype og derefter overføre det til kortkodetekst, så WP viser dem alle efter den ønskede struktur.

Det er godt, men der mangler noget, ikke? Hvad med nogle muligheder der? Vi kan tilføje indstillinger for en kortkode. Lad os se, hvordan vi opretter et par WP_Query-argumenter i vores kortkode:

kortkode-final_02

På denne måde kan du ringe til elementer ved hjælp af følgende argumenter (du kan kombinere så mange, som du vil):

  • kat – kategori-ID (flere tilføjet som matrix) [faq-whsr cat = 1]
  • kategorienavn – kategorinavn [faq-whsr kategorinavn = ”mad”]
  • ordre – ASC eller DESC (DESC er standard) [faq-whsr order = ”ASC”]
  • orderby – ændre kriterierne for bestilling af varer [faq-whsr orderby = ”title”]
  • posts_per_page – ændre antallet af indlæste emner [faq-whsr posts_per_page = 5]

Men som sagt, himlen er grænsen for dig min ven. Her er et par muligheder for WP_Query, som du kan implementere og bruge:

  • Forfatter
  • Kategori (tilføj ekskluderingsindstillinger med not_in)
  • Søg (sejt, hvis du vil give brugerne mulighed for at søge gennem dem)
  • Brugerdefineret felt (da ofte stillede spørgsmål har dem, kan du bruge dem til at indlæse emner med specifikke brugerdefinerede felter og værdier)

Nu er det din tur

Dette er bare et udgangspunkt for dig, som du kan se. Vi kan alle lære en masse andre seje ting for at forbedre dette enkle plugin, her er et par forslag til dig, hvor du kan grave dybere:

  • Responsivt design
  • Oprettelse af widget
  • Plugin aktivere / deaktivere kroge
  • Internationalisering
  • OOP
  • Enqueueing kun hvis nødvendigt (for visse sider)

Glem ikke at efterlade dine tanker i kommentarerne! Og her er vores udfordring for dig: Er det muligt at anvende en “standardelement” -indstilling for kortkoden (så når siden er indlæst, vil et andet element være åbent, det er ikke det første)? Hvordan ville du gø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