Ustvarite kratke kode za našo WordPress temo

Odkar smo začeli ta projekt, smo si vedno želeli, da bi imel naš lasten pečat, zato smo drugo predlogo, ki jo uporabljamo pri DesdeLinuxu , ustvarili 100 % sami.

Sledile so še druge različice in čeprav lahko za ustvarjanje lastnih dizajnov kupimo ali najamemo določene spletne storitve, kot so tiste na EstudioDWeb.com , ali kupimo že pripravljene predloge na ThemeForest.net , smo si vedno želeli imeti svoje, prilagojene našim potrebam, in obisk DesarrolloWeb.com nam je lahko v pomoč.

Kakorkoli že, strastno me navdušuje spletno oblikovanje in razvoj ter že delam na novi temi za DesdeLinux in pokazal vam bom nekaj posnetkov zaslona, ​​kako napreduje.

Ideja ni izstopiti iz tistega, na kar smo že prilagojeni, zato veliko elementov ostane enakih ali na podoben način. Začnem z domačo stranjo

posnetek zaslona-dl

In tako bi izgledali članki:

screenshot-dl-post

Kot vidite, nam gre ravno prav in vključili smo nove kratke kode za ustvarjanje člankov.

Zato sem se odločil, da vam pokažem, kako ustvariti enega od njih (tistega z informacijami), če ga želite vključiti v svoje WordPress teme . Nekaj ​​takega:

To bo primer ShortCode

Nisem strokovnjak za programiranje s tem sistemom upravljanja vsebin, zato ne bom poskušal pojasniti, zakaj in kako deluje na ta način, pokazal vam bom le, kako to storiti, točka.

Za to uporabljamo WordPressov "švicarski nož", mislim na datoteko functions.php , ki jo običajno najdemo v skoraj vseh temah.

Oklepaji_funkcija

Primer Function.php s kratkimi kodami DesdeLinux

V tej datoteki bomo dodali strukturo naše kratke kode in seveda oznako, ki jo prikazuje. Torej, pojdimo k temu.

Znotraj funkcije.php

Znotraj naše datoteke function.php bomo postavili strukturo HTML ShortCode, vendar oznake HTML ni preprosto postaviti samo tako. Imeli bi nekaj takega:

// Infobox info funkcije ($ atts, $ content = null, $ code = "") {$ return = ' '; $ return. = $ vsebina; $ return. = ' '; vrnitev $ donos; } // Kratka koda add_shortcode ('info', 'infobox');

Tukaj razjasnimo nekaj stvari. Prvič, ko uporabimo dve poševnici, vrstico zakomentiramo, zato je // Info samo komentar.

Ime funkcije, v tem primeru infobox, lahko spremenimo v poljubno, vendar se mora ujemati z imenom, ki smo ga uporabili v zadnji vrstici.

En cada $ vrnitev vrnemo tisto, kar je bilo oznak HTML, in upoštevati moramo, da moramo po prvi dodati piko pred znak enačbe in vrstica se konča z znakom podpičje

Primer:

$ return. = $ vsebina;

Spremenljivka $content , kamor gre vsebina, ki jo vnesemo v kratko kodo, bo vrnila ničelno vrednost, če ne vnesemo ničesar.

Zdaj je ime ShortCode tisto, s čimer smo nastavili:

add_shortcode( 'info', 'infobox' );

Kjer lahko podatke spremenite v karkoli želite. Da bo videti kot v primeru, moramo vstaviti:

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

Čeprav seveda brez presledkov, ki sem jih postavil, ker bi bila očitno aktivirana ShortCode.

Slog ShortCode

Če pogledate zgornjo vrstico, bi bila brez kode PHP in spremenljivk ShortCode v čistem HTML-ju nekaj takega:

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

Torej moramo uporabiti samo slog CSS.

.alert.alert-info {background: # d9edf7 url (info.png) brez ponovitve 7px 50%; polmer obrobe: 4 slikovne pike; obroba: 1px solid # bce8f1; barva: # 3a87ad; velikost pisave: 14px; marža: 15px 15px; oblazinjenje: 15px 15px 15px 50px poravnava besedila: levo}

In to je vse ... Ponavljam, nisem programer ali kaj podobnega in razlaga, ki sem jo dal, je, kako razumem ShortCode 


Dodaj kot prednostni vir v Googlu