Opret kortkoder til vores WordPress-tema

Siden vi startede med dette projekt, har vi altid ønsket, at det skulle have vores eget mærke, og det er derfor den anden skabelon, vi bruger i DesdeLinux, det blev oprettet af os 100%.

Derefter fulgte andre versioner, og selvom vi kan købe eller leje bestemte webtjenester til at skabe vores designs som dem StudioDWeb.com, eller køb skabeloner, der allerede er oprettet i ThemeForest.net, vi har altid ønsket at have vores egne, tilpasset vores behov og komme forbi WebDevelopment.com kan være til hjælp 😀

Under alle omstændigheder brænder jeg for webdesign og udvikling, og jeg arbejder allerede på det nye emne for DesdeLinux og jeg vil vise dig nogle skærmbilleder af, hvordan det ser ud.

Ideen er ikke at komme ud af det, vi allerede er tilpasset til, så mange elementer forbliver de samme eller på en lignende måde. Jeg starter med hjemmesiden

Og sådan ser artiklerne ud:

Som du kan se, passer det til vores mål, og vi har medtaget nye kortkoder til udarbejdelse af artiklerne.

Det er derfor, jeg tænkte på at dele med dig, hvordan du opretter en af ​​dem (den ene), hvis du vil inkludere dem i dine emner om WordPress. Jeg mener, noget som dette:

Jeg er ikke ekspert i programmering med dette CMS, så jeg vil ikke prøve at forklare, hvorfor og hvordan det fungerer på denne måde, jeg vil kun vise dig, hvordan du gør det, punktum.

Til dette bruger vi «den schweiziske hærkniv» af WordPressJeg mener filen function.php som vi normalt finder i næsten alle emner.

Eksempel på Function.php med ShortCodes DesdeLinux

Hvad vi vil gøre i denne fil er at tilføje strukturen i vores ShortCode og selvfølgelig etiketten, der viser den. Så lad os komme til det.

Inde i Function.php

Inde i vores function.php-fil vil det, vi vil lægge, være HTML-strukturen i ShortCode, men det er ikke bare at sætte HTML-tags sådan. Vi ville have noget som dette:

// Info-infoboks ($ atts, $ content = null, $ code = "") {$ return = ' '; $ return. = $ indhold; $ return. = ' '; returnere $ returnere; } // ShortCode add_shortcode ('info', 'infobox');

Herfra præciserer vi et par ting. Først når vi bruger to søjler, kommenterer vi derfor linjen // info det er bare en kommentar.

Funktionens navn, i dette tilfælde infoboks Det kan ændres til hvad vi vil, men det skal matche det navn, vi bruger i den sidste linje.

Eksempel:

$ return. = $ indhold;

variabel $ indhold hvor det indhold, som vi placerer i ShortCode, går som standard, vil det returnere en nulværdi, hvis vi ikke lægger noget.

Nu er navnet på ShortCode det, vi indstiller med:

add_shortcode( 'info', 'infobox' );

Hvor du kan ændre info for hvad vi vil have. For at få det til at se ud som det eksempel, vi skal sætte:

[ info ]Este será el ShortCode de ejemplo[ /info ]

Selvom selvfølgelig uden de mellemrum, som jeg sætter, fordi ShortCode naturligvis ville blive aktiveret.

ShortCode-stil

Hvis du ser på linjen ovenfor uden PHP-kode og variabler, ville ShortCode i ren HTML være noget som dette:

<div class="alert-info"></div>

Så vi skal kun anvende CSS-stilen.

.alert.alert-info {baggrund: # d9edf7 url (info.png) ingen gentagelse 7px 50%; border-radius: 4px; kant: 1px fast # bce8f1; farve: # 3a87ad; skriftstørrelse: 14 pixel; margen: 15px 15px; polstring: 15px 15px 15px 50px tekstjustering: venstre}

Og det er det .. Jeg gentager, jeg er ikke programmerer eller noget lignende, og den forklaring, jeg har givet, er, hvordan jeg forstår, at ShortCode fungerer 😛