Paano magdagdag ng isang cool na CSS3 Button Shortcode sa WordPress

Kung hindi ka isang malaking tagahanga ng pakikipagtulungan sa editor ng HTML sa WordPress o nais na magbigay ng ilang mga cool na pagpapahusay para sa iyong mga premium na tema, ang mga shortcode ay isang mahusay na solusyon para sa pagpapalawak ng mga kakayahan ng iyong post editor habang pinapanatili ang simple.


Iniisip ko na magiging cool upang magdagdag ng ilang uri ng pindutan sa aking site kapag nagbibigay ng mga link sa mga libreng file o iba pang mga site (gamit ang mga shortcode ng kurso) kaya pagkatapos ng pagdaragdag ng shortcode sa aking tema naisip kong ibabahagi ko ang code dito sa blog kaya ang ibang mga tao na interesado sa pagdaragdag ng mga shortcode ng pindutan sa kanilang site ay maaaring kopyahin at i-paste ang aking code sa kanilang tema at hindi na kailangang gumugol ng masyadong maraming oras sa paggawa ng shortcode at pag-istilo ng pindutan.

Ano ang Mga Shortcode?

Ang mga shortcode ay ipinakilala pabalik sa WordPress 2.5 at pinapayagan ka nitong lumikha ng mga code ng macro para magamit sa nilalaman ng post. Ang isang simpleng shortcode ay magiging hitsura ng isang bagay tulad nito:

[shortcode]

Aling kung idinagdag sa post editor ay ibabalik ang halaga ng shortcode na tinukoy sa iyong mga file ng tema. Ipapakita ko sa iyo kung paano lumikha ng isang shortcode na magbibigay-daan sa iyo upang madaling magdagdag ng mga pindutan sa iyong post editor nang hindi hawakan ang anumang code.

Pagdaragdag ng Isang Custom na “button” Shortcode

Ang unang bagay na kailangan mong gawin ay idagdag ang php code para sa iyong shortcode sa iyong tema. Ang sumusunod na code ay maaaring magamit upang magdagdag ng isang simpleng pindutan sa iyong site. Ang code na ito ay maaaring mailagay sa function.php file. Kung gumagamit ka ng isang tema ng 3rd party, ito ay pinakamahusay na nagawa sa pamamagitan ng isang Tema ng Bata ng WordPress.

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

// I-extract ang mga katangian ng shortcode
katas (shortcode_atts (array
'url' => '',
'pamagat' => '',
'target' => '',
'text' => '',
'color' => 'berde',
), $ atts));

// Gumamit ng halaga ng teksto para sa mga item na walang nilalaman
$ nilalaman = $ teksto? $ text: $ nilalaman;

// Bumalik ang pindutan na may link
kung ($ url) {

$ link_attr = array
'href' => esc_url ($ url),
'title' => esc_attr (pamagat ng $),
'target' => ('blangko' == $ target)? '_blank': '',
'class' => 'myprefix-button na color-'. esc_attr ($ kulay),
);

$ link_attrs_str = '';

unahan ($ link_attr bilang $ key => $ val) {

kung ($ val) {

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

}

}


bumalik ''. do_shortcode ($ nilalaman). '';

}

// Walang tinukoy na link kaya ang pindutan ng pagbabalik bilang isang span
iba pa {

bumalik ''. do_shortcode ($ nilalaman). '';

}

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

Paggamit ng Shortcode Sa Iyong Post Editor

Ngayon na mayroon kang isang shortcode maaari kang magdagdag ng bagong “pindutan” (na mukhang isang payak na link ngayon dahil hindi namin ito na-istilo) sa iyong post editor.

// Halimbawa ng paggamit 1
Button Text [/ button] // Halimbawa ng paggamit 2

Pag-istilo ng Button

Ano ang punto ng paglikha ng isang shortcode kung magmumukha lamang itong isang payak na link? Wala. Iyon ang dahilan kung bakit ipapakita ko sa iyo kung paano magdagdag ng ilang mga cool na CSS3 upang i-style ang pindutan ng pag-download at ito ay magmukhang sexy.

Tulad ng napansin mo sa shortcode naidagdag ko sa klase na “myprefix-button” upang madali mong mai-style ito sa pamamagitan ng iyong style.css file. Ipasok ang sumusunod na code sa iyong styleheet upang gumawa ng isang magandang asul na pindutan tulad ng isa sa imahe.

/ * Pangunahing Estilo ng Pindutan * /
.myprefix-button {background: # 65A343; text-shade: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; hangganan-radius: 5px; -webkit-box-shade: 1px 2px 1px rgba (0, 0, 0, 0.1); -moz-box-shade: 1px 2px 1px rgba (0, 0, 0, 0.1); box-shade: 1px 2px 1px rgba (0, 0, 0, 0.1); cursor: pointer; display: inline-block; overflow: nakatago; padding: 1px; vertical-align: gitna; }

.span myprefix-button {border-top: 1px solid rgba (255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; kulay: #fff; display: block; bigat ng font: bold; laki ng font: 1em; padding: 6px 12px; text-shade: 1px 1px 1px rgba (0, 0, 0, 0.25); }

/ * Hover * /
.myprefix-button: hover {background: # 558938; dekorasyon ng teksto: wala; }

/ * Aktibo * /
.myprefix-button: aktibo {background: # 446F2D; }

Green Shortcode Button

Maramihang Suporta ng Kulay

Kung napansin mo ang shortcode ay may isang kulay ng kulay na maaari mong magamit upang magdagdag ng mga estilo ng CSS para sa iba’t ibang mga kulay ng pindutan. Halimbawa kung maaari kang magdagdag ng isang pagpipilian ng asul na kulay sa pamamagitan ng pagdaragdag ng labis na CSS:

/ * Blue Button * /
.myprefix-button.color-asul {background: # 2981e4}

/ * Blue Button Hover * /
.myprefix-button.color-asul: hover {background: # 2575cf}

/ * Blue Button Aktibo * /
.myprefix-button.color-asul: aktibo {background: # 0760AD}

Ngayon gamitin lamang ang kulay ng parameter sa shortcode:

Button Text [/ button]

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