Om du utvecklar en WordPress-webbplats för en klient är chansen att du har kortkoder för klienten. Problemet är att många nybörjare inte vet hur man lägger till en kortkod och om det finns några parametrar som läggs till blir det ännu mer komplicerat. Shortcake ger användarna en enkel lösning för att lägga till kortkoder till WordPress.

I den här handledningen kommer jag att visa dig hur du lägger till ett kortkodsgränssnitt på WordPress för att förenkla lägga till inlägg och sidor.

Vad är Shortcake?

WordPress erbjuder en funktion som låter dig lägga till körbar kod till artiklar och sidor via kortkoder. Många teman et Wordpress plugins tillåter användare att lägga till funktionalitet på sina bloggar med hjälp av kortkoder. Dessa kortkoder kan dock bli mycket svårhanterliga, vilket komplicerar anpassningen.

Till exempel, med ett grundläggande WordPress-tema, om det finns en kortkod för att infoga en knapp, måste användaren antagligen fylla i cirka fem parametrar för kortkoden enligt följande:

[url button = "http://example.com" title = "Läs mer" color = "purpur" target = "newwindow"]

Det är här Shortcake kommer in genom att det gör att du bättre kan hantera dina kortkoder.

shortcake-bageri-plugin

första steg

Denna handledning är för användare som är nybörjare inom WordPress-utveckling. Användare som gillar att anpassa sina teman kommer också att finna denna handledning intressant.

Vad du behöver göra först är att installera och aktivera tillägget Shortcace (Snabbtryck lU).

Du bör nu ha en kortkod som accepterar några parametrar. För den här guiden ska vi skapa en enkel kortkod som låter användare lägga till knappar i sina WordPress-inlägg och sidor. Detta är ett enkelt exempel för vår kortkod, och du kan lägga till den här koden i plugin eller i funktionsfilen för ditt barntema.

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

Du kommer antagligen också behöva lite CSS-kod för knappen.

.cta-knappen {padding: 10px; font-size: 18px; kant: fast 1px #fff; border-radius: 7px; färg: #fff; bakgrundsfärg: #50A7EC; }

Så här visar du knappen i fråga, användaren måste skriva följande kortkod:

[cta-button title = »Ladda ner nu» url = »http://exempel.com»]

Nu har du en kortkod som accepterar parametrarna, vi skapar nu ett gränssnitt för det.

Hur man registrerar ett gränssnitt till en kortkod med ShortCacke

Shortcakes API låter dig registrera kortkoder i användargränssnittet. Du behöverskriva vilka attribut kortkoden accepterar, typ av fält och vilket postformat som kommer att visa UI (användargränssnitt).

Här är ett exempel på en kod som du kan använda för att registrera en kortkod i Shortcake-användargränssnittet.

shortcode_ui_register_for_shortcode (/ ** Din kortkod * / 'cta-knapp', / ** Etiketten för din kortkod och dess ikon * / array (/ ** Etiketten krävs. * / 'label' => 'Add Button', / ** Icone. Src eller dashicons- $ ikon. * / 'ListItemImage' => 'dashicons-lightbulb', / ** Shortcode Attribut * / 'attrs' => array (/ ** * Alla fält som accepterar värden användare kommer att ha sin egen matris definierad enligt följande. * Den här kortkoden accepterar två parametrar url och titeln * Vi definierar användargränssnittet för titeln. * / array (/ ** Denna etikett kommer att visas i användargränssnittet * / 'label' => 'Title', / ** detta är attributet som används för kortkoden * / 'attr' => 'title', / ** Definiera typ av fält, stöds: text , kryssruta, textområde, radio, välj, e-post, webbadress, nummer och datum. * / 'type' => 'text', / ** Lägg till beskrivning 'beskrivning' => 'Beskrivning',), / ** Vi låt oss nu definiera ett användargränssnitt för länkfältet * / array ('label' => 'URL', 'attr' => 'url', 'type' = > 'text', 'description' => 'Full URL',),),), / ** Inläggsformatet där UI * / 'post_type' => array ('post', 'page' visas) ),));

Det är allt du behöver göra för att visa kortkoden på användargränssnittet. Du kan nu börja redigera en artikel för att kunna använda kortkoden. Allt du behöver göra är att klicka på knappen Lägg till media. Du kommer att se ett nytt avsnitt med titeln " Sätt Element Post". Genom att klicka på den kommer du att kunna se olika kortkoder som du har skapat.

insertpostelement

Genom att klicka på ikonen ser du användargränssnittet som låter dig anpassa kortkoden.

shortcodeui

Hur man lägger till en kortkod med flera områden

I det första exemplet använde vi en ganska grundläggande kortkod. Nu kommer vi att göra saker lite mer komplicerade och mer användbara. Vi lägger till en kortkod som gör det möjligt för användare att välja färg på knappen.

Vi lägger först till kortkoden. Det är i princip samma kod som ovan, det enda undantaget är att vi ska lägga till ett fält för färgen.

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

Eftersom vår kortkod visar knappar i olika färger måste vi också uppdatera vår CSS-kod.

.mybutton {padding: 10px; font-size: 18px; kant: fast 1px #fff; border-radius: 7px; färg: #fff; } .Blue-knappen {background-color: #50A7EC; } .orange-knappen {background-color: #FF7B00; } .green-knappen {background-color: #29B577; }

Så här ser den här knappen ut.

färgknappar-kortkod

Nu när vår kortkod är klar är nästa steg att registrera den på Shortcake. Vi kommer att använda samma kod, skillnaden här är att vi ska tillhandahålla en ytterligare parameter för att visa ett färgfält.

shortcode_ui_register_for_shortcode (/ ** Ditt kortkodshandtag * / 'mybutton', / ** Din kortkodsetikett och ikon * / array (/ ** Etikett för ditt kortkods användargränssnitt. Denna del krävs. * / 'label' => 'Lägg till en färgstark knapp ', / ** ikon eller en bildbilaga för kortkod. Valfritt. src eller dashicons- $ ikon. * /' listItemImage '=>' dashicons-flagg ', / ** kortkodsattribut * /' attrs '=> array (/ ** * Varje attribut som accepterar användarinmatning har sin egen array definierad så här * Vår kortkod accepterar två parametrar eller attribut, titel och URL * Låt oss först definiera gränssnittet för titelfält. * / array (/ ** Detta etiketten visas i användargränssnittet * / 'label' => 'Title', / ** Detta är den faktiska attr som används i koden som används för kortkod * / 'attr' => 'title', / ** Definiera ingångstyp. Typer som stöds är text, kryssruta, textarea, radio, välj, e-post, webbadress, nummer och datum. * / 'Type' => 'text', / ** Lägg till en användbar beskrivning för användare * / 'description' => ' Ange knapptexten ',), / ** Nu är vi definierar UI för URL-fältet * / array ('label' => 'URL', 'attr' => 'url', 'type' => 'text', 'description' => 'Full URL',), / ** Slutligen definierar vi användargränssnittet för färgval * / array ('label' => 'Color', 'attr' => 'color', / ** Vi kommer att använda markfält istället för text * / 'type' => 'välj', 'alternativ' => matris ('blå' => 'Blå', 'orange' => 'Orange', 'grön' => 'Grön',),),), / ** Du kan välja vilka inläggstyper som ska visa UI shortcode * / 'post_type' => array ('post', 'page'),));

Det är allt ! Nu när du redigerar eller skriver ett inlägg kommer du att kunna se den nya kortkoden, fortfarande i samma avsnitt i mediefönstret.

postelements

Genom att klicka på den nya kortkoden visas gränssnittsanpassningsgränssnittet och du kan ange värdena.

colorui

Det är det för denna handledning. Hoppas det hjälper dig att skapa ett bättre gränssnitt för dina kortkoder på WordPress. Gott nytt år till dig!