Ako pridať skvelý klávesový skratku tlačidla CSS3 vo WordPress

Ak nie ste veľkým fanúšikom práce s editorom HTML v programe WordPress alebo ak chcete poskytnúť vynikajúce vylepšenia pre svoje prémiové témy, krátke kódy sú skvelým riešením pre rozšírenie možností vášho post editora pri zachovaní jednoduchosti..


Myslel som si, že by bolo skvelé pridať nejaké tlačidlo na svoju stránku, keď poskytujem odkazy na bezplatné súbory alebo iné stránky (samozrejme pomocou krátkych kódov), takže po pridaní krátkeho kódu k mojej téme som si myslel, že tu zdieľam kód blog, aby ostatní ľudia, ktorí sa zaujímajú o pridanie klávesových skratiek na svoje stránky, mohli jednoducho skopírovať a prilepiť môj kód do svojej témy a nemuseli tráviť príliš veľa času vytvorením krátkeho kódu a štýlom tlačidla.

Čo sú krátke kódy?

Skratky boli zavedené späť v programe WordPress 2.5 a umožňujú vám vytvárať makro kódy na použitie v obsahu post. Jednoduchý skrátený kód bude vyzerať asi takto:

[skrátený kód]

Ktorý po pridaní do editora príspevkov vráti hodnotu skráteného kódu definovaného v súboroch tém. Ukážem vám, ako vytvoriť krátky kód, ktorý vám umožní ľahko pridať tlačidlá do editora príspevkov bez toho, aby ste sa dotkli akéhokoľvek kódu.

Pridanie vlastného „tlačidla“ skráteného kódu

Prvá vec, ktorú musíte urobiť, je pridať php kód pre váš krátky kód do svojej témy. Nasledujúci kód môže byť použitý na pridanie jednoduchého tlačidla na vaše stránky. Tento kód je možné umiestniť do súboru function.php. Ak používate motív tretej strany, najlepšie sa to deje prostredníctvom detskej témy WordPress.

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

// Extrahujte atribúty krátkeho kódu
extrakt (shortcode_atts (pole (
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'color' => 'green',
), $ atts));

// Pre položky bez obsahu použite textovú hodnotu
$ content = $ text? $ text: $ content;

// Tlačidlo návratu s odkazom
if ($ url) {

$ link_attr = array (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blank' == $ target)? '_blank': '',
'class' => 'farba tlačidla myprefix-'. esc_attr ($ color),
);

$ link_attrs_str = '';

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

if ($ val) {

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

}

}


návrat ''. do_shortcode ($ content). ',;

}

// Nie je definovaný žiadny odkaz, takže vráťte tlačidlo ako rozsah
else {

návrat ''. do_shortcode ($ content). ',;

}

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

Použitie krátkeho kódu vo vašom Post Editori

Teraz, keď už máte skrátený kód, môžete do svojho editora príspevkov pridať nové tlačidlo (ktoré teraz vyzerá ako obyčajný odkaz, pretože sme ho ešte nesformovali)..

// Príklad použitia 1
Text tlačidla [/ button] // Príklad použitia 2

Styling Tlačidlo

Aký má zmysel vytvoriť skrátený kód, ak to bude vyzerať ako obyčajný odkaz? Nič. Preto vám ukážem, ako pridať nejaký skvelý CSS3 na úpravu tlačidla na stiahnutie a jeho vzhľad tak, aby vyzeral sexy.

Ako ste si všimli v skrátenom kóde, pridal som triedu „myprefix-button“, aby ste ju mohli ľahko upraviť pomocou súboru style.css. Vložte nasledujúci kód na svoju šablónu so štýlmi a vytvorte pekné modré tlačidlo, ako je to na obrázku.

/ * Štýl hlavného tlačidla * /
.tlačidlo myprefix {background: # 65A343; textový tieň: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; polomer okraja: 5px; -webkit-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); -moz-shadow-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); tieň v tvare: 1px 2px 1px rgba (0, 0, 0, 0,1); kurzor: ukazovateľ; displej: vložený blok; pretečenie: skryté; čalúnenie: 1px; vertikálne zarovnanie: stredné; }

.rozpätie tlačidla myprefix {border-top: 1px masívna rgba (255, 255, 255, 0,25); -webkit-border-radius: 5px; -moz-okraj-polomer: 5px; polomer-border: 5px; farba: #fff; displej: blok; font-weight: bold; veľkosť písma: 1em; čalúnenie: 6px 12px; textový tieň: 1px 1px 1px rgba (0, 0, 0, 0,25); }

/* Vznášať sa */
.tlačidlo myprefix: hover {background: # 558938; text-decoration: none; }

/ * Aktívne * /
.tlačidlo myprefix: aktívne {background: # 446F2D; }

Zelené tlačidlo s krátkym kódom

Podpora viacerých farieb

Ak ste si všimli, že skrátený kód má parameter farby, ktorý môžete použiť na pridanie štýlov CSS pre rôzne farby tlačidiel. Napríklad, ak môžete pridať možnosť modrej farby pridaním tohto dodatočného CSS:

/ * Modré tlačidlo * /
.myprefix-button.color-blue {background: # 2981e4}

/ * Modré tlačidlo Hover * /
.myprefix-button.color-blue: hover {background: # 2575cf}

/ * Modré tlačidlo aktívne * /
.myprefix-button.color-blue: active {background: # 0760AD}

Teraz jednoducho použite parameter farby v skrátenom kóde:

Text tlačidla [/ 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