Kako dodati cool kratki kôd gumba CSS3 u WordPressu

Ako niste veliki obožavalac rada s HTML uređivačem u WordPressu ili želite pružiti cool poboljšanja za svoje premium teme, kratki kodovi su izvrsno rješenje za proširivanje mogućnosti vašeg urednika postova a da stvari budu jednostavne.


Mislio sam da bi bilo u redu dodati neku vrstu gumba na svoju web stranicu kada pružam veze do besplatnih datoteka ili drugih web mjesta (naravno, koristeći kratke kodove), pa sam nakon dodavanja kratkog koda svojoj temi zaključio da ću ovdje podijeliti kôd na blog kako bi drugi ljudi zainteresirani za dodavanje prečica s tipkama na njihovu web lokaciju mogli jednostavno kopirati i zalijepiti moj kôd u njihovu temu i ne moraju trošiti previše vremena na stvaranje kratkog koda i stiliziranje gumba.

Što su kratici?

Prečaci su vraćeni u WordPress 2.5 i omogućuju vam stvaranje makro kodova za upotrebu u sadržaju posta. Jednostavni kratki kôd izgledao bi ovako:

[Kratki kôd]

Koji se doda u uređivač postova, vratit će vrijednost kratkog koda kako je definirano u vašim datotekama tema. Pokazat ću vam kako stvoriti kratki kôd koji će vam omogućiti da lako dodate gumbe u svoj urednik postova bez dodirivanja bilo kojeg koda.

Dodavanje prilagođenog “gumba” kratkog koda

Prvo što trebate učiniti je dodati svojoj temi temu php kôd za kratki kôd. Sljedeći kôd može se koristiti za dodavanje jednostavnog gumba vašoj web lokaciji. Ovaj se kôd može smjestiti u datoteku function.php. Ako koristite temu treće strane, to je najbolje učiniti putem WordPress teme za djecu.

funkcija myprefix_button_shortcode ($ atts, $ content = null) {

// Izdvajanje atributa kratkog koda
ekstrakt (shortcode_atts (niz) (
'url' => '',
'title' => '',
'target' => '',
'tekst' => '',
'color' => 'zelena',
), $ atts));

// Koristite tekstualnu vrijednost za stavke bez sadržaja
$ content = $ tekst? $ tekst: $ sadržaj;

// Gumb za povratak s vezom
ako je ($ url) {

$ link_attr = niz (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('prazno' == $ target)? '_ prazno': '',
'class' => 'boja mojega prefiksa -'. esc_attr ($ boja),
);

$ link_attrs_str = '';

foreach ($ link_attr kao $ key => $ val) {

ako je ($ val) {

$ link_attrs_str. = ''. $ ključ. '= "'. $ val. '"';

}

}


povratak ''. do_shortcode ($ sadržaj). '„;

}

// Nije definirana veza pa je gumb povratka kao raspon
drugo {

povratak ''. do_shortcode ($ sadržaj). '„;

}

}
add_shortcode ('gumb', 'myprefix_button_shortcode');

Upotreba kratkog koda u uređivaču postova

Sada kada imate kratki kôd, možete dodati novi “gumb” (koji izgleda kao obična veza otkad ga nismo stilizirali) u svoj urednik postova.

// Primjer uporabe 1
[gumb href = "VAŠA LINK" target = "self"] Tekst gumba [/ gumb]

// Primjer upotrebe 2
[gumb href = "VAŠA LINK" target = "self" text = "Tekst gumba"]

Stiliziranje gumba

Kakva je svrha stvarati kratki kôd ako će samo izgledati kao obična veza? Ništa. Zbog toga ću vam pokazati kako dodati svjež CSS3 kako biste stil preuzimanja dodali i učinili da on izgleda seksi.

Kao što ste primijetili u kratkom kôdu, dodao sam klasu “myprefix-button” kako biste je lako oblikovali kroz datoteku style.css. Na tablicu stilova umetnite sljedeći kôd da biste lijepo postavili plavi gumb poput onog na slici.

/ * Stil glavnog gumba * /
.myprefix-tipka {pozadina: # 65A343; sjena teksta: 1px 1px 1px # 000; -webkit-border-radijus: 5px; -moz-border-radijus: 5px; obrub granice: 5px; -webkit-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); -moz-box-sjena: 1px 2px 1px rgba (0, 0, 0, 0,1); okvir-sjena: 1px 2px 1px rgba (0, 0, 0, 0,1); pokazivač: pokazivač; zaslon: linijski blok; preljev: skriven; obloga: 1px; okomito poravnanje: sredina; }

.raspon myprefix gumba {border-top: 1px solid rgba (255, 255, 255, 0,25); -webkit-border-radijus: 5px; -moz-obrub: 5px; polumjer granice: 5px; boja: #fff; prikaz: blok; težina slova: podebljano; veličina slova: 1em; padding: 6px 12px; sjena teksta: 1px 1px 1px rgba (0, 0, 0, 0,25); }

/ * Zadržite pokazivač * /
.myprefix-tipka: postavite pokazivač {background: # 558938; text-decoration: none; }

/ * Aktivno * /
.myprefix-gumb: aktivan {background: # 446F2D; }

Zelena tipka za kratki kôd

Višestruka podrška u boji

Ako ste primijetili, kratki kod sadrži parametar boje koji možete koristiti za dodavanje CSS stilova za različite boje gumba. Na primjer, ako možete dodati opciju plave boje dodavanjem ovog dodatnog CSS-a:

/ * Plava tipka * /
.myprefix-button.color-blue {pozadina: # 2981e4}

/ * Zadržite plavu tipku * /
.myprefix-button.color-blue: lebdjeti pokazivač {background: # 2575cf}

/ * Plava tipka aktivna * /
.myprefix-button.color-blue: aktivan {background: # 0760AD}

Sada jednostavno upotrijebite parametar boje u kratkom kodu:

[gumb href = "VAŠA POVEZIVA" target = "self" color = "blue"] Tekst gumba [/ gumb]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me