Stvorite kratke kodove za našu WordPress temu

Otkad smo započeli ovaj projekat, oduvijek smo željeli da ima naš vlastiti pečat, i zato je drugi predložak koji koristimo u DesdeLinuxu kreiran 100% od strane nas.

Uslijedile su i druge verzije, i iako možemo kupiti ili iznajmiti određene web servise za kreiranje naših dizajna, poput onih sa EstudioDWeb.com , ili kupiti gotove predloške sa ThemeForest.net , oduvijek smo željeli imati vlastite, prilagođene našim potrebama, a posjeta DesarrolloWeb.com može biti korisna.

U svakom slučaju, strastveno se bavim web dizajnom i razvojem i već radim na novoj temi za DesdeLinux , a pokazat ću vam i neke snimke ekrana koji pokazuju kako napreduje.

Ideja nije da izađemo iz onoga na što smo već prilagođeni, pa mnogi elementi ostaju isti ili na sličan način. Počinjem sa početnom stranicom

screenshot-dl

I ovako bi članci izgledali:

screenshot-dl-post

Kao što vidite, ispada nam baš kako treba, a uključili smo i nove kratke kodove za kreiranje članaka.

Zato sam mislio da podijelim s vama kako da kreirate jedan od njih (onaj s informacijama) u slučaju da ih želite uključiti u svoje WordPress teme . Nešto poput ovoga:

Ovo će biti primjer ShortCode

Nisam stručnjak za programiranje s ovim CMS-om, pa neću pokušavati objasniti zašto i kako to funkcionira na ovaj način, nego ću vam pokazati kako se to radi, tačka.

Da bismo to uradili, koristimo WordPressov "švicarski nožić" , mislim na datoteku functions.php koju obično nalazimo u gotovo svim temama.

Zagrade_Funkcija

Primjer Function.php s kratkim kodovima DesdeLinux-a

U ovoj datoteci ćemo dodati strukturu našeg ShortCode-a i naravno oznaku koja ga prikazuje. Pa krenimo na to.

Unutar funkcije.php

Unutar naše datoteke function.php stavit ćemo HTML strukturu ShortCode-a, ali nije jednostavno staviti HTML oznake tek tako. Imali bismo otprilike ovako:

// Infokutija info funkcije ($ atts, $ content = null, $ code = "") {$ return = ' '; $ return. = $ sadržaj; $ return. = ' '; return $ return; } // Kratki kod add_shortcode ('info', 'infobox');

Odavde razjašnjavamo nekoliko stvari. Prvo, kada koristimo dvije kose crte, komentiramo liniju, stoga // Info je samo komentar.

Naziv funkcije, u ovom slučaju infobox, možemo promijeniti u bilo koji, ali mora odgovarati nazivu koji smo koristili u posljednjem redu.

U svakom $ povratak vraćamo ono što su HTML oznake i moramo imati na umu da nakon prve moramo dodati tačku ispred znak jednakosti a linija se završava znakom zarez

Primjer:

$ return. = $ sadržaj;

Varijabla $content , u koju ide sadržaj koji stavljamo u ShortCode, vratit će null vrijednost ako ne stavimo ništa.

Sada smo postavili ime ShortCode-a:

add_shortcode( 'info', 'infobox' );

Gdje možete promijeniti informacije u bilo koje željene vrijednosti. Sada, da bi izgledalo kao u primjeru, moramo staviti:

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

Iako naravno, bez razmaka, koje sam stavio, jer bi očito ShortCode bio aktiviran.

Stil kratkog koda

Ako pogledate gornji redak, bez PHP koda i varijabli, ShortCode u čistom HTML-u izgledao bi otprilike ovako:

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

Dakle, moramo primijeniti samo CSS stil.

.alert.alert-info {background: # d9edf7 url (info.png) bez ponavljanja 7px 50%; radijus granice: 4px; obrub: 1px solid # bce8f1; boja: # 3a87ad; veličina fonta: 14px; marža: 15px 15px; popunjavanje: 15px 15px 15px 50px poravnanje teksta: lijevo}

I to je sve... Ponavljam, nisam programer ili nešto slično, a objašnjenje koje sam dao je kako ja razumijem ShortCode funkcionira 


Dodaj kao preferirani izvor na Googleu