Cómo agregar un código corto de botón CSS3 genial en WordPress

Si no eres un gran admirador de trabajar con el editor HTML en WordPress o quieres proporcionar algunas mejoras geniales para tus temas premium, los códigos cortos son una gran solución para expandir las capacidades de tu editor de publicaciones y mantener las cosas simples.


Estaba pensando que sería genial agregar algún tipo de botón a mi sitio al proporcionar enlaces a archivos gratuitos u otros sitios (usando códigos cortos, por supuesto), así que después de agregar el código corto a mi tema, pensé que compartiría el código aquí en el blog para que otras personas interesadas en agregar códigos abreviados de botones a su sitio puedan simplemente copiar y pegar mi código en su tema y no tener que pasar demasiado tiempo haciendo el código abreviado y el estilo del botón.

¿Qué son los códigos cortos??

Los códigos cortos se introdujeron nuevamente en WordPress 2.5 y le permiten crear códigos de macro para usar en el contenido de la publicación. Un shortcode simple se vería así:

[Código corto]

Que cuando se agrega al editor de publicaciones devolverá el valor del shortcode como se define en sus archivos de tema. Te mostraré cómo crear un código corto que te permita agregar fácilmente botones a tu editor de publicaciones sin tocar ningún código.

Agregar un código corto de “botón” personalizado

Lo primero que debe hacer es agregar el código php para su shortcode a su tema. El siguiente código se puede usar para agregar un botón simple a su sitio. Este código se puede colocar en el archivo functions.php. Si está utilizando un tema de terceros, es mejor hacerlo a través de un tema secundario de WordPress.

función myprefix_button_shortcode ($ atts, $ content = null) {

// Extraer atributos de shortcode
extract (shortcode_atts (array (
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'color' => 'verde',
), $ atts));

// Usar valor de texto para elementos sin contenido
$ contenido = $ texto? $ texto: $ contenido;

// Botón de retorno con enlace
if ($ url) {

$ link_attr = array (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('blank' == $ target)? '_blanco' : '',
'class' => 'myprefix-button color-'. esc_attr ($ color),
);

$ link_attrs_str = '';

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

si ($ val) {

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

}

}


regreso ''. do_shortcode ($ contenido). '';

}

// No hay un enlace definido, por lo que el botón de retorno es un intervalo
más {

regreso ''. do_shortcode ($ contenido). '';

}

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

Usando el shortcode en tu editor de publicaciones

Ahora que tiene un código corto, puede agregar el nuevo “botón” (que ahora parece un enlace simple ya que no lo hemos diseñado) a su editor de publicaciones.

// Ejemplo de uso 1
Texto del botón [/ button] // Ejemplo de uso 2

Styling The Button

¿Cuál es el punto de crear un shortcode si solo se verá como un enlace simple? Nada. Es por eso que te mostraré cómo agregar un CSS3 genial para diseñar el botón de descarga y hacer que se vea sexy.

Como notó en el shortcode, agregué la clase “myprefix-button” para que pueda diseñarlo fácilmente a través de su archivo style.css. Inserte el siguiente código en su hoja de estilo para hacer un bonito botón azul como el de la imagen.

/ * Estilo del botón principal * /
.myprefix-button {background: # 65A343; sombra de texto: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; radio de borde: 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); cuadro-sombra: 1px 2px 1px rgba (0, 0, 0, 0.1); cursor: puntero; pantalla: bloque en línea; desbordamiento: oculto; relleno: 1px; alineación vertical: medio; }

.myprefix-button span {border-top: 1px solid rgba (255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff; bloqueo de pantalla; peso de fuente: negrita; tamaño de fuente: 1em; acolchado: 6px 12px; sombra de texto: 1px 1px 1px rgba (0, 0, 0, 0.25); }

/ * Desplazarse * /
.myprefix-button: hover {background: # 558938; decoración de texto: ninguno; }

/ * Activo * /
.myprefix-button: active {background: # 446F2D; }

Botón verde de código corto

Soporte de múltiples colores

Si notó que el shortcode tiene un parámetro de color que puede usar para agregar estilos CSS para diferentes colores de botón. Por ejemplo, si puede agregar una opción de color azul agregando este CSS adicional:

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

/ * Desplazamiento del botón azul * /
.myprefix-button.color-blue: hover {background: # 2575cf}

/ * Botón azul activo * /
.myprefix-button.color-blue: active {background: # 0760AD}

Ahora simplemente use el parámetro de color en el shortcode:

Texto del botón [/ 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