Share
I dag skal vi se på hvordan du bruker kortkoder i forbindelse med en rekke populære tjenester - inkludert nettsteder som YouTube og Flickr, ved å først gjenopprette hvordan du oppretter en kodenavn, og hvordan du konverterer den tredjepartskoden til noe som kan gjentas og manipuleres.
Vi har dekket kortkoder allerede her på WPTuts +, diskuterer fordelene ved å bruke dem og hvordan de egentlig, vel, bruk dem. Kortkoder er effektivt snarveier (som definert av WordPress seg selv) som gjør at et utfall kan oppnås flere ganger med minst mulig arbeid. I sin enkleste form inneholder en kortkode noen kode du har koblet til WordPress i en annen fil, noen ganger produktet fra en tredjepart, for eksempel en YouTube-video eller en Flickr-stream.
Hvis du ikke er kjent med kortkoder, bør du sannsynligvis slutte å lese denne artikkelen og sjekke ut en av de andre artiklene vi har her på Tuts + om kortkoder i WordPress.
En kortkode er opprettet ved å legge til en funksjon i din functions.php fil, og deretter koble den opp som en kortkode. Eksempelet nedenfor lager en kobling til AppStorm-huben.
Accentsconagua
funksjon link_to_appstorm ($ atts, $ content = null) return 'AppStorm'; add_shortcode ('appstorm', 'link_to_appstorm'); For å bruke det, bruker vi den enkleste formen for en shortcode uten attributter.
[Appstorm]
Vi kan ta denne ideen videre ved å introdusere et attributt, for å spesifisere et bestemt AppStorm-nettsted for å lenke til.
funksjon link_to_appstorm ($ atts, $ content = null) ekstrakt (shortcode_atts (array ('site' => 'www'), $ atts)); returnere "AppStorm"; add_shortcode ('appstorm', 'link_to_appstorm'); Klokken kobles koden til et underdomen i AppStorm. Vi spesifiserer hvilket underdomene ved å legge til nettstedet Egenskap. Hvis det ikke er noe attributt definert i kortnummeret, deaktiverer kortnummeret det til www som bare kobler tilbake til hovedsiden. Brukseksempelet nedenfor vil koble til iPad.AppStorm.
[appstorm site = "ipad"]
Som du kan se, er kortkoder ganske selvforklarende. Det vi vil gjøre, bruker imidlertid det samme grunnleggende prinsippet om en kobling generert av en kortkode med et attributt som skal brukes i forbindelse med en tredjepartstjeneste som YouTube eller Flickr.
Konvertere en statisk kode fra tredjepart til en kortkode er ganske lik den metoden som brukes til å opprette en kobling. Bare, vi skal lage en funksjon som returnerer koden som en kodenavn, og deretter kaste inn noen attributter for å tilpasse den.
Det første trinnet vi bør ta er å ta den vanlige embedkoden, og opprett en enkel returfunksjon ut av den.
funksjon youtube_video ($ atts, $ content = null) return ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
På samme måte har vi opprettet den første, ikke-variable lenken i det første eksemplet, en del av koden ovenfor innebærer en YouTube-video som ikke vil endre seg i det hele tatt. Og hvordan det gjør det er ganske selvforklarende også.
I hovedsak vil koden i det forrige trinnet gi et resultat som er identisk med hvis den returnerte koden ble klistret inn i redaktøren selv. Med mindre du skal regelmessig legge inn den samme videoen over og over igjen, er denne kortnummeret trolig ubrukelig. Derfor ønsker vi å introdusere noen attributter som skal oversettes til parametere for iframe.
For å oppnå dette bruker vi igjen ekstrakt() funksjon for å trekke attributter i fra kortnummeret. I koden nedenfor gjør vi dette i en grunnleggende form ved kun å opprette et attributt for å erstatte video-IDen.
funksjon youtube_video ($ atts, $ content = null) ekstrakt (shortcode_atts (array ('id' => ")'; add_shortcode ('youtube', 'youtube_video'); [Youtube]
Og akkurat som å erstatte video-ID, kan vi gjøre det samme for bredde og høyde. Dette er tiden du vil sørge for at du gir standardverdier for, men hvis brukeren ikke gir en bredde eller høydeverdi.
funksjonen youtube_video ($ atts, $ content = null) ekstrakt (shortcode_atts (array ('id' => ", 'width' => '640', 'høyde' => '360') ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
YouTube har ytterligere parametere som kan legges til nettadressen, for eksempel autoplay. Selvfølgelig kan disse brukes til den returnerte koden også, med egen egenskap om nødvendig. Vanligvis er dette selvforklarende og er vist nedenfor (flere deler er i fet skrift).
funksjon youtube_video ($ atts, $ content = null) ekstrakt (shortcode_atts (array ('id' => ", 'width' => '640', 'høyde' => '360', 'autoplay' => '0 '), $ atts)), returnere''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
Det er egentlig så enkelt, og som du vil se i den følgende rundboken, kan den samme grunnleggende metoden brukes til å lage kortkoder for andre tredjepartstjenester.
Alle disse tjenestene fra tredjepart er opprettet ved å bruke de samme trinnene som ovenfor. Selvfølgelig, som i trinn 2b, kan flere parametere legges til vilje.
En Vimeo-video er innebygd i stort sett akkurat samme måte som en YouTube-video, gjennom en iframe med bredde- og høydevariabler. Det eneste tillegget er fargevarianten for å tilpasse spilleren.
funksjonen vimeo_video ($ atts, $ content = null) ekstrakt (shortcode_atts (array ('id' => ", 'width' => '640', 'høyde' => '360', 'color' => '59a5d1 '), $ atts)), returnere''; add_shortcode ('vimeo', 'vimeo_video'); [Vimeo]
Twitter-profilgrensesnittet er et stykke JavaScript, med massevis av forskjellige attributter, alle erstattet av shortcode-attributter i koden under. Fordi det er så mange, vil du kanskje fjerne noen og erstatte dem med konstante verdier (for eksempel styling) i selve JavaScript, eller bare endre standardattributtene i arrayet og glem å bruke dem i shortcode.
funksjon twitter_widget ($ atts, $ content = null) ekstrakt (shortcode_atts (array ('brukernavn' => ", 'bredde' => '300', 'høyde' => '200', 'tweetnum' => '4 ',' shellbgcolor '=' 'eeeeee', 'textcolor' => '333333', 'linkcolor' => '639ee3', 'hashtags' => 'sant' = '' true ',' loop '=' 'false', 'stream' => 'false', 'avatars' => 'false', 'timestamp' => 'false'), $ atts) '; add_shortcode ('twitter', 'twitter_widget'); Alle disse kodenavnene har standardinnstillinger, unntatt brukernavnet som kreves. Når det gjelder hva som faktisk skal settes i attributtet, er de alle forklarende opp til hashtags hvor resten er bare sanne / falske.
[Twitter]
Tweet-knappen er en populær sosial delingsknapp for Twitter.
funksjon tweet_button ($ atts, $ content = null) ekstrakt (shortcode_atts (array ('brukernavn' => ", 'url' =>", 'style' => 'ingen'), $ atts)); returnere "Tweet'; add_shortcode ('tweetbutton', 'tweet_button'); Tweet-knappens to to attributter er ikke helt tvetydige. Den siste setter stilen for tweet-knappen, heller ikke horisontal, vertikal eller ingen.
[Tweetbutton]
Like Tweet-knappen, Like og Send-knappene er de sosiale delingsknappene for Facebook. Vær oppmerksom på at disse knappene også trenger JavaScript SDK referert et sted på den nåværende siden.
Funksjon facebook_buttons ($ atts, $ content = null) ekstrakt (shortcode_atts (array ('width' => '450', 'showfaces' => 'false', 'colorscheme' => 'light', 'font' => 'arial'), $ atts)); komme tilbake ' De forskjellige attributene for bruk er forklart på Facebooks tilknyttede side, men i hovedsak er bredden skrevet i samme format som tidligere, Vis ansikter er en sann / falsk verdi for å vise ansikter av "like-ees", fargevalg er enten mørk eller lys og skrifttypen er, vel, en skrifttype.
Siden XFBML automatisk vil målrette mot den nåværende siden, er det ikke nødvendig å ha noen attributter i bruk, noe som betyr at kortnummeret kan være så enkelt som eksemplet nedenfor.
[som]
Flickr-merket er en måte å vise de siste bildene dine fra Flickr. Dessverre kommer Flickr-widgeten med sin egen CSS (selv om du enkelt kan flytte dette inn i stilarket), og bruker tabeller for layout. Når du er ferdig med å være svært frustrert over denne øvelsen, er her kortnummeret.
funksjonen flickr_widget ($ atts, $ content = null) ekstrakt (shortcode_atts (array ('userid' => ", 'num' => '3', 'sort' => 'tilfeldig', 'size' =>) $ atts)), returnere ' | www.flickr.com |
Flickrs widget har fire grunnleggende variabler, den bruker-ID er brukerens id (i formatet 12345678 @ N01), den num er antall bilder vist, den sortere er enten nyeste eller tilfeldige og relaterer seg til hvordan bildene som vises er bestemt og størrelse er enten s (et lite firkant), t (et miniatyrbilde) eller m (medium).
[Flickr]
Forhåpentligvis har jeg forklart hvordan du lager en kortkode i sammenheng med en tredjepartstjeneste. Det er ganske enkelt, vi trenger bare å finne ut hvordan den opprinnelige koden fungerer og bytte ut statiske variabler for attributter. Dette sparer tid, men kanskje viktigere betyr at koden kan endres på et senere tidspunkt, samtidig som parametrene opprettholdes, slik at du kan endre bredden på et senere tidspunkt over alle bruksområder av den bestemte kortnummer.
