Com afegir un codi breu de botó CSS3 a WordPress

Si no sou un gran aficionat a treballar amb l’editor HTML a WordPress o voleu aportar algunes millores interessants per als vostres temes premium, els codis drecers són una excel·lent solució per ampliar les capacitats del vostre editor de publicacions tot mantenint les coses senzilles..


Estava pensant que seria genial afegir una mena de botó al meu lloc quan proporcionés enllaços a fitxers gratuïts o a altres llocs (fent servir codis breus), així que després d’afegir el codi curt al meu tema, vaig pensar que compartiria el codi aquí al de manera que altres persones interessades a afegir codis breus al botó al seu lloc simplement podrien copiar i enganxar el meu codi al tema i no haver de passar massa temps fent el codi curt i dissenyant el botó..

Què són els dreceres?

Els codis drecers es van introduir a WordPress 2.5 i permeten crear codis macro per utilitzar-los en el contingut de la publicació. Un codi curt senzill podria semblar així:

[codi curt]

Que quan s’afegeixi a l’editor de la publicació, es retornarà el valor del codi curt tal com es defineix als fitxers de temes. Us mostraré com crear un codi curt que us permetrà afegir botons fàcilment al vostre editor de publicacions sense tocar cap codi.

Addició d’un codi curt “personalitzat”

El primer que heu de fer és afegir el codi php del vostre codi curt al vostre tema. Podeu utilitzar el codi següent per afegir un botó senzill al vostre lloc. Aquest codi es pot col·locar al fitxer functions.php. Si utilitzeu un tema de tercers, això es farà millor mitjançant un tema infantil de WordPress.

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

// Extreu els atributs del codi curt
extracte (shortcode_atts (matriu (
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'color' => 'verd',
), $ atts));

// Utilitzeu el valor del text per a elements sense contingut
$ contingut = $ text? $ text: contingut $;

// Botó de retorn amb enllaç
if ($ url) {

$ link_attr = matriu (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blanc' == $ target)? '_en blanc' : '',
'class' => 'color del botó myprefix-'. esc_attr ($ color),
);

$ link_attrs_str = '';

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

if ($ val) {

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

}

}


tornar ''. do_shortcode (contingut $). '';

}

// No hi ha cap enllaç definit pel que torna el botó com a interval
més {

tornar ''. do_shortcode (contingut $). '';

}

}
add_shortcode ('botó', 'myprefix_button_shortcode');

Ús del codi curt al vostre editor de publicacions

Ara que teniu un codi curt, podeu afegir el nou “botó” (que sembla un enllaç normal ja que no l’hem dissenyat) al vostre editor de publicacions.

// Exemple d’ús 1
[botó href = "EL TEU ENLLAÇ" target = "auto"] Text del botó [/ botó]

// Exemple d’ús 2
[botó href = "EL TEU ENLLAÇ" target = "self" text = "Text Text"]

Estil del botó

Quin és l’objectiu de crear un codi curt si només semblarà un enllaç simple? Res. Per això, us mostraré com afegir CSS3 fantàstic a l’estil del botó de baixada i fer-lo atractiu.

Com heu notat al codi curt, he afegit la classe “botó myprefix” per tal que pugueu dissenyar-la fàcilment mitjançant el fitxer style.css. Inseriu el codi següent al vostre full d’estils per fer un bonic botó blau com el de la imatge.

/ * Estil del botó principal * /
.botó myprefix {background: # 65A343; text-shadow: 1px 1px 1px # 000; -webkit-border-radio: 5px; -moz-border-radio: 5px; radi de vora: 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: punter; visualització: bloc en línia; desbordament: amagat; encoixinat: 1px; vertical-alineat: mig; }

.myprefix-span span {border-top: 1px rgba sòlid (255, 255, 255, 0.25); -webkit-border-radio: 5px; -moz-border-radio: 5px; border-radio: 5px; color: #fff; visualització: bloc; lletra-pes: negreta; font-size: 1em; encoixinat: 6px 12px; text-shadow: 1px 1px 1px rgba (0, 0, 0, 0.25); }

/ * Passa el ratolí * /
.myprefix-button: hover {background: # 558938; decoració de text: cap; }

/* Actiu */
.myprefix-button: actiu {background: # 446F2D; }

Botó de codi curt verd

Suport per a diversos colors

Si us heu adonat que el codi curt té un paràmetre de color que podeu utilitzar per afegir estils CSS per a diferents colors del botó. Per exemple, si podeu afegir una opció de color blau afegint aquest CSS addicional:

/ * Botó blau * /
.myprefix-button.color-blue {background: # 2981e4}

/ * Passar el botó blau * /
.myprefix-button.color-blue: hover {background: # 2575cf}

/ * Botó blau actiu * /
.myprefix-button.color-blue: actiu {background: # 0760AD}

Ara només cal que utilitzeu el paràmetre de color del codi curt:

[botó href = "EL TEU ENLLAÇ" target = "auto" color = "blau"] Text del botó [/ botó]

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