Skapa kortkoder för vårt WordPress-tema

Sedan vi började med det här projektet ville vi alltid att det skulle ha en egen etikett, och det är därför den andra mallen vi använder i DesdeLinux, det skapades av oss 100%.

Sedan följde andra versioner, och även om vi kan köpa eller hyra vissa webbtjänster för att skapa våra mönster som de av StudioDWeb.com, eller köp mallar som redan har skapats i ThemeForest.net, vi har alltid velat ha våra egna, anpassade till våra behov och stanna förbi webdevelopment.com kan vara till hjälp 😀

Hur som helst, jag brinner för webbdesign och utveckling, och jag arbetar redan med det nya ämnet för DesdeLinux och jag kommer att visa dig några skärmdumpar av hur det ser ut.

Tanken är inte att komma ur det vi redan är anpassade till, så många element förblir desamma eller på liknande sätt. Jag börjar med hemsidan

Och så ser artiklarna ut:

Som du ser passar det vårt mått och vi har inkluderat nytt Kortkoder för utarbetandet av artiklarna.

Det är därför som jag tänkte dela med dig hur du skapar en av dem (informationen) om du vill inkludera dem i dina ämnen Wordpress. Jag menar, något så här:

Jag är inte expert på programmering med detta CMS, så jag kommer inte att försöka förklara varför och hur det fungerar på det här sättet, jag visar bara hur man gör det, punkt.

För detta använder vi «den schweiziska armékniven» av WordpressJag menar filen function.php som vi normalt hittar i nästan alla ämnen.

Exempel på Function.php med ShortCodes DesdeLinux

Vad vi kommer att göra i den här filen är att lägga till strukturen för vår ShortCode och naturligtvis etiketten som visar den. Så låt oss komma till det.

Inside the Function.php

Inuti vår function.php-fil kommer det att finnas HTML-strukturen i ShortCode, men det är inte bara att sätta HTML-taggarna precis så. Vi skulle ha något så här:

// Info-infobox ($ atts, $ content = null, $ code = "") {$ return = ' '; $ retur. = $ innehåll; $ return. = ' '; returnera $ return; } // ShortCode add_shortcode ('info', 'infobox');

Härifrån klargör vi ett par saker. Först när vi använder två staplar kommenterar vi därför linjen // info det är bara en kommentar.

Funktionens namn, i det här fallet inforuta Det kan ändras till vad vi vill, men det måste matcha namnet vi använder i den sista raden.

Exempelvis:

$ retur. = $ innehåll;

variabel $ innehåll det är där innehållet som vi lägger i ShortCode går som standard, det returnerar ett nullvärde om vi inte lägger till något.

Nu är namnet på ShortCode det vi ställer in med:

add_shortcode( 'info', 'infobox' );

Där du kan ändra info för det vi vill ha. För att det ska se ut som det exempel vi måste sätta:

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

Men naturligtvis utan mellanslag, vilket jag satte för att naturligtvis ShortCode skulle aktiveras.

ShortCode-stil

Om du tittar på raden ovan, utan PHP-koden och variablerna, skulle ShortCode i ren HTML se ut så här:

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

Så vi behöver bara tillämpa CSS-stilen.

.alert.alert-info {background: # d9edf7 url (info.png) no-repeat 7px 50%; gränsradie: 4 pixlar; border: 1px solid # bce8f1; färg: # 3a87ad; teckenstorlek: 14 pixlar; marginal: 15px 15px; stoppning: 15px 15px 15px 50px textjustering: vänster}

Och det är det .. Jag upprepar att jag inte är programmerare eller något liknande, och förklaringen jag har gett är hur jag förstår att ShortCode fungerar 😛