Kaip pridėti šaunų CSS3 mygtuko trumpąjį kodą

Jei nesate didelis gerbėjas dirbdamas su HTML redaktoriumi „WordPress“ ar norite pateikti keletą geriausių savo premium temų patobulinimų, trumpieji kodai yra puikus sprendimas išplėsti jūsų įrašų redagavimo priemonės galimybes, tuo pačiu palengvinant dalykus.


Aš galvojau, kad būtų šaunu pridėti kažkokį mygtuką į savo svetainę teikiant nuorodas į nemokamus failus ar kitas svetaines (žinoma, naudojant trumpuosius kodus), taigi, pridėjęs trumpąjį kodą prie savo temos, supratau, kad pasidalinsiu kodu čia dienoraštį, kad kiti žmonės, norintys pridėti mygtukų trumpinius į savo svetainę, galėtų tiesiog nukopijuoti ir įklijuoti mano kodą į savo temą ir nereikėtų per daug laiko praleisti kurdami trumpąjį kodą ir formuodami mygtuką.

Kas yra trumpieji kodai?

Trumpieji kodai buvo įvesti atgal į „WordPress 2.5“ ir jie leidžia jums sukurti makrokodus, skirtus naudoti skelbimo turinyje. Paprastas trumpasis kodas atrodytų maždaug taip:

[trumpas kodas]

Kuris bus pridėtas prie įrašų rengyklės, grąžins trumpojo kodo vertę, kaip apibrėžta jūsų temos failuose. Aš jums parodysiu, kaip sukurti trumpąjį kodą, kuris leis jums lengvai pridėti mygtukus prie savo pranešimų redaktoriaus neliesdami jokio kodo.

Pridedamas pasirinktinis „mygtuko“ trumpasis kodas

Pirmas dalykas, kurį jums reikia padaryti, yra pridėti savo temos trumpųjų kodų php kodą. Šis kodas gali būti naudojamas norint pridėti paprastą mygtuką į savo svetainę. Šį kodą galima patalpinti į failą function.php. Jei naudojate trečiosios šalies temą, tai geriausia padaryti naudojant „WordPress“ vaiko temą.

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

// Ištraukite trumpųjų kodų atributus
ištrauka (shortcode_atts (masyvas (
'url' => '',
'title' => '',
'taikinys' => '',
'tekstas' => '',
'spalva' => 'žalia',
), $ atts));

// Naudokite teksto reikšmę elementams be turinio
$ turinys = $ tekstas? $ tekstas: $ turinys;

// Grįžimo mygtukas su nuoroda
if ($ URL) {

$ link_attr = masyvas (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('tuščias' == $ target)? '_tuščias' : '',
'class' => 'myprefix-button color-'. esc_attr ($ spalva),
);

$ link_attrs_str = '';

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

if ($ val) {

$ link_attrs_str. = ''. $ raktas. '= "'. $ val. '"';

}

}


grįžti ''. do_shortcode ($ turinys). '';

}

// Nuoroda neapibrėžta, todėl grįžimo mygtukas yra tarpas
Kitas {

grįžti ''. do_shortcode ($ turinys). '';

}

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

Trumpųjų kodų naudojimas savo įrašų redagavimo priemonėje

Dabar, kai turite trumpąjį kodą, galite pridėti naują „mygtuką“ (kuris dabar atrodo kaip paprastas saitas, nes mes jo nesukūrėme) į savo įrašų redaktorių.

// 1 naudojimo pavyzdys
[mygtukas href = "JŪSŲ NUORODA" target = "savęs"] Mygtuko tekstas [/ mygtukas]

// 2 pavyzdys
[mygtukas href = "JŪSŲ NUORODA" target = "self" text = "Button Text"]

Stiliaus mygtukas

Kokia prasmė sukurti trumpąjį kodą, jei jis tiesiog atrodys kaip paprastas saitas? Nieko. Štai kodėl aš jums parodysiu, kaip pridėti puikų CSS3, kad būtų galima atsisiųsti mygtuką, kad jis atrodytų seksualus.

Kaip jūs pastebėjote trumpajame kode, pridėjau klasę „myprefix-button“, kad galėtumėte lengvai stiliuoti naudodami failą style.css. Įveskite šį kodą į savo stiliaus lentelę, kad būtų gražus mėlynas mygtukas, kaip paveikslėlyje.

/ * Pagrindinio mygtuko stilius * /
.mygtukas „myprefix“ {fonas: # 65A343; tekstas-šešėlis: 1 piks. 1 piks. 1 piks. # 000; -Webkit-sienos spindulys: 5px; -moz-border-rādius: 5px; kraštinės spindulys: 5 px; -webkit-box-shadow: 1 px 2 px 1 px rgba (0, 0, 0, 0,1); -moz-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); dėžutė-šešėlis: 1 px 2 px 1 px rgba (0, 0, 0, 0,1); žymeklis: rodyklė; ekranas: intarpas; perteklius paslėptas; paminkštinimas: 1px; vertikaliai sulyginti: viduryje; }

.myprefix-button span {border-top: 1px solid rgba (255, 255, 255, 0,25); -webkit-sienos spindulys: 5 pikseliai; -moz-sienos spindulys: 5px; sienos-spindulys: 5px; spalva: #fff; rodymas: blokas; šrifto svoris: paryškintas; šrifto dydis: 1em; paminkštinimas: 6x12px; tekstas-šešėlis: 1 piks. 1 piks. 1 piks. rgba (0, 0, 0, 0,25); }

/ * Užveskite pelės žymeklį * /
.mygtukas „myprefix“: užveskite pelės žymeklį {fonas: # 558938; teksto dekoravimas: nėra; }

/ * Aktyvus * /
.Myprefix mygtukas: aktyvus {background: # 446F2D; }

Žalias trumpųjų kodų mygtukas

Kelių spalvų palaikymas

Jei pastebėjote, kad trumpasis kodas turi spalvų parametrą, kurį galite naudoti norėdami pridėti CSS stilius skirtingoms mygtukų spalvoms. Pvz., Jei galite pridėti mėlynos spalvos parinktį, pridėdami šią papildomą CSS:

/ * Mėlynas mygtukas * /
.myprefix-button.color-blue {background: # 2981e4}

/ * Mėlynų mygtukų užvedimas * /
.myprefix-button.color-blue: užveskite pelės žymeklį {fonas: # 2575cf}

/ * Mėlynas mygtukas aktyvus * /
.myprefix-button.color-blue: aktyvus {background: # 0760AD}

Dabar paprasčiausiai naudokite spalvų parametrą trumpajame kode:

[mygtukas href = "JŪSŲ NUORODA" target = "savęs" spalva = "mėlyna"] Mygtuko tekstas [/ mygtukas]

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