Kuidas lisada WordPressi laheda CSS3-nupu lühikoodi

Kui te pole WordPressi HTML-i redigeerijaga töötamise suur fänn või soovite oma premium-teemade jaoks lahedaid täiustusi pakkuda, on lühikesed koodid suurepärane lahendus teie postituse redigeerija võimaluste laiendamiseks, hoides samas asja lihtsana.


Mõtlesin, et lahe on lisada oma saidile mingit nuppu, kui pakute linke tasuta failidele või muudele saitidele (kasutades muidugi lühikoode), nii et pärast lühikese koodi lisamist oma teemasse arvasin, et jagan koodi siin ajaveeb, nii et teised inimesed, kes on huvitatud oma saidile nuppude lühikoodide lisamisest, võiksid lihtsalt minu koodi oma teemasse kopeerida ja kleepida ning ei peaks kulutama liiga palju aega lühinumbri tegemisele ja nupu kujundamisele.

Mis on lühikoodid?

Lühikoodid toodi WordPress 2.5-s tagasi ja need võimaldavad teil luua makrokoode postituse sisuks kasutamiseks. Lihtne lühinumber näeks välja umbes selline:

[lühikood]

Mis postituse redigeerijasse lisamisel tagastab teie teemafailides määratletud lühikoodi väärtuse. Näitan teile, kuidas luua lühikood, mis võimaldab teil hõlpsalt nuppe oma postituse redigeerijasse lisada ilma ühtegi koodi puudutamata.

Kohandatud „nupu” lühikoodi lisamine

Esimene asi, mida peate tegema, on lisada teema lühikese koodi php-kood. Järgmist koodi saab kasutada lihtsa nupu lisamiseks oma saidile. Selle koodi saab paigutada faili function.php. Kui kasutate kolmanda osapoole teemat, on seda kõige parem teha WordPressi lapseteema kaudu.

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

// Väljavõtte lühinumbri atribuudid
väljavõte (shortcode_atts (array (
'url' => '',
'pealkiri' => '',
'target' => '',
'tekst' => '',
'värv' => 'roheline',
), $ atts));

// Kasutage sisuväärtuseta üksuste jaoks teksti väärtust
$ sisu = $ tekst? $ tekst: $ sisu;

// Tagasi nupp koos lingiga
if ($ url) {

$ link_attr = array (
'href' => esc_url ($ url),
'pealkiri' => esc_attr ($ pealkiri),
'target' => ('tühi' == $ target)? '_blank': '',
'class' => 'myprefix-button color-'. esc_attr ($ värv),
);

$ link_attrs_str = '';

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

if ($ val) {

$ link_attrs_str. = ''. $ võti. '= "'. $ val. '"';

}

}


tagasi ''. do_shortcode ($ sisu). '';

}

// Linki pole määratletud, nii et tagastamise nupp on vahemik
veel {

tagasi ''. do_shortcode ($ sisu). '';

}

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

Lühikoodi kasutamine postituste redigeerijas

Nüüd, kui teil on lühinumber, saate oma postituse redigeerijasse lisada uue nupu (mis näeb praegu välja tavalise lingina, kuna me pole seda veel kujundanud)..

// Näitekasutus 1
[nupp href = "YOUR LINK" target = "ise"] Nupu tekst [/ nupp]

// Näitekasutus 2
[nupp href = "YOUR LINK" target = "self" text = "Button Text"]

Nupu kujundamine

Mis mõte on lühikoodi loomisel, kui see näeb lihtsalt välja nagu tavaline link? Mitte midagi. Seetõttu näitan teile, kuidas allalaadimisnupule stiili lisamiseks lahedat CSS3-d lisada ja muuta see seksikaks.

Nagu lühikoodis märkasite, lisasin klassi “myprefix-button”, et saaksite seda hõlpsalt oma stiili.css faili kaudu stiilida. Sisestage järgmine kood oma stiililehele, et saada kena sinine nupp, nagu pildil.

/ * Põhinupu stiil * /
.myprefix-button {taust: # 65A343; tekstivari: 1 piksl 1xx 1px # 000; -veebikomplekti-raadiuse raadius: 5 pikslit; -moz-piiri raadius: 5 pikslit; äärise raadius: 5 px; -veebikomplekti-box-shadow: 1 px 2 px 1 px rgba (0, 0, 0, 0,1); -moz-box-shadow: 1 px 2 px 1 px rgba (0, 0, 0, 0,1); box-shadow: 1 px 2 px 1 px rgba (0, 0, 0, 0,1); kursor: osuti; kuva: inline-block; ülevool: varjatud; polster: 1px; vertikaalne joondamine: keskmine; }

.myprefix-nuppu span {border-top: 1xx kindel rgba (255, 255, 255, 0,25); -veebikomplekti-raadiuse raadius: 5 pikslit; -moz-piiri raadius: 5px; piiri-raadius: 5px; värv: #fff; kuva: blokeerima; kirjasuurus: paks; kirjasuurus: 1em; polster: 6x12x; tekstivari: 1 px 1 px 1 px rgba (0, 0, 0, 0,25); }

/* Hõljuma */
.myprefix-button: hõljutage kursorit {background: # 558938; teksti kaunistamine: puudub; }

/ * Aktiivne * /
.myprefix-nupp: aktiivne {background: # 446F2D; }

Roheline lühinumbri nupp

Mitme värvi tugi

Kui märkasite, et lühikoodil on värviparameeter, mida saate kasutada erinevate nupuvärvide jaoks CSS-stiilide lisamiseks. Näiteks kui saate lisada sinise värvi valiku, lisades selle täiendava CSS-i:

/ * Sinine nupp * /
.myprefix-button.color-blue {background: # 2981e4}

/ * Sinise nupu hõljuk * /
.myprefix-button.color-blue: hõljutage kursorit {background: # 2575cf}

/ * Sinine nupp aktiivne * /
.myprefix-button.color-blue: aktiivne {background: # 0760AD}

Kasutage nüüd lühikeses koodis lihtsalt värviparameetrit:

[nupp href = "YOUR LINK" target = "ise" color = "sinine"] Nupu tekst [/ nupp]

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