Cum să adăugați un scurt cod CSS3 pentru buton în WordPress

Dacă nu sunteți un mare fan al colaborării cu editorul HTML în WordPress sau doriți să oferiți câteva îmbunătățiri interesante pentru temele dvs. premium, codurile scurte sunt o soluție excelentă pentru extinderea capabilităților editorului dvs. de post, păstrând lucrurile simple.

Mă gândeam că ar fi fain să adaug un fel de buton pe site-ul meu atunci când furnizez link-uri către fișiere gratuite sau alte site-uri (folosind coduri scurte, desigur), așa că după adăugarea shortcode-ului la tema mea, m-am gândit că voi împărtăși codul aici pe blog, astfel încât alte persoane interesate să adauge coduri scurte de buton pe site-ul lor ar putea pur și simplu să copieze și să lipească codul meu în tema lor și să nu fie nevoiți să petrec prea mult timp realizând codul scurt și stilizând butonul..

Ce sunt shortcodes?

Codurile scurte au fost introduse în WordPress 2.5 și vă permit să creați coduri macro pentru utilizare în conținutul postării. Un simplu cod scurt ar arăta astfel:

[cod scurt]

Care atunci când este adăugat la editorul de poștă va returna valoarea codului scurt așa cum este definit în fișierele dvs. cu temă. Vă voi arăta cum puteți crea un cod scurt care vă va permite să adăugați ușor butoane la editorul dvs. de poștă, fără să atingeți niciun cod.

Adăugarea unui shortcode „buton” personalizat

Primul lucru pe care trebuie să-l faceți este să adăugați la tema dvs. codul php pentru codul scurt. Următorul cod poate fi utilizat pentru a adăuga un buton simplu pe site-ul dvs. Acest cod poate fi plasat în fișierul funcții.php. Dacă utilizați o temă a unei terțe părți, aceasta se realizează cel mai bine printr-o temă pentru copii WordPress.

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

// Extrageți atributele codului scurt
extract (shortcode_atts (tablou
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'color' => 'verde',
), $ atts));

// Utilizați valoarea textului pentru elemente fără conținut
conținut $ = $ text? $ text: $ conținut;

// Butonul Return cu link
if ($ url) {

$ link_attr = tablou (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blank' == $ țintă)? '_gol' : '',
'class' => 'culoarea butonului meuprefix-'. esc_attr ($ culoare),
);

$ link_attrs_str = '';

foreach ($ link_attr ca $ cheie => $ val) {

if ($ val) {

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

}

}


întoarcere ''. do_shortcode (conținut $). '„;

}

// Nicio legătură definită, astfel încât butonul returnează ca un interval
altfel {

întoarcere ''. do_shortcode (conținut $). '„;

}

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

Utilizarea codului scurt în editorul dvs. de poștă

Acum, dacă aveți un cod scurt, puteți adăuga noul „buton” (care arată ca un link simplu acum, deoarece nu l-am conceput) la editorul dvs. de postări.

// Exemplu de utilizare 1
[butonul href = „LINKUL TĂU” țintă = „sine”] Butonul Text [/ butonul]

// Exemplu de utilizare 2
[butonul href = „LINKUL TĂU” țintă = „auto” text = „Butonul text”]

Stilarea butonului

Care este rostul creării unui cod scurt dacă va arăta doar ca o legătură simplă? Nimic. Acesta este motivul pentru care îți voi arăta cum să adaugi niște CSS3 cool la stilul butonului de descărcare și să îl faci să pară sexy.

După cum ați observat în codul scurt, am adăugat clasa „myprefix-button”, astfel încât să puteți stila cu ușurință prin fișierul dvs. style.css. Introduceți următorul cod în foaia de stil pentru a crea un buton albastru frumos, precum cel din imagine.

/ * Stil buton principal * /
.myprefix-button {background: # 65A343; text-shadow: 1px 1px 1px # 000; -webkit-border-raza: 5px; -moz-border-radio: 5px; rază de graniță: 5px; -webkit-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); -moz-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); box-shadow: 1px 2px 1px rgba (0, 0, 0, 0.1); cursor: pointer; afișare: bloc în linie; revărsat: ascuns; căptușire: 1px; vertical-aliniere: mijloc; }

.myprefix-span span {border-top: 1px solid rgba (255, 255, 255, 0,25); -webkit-border-raza: 5px; -moz-chenar-rază: 5px; frontieră-rază: 5px; culoare: #fff; afișare: bloc; font-greutate: bold; font-size: 1em; căptușire: 6px 12px; text-shadow: 1px 1px 1px rgba (0, 0, 0, 0,25); }

/ * Hover * /
.myprefix-button: hover {background: # 558938; text-decoration: none; }

/ * Activ * /
.myprefix-button: activ {background: # 446F2D; }

Suport color multiplu

Dacă ați observat că codul scurt are un parametru de culoare pe care îl puteți utiliza pentru a adăuga stiluri CSS pentru diferite culori de buton. De exemplu, dacă puteți adăuga o opțiune de culoare albastră adăugând acest CSS suplimentar:

/ * Buton albastru * /
.myprefix-button.color-blue {background: # 2981e4}

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

/ * Buton albastru activ * /
.myprefix-button.color-blue: activ {background: # 0760AD}

Acum pur și simplu folosiți parametrul de culoare din codul scurt:

[buton href = "LINKUL TĂU" țintă = "auto" culoare = "albastru"] Buton Text [/ buton]