Share
Vandaag bekijken we hoe we shortcodes kunnen gebruiken in combinatie met verschillende populaire services, zoals sites als YouTube en Flickr, door eerst opnieuw op te sommen hoe een shortcode moet worden gemaakt en vervolgens hoe je die code van derden omzet in iets dat kan worden herhaald en gemanipuleerd.
We hebben hier al de shortcodes behandeld bij WPTuts +, waarin we de voordelen bespreken van het gebruik ervan en hoe we ze eigenlijk kunnen gebruiken. Shortcodes zijn effectieve snelkoppelingen (zoals gedefinieerd door WordPress zelf) waarmee een uitkomst herhaaldelijk kan worden bereikt met zo weinig mogelijk werk. In hun eenvoudigste vorm bevat een shortcode een code die u in WordPress in een ander bestand hebt gehangen, soms het product van een externe partij, zoals een YouTube-video of een Flickr-stream.
Als je niet bekend bent met shortcodes, stop dan waarschijnlijk met het lezen van dit artikel en bekijk een van de andere artikelen die we hier bij Tuts + hebben over shortcodes in WordPress.
Een shortcode wordt gemaakt door een functie aan uw toe te voegen functions.php bestand en koppel het vervolgens als een shortcode. Het onderstaande voorbeeld maakt een koppeling naar de AppStorm-hub.
Accentsconagua
function link_to_appstorm ($ atts, $ content = null) ga terug naar 'AppStorm'; add_shortcode ('appstorm', 'link_to_appstorm'); Om het te gebruiken, gebruiken we de eenvoudigste vorm van een shortcode zonder attributen.
[Appstorm]
We kunnen dit idee verder brengen door een attribuut in te voeren, waarin een specifieke AppStorm-site moet worden opgegeven om naar te linken.
functie link_to_appstorm ($ atts, $ content = null) extract (shortcode_atts (array ('site' => 'www'), $ atts)); terug 'AppStorm'; add_shortcode ('appstorm', 'link_to_appstorm'); De tijd dat de shortcode linkt naar een subdomein van AppStorm. We specificeren welk subdomein door het toevoegen van de plaats attribuut. Als er geen attribuut is gedefinieerd in de shortcode, wordt standaard de shortcode gebruikt www wat gewoon terug linkt naar de hoofdhomepage. Het onderstaande gebruiksvoorbeeld zou linken naar iPad.AppStorm.
[appstorm site = "ipad"]
Zoals je kunt zien, zijn shortcodes behoorlijk vanzelfsprekend. Wat we echter willen doen, is hetzelfde basisprincipe gebruiken van een link gegenereerd door een shortcode met een attribuut om te gebruiken in combinatie met een externe service zoals YouTube of Flickr.
Het converteren van een statisch stuk code van een derde naar een shortcode lijkt veel op de methode die wordt gebruikt om een link te maken. We gaan eenvoudig een functie maken die de code retourneert als een shortcode en vervolgens een paar kenmerken invoert om deze aan te passen.
De eerste stap die we moeten nemen, is om de normale embed-code te gebruiken en er een eenvoudige retourfunctie van te maken.
functie youtube_video ($ atts, $ content = null) ga terug ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
Op dezelfde manier hebben we die eerste niet-variabele link in het eerste voorbeeld gemaakt, het stuk code hierboven bevat een YouTube-video die helemaal niet zal veranderen. En hoe dat in zijn werk gaat, spreekt voor zich.
In feite zal het stuk code in de vorige stap een resultaat opleveren dat identiek is aan of de geretourneerde code in de editor zelf was geplakt. Tenzij u regelmatig dezelfde video opnieuw gaat embedden, is deze shortcode waarschijnlijk nutteloos. Daarom willen we enkele attributen introduceren die kunnen worden vertaald in parameters voor de iframe.
Om dit te bereiken, gebruiken we opnieuw de extract() functie om attributen uit de shortcode te halen. In de onderstaande code doen we dit in een basisvorm door alleen een kenmerk te maken om de video-ID te vervangen.
function youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => "), $ atts)); return ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
En net als bij het vervangen van de video-ID kunnen we hetzelfde doen voor de breedte en hoogte. Dit is het moment waarop u zeker wilt weten dat u standaardwaarden opgeeft, maar als de gebruiker geen waarde voor de breedte of hoogte heeft opgegeven.
functie youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => ", 'width' => '640', 'height' => '360'), $ atts)) ''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
YouTube heeft wel aanvullende parameters die aan de URL kunnen worden toegevoegd, zoals automatisch spelen. Vanzelfsprekend kunnen deze ook op de geretourneerde code worden toegepast, met hun eigen attribuut indien nodig. Over het algemeen is dit vanzelfsprekend en wordt hieronder aangetoond (toegevoegde delen zijn vetgedrukt).
functie youtube_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => ", 'width' => '640', 'height' => '360', 'autoplay' => '0 '), $ atts)); terug''; add_shortcode ('youtube', 'youtube_video'); [Youtube]
Het is echt zo simpel, en zoals je in de volgende samenvatting zult zien, kan dezelfde basismethode worden gebruikt om shortcodes te maken voor andere services van derden.
Al deze ingangen van derden zijn gemaakt met behulp van dezelfde stappen als hierboven. Natuurlijk, zoals in stap 2b, kunnen naar wens aanvullende parameters worden toegevoegd.
Een Vimeo-video is bijna op precies dezelfde manier ingebed als een YouTube-video, via een iframe met breedte- en hoogtevariabelen. De enige toevoeging is de kleurvariabele om de speler aan te passen.
functie vimeo_video ($ atts, $ content = null) extract (shortcode_atts (array ('id' => ", 'width' => '640', 'height' => '360', 'color' => '59a5d1 '), $ atts)); terug''; add_shortcode ('vimeo', 'vimeo_video'); [Vimeo]
De Twitter-profielwidget is een stuk JavaScript, met een massa verschillende attributen, alle vervangen door shortcode-attributen in de onderstaande code. Omdat er zoveel zijn, wilt u misschien wat verwijderen en deze vervangen door constante waarden (zoals styling) in het werkelijke JavaScript, of alleen de standaardkenmerken in de array wijzigen en vergeten ze te gebruiken in de shortcode.
function twitter_widget ($ atts, $ content = null) extract (shortcode_atts (array ('gebruikersnaam' => ", 'width' => '300', 'height' => '200', 'tweetnum' => '4 ',' shellbgcolor '=>' cccccc ',' listbgcolor '=>' eeeeee ',' textcolor '=>' 333333 ',' linkcolor '=>' 639ee3 ',' hashtags '=>' true ',' scrollbar ' => 'true', 'loop' => 'false', 'stream' => 'false', 'avatars' => 'false', 'timestamp' => 'false'), $ atts)); return ' '; add_shortcode ('twitter', 'twitter_widget'); Al deze shortcode-kenmerken hebben standaardwaarden, behalve de gebruikersnaam die vereist is. Wat betreft het feit dat het attribuut daadwerkelijk wordt gebruikt, zijn ze allemaal vanzelfsprekend hashtags waarin de rest alleen waar / onwaar is.
[Twitter]
De Tweet-knop is een populaire knop voor delen van sociale media voor Twitter.
function tweet_button ($ atts, $ content = null) extract (shortcode_atts (array ('gebruikersnaam' => ", 'url' =>", 'style' => 'none'), $ atts)); terug 'Tweet'; add_shortcode ('tweetbutton', 'tweet_button'); De eerste twee kenmerken van de tweetknop zijn niet echt dubbelzinnig. De laatste zet ook de stijl voor de tweet-knop in horizontaal, verticaal of geen.
[Tweetbutton]
Net als de Tweet-knop zijn de knoppen Like en Send de social sharing-knoppen voor Facebook. Let op: deze knoppen hebben ook de JavaScript-SDK nodig waarnaar ergens op de huidige pagina wordt verwezen.
function facebook_buttons ($ atts, $ content = null) extract (shortcode_atts (array ('width' => '450', 'showfaces' => 'false', 'colorscheme' => 'light', 'font' => 'arial'), $ atts)); terug ' De verschillende attributen voor gebruik worden uitgelegd op de gekoppelde pagina van Facebook, maar in essentie is de breedte in hetzelfde formaat geschreven als hiervoor, laat gezichten zien is een echte / foute waarde van het tonen van gezichten van de "like-ees", kleurenschema is ofwel donker of licht en het lettertype is, nou ja, een lettertype.
Omdat de XFBML automatisch de huidige pagina zal targeten, hoeven er geen attributen in gebruik te zijn, wat betekent dat de shortcode zo simpel kan zijn als in het onderstaande voorbeeld.
[net zoals]
De Flickr-badge is een manier om uw recente foto's van Flickr weer te geven. Helaas wordt de Flickr-widget geleverd met een eigen CSS (hoewel u deze gemakkelijk naar uw stylesheet kunt verplaatsen) en tabellen gebruikt voor lay-out. Als je klaar bent met gefrustreerd over deze oefening, hier is de shortcode.
functie flickr_widget ($ atts, $ content = null) extract (shortcode_atts (array ('userid' => ", 'num' => '3', 'sort' => 'random', 'size' =>), $ atts)); terug ' | www.tikr.com |
Flickr's widget heeft vier basisvariabelen, de gebruikersnaam is de id van de gebruiker (in het formaat 12345678 @ N01), de num is het aantal getoonde foto's, de soort is ofwel laatste of willekeurig en heeft betrekking op hoe de getoonde foto's worden bepaald en de grootte is of s (een klein vierkant), t (een miniatuur) of m (medium).
[Flickr]
Hopelijk heb ik uitgelegd hoe je een shortcode kunt maken in de context van een service van een derde partij. Het is vrij eenvoudig, we hoeven alleen maar uit te werken hoe de originele code werkt en statische variabelen uit te wisselen voor attributen. Dit bespaart tijd, maar wat misschien nog belangrijker is, betekent dat de code op een later tijdstip kan worden gewijzigd met behoud van de parameters waarmee u de breedte op een later tijdstip kunt wijzigen voor alle gebruik van de betreffende shortcode.
