Vil du lære hvordan du lager en kortkode i WordPress?
Å lære å lage en kortkode i WordPress kan være en effektiv måte å tilpasse innlegg og sider på. Men hvis du er ny i prosessen, kan det hende du synes det er vanskelig å finne ut hvordan du bruker en slik funksjon på nettstedet ditt.
Derfor har vi satt sammen en guide for å hjelpe deg i gang. Ved å se på hvordan kortkoder fungerer og hvordan du bruker dem effektivt, kan du begynne å tilpasse innholdet ditt til din smak uten behov for ekstra plugins.
I denne artikkelen vil vi diskutere hva WordPress-kortkoder er og hvorfor du kan vurdere å bruke dem. Så viser vi deg hvordan du lager din egen.
Men før, hvis du aldri har installert WordPress Discover Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din
Så tilbake til hvorfor vi er her.
Hva er WordPress-kortkoder?
WordPress-snarkoder fungerer som snarveier som lar deg raskt legge inn elementer i et innlegg eller en side. Disse er vanligvis en enkelt kodelinje omsluttet av firkantede parenteser. For eksempel :
[exemplecodehortcode]Denne koden vil vise en forhåndsbestemt funksjon på fronten av nettstedet ditt.
WordPress først introduserte kortkoder med utgivelsen av Shortcode API. Dette gjorde det enkelt for brukere å legge til attraktive elementer til sine innlegg og sider, som f.eks Google Maps eller Facebook «Liker»-knappen.
Det finnes i WordPress misligholdet seks kortkoder :
- bildetekst: Pakk bildetekster rundt innhold
- galleri : viser bildegallerier
- lyd: bygger inn og spiller av lydfiler
- vidéo : bygger inn og spiller av videofiler
- spilleliste : viser en samling av lyd- eller videofiler
- embed : omslutter innebygde elementer
Du vil også komme over to grunnleggende typer kortkodeformatering: self-closing et enclosing.
Kortkoder self-closing kan stå på egenhånd og trenger ikke lukkebrikke.
I mellomtiden enclosing omslutt innholdet du vil redigere og tvinge deg til å lukke taggen manuelt. Du kan for eksempel bygge inn en YouTube-video ved å pakke URL-en mellom taggene embed et /embed :
For eksempel vil dette skape følgende resultat:
Noen av beste WordPress-plugins kommer med sine egne kortkoder. For eksempel, WP-skjemaer et Kontaktskjema 7 har kortkoder som lar deg raskt bygge inn en Kontaktskjema i et innlegg eller en side. Du kan også bruke en plugin som MaxButtons for å legge til en knappkortkode hvor du vil på nettstedet ditt.
Hvorfor bør du vurdere å bruke WordPress-kortkoder?
Det er mange grunner til at du kan bruke WordPress-kortkoder. Det er for eksempel enklere og raskere enn å lære og skrive et langt stykke kode i HTML. I tillegg hjelper de deg med å holde innholdet ditt rent og tilgjengelig.
Kortkoder kan brukes til å automatisere visse funksjoner som du bruker gjentatte ganger. For eksempel hvis du bruker en knapp oppfordring til handling (CTA) på hver av artiklene dine kan det være en rask og praktisk løsning å ha en dedikert kortkode klar.
Det bør nevnes at Gutenberg redaktør fungerer på samme måte, og er avhengig av bruk av kortkoder. Det lar WordPress-brukere legge til flere interaktive funksjoner gjennom bruk av blokker.
En slik metode er mye mer nybegynnervennlig fordi du kan legge til innhold rett på brukergrensesnittet. Imidlertid er WordPress-blokkredigereren fortsatt begrenset i hva den tilbyr. Heldigvis følger det med en blokk Kort kode, som lar deg legge til tilpasset innhold på sidene dine.
Hvordan lage en kortkode i WordPress
Hvis du allerede har kodekunnskap, kan du lage dine egne tilpassede kortkoder. Dette gir deg full kontroll over utseendet og funksjonaliteten til nettstedet ditt.
La oss se hvordan du lager en tilpasset WordPress-kortkode. I denne opplæringen legger vi til sosiale medier-lenker til en artikkel som et eksempel.
Trinn 1 – Opprett en ny temafil
Før du begynner, er det lurt å gjøre det ta fullstendig sikkerhetskopi av WordPress-nettstedet ditt. Du må også opprette en egen fil for din egendefinerte kortkode utenfor filen functions.php din WordPress tema. Dette vil gi en reserveløsning i tilfelle noe går galt.
Du kan bruke en klient FTP (File Transfer Protocol) såsom fileZilla for å få tilgang til nettstedets temafiler. Når du er logget inn på nettstedet ditt, gå til wp-innhold> temaer og finn din nåværende temamappe. I vårt eksempel vil dette være uglepresse:
Åpne mappen din WordPress tema, høyreklikk på den og trykk Lag ny fil.
Gi den nye filen et navn custom-shortcodes.php klikk deretter OK. Du kan deretter redigere den ved å høyreklikke på den og velge alternativet Vis/rediger :
Dette vil åpne filen i standard tekstredigeringsprogram. Da trenger du bare å legge til følgende kodeblokk:
<?php ?>
Dette sikrer at den nye filen din blir tolket som PHP, som er skriptspråket WordPress er bygget på.
Du kan deretter lagre endringene og lukke filen. Sørg for å merke av i følgende boks for å sikre at den oppdateres på serveren og brukes på nettstedet ditt:
Åpne deretter filen functions.php i samme temamappe og legg til følgende kodelinje nederst i dokumentet:
include('shortcodes-personnalises.php');
Dette vil fortelle systemet om å inkludere eventuelle endringer du gjør i filen custom-shortcodes.php innenfor functions.php samtidig som du kan skille dem. Når du er klar, lagre endringene og lukk filen.
Trinn 2 - Lag Shortcode-funksjonen
Deretter må du lage kortkodefunksjonen, og instruere den hva den skal gjøre. Velg alternativet på nytt Vis/rediger av filen din custom-shortcodes.php. Bruk følgende kodebit for å legge til en handling for å koble funksjonen din til:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Deretter må du legge til en tilbakeringingsfunksjon, som vil kjøre når krok-handlingen er aktivert. Hvis du legger til følgende kodelinje rett etter den som er nevnt ovenfor, vil du fortelle WordPress at funksjonen din er en kortkode:
add_shortcode('sabonner', 'subscribe_link');Når du oppretter en kortkode ved hjelp av funksjonen add_shortcode, tildeler du en kortkode-tag " ($tag) "og en tilsvarende funksjonskrok" ($func) som vil kjøre hver gang snarveien brukes.
Med andre ord, hvis shortcode-koden er [abonner], så kroken 'subscribe_link' omdirigerer den besøkende til den angitte URL-en.
Derfor hele koden du bruker i filen din shortcodes-personnalises.php vil se slik ut:
Det skal bemerkes at når du navngir tagger, bør du bare bruke små bokstaver, selv om understreking kan brukes. Det er også avgjørende unngå å bruke bindestreker, da det kan forstyrre andre kortkoder.
Trinn 3 – Legg til Self-Close Shortcode på nettstedet
Du kan nå teste startkoden din som en selvlukkende kortkode på WordPress-siden din. Ved å bruke WordPress-blokkredigeringsprogrammet kan du sette inn [abonner]-taggen direkte i innlegget:
Dette vil vise følgende innhold til besøkende på nettstedet ditt:
Hvis du er fornøyd med denne kortkoden, trenger du ikke gjøre noe annet. Men hvis du vil tilpasse det, kan du hoppe til neste trinn.
Trinn 4 - Legg til parametere i kortkoden
Du kan tilpasse kortkoden "abonnere" for ekstra funksjonalitet for å vise andre sosiale medier-lenker. Du kan gjøre dette ved å legge til en parameter for å endre URL-en.
Hell legge til administrasjonsattributter, må du åpne filen custom-shortcodes.php og legg til følgende kode:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');Dette vil tillate deg å tilpasse koblingene i shortcode-taggen din for å legge dem til Gutenberg-editoren. Du kan lime den inn over den forrige koden i filen custom-shortcodes.php. Det skal se omtrent slik ut:
Legger til shortcode_atts() funksjon vil kombinere brukerattributter med alle kjente attributter, og eventuelle manglende data vil bli erstattet med standardverdiene. Når du er klar, lagre endringene og lukk filen.
Trinn 5 - Test innstillingene
Du kan nå teste den oppdaterte kortkoden i WordPress Block Editor. I vårt eksempel tester vi Twitter- og Facebook-lenkene våre med følgende kortkoder:
[subscribe link='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[subscribe link='https://twitter.com/BlogPasCher']Twitter[/subscribe]
Dette vil gi følgende resultat på front-end:
Denne selvlukkende kortkoden viser de direkte URL-ene til dine sosiale profiler til besøkende. Imidlertid vil du kanskje at denne funksjonen skal se litt polert ut.
For eksempel vil du kunne lage en vedlagt versjon som lar deg tilpasse ankerteksten som vises til brukere når de skal klikke på den. Vi viser deg hvordan du gjør det i neste trinn.
Trinn 6 – Lag vedlagte kortkode
Den vedlagte kortkoden vil bli formatert på samme måte som det forrige eksemplet med automatisk lukking. Den vil imidlertid inkludere en ekstra parameter for funksjonen.
Først må du legge til $content = null, som identifiserer denne funksjonen som en omsluttende kortkode. Du kan deretter legge til do_shortcode fra WordPress, som vil søke i innholdet etter kortkoder.
I filen custom-shortcodes.php, legg til den nye vedlagte kortkoden:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Når du er klar, filen din custom-shortcodes.php skal se slik ut:
Den forrige koden har et attributt " stil " tillegg, som vil endre ankerteksten til en blå farge. Ikke glem å lagre endringene når du er ferdig.
Trinn 7 – Legg til vedlagte kortkode på nettstedet
Du kan nå sette inn kortkoden din i WordPress-blokkredigeringsprogrammet for å se det endelige resultatet:
Som du la merke til, kan du enkelt endre nettadressene til sosiale medier og ankerteksten som vises til den besøkende ved å bruke denne kortkoden. I dette tilfellet har vi valgt "Facebook" et "Twitter" :
Der ! Du har nå opprettet en egendefinert kortkode for abonnementslenkene på sidene og innleggene dine. Merk at alle trinnene nevnt ovenfor kan endres for å lage alle slags forskjellige elementer ved å bruke WordPress-funksjonen Kortkoder.
Å legge til ekstra funksjonalitet til WordPress-nettstedet ditt er mye enklere med kortkoder. Du kan bruke dem til å tilpasse ditt eksisterende innhold og legge til interaktive funksjoner, for eksempel kontaktskjemaer, bildegallerier eller abonnementslenker.
Andre anbefalte ressurser
Vi inviterer deg også til å konsultere ressursene nedenfor for å komme videre i grepet og kontrollen av nettstedet og bloggen din.
- Hvordan lage en flytende knapp med Z-indeks med Elementor
- Når og hvordan du installerer WordPress i en underkatalog
- Hvordan lage en enkel Gutenberg Block WordPress-plugin
- Hvordan legge til egendefinerte skrifter på et WordPress-nettsted
konklusjonen
I denne artikkelen lærte vi hvordan du lager din egen kortkode i WordPress. Hvis du har noen bekymringer eller forslag, vennligst gi oss beskjed innen commentaires.
Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
I mellomtiden del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
