Hvis du udvikler et WordPress-websted til en klient, er chancerne for, at du har kortkoder til klienten. Problemet er, at mange nybegyndere ikke ved, hvordan man tilføjer en kortkode, og hvis der er tilføjet parametre, bliver det endnu mere kompliceret. Shortcake giver brugerne en nem løsning til at tilføje shortcodes til WordPress.

I denne vejledning viser jeg dig, hvordan du tilføjer en kortkodegrænseflade på WordPress for at forenkle tilføjelsen på indlæg og sider.

Hvad er Shortcake?

WordPress tilbyder en funktion, der giver dig mulighed for at tilføje eksekverbar kode til artikler og sider via shortcodes. Mange temaer et WordPress plugins tillade brugere at tilføje funktionalitet på deres blogs ved hjælp af shortcodes. Disse kortkoder kan dog blive meget uhåndterlige, hvilket komplicerer tilpasningen.

For eksempel med et grundlæggende WordPress-tema, hvis der er en kortkode til at indsætte en knap, skal brugeren sandsynligvis udfylde omkring fem parametre for kortkoden som følger:

[url button = "http://example.com" title = "Få flere oplysninger" color = "purple" target = "newwindow"]

Dette er hvor Shortcake kommer ind, idet det giver dig mulighed for bedre at styre dine shortcodes.

Marie-bageri-plugin

De første skridt

Denne tutorial er for brugere, der er nye til WordPress-udvikling. Brugere, der kan lide at tilpasse deres temaer vil også finde denne tutorial interessant.

Hvad du skal gøre først er at installere og aktivere udvidelsen Shortcace (Shortcode UI).

Du skal nu have en kortkode, der accepterer et par parametre. Til denne vejledning skal vi oprette en simpel kortkode, der giver brugerne mulighed for at tilføje knapper i deres WordPress-indlæg og sider. Dette er et simpelt eksempel på vores korte kode, og du kan tilføje denne kode i din plugin eller i funktionsfilen til dit barn tema.

add_shortcode ('cta-button', 'cta_button_shortcode'); funktion cta_button_shortcode ($ atts) {extract (shortcode_atts (array ('title' => 'Title', 'url' => ''), $ atts)); returnere ' '. $ titel. ' '; }

Du har sandsynligvis også brug for noget CSS-kode til knappen.

.cta-knap {polstring: 10px; skrifttypestørrelse: 18px; grænse: 1px solid #FFF; grænse-radius: 7px; farve: #FFF; baggrundsfarve: #50A7EC; }

Sådan vises den pågældende knap, brugeren skal skrive følgende kortkode:

[cta-button title = »Download nu» url = »http://eksempel.com»]

Nu har du en kortkode, der accepterer parametrene, vi opretter nu en grænseflade til den.

Sådan registreres en grænseflade til en shortcode med ShortCacke

Shortcakes API giver dig mulighed for at registrere shortcodes i brugergrænsefladen. Du skalskrive hvilke attributter kortkoden accepterer, typen af ​​felter og hvilket postformat der vil vise brugergrænsefladen (brugergrænsefladen).

Her er et eksempel på et stykke kode, som du kan bruge til at registrere en kortkode i Shortcake-brugergrænsefladen.

shortcode_ui_register_for_shortcode (/ ** Din shortcode * / 'cta-button', / ** Etiketten på din shortcode og dens ikon * / array (/ ** Etiketten er påkrævet. * / 'label' => 'Add Button', / ** Icone. Src eller dashicons- $ ikon. * / 'ListItemImage' => 'dashicons-lightbulb', / ** Shortcode Attributter * / 'attrs' => array (/ ** * Alle felter, der accepterer værdier brugere vil have deres eget array defineret som følger. * Denne korte kode accepterer to parametre url og titlen * Vi definerer brugergrænsefladen til titlen. * / array (/ ** Denne etiket vises på brugergrænsefladen * / 'label' => 'Titel', / ** dette er den attribut, der bruges til kortkoden * / 'attr' => 'titel', / ** Definer typen af ​​felt, der understøttes: tekst , afkrydsningsfelt, tekstområde, radio, vælg, e-mail, url, nummer og dato. * / 'type' => 'tekst', / ** Tilføj beskrivelse 'beskrivelse' => 'Beskrivelse',), / ** Vi lad os nu definere et brugergrænseflade til linkfeltet * / array ('label' => 'URL', 'attr' => 'url', 'type' = > 'tekst', 'beskrivelse' => 'Fuld URL',),),), / ** Indlægsformatet, hvor brugergrænsefladen skal vises * / 'post_type' => array ('post', 'side' ),));

Det er alt hvad du skal gøre for at vise kortkoden på brugergrænsefladen. Du kan nu begynde at redigere en artikel for at kunne bruge kortkoden. Alt du skal gøre er at klikke på knappen Tilføj medie. Du vil se et nyt afsnit med titlen " Indsæt postelement". Ved at klikke på den vil du kunne se de forskellige kortkoder, du har oprettet.

insertpostelement

Ved at klikke på ikonet vil du se brugergrænsefladen, der giver dig mulighed for at tilpasse kortkoden.

shortcodeui

Sådan tilføjes en kortkode med flere felter

I det første eksempel brugte vi en temmelig grundlæggende kortkode. Nu vil vi gøre tingene lidt mere komplicerede og mere nyttige. Vi tilføjer en kort kode, der giver brugerne mulighed for at vælge farve på knappen.

Vi tilføjer først kortkoden. Det er stort set den samme kode som den ovenfor, den eneste undtagelse er, at vi skal tilføje et felt til farven.

add_shortcode ('mybutton', 'my_button_shortcode'); funktion my_button_shortcode ($ atts) {extract (shortcode_atts (array ('color' => 'blue', 'title' => 'Title', 'url' => ''), $ atts)); returnere ' '. $ titel. ' '; }

Da vores kortkode viser knapper i forskellige farver, bliver vi også nødt til at opdatere vores CSS-kode.

.mybutton {polstring: 10px; skrifttypestørrelse: 18px; grænse: 1px solid #FFF; grænse-radius: 7px; farve: #FFF; } .blue-knap {baggrundsfarve: #50A7EC; } .orange-knap {baggrundsfarve: #FF7B00; } .green-knap {baggrundsfarve: #29B577; }

Sådan ser denne knap ud.

farverige-knapper-kortkode

Nu hvor vores kortkode er klar, er næste trin at registrere den på Shortcake. Vi skal bruge den samme kode, forskellen her er, at vi skal give en ekstra parameter til at vise et farvefelt.

shortcode_ui_register_for_shortcode (/ ** Dit kortkodehåndtag * / 'mybutton', / ** Din Shortcode-etiket og ikon * / array (/ ** Etiket til din shortcode-brugergrænseflade. Denne del er påkrævet. * / 'label' => 'Tilføj en farverig knap ', / ** Ikon eller en billedvedhæftning til kortkode. Valgfri. src eller dashicons- $ ikon. * /' listItemImage '=>' dashicons-flag ', / ** Shortcode Attributter * /' attrs '=> array (/ ** * Hver attribut, der accepterer brugerinput, vil have sit eget array defineret som denne * Vores shortcode accepterer to parametre eller attributter, titel og URL * Lad os først definere brugergrænsefladen for titelfelt. * / array (/ ** etiketten vises i brugergrænsefladen * / 'label' => 'Titel', / ** Dette er den faktiske attr, der bruges i koden, der bruges til shortcode * / 'attr' => 'title', / ** Definer inputtype. Understøttede typer er tekst, afkrydsningsfelt, tekstområde, radio, vælg, e-mail, url, nummer og dato. * / 'Type' => 'tekst', / ** Tilføj en nyttig beskrivelse for brugerne * / 'beskrivelse' => ' Indtast venligst knapteksten ',), / ** Nu er vi definerer brugergrænsefladen til URL-feltet * / array ('label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Full URL',), / ** Endelig definerer vi brugergrænsefladen til farvevalg * / array ('label' => 'Color', 'attr' => 'color', / ** Vi bruger markeringsfelt i stedet for tekst * / 'type' => 'vælg', 'indstillinger' => array ('blue' => 'Blue', 'orange' => 'Orange', 'green' => 'Green',),),), / ** You kan vælge, hvilke posttyper der vil vise UI shortcode * / 'post_type' => array ('post', 'side'),));

Det er alt ! Nu når du redigerer eller skriver et indlæg, vil du kunne se den nye kortkode, stadig i samme sektion i medievinduet.

postelements

Ved at klikke på den nye kortkode vises tilpasningsgrænsefladen til kortkoden, og du kan angive værdierne.

colorui

Det er det til denne tutorial. Håber det hjælper dig med at oprette en bedre grænseflade til dine kortkoder på WordPress. Godt nytår til dig!