Bygg et WordPress-plugin for å legge til forfatterbiografier til innleggene dine

Mange populære blogger i disse dager er forfattet av flere bidragsytere. I dag lager vi et enkelt WordPress-plugin som gjør at vi kan legge til forfatterens biografi til slutten av hvert innlegg, akkurat som du ser på Nettuts.

1. Ha en Bio Klar

Hvis du ikke allerede viser forfatterens biografiske info, kan du legge til og redigere biografisk info ved å gå til brukerpanelet fra WordPress-dashbordet, velge en bruker og fylle ut et raskt bio. Vi skal også legge til en gravatar for forfatteren, så sørg for at du også angir en e-postadresse.

2. Lag de nødvendige filene

Vi må lage en enkelt fil som inneholder funksjonaliteten til pluginet vårt. Brann opp FTP-valget ditt, og, innenfor wp-innhold / plugg / mappe, opprett en fil som heter ntauthorbio.php. For at WordPress skal gjenkjenne vårt plugin, må vi opprette en hurtig topptekstkommentar i filen, akkurat som du gjør øverst på style.css. Lim inn følgende kode i filen, og gjør selvfølgelig justeringer tilsvarende.

 / * Plugin Name: Nettuts Forfatter Bio Plugin URI: http://www.nettuts.com/ Beskrivelse: Dette pluginet legger til forfattere bio til hans / hennes innlegg. Forfatter: nettuts Versjon: 0.1 Forfatter URI: http: //www.nettuts .com / * /

3. Funksjoner og handlinger

Deretter lager vi grunnlaget for pluginet vårt. Lim inn følgende etter åpningskommentarens overskrift.

 funksjon author_bio_display ($ content) // dette er hvor vi skal vise bio -funksjonen author_bio_style () // dette er hvor vi skal style our box funksjon author_bio_settings () // dette er hvor vi skal vise våre adminalternativer funksjon author_bio_admin_menu () // dette er hvor vi legger til pluginet vårt på admin-menyen add_action ('the_content', 'author_bio_display'); add_action ('admin_menu', 'author_bio_admin_menu'); add_action ('wp_head', 'author_bio_style');

"Kroker leveres av WordPress slik at pluginet ditt kan" koble til "resten av WordPress, det vil si å ringe til funksjoner i pluginet ditt til bestemte tider, og dermed sette pluginet i bevegelse."

Ovenfor har vi opprettet fire funksjoner som pluginet vårt vil kreve for å fungere skikkelig. Hver funksjon har et bestemt formål (som kommenteres ovenfor), og hver er også knyttet til en bestemt handling (bortsett fra author_bio_settings, som vil bli kalt fra en annen funksjon.

Når du utvikler plugins, er det viktig å forstå hva en krok er. En krok er et sted i løpssyklusen hvor vi kan koble til WordPress, og ringe til våre funksjoner. For eksempel kroken brukt ovenfor, for author_bio_display, er innholdet; Dette betyr at når WordPress bruker innholdet (brukes til å vise hovedinnholdet til innlegget / siden), vil det først ringe til funksjonen vi har gitt den.

• innholdet - innholdet på siden / innlegget vises
• admin_menu - ringte når sidebjelken i administrasjonspanelet ble opprettet
• wp_head - La oss legge til kode i hodetakene på siden. Dette er grunnen til at du inkluderer wp_head () når du designer temaene dine.

4. Skjermfunksjonen

Den viktigste funksjonen i plugin er skjermfunksjonen, som vil håndtere prosessen med å faktisk vise informasjonen etter innholdet. Før vi starter, er det viktig å merke seg at denne funksjonen aksepterer en parameter, kalt $ innhold. Dette betyr at innholdet på siden / innlegget sendes til vår funksjon, slik at vi kan legge til forfatterens biografi.

La oss starte med en enkel hvis / else setning.

 funksjon author_bio_display ($ content) // dette er hvor vi vil vise bio hvis (is_single () || is_page ()) $ bio_box = // placeholder; returner $ innhold. $ Bio_box;  annet return $ content; 

Ovenfor ser vi om innholdet blir vist på ett enkelt innlegg ved hjelp av er singel(), eller en side som bruker is_page (). Hvis enten returnerer sant, kan vi legge inn boksen vår som vil bli plassert i $ bio_box variabel. Ellers, hvis vi er på en annen side, for eksempel arkivene eller forsiden, bør vi bare returnere innholdet uberørt.

Nå må vi legge til koden vår for boksen som skal vises, endre din $ bio_box for å matche følgende kode.

 $ bio_box = '
 '.get_avatar (get_the_author_meta (' user_email '),' 80 ').' '.Get_the_author_meta ( 'DISPLAY_NAME').' 
'.Get_the_author_meta ( 'beskrivelse').'
 
 
';

Styling, selvfølgelig, kan endres senere for å passe dine egne smaker, men for nå bruker vi en enkel boks, og vil legge til noen CSS for å style det snart.

Vi bruker noen få funksjoner ovenfor for å hente våre nødvendige data. get_avatar () er en innebygd funksjon i WordPress som vil returnere brukerens gravatar, hvis de har en, i henhold til deres e-post. Vi passerer get_avatar () funksjon to parametere; forfatterens e-post, og en størrelse for bildet (80px * 80px i vårt tilfelle).

Funksjonen get_the_author_metakan hente noe informasjon om en registrert WordPress-bruker. En fullstendig liste over elementene du kan returnere, finnes på WordPress Codex.

Hvis vi nå kjører pluginet vårt, bør vi se noe som ligner dette:

Det er ikke den vakreste utseende biografien, men vi har nå den grunnleggende funksjonaliteten vi er ute etter. Hvis du fortsatt har problemer, sørg for at forfatteren av innlegget / siden har en biografi og / eller gravatar, og også sørg for at plugin-modulen er aktivert i plugin-delen på instrumentbrettet. La oss neste stil ting litt.

5. Gjør det pent

Hvis du er designer, er det din sjanse til å gjøre det du vil! Min kode nedenfor er akkurat nok til å gjøre boksen vår ser ren og enkel ut. For å gi et eksempel på hvordan wp_head () kan brukes, setter vi inn CSS for denne boksen i hovedetiketten til dokumentet vårt. Du kan imidlertid også ganske enkelt plassere dette i stilarket.

Denne author_bio_style () -funksjonen må returnere en enkel blokk med CSS.

 funksjon author_bio_style () // dette er hvor vi skal style vår boks ekko ''; 

Koden ovenfor krever ikke mye forklaring; CSS er utenfor omfanget av denne opplæringen. Vanligvis oppretter vi bare en boks med en grense, og flyter bildet til venstre. Til slutt legger vi til et mellomrom for å sikre at boksen er stor nok til å passe inn i bildet og teksten. Du kan også bruke Clearfix-hack, eller til og med overløp: skjult for å oppnå denne effekten. Til slutt vil det avhenge av ditt spesifikke layout.

Din nye fangled-boks skal se ut som min nå; se nedenfor.

6. Lag en innstillingsside

Før vi pakker opp, la oss ta en titt på å legge til en innstillingsside i dashbordet for pluginet vårt. De fleste plugins stole på en slags innstillingsseksjon for å gi litt mer fleksibilitet uten at brukeren må redigere noen kode.

Det er mange alternativer vi kan legge til; for eksempel, hvor boksen vises (øverst eller nederst), brukes de brukte fargene, ekskluder bestemte brukere, og så videre. For denne opplæringen har jeg valgt å spesifisere om pluginet kan vises på bare sider, kun innlegg eller begge deler. Forhåpentligvis vil dette være nok til å vise deg tauene. På det tidspunktet kan du utvide funksjonaliteten slik du ser det.

Å lage siden

Vi må sette opp en side i administrasjonspanelet. For å gjøre det, må vi fortelle WordPress hva som skal gjøres når admin_menu action triggers. For å kompensere, redigerer vi vår author_bio_admin_menu () funksjon for å se ut som koden nedenfor:

 funksjon author_bio_admin_menu () // dette er hvor vi legger til pluginet vårt i admin-menyen add_options_page ('Author Bio', 'Author Bio', 9, basename (__ FILE__), 'author_bio_settings'); 

Ovennevnte kode oppretter en tilleggsside i oversikten og overfører følgende parametere:

• Menynavn - Forfatter Bio
• Side tittel - Forfatter Bio
• Få tilgang til Privilege - 9 - eller, bare administratortilgang
• Håndtak
• Den nødvendige funksjonen - author_bio_settings ()

Vi trenger å gi siden litt innhold. Siden vi ringte author_bio_settings () Når du oppretter siden, er det den funksjonen vi skal bruke for å vise våre opsjonsskjema og oppdatere databasen.

Innstillingsfunksjonen

Enkelt sagt, denne funksjonen må vise et skjema med alternativene. Det må også sjekke om skjemaet er sendt, og i så fall lagre de nye verdiene i databasen. La oss først konsentrere oss om å lage skjemaet.

 funksjon author_bio_settings () // dette er hvor vi viser våre admin alternativer $ options ['page'] = get_option ('bio_on_page'); $ alternativer ['post'] = get_option ('bio_on_post'); ekko ' 
 '. $ Budskap. 

 
Forfatter Bio Innstillinger
 
  
Når å vise forfatter bio
  sider
  innlegg
 
  
 
'; 

Vi starter med å ta noen alternativer fra databasen. Selvfølgelig har vi for øyeblikket ikke en metode for å sette dem ennå, så de blir tom for nå. Deretter viser vi skjemaet, som allerede er utformet av WordPress 'dashbord CSS. Du vil legge merke til at vi viser en (for øyeblikket opprørt) variabel som heter $ melding; Dette er slik at vi kan varsle brukeren når vi oppdaterer innstillingene dersom det var vellykket.

Vi skriver ut våre valg på slutten av boksen. Hvis brukeren slår på et alternativ, må vi lagre det i databasen som "merket" for å merke av i avkrysningsruten. Funksjonene vi bruker for å få og angi alternativer er get_option () og update_option () henholdsvis. Få-funksjonen krever navnet på alternativet (så det er viktig å være unikt), og oppdateringsalternativet krever navnet på alternativet og den nye verdien. Hvis oppdateringsfunksjonen ikke finner alternativet, oppretter det bare en ny.

Så langt må siden din se ut som:

La oss nå legge til koden vår for å ta verdiene sendt av skjemaet, og oppdatere alternativene i databasen. Skjemaet inneholder en skjult verdi, kalt handling, som er satt til "oppdatering." Vi kontrollerer om verdien er angitt, og i så fall oppdaterer vi alternativene våre. Denne koden skal plasseres øverst på vår side autor_bio_settings () funksjon.

 hvis ($ _POST ['action'] == 'update') $ _POST ['show_pages'] == 'på'? update_option ('bio_on_page', 'checked'): update_option ('bio_on_page', '); $ _POST [' show_posts '] ==' på '? update_option (' bio_on_post ',' checked '): update_option (' bio_on_post ' "); $ message = '
Valg lagret
'; 

Hvis skjemaet er sendt, bruker vi den ternære operatøren (hvis du er usikker på hvordan disse fungerer, ser dem opp - de er en enkel form for hvis / annet) for å sjekke om avmerkingsboksene er merket eller ikke. Hvis de er, setter vi alternativet som 'sjekket' ellers setter vi det som tomt. Endelig setter vi meldingen til en vellykket dialog, som allerede er utformet av WordPress.

Endre utgangen

Nå skal vi kunne sette inn alternativer og se dem endre på vår side Funksjonen til pluginet vil imidlertid ikke endre ennå som vi ikke har fortalt det å gjøre det. Så det siste trinnet i prosjektet vårt er å få displayfunksjonen til å reagere på disse alternativene. I vår author_bio_display () funksjon, legg inn følgende kode til toppen, for å få alternativene som er angitt tidligere.

 $ alternativer ['side'] = get_option ('bio_on_page'); $ alternativer ['post'] = get_option ('bio_on_post');

Nå som vi har disse verdiene, trenger vi bare å utføre skjermkoden hvis alternativet er satt. For å gjøre det, endrer vi vår if-setning tilsvarende.

 hvis ((is_single () && $ alternativer ['post']) || (is_page () && $ alternativer ['side']))

Her har vi implementert to forhold som, hvis møtt, vil føre til at boksen vår vises. Ikke for vanskelig, ikke sant? Her er vår fullstendige plugin:

  ".get_avatar (get_the_author_meta (" user_email ")," 80 ")." ".Get_the_author_meta ( "DISPLAY_NAME")." 
".Get_the_author_meta ( "description")."