Share
Idag ska vi titta på hur man använder kortkoder i kombination med en mängd populära tjänster - inklusive webbplatser som YouTube och Flickr, genom att först återskapa hur man skapar en kortnummer och sedan konvertera den tredje partens kod till något som kan upprepas och manipuleras.
Vi har täckt kortnummer redan här på WPTuts +, diskuterar fördelarna med att använda dem och hur de faktiskt ska använda dem. Kortnummer är effektivt genvägar (som definieras av WordPress själva) som gör det möjligt att uppnå ett resultat upprepade gånger med det minsta möjliga arbetet. I sin enklaste form innehåller en kortnummer någon kod du har anslutit till WordPress i en annan fil, ibland produkten från en tredje part, till exempel en YouTube-video eller en Flickr-ström.
Om du inte är bekant med kortkoder ska du förmodligen sluta läsa den här artikeln och kolla in en av de andra artiklarna vi har här på Tuts + om kortkoder i WordPress.
En kortnummer skapas genom att lägga till en funktion i din functions.php fil, och sedan länka upp den som en kortnummer. Exemplet nedan skapar en länk till AppStorm-navet.
Accentsconagua
funktion link_to_appstorm ($ atts, $ content = null) returnera 'AppStorm'; add_shortcode ('appstorm', 'link_to_appstorm'); För att använda det använder vi den enklaste formen av en kortnummer utan attribut.
[Appstorm]
Vi kan ta den här idén ytterligare genom att införa ett attribut, för att ange en specifik AppStorm-webbplats för att länka till.
funktion link_to_appstorm ($ atts, $ content = null) extrakt (shortcode_atts (array ('site' => 'www'), $ atts)); returnera "AppStorm"; add_shortcode ('appstorm', 'link_to_appstorm'); Klockan länker länken till en underdomän av AppStorm. Vi anger vilken underdomän genom att lägga till webbplats attribut. Om det inte finns något attribut definierat i kortkoden, standardkoden är den till www som bara länkar tillbaka till huvudsidan. Användningsexemplet nedan skulle länka till iPad.AppStorm.
[appstorm site = "ipad"]
Som du kan se är kortkoder ganska självförklarande. Vad vi vill göra är dock att använda samma grundläggande princip för en länk som genereras av en kortnummer med en attribut att använda i kombination med en tredjeparts tjänst som YouTube eller Flickr.
Omvandling av en statisk kod från tredje part till en kortnummer är ungefär som den metod som används för att skapa en länk. Helt enkelt kommer vi att skapa en funktion som returnerar koden som en kortnummer och sedan slänger in några attribut för att anpassa den.
Det första steget vi ska ta är att ta den vanliga inbäddningskoden och skapa en enkel returfunktion ut ur den.
funktion youtube_video ($ atts, $ content = null) return "'; add_shortcode ("youtube", "youtube_video"); [Youtube]
På samma sätt skapade vi den första, icke-variabla länken i det första exemplet, en del av koden ovan inleder en YouTube-video som inte förändras alls. Och hur det gör det är också ganska självförklarande.
I huvudsak kommer kodstycket i det föregående steget att producera ett resultat som är identiskt med om den returnerade koden klistrades in i redigeraren själv. Om du inte kommer att regelbundet bädda in samma video över och om igen, är den här kortnumret förmodligen värdelös. Därför vill vi presentera några attribut att översätta till parametrar för iframe.
För att uppnå detta använder vi återigen extrahera() funktion för att dra attribut i från kortkoden. I koden nedan gör vi det här i en grundläggande form genom att bara skapa ett attribut för att ersätta video-ID.
funktion youtube_video ($ atts, $ content = null) extrakt (shortcode_atts (array ('id' => "), $ atts)'; add_shortcode ("youtube", "youtube_video"); [Youtube]
Och precis som att ersätta video-ID kan vi göra samma för bredd och höjd. Det här är den tid du vill se till att du anger standardvärden för, om användaren inte anger ett bredd eller höjdvärde.
funktionen youtube_video ($ atts, $ content = null) extrakt (shortcode_atts (array ('id' => ", 'bredd' => '640', 'height' => '360'), $ atts) ''; add_shortcode ("youtube", "youtube_video"); [Youtube]
YouTube har ytterligare parametrar som kan läggas till webbadressen, till exempel autoplay. Självklart kan dessa tillämpas på den returnerade koden också, med egen attribut om det behövs. I allmänhet är detta självförklarande och visas nedan (extra delar är fetstilade).
funktion youtube_video ($ atts, $ content = null) extrakt (shortcode_atts (array ('id' => ", 'bredd' => '640', 'height' => '360', 'autoplay' => '0 '), $ atts)), returnera "'; add_shortcode ("youtube", "youtube_video"); [Youtube]
Det är verkligen så enkelt, och som du kommer att se i följande sammanställning kan samma grundläggande metod användas för att skapa kortnummer för andra tredjepartstjänster.
Alla dessa tredjepartskontor har skapats med samma steg som ovan. Naturligtvis, som i steg 2b, kan ytterligare parametrar läggas till efter vilja.
En Vimeo-video är inbäddad i stort sett exakt samma sätt som en YouTube-video, via en iframe med bredd och höjdvariabler. Det enda tillägget är färgvariabeln för att anpassa spelaren.
funktionen vimeo_video ($ atts, $ content = null) extrakt (shortcode_atts (array ('id' => ", 'bredd' => '640', 'height' => '360', 'color' => '59a5d1 '), $ atts)), returnera "'; add_shortcode ('vimeo', 'vimeo_video'); [Vimeo]
Twitterprofil-widgeten är en del av JavaScript, med massor av olika attribut, alla ersatta för kortnummerattribut i koden nedan. Eftersom det finns så många, kanske du vill ta bort några och ersätta dem med konstanta värden (t.ex. styling) i själva JavaScript, eller bara ändra standardattributen i arrayen och glömma att använda dem i kortkoden.
funktion twitter_widget ($ atts, $ content = null) extrakt (shortcode_atts (array ('användarnamn' => ", 'bredd' => '300', 'height' => '200', 'tweetnum' => '4 ',' shellbgcolor '=' 'eeeeee', 'textcolor' => '333333', 'linkcolor' => '639ee3', 'hashtags' => 'true', 'scrollbar' => 'true', 'loop' => 'false', 'stream' => 'false', 'avatars' => 'false', 'timestamp' => 'false'), $ atts) '; add_shortcode ('twitter', 'twitter_widget'); Alla dessa kortnummerattribut har standardvärden, förutom användarnamnet som krävs. När det gäller vad man egentligen ska sätta i attributet är de alla självförklarande upp till hashtaggar där resten är bara sanna / falska.
[Twitter]
Tweet-knappen är en populär social delningsknapp för Twitter.
funktion tweet_button ($ atts, $ content = null) extrakt (shortcode_atts (array ('användarnamn' => ", 'url' =>", 'style' => 'none'), $ atts)); returnera "Tweet'; add_shortcode ('tweetbutton', 'tweet_button'); Tweetknappens första två attribut är inte riktigt tvetydiga. Den sista anger stilen för tweetknappen horisontell, vertikal eller ingen.
[Tweetbutton]
Liksom Tweet-knappen är knapparna Like and Send de sociala delningsknapparna för Facebook. Observera att dessa knappar också behöver JavaScript SDK refereras någonstans på den aktuella sidan.
Funktion facebook_buttons ($ atts, $ content = null) extrakt (shortcode_atts (array ('width' => '450', 'showfaces' => 'false', 'colorscheme' => 'light' "arial"), $ atts)); lämna tillbaka ' De olika attributen för användning förklaras på Facebook: s associerade sida, men i huvudsak skrivs bredden i samma format som tidigare, visa ansikten är ett sant / falskt värde om huruvida man ska visa ansikten av "liknande-ees", färgschema är antingen mörk eller ljus och teckensnitt är, ja, en typsnitt.
Eftersom XFBML automatiskt riktar sig till den aktuella sidan är det inte nödvändigt att ha några attribut i bruk, vilket betyder att kortnumret kan vara så enkelt som det nedanstående exemplet.
[tycka om]
Flickr-märket är ett sätt att visa dina senaste foton från Flickr. Tyvärr kommer Flickr-widgeten med sin egen CSS (även om du enkelt kan flytta den till ditt stilark) och använder tabeller för layout. När din färdiga är mycket frustrerad över denna övning, här är kortnummeret.
funktionen flickr_widget ($ atts, $ content = null) extrakt (shortcode_atts (array ('userid' => ", 'num' => '3', 'sort' => 'slumpmässigt', 'size' =>) $ atts)), returnera " | www.snärtr.com |
Flickrs widget har fyra grundläggande variabler, den användar ID är användarens id (i formatet 12345678 @ N01), num är antalet bilder som visas, sortera är antingen senaste eller slumpmässiga och relaterar till hur de visade bilderna är bestämda och storlek är antingen s (en liten ruta), t (en miniatyrbild) eller m (medium).
[Flickr]
Förhoppningsvis har jag förklarat hur man skapar en kortnummer i samband med en tjänst från tredje part. Det är ganska enkelt, vi behöver bara utarbeta hur originalkoden fungerar och byta ut statiska variabler för attribut. Detta sparar tid, men kanske viktigare betyder att koden kan ändras vid ett senare tillfälle samtidigt som parametrarna hålls kvar så att du kan ändra bredden vid ett senare tillfälle över alla användningar av den särskilda kortnummer.
