Slik lager du dine egne WordPress-kortkoder

Kortkoder er en veldig kraftig funksjon av WordPress. I hovedsak er en shortcode en plassholder for noe annet innhold. En kjent kortkode er den innebygde gallerikortkoden. Skriv bare inn i WordPress-editoren, og den vil bli erstattet av et galleri med bilder tatt fra media som er lastet opp til innlegget.

Selv om medieopplasteren gir deg et fint grensesnitt for å lage et galleri, bak kulissene er det imidlertid opprettet en kortkode, noe som dette: . Avhengig av temaet kan dette se annerledes ut på installasjonen din, men en mulig utgang ville være noe slikt:

HTML-en du trenger å skrive for å få dette til å skje, er ganske heftig; ved hjelp av kortnummeret blir det betydelig raskere. Hvis du trenger å gjøre noen repeterende oppgaver i postredigeren, eller du trenger et bestemt HTML-format som tar en stund å markere, kan du oppleve at din egen kortkode kan hjelpe.

I denne artikkelen vil jeg vise deg hvordan kortkoder fungerer og hvordan du kan lage din egen gjennom noen enkle eksempler.

Grunnleggende om kortkoder

Som nevnt blir kortkodene egentlig erstattet av noe annet innhold du definerer. La oss ta en titt på det grunnleggende gjennom et eksempel. La oss anta at i hele innlegget ditt vil du referere eieren av nettstedet.

"Ifølge vårt selskaps eier - Daniel Pataki - er hovedmålet med nettstedet å generere mye penger. Daniel Pataki mener at deling også er viktig."

I stedet for å skrive "Daniel Pataki" kunne vi bruke en kortkode.

"Ifølge eierens eier - [eier] - hovedmålet med nettstedet er å generere mye penger. [Eier] mener at deling også er viktig."

Dette vil tillate oss å endre navnet på eieren på ett sted, så i tilfelle eieren endrer seg, vil alle forekomster av vår kortkode bruke det nye navnet.

Koding dette er faktisk ganske enkelt. Vi må bruke add_shortcode() -funksjonen for å fortelle WordPress om vår shortcode, og deretter opprette vår funksjon for å håndtere utgangen:

 add_shortcode ('owner', 'owner_output'); funksjon owner_output () {return 'Daniel Pataki'; } 

Merk at denne koden skal legges til temaets funksjoner.php-fil eller pluginfilene dine . Hvis du bruker et tema fra tredje part, anbefaler jeg at du bruker et barnemne.

Add_shortcode-funksjonen krever to parametere: Den første parameteren er kortnummeret WordPress prøver å matche - dette er hva du skriver mellom firkantede parenteser - den andre parameteren er navnet på funksjonen som håndterer utgangen, som er helt opp til oss.

Innenfor vår utgangshåndteringsfunksjon må vi returnere produksjonen som vi vil erstatte vår kortkode.

Shortcode Attributter

Det er viktig å være oppmerksom på at våre kortkoder også kan bruke attributter. Hvis du for eksempel vil sørge for at eieren av nettstedet vises med fet skrift, kan du få dette til å skje ved å opprette en attributt som heter "fet" og når den er satt til sann, vil de aktuelle HTML-kodene bli lagt til.

 add_shortcode ('owner', 'owner_output'); funksjon owner_output ($ atts) {$ atts = shortcode_atts (array ('bold' => false), $ atts); hvis ($ atts ['bold'] == true) {return ' Daniel Pataki '; } annet {return 'Daniel Pataki'; }} 

Dette ser mye mer skremmende ut, men i virkeligheten er det ganske enkelt. Først og fremst, begynn med å visualisere hvordan kortnummeret ditt vil bli brukt. Når du skriver inn kortnummeret ditt, gjør du dette:

[owner bold='true']

Vi vet nå at vi skal ha en attributt som heter "fet".

I vår utgangshåndteringsfunksjon bruker vi shortcode_atts() -funksjonen til å analysere alle attributter og gi noen av dem standardverdier. Vi sørger for at hvis du ikke angir hva verdien av "fet" er, er den satt til false.

Deretter tar vi bare en titt på verdien av den dristige attributtet. Hvis det er sant, returnerer vi navnet til eieren i en sterk tag, ellers returnerer vi det som det er.

Shortcode Content

Shortcode-innhold brukes vanligvis når litt innhold trenger spesiell HTML-formatering. La oss anta at nettstedet ditt bruker fancy titler som dette:

 Mitt tittel 

Dette er en spesiell tittel som er en nivå en overskrift og inneholder også et ikon. Vi kan lage dette som en kortkode ved hjelp av følgende formatering:

[title icon='check']My Title[/title]

Vær oppmerksom på at vi bruker en åpnings-kortkode-kode som har noen parametere og en lukkende kortkode-kode. Innholdet i (Mittittel) sendes til vår generasjonsfunksjon som den andre parameteren.

 add_shortcode ('title', 'title_output'); funksjon title_output ($ atts, $ content) {$ atts = shortcode_atts (array ('icon' => 'blyant'), $ atts); komme tilbake ' 
 '. $ innhold. ' 
 '; } 

Som du kan se er standardikonet "blyant", med mindre det er definert i kortnummeret. Innholdet er bestått som den andre parameteren og brukes som innholdet i nivå 1-overskriften.

Praktiske bruksområder

Det er et stort antall bruksområder for kortkoder fra å plassere skyveknapper og gallerier i innlegg, for nedtelling av timere og annet dynamisk innhold. Disse krever vanligvis at Javascript og CSS fungerer bra. I disse tilfellene er det opp til fantasien og kodingskoteletter.

Det er en rekke ting du kan gjøre for å gjøre livet ditt lettere (selv som en ikke-koder), for eksempel for å forenkle redigerings- og skriveprosessen. La oss si at du skriver spillanmeldelser og i hver enkelt må du legge inn et bord som dette:

Tittel
Utvikler
Sjanger
Pris
Vår dom
Aldri alene
Øverste en spill
Indie Casual Adventure
$ 14.99
5/5

Selv om du kopierer-limer dette fra artikkelen til artikkelen, er det en god del mucking om i forhold til mengden innhold du legger til. Du kan bruke en enkel kortkode for å få jobben gjort:

[final_table title="Never Alone" dev="Upper One Games" genre="Upper One Games" price="14.99" rating="5"]

Din shortcode output-funksjon vil være ansvarlig for å legge hele tabellen og andre biter av innhold rundt denne informasjonen, noe som dette:

 add_shortcode ('final_table', 'final_table_output'); funksjon final_table_output ($ atts) {return ' 
Tittel
Utvikler
Sjanger
Pris
Vår dom
'. $ atts ['title']. '
'. $ atts ['dev']. '
'. $ atts ['sjanger']. '
$ '. $ atts ['pris']. '
5 / '. $ atts ['rating']. '
 '; } 

Julen påskeegg

Så du har dette langt, og det nærmer seg juletid, så jeg trodde jeg skulle inkludere et lite påskeegg. The Christmas Countdown Widget er et plugin som gir deg muligheten til å legge til en nedtelling av Santa-themed Christmas til nettstedet ditt som en sidebar-widget eller som en kortkode.

Installer, aktiver og bruk [countdown] hvor som helst i innlegget ditt for å legge til Mr. Clause i innlegget ditt.

Konklusjon

Jeg tror at kortkoder er gode fordi de tillater ikke-kodere å forenkle arbeidsflyten og kan øke kompleksiteten når du utvider kodingskunnskapen din. Jeg foreslår at du prøver å lage en kortkode her og der, da du har mer komplekse behov.

For en liste over alle standardkortkoder, ta en titt på kortnummer-delen i WordPress-kodeksen. Hvis du vil ha mer informasjon, ta en titt på Codex, og du vil kanskje også legge merke til Shortcode Generator som kan lagre noen få tastetrykk når du lager generasjonsfunksjonene dine.

45 uvanlig kunstverk laget av sigarettbokser du trenger å se

Det finnes ulike materialer som kan resultere i vakre og interessante kreasjoner . Opprydding er en fin måte å ikke bare bli kreativ på, men det hjelper også miljøet som man ikke bruker nye elementer. Man forbinder ikke normalt å røyke med kunst, men du vil bli overrasket over hva et par resirkulerte sigarettpakker kan bli omgjort til.Med li

(Tekniske og design tips)

Lag flytdiagrammer i skisse med brukerflow-plugin

Grensesnitt designere ble raskt forelsket i Sketch som et UI / UX designverktøy. Rett ut av boksen kan det puste opp enkle grensesnitt mye raskere enn Photoshop eller Illustrator.En fin funksjon mangler fra Sketch er muligheten til å koble artboards med flytskjemaer . Men med brukerflow-plugin kan du bare gjøre det! U

(Tekniske og design tips)