Flere kortkoder med en enkelt funksjon 3 Killer-eksempler

Den kraftige Shortcode API lar oss lage "utklipp" og inkludere spesialinnhold (for eksempel PHP-funksjoner eller komplisert HTML-kode) i våre innlegg. Det er svært vanlig å bygge separate funksjoner for hver kortkode, men er det virkelig nødvendig? I dette innlegget skal vi se hvordan vi kan bruke mer enn én shortcode ved å bygge en enkelt funksjon.


I Defence of Shortcodes

APIene gjør WordPress til et av de mest fleksible innholdsstyringssystemene til alle. De er grunnen til at det er titusenvis av plugins og temaer der ute: Det store samfunnet av WordPress er i stand til å gjøre WordPress til å gjøre backflips og cartwheels, takket være APIene til WordPress.

Blant disse APIene er min favoritt kortkodes API. Dens logikk og validitet blir stilt spørsmålstegn, men jeg tror sterkt på at bruk av kortkoder i WordPress har en enkel læringskurve, og når de er lært de få enkle regler om parametere og åpnings- / lukkekoder, kan nybegynnere også nyte å bruke kortkoder. Riktig, det er ikke WYSIWYG, men en WordPress-nybegynner kan ha en vanskeligere tid for å rydde rotet hvis de gjorde noe galt i en WYSIWYG-editor og ødela HTML. Lettere å se at kortnummeret ikke virker, slett det og skriv det igjen.

Men selvfølgelig er det bare en mening av meg. La oss komme tilbake til emnet: Vi bygger flere kortkoder med en enkelt funksjon!


Fordelen med denne teknikken

Det er egentlig ikke nødvendig å argumentere for fordelene med denne metoden - vurder dette latterlig lange eksempelet:

 ", 'last' =>"), $ atts)); hvis ($ class! = ") $ class =". $ Klasse; hvis ($ last = 'yes') $ last_class = 'last'; komme tilbake '
'. do_shortcode ($ content). '
'; add_shortcode ('one_half', 'one_half_sc'); funksjon one_third_sc ($ atts, $ content = null, $ tag) ekstrakt (shortcode_atts (array (// ekstra classes 'class' => ", 'last' =>"), $ atts)); hvis ($ class! = ") $ class =". $ Klasse; hvis ($ last = 'yes') $ last_class = 'last'; komme tilbake '
'. do_shortcode ($ content). '
'; add_shortcode ('one_third', 'one_third_sc'); funksjon one_quarter_sc ($ atts, $ content = null, $ tag) ekstrakt (shortcode_atts (array (// ekstra classes 'class' => ", 'last' =>"), $ atts)); hvis ($ class! = ") $ class =". $ Klasse; hvis ($ last = 'yes') $ last_class = 'last'; komme tilbake '
'. do_shortcode ($ content). '
'; add_shortcode ('one_quarter', 'one_quarter_sc'); funksjon two_thirds_sc ($ atts, $ content = null, $ tag) ekstrakt (shortcode_atts (array (// ekstra classes 'class' => ", 'last' =>"), $ atts)); hvis ($ class! = ") $ class =". $ Klasse; hvis ($ last = 'yes') $ last_class = 'last'; komme tilbake '
'. do_shortcode ($ content). '
'; add_shortcode ('two_thirds', 'two_thirds_sc'); funksjon tre_quarters_sc ($ atts, $ content = null, $ tag) ekstrakt (shortcode_atts (array (// extra classes 'class' => ", 'last' =>") hvis ($ class! = ") $ class =". $ Klasse; hvis ($ last = 'yes') $ last_class = 'last'; komme tilbake '
'. do_shortcode ($ content). '
'; add_shortcode ('three_quarters', 'three_quarters_sc'); ?>

Den samme koden (både PHP og HTML) blir brukt igjen og igjen i hver enkelt funksjon - unntatt de varierende CSS-klassene. I tillegg er attributene i hver funksjon det samme som i de andre funksjonene. Det er bare vanskelig å lese. Kom til å tenke på det, hvis vi noen gang måtte endre en funksjon i denne kolonnen divs, vi må endre de samme delene i alle funksjonene.

Hva om det var en variabel for å hente "taggen" til kortnummeret? Ikke så overraskende kalles variabelen $ tag og kunne brukes innenfor våre funksjoner. Det tillater at våre funksjoner kontrollerer koden for kortkoden og oppfører seg i henhold til taggen.

Tenk på eksemplet ovenfor: Hvis det er mer enn en funksjon som tjener nesten Den samme funksjonaliteten, det ville være logisk (og ganske kult) å ha en funksjon for våre kortkoder å bruke.

Jeg har kommet med tre gode eksempler på hvordan vi kan bruke denne teknikken. Hvis du kan tenke på mer mens du leser innlegget, er du velkommen til å dele tankene dine med alle andre i kommentarfeltet nedenfor!


Eksempel 1 Video Embeds

I en av mine tidligste innlegg på Wptuts +, forklarte jeg hvordan du bruker en kortkode for å legge inn videoer fra ulike videoverter som YouTube, Vimeo og Dailymotion. Koden så slik ut:

  '$'), hvis ($ site == "youtube") $ src = '$' = '' ',' w '=>' 600 ',' h '=>' 370 ' http://www.youtube-nocookie.com/embed/ '. $ id; else if ($ site == "vimeo") $ src =' http://player.vimeo.com/video/ '. $ id; annet hvis ($ site == "dailymotion") $ src = 'http://www.dailymotion.com/embed/video/'. $ id; else if ($ site == "yahoo" ) $ src = 'http://d.yimg.com/no/vyc/site/player.html#vid='. $ id; annet hvis ($ site == "bliptv") $ src = ' http://a.blip.tv/scripts/shoggplayer.html#file=http://blip.tv/rss/flash/ '. $ id; annet hvis ($ site == "veoh") $ src = 'http://www.veoh.com/static/swf/veoh/SPL.swf?videoAutoPlay=0&permalinkId='. $ id; annet hvis ($ site == "viddler") $ src = 'http: // $ id! = ") return '';  add_shortcode ('vid', 'vid_sc'); ?>

Mens det fortsatt er en ikke så dårlig praksis (bortsett fra 6 eller hvis uttalelser), kan vi nå bruke en mindre attributt ('nettstedet') og opprett separate kortnumre, slik:

 ", 'w' => '600', 'h' => '370'), $ atts)); bytt ($ tag) tilfelle" youtube ": $ src = 'http: //www.youtube-nocookie .com / embed / '; break; case "vimeo": $ src =' http://player.vimeo.com/video/ '; break; case "viddler": $ src =' http: //www.viddler .com / simple / '; break; case "dailymotion": $ src =' http://www.dailymotion.com/embed/video/ '; break; hvis ($ id! = ") returnerer''; komme tilbake;  add_shortcode ('youtube', 'wptuts_embed_sc'); add_shortcode ('vimeo', 'wptuts_embed_sc'); add_shortcode ('viddler', 'wptuts_embed_sc'); add_shortcode ('dailymotion', 'wptuts_embed_sc'); ?>

Se hva vi gjorde? Vi ga en $ tag parameter for vår funksjon i første linje (for å erstatte "nettstedet"attributt) og brukte a bytte om betinget erklæring (for bedre, renere kode). Resultatet for de to funksjonene vil være det samme, unntatt du kan bruke [Youtube] i stedet for [vid site = "youtube"] nå.

(Jeg brukte ikke noen av videoverterne i den andre funksjonen. Hvis du trenger å legge til flere verter, kan du legge til så mange "saks som du vil.)


Eksempel 2 Kolonne divs

Ah, kolonner ... de er den viktigste delen av et CSS-nett, og de gjør det super enkelt å gjøre nettstedet ditt mer adaptivt, hvis de støtter lydhørstekniske designteknikker. Du kan se dem i nesten hvert WordPress-tema på ThemeForest, og de bruker kortkoder ... med en praksis som vår "latterlig lange eksempel" i begynnelsen av denne opplæringen.

Som du husker, var koden nesten den samme i alle 5 funksjonene i det eksemplet. Dermed ville det være utrolig enkelt å slå dem sammen i en enkelt funksjon og la $ tag variabel arbeid sin magi:

 "), $ atts)), hvis ($ class! =") $ class = ". $ class; $ last ="; // sjekk kortnummeret for å legge til en "siste" klasse hvis (strpos ($ tag, '_last')! == false) $ tag = str_replace ('_last', 'last', $ tag); $ output = '
'. do_shortcode ($ content). '
'; returnere $ output; add_shortcode ('one_half', 'wptuts_columns_sc'); add_shortcode ('one_half_last', 'wptuts_columns_sc'); add_shortcode ('one_third', 'wptuts_columns_sc'); add_shortcode ('one_third_last', 'wptuts_columns_sc'); add_shortcode ('one_quarter', 'wptuts_columns_sc'); add_shortcode ('one_quarter_last', 'wptuts_columns_sc'); add_shortcode ('two_thirds', 'wptuts_columns_sc'); add_shortcode ('two_thirds_last', 'wptuts_columns_sc'); add_shortcode ('three_quarters', 'wptuts_columns_sc'); add_shortcode ('three_quarters_last', 'wptuts_columns_sc'); ?>

Ganske pent, ikke sant? Vi behøvde ikke engang å bruke en bytte om!

Vi dupliserer fortsatt linjer mens du legger til snarveiene, skjønt. Vågner å gå et skritt videre? Fjern add_shortcode () linjer som skal erstattes med dette:

 

Nå har vi enda mer vedlikeholdsbar kode. For eksempel; Hvis vi skulle endre navnet på funksjonen, ville vi ikke bry oss om å endre hver linje lenger.


Eksempel 3 Postlister

Har du noen gang hatt behov for å liste noen tidligere (eller fremtidige) artikler i innleggene dine? Jeg gjør det sikkert. Det er mange plugins som gir kortkoder, men de fleste krever at du bruker tonnevis av attributter som kan resultere i noe stygg, komplisert merke som [innlegg cat = "5,6" author = "barisunver" status = "privat" postsperpage = "4" og = "så videre"].

Hva med vi bruker vår elskede $ tag i stedet? La oss gi det et skudd:

 ID; $ post_author = $ post-> post_author; ekstrakt (shortcode_atts (array ('number' => 5, 'exclude_current' => 'ja', 'orderby' => 'dato'), $ atts)); $ args = "; bytt ($ tag) case" latest_posts ": // vi trenger ikke noen argumenter for å hente nyeste innlegg :) break; case" category_posts ": $ categories = get_the_category ($ post_ID); $ first_category = $ kategorier [0] -> term_id; $ args = 'cat ='. $ first_category; break; case "author_posts": $ args = 'post_status = fremtidig '; pause; $ not_in =' & post__not_in [] = '. $ post_ID; hvis ($ exclude_current ==' no ') $ not_in = "; $ get_posts = get_posts ($ args. $ not_in. '& posts_per_page ='. $ nummer. '& orderby ='. $ orderby); $ output = '
    '; foreach ($ get_posts as $ post) $ output. = '
  • '. get_the_title (). '
  • '; $ output. = '
'; wp_reset_query (); returnere $ output; add_shortcode ('latest_posts', 'wptuts_post_lists_sc'); add_shortcode ('category_posts', 'wptuts_post_lists_sc'); add_shortcode ('author_posts', 'wptuts_post_lists_sc'); add_shortcode ('future_posts', 'wptuts_post_lists_sc'); ?>

Som du kan se, kan vi kvitte oss med 3 mulige shortcode attributter: "katt","forfatter"og"post_status"Du kan alltid utvide saks og legg til nye kortkoder med denne enkle, relativt liten funksjonen.


Wrapping Up

Som en fan av WordPress-kortkoder, denne oppdagelsen av $ tag variabel er litt spennende for meg. Det ser ut til at det er et stort potensial for å utnytte denne metoden.

Hva synes du om denne teknikken? Legg inn dine kommentarer nedenfor og del dine tanker med oss!