Gå till innehållet

Hur man lägger till en kortkod gränssnitt på Wordpress

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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 i inlägg och sidor via kortkoder. Flera WordPress-teman och plugins tillåter användare att lägga till funktionalitet i sina bloggar med hjälp av kortkoder. Dessa kortkoder kan dock bli mycket svåra att använda, vilket gör anpassningen svår.

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 nya i WordPress-utvecklingen. Användare som gillar att anpassa sina teman kommer också att hitta 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.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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

Shortcake API låter dig spara kortkoder i användargränssnittet. Du måste beskriva vilka attribut som kortkoden accepterar, vilken typ av fält och vilket inläggsformat som visar 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

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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!

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
7 aktier
del7
tweet
Enregistrer