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

Si no es un gran fanático de trabajar con el editor HTML en WordPress o desea proporcionar algunas mejoras interesantes para sus temas premium, los códigos cortos son una gran solución para expandir las capacidades de su editor de publicaciones mientras mantiene las cosas simples.

Estaba pensando que sería genial agregar algún tipo de botón a mi sitio cuando proporcione 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 cortos de botones a su sitio puedan simplemente copiar y pegar mi código en su tema y no tener que dedicar demasiado tiempo a crear el código corto y diseñar el botón.

¿Qué son los códigos cortos?

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

[shortcode]

Lo cual, cuando se agrega al editor de publicaciones, devolverá el valor del código corto tal como se define en los archivos de su tema. Le mostraré cómo crear un código corto que le permitirá agregar botones fácilmente a su editor de publicaciones sin tocar ningún código.

Agregar un código abreviado 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 utilizar 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 infantil de WordPress.

function myprefix_button_shortcode( $atts, $content = null ) {
	
	// Extract shortcode attributes
	extract( shortcode_atts( array(
		'url'    => '',
		'title'  => '',
		'target' => '',
		'text'   => '',
		'color'  => 'green',
	), $atts ) );

	// Use text value for items without content
	$content = $text ? $text : $content;

	// Return button with link
	if ( $url ) {

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

		$link_attrs_str = '';

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

			if ( $val ) {

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

			}

		}


		return '' . do_shortcode( $content ) . '';

	}

	// No link defined so return button as a span
	else {

		return '' . do_shortcode( $content ) . '';

	}

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

Usando el código corto en su 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.

// Example usage 1
Button Text

// Example usage 2

Diseñar el botón

¿Cuál es el punto de crear un código corto 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 código corto, agregué la clase “myprefix-button” para que pueda diseñarlo fácilmente a través de su archivo style.css. Inserta el siguiente código en tu hoja de estilo para hacer un bonito botón azul como el de la imagen.

/* Main Button Style */
.myprefix-button{ background:#65A343; text-shadow:1px 1px 1px #000; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 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; display: inline-block; overflow: hidden; padding: 1px; vertical-align: middle; }

.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; display: block; font-weight: bold; font-size: 1em; padding: 6px 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); }

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

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

Botón verde de código corto

Compatibilidad con varios colores

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

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

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

/* Blue Button Active */
.myprefix-button.color-blue:active { background:#0760AD }

Ahora simplemente use el parámetro de color en el código corto:

[button href="YOUR LINK" target="self" color="blue"]Button Text