Hur man skapar en enkel FAQ-plugin för WordPress

Vi har sett många bloggtips och verktyg tidigare. Tja, idag kommer vi att lära dig hur du skapar ett bra verktyg för din blogg – ett FAQ-plugin. Men det viktigaste är inte bara själva plugin utan du kan göra med denna princip. Du lär dig hur du lagrar alla typer av data på din WP-webbplats och hur du integrerar dem med externa bibliotek (som jQuery UI) och skapar anpassade komponenter för din webbplats. Låt oss börja!


Idén, Demo & Ladda ner

demo

Vårt mål här är att skapa ett plugin som kan användas för många saker, men passar ganska bra för FAQ-sidor.

Men bortsett från detta är vår viktigaste prestation förståelsen av WordPress anpassade inläggstyper, kortkoder, interaktioner med extern JS / jQuery-plugin. Med denna idé kan du skapa en massa saker baserade på andra galna plugins som du kanske hittar där, det här är bara utgångspunkten för dig, kära Padawan.

Så här kan du hitta jQuery API-demo för komponenten vi kommer att använda – men de riktigt coola grejerna är koden som använder för att generera den komponenten (PHP).

Uppvärmning – Plugin-fil och anpassad inläggstyp

Först av allt måste vi skapa en anpassad inläggstyp för att lagra våra data.

Anpassade inläggstyper är en stor del av WP: s magi, det låter dig skapa en ny datatyp (typ av liknande inlägg, sidor, bilagor ..) så att den kan kallas och manipuleras med hjälp av WP: s funktioner. Detta kan tyckas enkelt för nybörjare men bara de gamla PHP-programmerarna (är det fortfarande en sak?) Vet hur svårt det var bara att ansluta och lagra data i din DB. Låt tala dynamiskt skapa nya datatyper, det här är subtilt men tillåter en stor flexibilitet i vår kod.

För att vi ska ha detta behöver vi ett plugin, men förmodligen känner du redan till det här konceptet. Plugins är som Lego-block för WordPress, de lägger till eller omvandlar den aktuella funktionaliteten med hjälp av någon kod som enkelt kan pluggas (duh!) Eller också koppla ifrån.

För att skapa ett plugin på ett sätt som WP känner igen det behöver du två saker:

  1. Skapa en fil inuti ditt wp-innehåll / plugins /
  2. Lägg till metadata i början av den filen så att WP kan förstå vad det handlar om

Kom ihåg att filnamnet måste vara unikt så när någon installerar din plugin (till och med dig själv) kommer det inte att finnas några konflikter med aktuella plugins. I vårt fall för en bättre organisation lägger vi till en ny mapp med namnet faq-whsr, och inuti den en fil som heter faq-whsr.php.

Nu för metada, lägg bara till något liknande i början av din plugins-fil (direkt efter <?php):

meta_01

Som betyder:

  • Plugin Name: Det fina namnet som kommer att visas i din wp-admin > plugins gränssnitt
  • Plugin URI: Om du vill lägga till en länk till din plugins sida (dokument, exempel, försäljningssida)
  • Beskrivning: Det här är det lilla stycket som visas i din wp-admin > plugins gränssnitt. Håll det enkelt så att användare kommer ihåg vad det är för
  • Författare / författare URI: personen / företaget som skapade plugin och en länk för poäng
  • Licens: Så användarna vet vad de kan / inte kan göra med din plugin

Okej, nu har vi skapat vårt plugin, lagt till några relevanta metadata. Så snart du sparar din plugin-fil bör du kunna se den i ditt wp-admin-gränssnitt

Låt oss aktivera det och se vad som händer.

Vänta, ingenting? Det är bra, om något var fel just nu skulle du se ett fel. Låt oss gå vidare till vår anpassning av inläggstyp nu.

I vårt fall är CPT en FAQ-fråga, men du kan skapa böcker, videor, vittnesmål och så vidare. Det viktiga att tänka på här är: Funktionsnamn ska vara unika. Upprepa med mig nu: funktionsnamn ska vara unika, funktionsnamn ska vara unika. Jag fattar? Bra detta kommer att spara dig mycket problem tills vi kan använda OOP (kanske i nästa handledning).

Guiden utförs med den här koden:

cpt

Och detta är vad de relevanta delarna betyder:

  • $ etiketter – är en matris med etiketter och text för olika delar av ditt wp-admin-område. Så WP kommer att veta rätt sätt att ringa våra artiklar
  • stöder – den här berättar vad du kan se i wp-admin > FAQ > ny skärm. I vårt fall har vi titeln, redigeraren (huvudinnehållsrutan), författare, revisioner och anpassade fält (om du vill ha dem).
  • taxonomier – här berättar du WP vilka taxonomier är tillåtna (kategorier, taggar eller anpassade taxonomier)
  • register_post_type (‘faq_whsr’, $ args) – detta säger WP “Hej, skapa en ny anpassad inläggstyp med ID som faq_whsr med hjälp av argumenten från $ args”.

Spara det och hålla andan. Du bör nu se ett nytt avsnitt i din huvud-wp-admin-meny

Vänta, det är det? Ja. Det här utdraget skapar hela CPT-funktionen. Om du inte tycker att det här är coolt, vänta på att det blir svalare i nästa avsnitt.

Innan vi lämnar wp-admin, lägg till lite dummy-data (några faqs med minst 2 kategorier).

Front-End – WP x jQuery-interaktion

Nu är det äntligen dags att se lite action och vi kommer att använda jQuery UI Accordion-element för detta.

jQuery UI har i stort sett samma fördelar som jQuery själv:

  • Många utvecklare arbetar med det
  • Cross-browser och mobil-klar kod
  • Väldokumenterad
  • Spelar bra med WP (WP själv använder dem)

Frågan är nu: Hur kallar vi det?

Det finns två metoder för detta:

  1. De dåliga rena / taggarna i din wp_head
  2. Den trevliga wp_enqueue

Vi kommer inte att förlora för mycket tid med fel inställning idag, men den goda berättar i princip WP “hej kompis, vi behöver jQuery UI någon gång i vår kod, vänligen inkludera den på sidan”. På så sätt kan WP kontrollera om någon annan redan har inkluderat den eller inkluderat en annan version av den och undvika mycket problem med duplicerade bibliotek. Okej, hur översätter jag den trevliga chatten till kod?

Använda enqueue-funktionen:

enqueue_02

Kortkoden

Och nu är vi tillbaka till wp-admin. Vi har frågorna med vanliga frågor, och vi har biblioteket för att utforma artiklarna som vi vill, vad annars saknas? Vi måste ringa föremålen!

Vi har många alternativ för det här, men det enklaste för det här fallet är att skapa en kortkod. Kortkod är något som du lägger till i ditt innehållsfält (för sidor, inlägg, CPT …) och WP söker faktiskt efter en funktion som ska köras på den. Det finns två typer av kortkoder:

  1. [självslutande] – Gillar taggar eller
    den här typen av kortkod kallar bara en funktion vid någon tidpunkt – det här är vår kille
  2. [inslaget] Innehåll [/ inslaget] – Den här är som taggar

    eller faktiskt kan förvandla innehållet eller använda innehållet som argument.

Låt oss se hur det fungerar då. Skapa en ny sida i din wp-admin och lägg till den här koden där:

[Faq-whsr]

Spara och besök den sidan och se vad som händer …

Bara skojar, det kommer inte att göra någonting rätt? Det beror på att vi ännu inte har skapat en funktion för det.

Lägg till detta i din plugin-fil:

shortcode_02

Uppdatera nu din sida så lovar jag att något riktigt coolt kommer att hända.

Häftig va? Nu kan du se att det kör och himlen är gränsen för dig nu. Vad den koden gör är bara att berätta för WP att det finns en kortkod som kallas [faq-whsr] och om WP hittar den, bör WP köra en funktion i den punkten på sidan.

I vårt fall måste vi uppnå denna struktur för att jQuery UI-panelen ska skapas:

api_02

Och för det skapar vi en WP-fråga, laddar våra vanliga frågor och deras innehåll. Byt ut kortkodsfunktionen med den här:

kortkod-basic_02

OK, nu kommer dina vanliga frågor att ringas. Vad vi har gjort är att ringa wp_query för att ringa vår anpassade inläggstyp och sedan skicka den till kortkodsreturen så att WP kommer att visa dem alla efter önskad struktur.

Det är bra men något saknas, eller hur? Vad sägs om några alternativ där? Vi kan lägga till alternativ för en kortkod, låt oss se hur vi skapar några WP_Query-argument i vår kortkod:

kortkod-final_02

På så sätt kan du ringa objekt med följande argument (du kan kombinera så många du vill):

  • katt – kategori-ID (flera läggs till som matris) [faq-whsr cat = 1]
  • kategori-namn – kategorinamn [faq-whsr kategori-namn = ”mat”]
  • order – ASC eller DESC (DESC är standard) [faq-whsr order = ”ASC”]
  • orderby – ändra kriterierna för att beställa objekt [faq-whsr orderby = ”title”]
  • posts_per_page – ändra antalet laddade objekt [faq-whsr posts_per_page = 5]

Men som sagt, himlen är gränsen för dig min vän. Här är några alternativ för WP_Query som du kan implementera och använda:

  • Författare
  • Kategori (lägga till exkluderingsalternativ med not_in)
  • Sök (cool om du vill ge användarna möjlighet att söka igenom dem)
  • Anpassat fält (eftersom FAQ-objekt har dem kan du använda dem för att ladda objekt med specifika anpassade fält och värden)

Nu är det din tur

Detta är bara en utgångspunkt för dig, som du kan se. Vi kan alla lära dig en hel del andra coola saker för att förbättra detta enkla plugin, här är några förslag för dig att gräva djupare:

  • Responsiv design
  • Skapa widget
  • Plugin aktivera / avaktivera krokar
  • Internationalisering
  • OOP
  • Enqueueing endast om det behövs (för vissa sidor)

Glöm inte att lämna dina tankar i kommentarerna! Och här är vår utmaning för dig: Är det möjligt att använda ett “standardobjekt” -alternativ för kortkoden (så när sidan laddas kommer ett annat objekt att vara öppet, det är inte det första)? Hur skulle du göra 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