Kako dodati kode kode gumba CSS3 v programu WordPress

Če niste velik oboževalec dela z urejevalnikom HTML v WordPressu ali želite zagotoviti nekaj odličnih izboljšav za svoje vrhunske teme, so kratke kode odlična rešitev za razširitev zmogljivosti urejevalnika sporočil, hkrati pa stvari preprosto.


Razmišljal sem, da bi bilo kul, če bi na svoje spletno mesto dodal nekakšen gumb, ko bi zagotovil povezave do brezplačnih datotek ali drugih spletnih mest (seveda s kratkimi kodami), zato sem po dodajanju kode k moji temi pomislil, da bom kodo delil tukaj na blog, da bi lahko drugi, ki jih zanima dodajanje bližnjic gumbov na njihovo spletno mesto, preprosto kopirali in prilepili mojo kodo v njihovo temo in ne bi smeli porabiti preveč časa za ustvarjanje kratke kode in oblikovanje gumba.

Kaj so kratice?

Kratke kode so bile uvedene znova v programu WordPress 2.5 in omogočajo ustvarjanje makro kod za uporabo v objavljeni vsebini. Preprosta koda je videti nekako takole:

[kratka koda]

Katera, ko jo dodate v urejevalnik objav, bo vrnila vrednost kratke kode, kot je definirana v vaših tematskih datotekah. Pokazal vam bom, kako ustvariti kratko kodo, ki vam bo omogočila enostavno dodajanje gumbov v urejevalnik objav, ne da bi se dotaknili nobene kode.

Dodajanje kratke kode po gumbu po meri

Prva stvar, ki jo morate storiti, je, da v svojo temo dodate php kodo za kratko kodo. Naslednjo kodo lahko uporabite za dodajanje preprostega gumba na vaše spletno mesto. To kodo lahko namestite v datoteko function.php. Če uporabljate temo tretjih oseb, je to najbolje storiti prek WordPress Child teme.

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

// Izvleči atribute kratke kode
izvleček (shortcode_atts (matrika (
'url' => '',
'naslov' => '',
'target' => '',
'besedilo' => '',
'color' => 'zelena',
), $ atts));

// Uporabite besedilno vrednost za predmete brez vsebine
$ content = $ besedilo? $ besedilo: $ vsebina;

// Gumb za vrnitev s povezavo
če ($ url) {

$ link_attr = matrika (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('prazno' == $ target)? '_ prazno': '',
'class' => 'barva gumba za posodobitev-'. esc_attr ($ color),
);

$ link_attrs_str = '';

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

če ($ val) {

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

}

}


vrnitev ''. do_shortcode ($ vsebina). '';

}

// Ni definirana povezava, zato se vrne gumb kot razpon
drugače {

vrnitev ''. do_shortcode ($ vsebina). '';

}

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

Uporaba bližnjice v urejevalniku sporočil

Zdaj, ko imate kratko kodo, lahko dodate nov “gumb” (ki je videti kot navadna povezava, odkar ga še nismo oblikovali) v urejevalnik objav.

// Primer uporabe 1
[gumb href = "VAŠA POVEZAVA" target = "self"] Besedilo gumba [/ gumb]

// Primer uporabe 2
[gumb href = "VAŠA POVEZAVA" target = "self" text = "Besedilo gumba"]

Stiliranje gumba

Kakšen smisel je ustvariti kratko kodo, če bo videti le kot navadna povezava? Nič. Zato vam bom pokazal, kako lahko dodate nekaj kul CSS3, da spustite gumb za prenos in da bo videti seksi.

Kot ste opazili v kratki kode, sem dodal razred “myprefix-button”, tako da ga lahko preprosto oblikujete prek datoteke style.css. V tabelo stilov vstavite naslednjo kodo, da naredite lep modri gumb, kot je tisti na sliki.

/ * Glavni slog gumba * /
.gumb myprefix {ozadje: # 65A343; senca besedila: 1px 1px 1px # 000; -webkit-meja-polmer: 5px; -moz-meja-polmer: 5px; meja polmer: 5px; -webkit-box-senca: 1px 2px 1px rgba (0, 0, 0, 0,1); -moz-box-senca: 1px 2px 1px rgba (0, 0, 0, 0,1); škatlasta senca: 1px 2px 1px rgba (0, 0, 0, 0,1); kazalec: kazalec; zaslon: inline-block; preliv: skrit; oblazinjenje: 1px; navpična poravnava: sredina; }

.razpon myprefix gumba {border-top: 1px solid rgba (255, 255, 255, 0,25); -webkit-meja-polmer: 5px; -moz-meja-polmer: 5px; polmer meje: 5px; barva: #fff; zaslon: blok; pisava: krepka; velikost pisave: 1em; oblazinjenje: 6px 12px; besedilo-senca: 1px 1px 1px rgba (0, 0, 0, 0,25); }

/ * Premakni miško * /
.tipka myprefix: premaknite miško {ozadje: # 558938; urejanje besedila: nič; }

/ * Aktivno * /
.myprefix-button: aktivno {ozadje: # 446F2D; }

Zelena tipka za kratko kodo

Večbarvna podpora

Če opazite, da ima kratka koda barvni parameter, ki ga lahko uporabite za dodajanje CSS slogov za različne barve gumba. Na primer, če lahko dodate možnost modre barve, tako da dodate ta dodaten CSS:

/ * Modra tipka * /
.myprefix-button.color-blue {ozadje: # 2981e4}

/ * Motilec modre tipke * /
.myprefix-button.color-blue: zadržite miško {background: # 2575cf}

/ * Modra tipka aktivna * /
.myprefix-button.color-blue: aktivno {ozadje: # 0760AD}

Zdaj preprosto uporabite barvni parameter v kratki kodi:

[gumb href = "TVOJA POVEZAVA" target = "self" color = "blue"] Besedilo gumba [/ gumb]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map