Inicio / Tutoriales Wordpress / Como crear un shortcode para WordPress
shortcodes en WordPress
Escrito por | | en Tutoriales Wordpress

Como crear un shortcode para WordPress

Como crear un shortcode para WordPress
Rate this post

Antes de adentrarnos en lo que necesitamos aprender para crear un shortcode o código corto, debemos recordar que los shortcodes abrevian fragmentos de html más complejos. Un ejemplo sencillo seria un shortcode para crear un banner de llamada a la acción.
Nuestro shortcode que podría llamarse [banner] en realidad lo que hace es abreviar un conjunto de etiquetas html que muestran finalmente un botón. De esta forma un usuario simplemente agregando el shortcode en el editor de WordPress mientras escribe su post, estará incrustando una porción de html sin tener que preocuparse por escribir todo el fragmento de html.

Antes de pasar a la acción y cómo vamos a manipular el archivo functions.php de tu theme, te recomiendo realizar una copia de ese archivo a través de F.T.P, solo por si cometes un error y tu sitio queda fuera de línea. También sería interesante que realices las pruebas que vamos a desarrollar aquí en un sitio de produción o en una Instalación de WordPress que este en tu PC.
Luego de que hayas tomado algunas de estas precauciones, vayamos a un ejemplo concreto. En nuestro archivo functions.php o en nuestro plugin de funciones podemos agregar la siguiente función php.

function banner()
{
echo"
<div class='css_para_banner'>
Pronto seré un lindo banner
</div>
";
}
add_shortcode('mibanner','banner');

Ahora agregaremos algunas reglas css a nuestro archivo style.css, naturalmente recomendamos utilizar algún editor de código.

.css_para_banner
{
    border-radius: 2px; 
    background-color: #ffbc00;
    color:#131313;
    padding: 5px 10px;
    text-align: center;
    font-size: 1.5em;
    font-style: italic;
    font-weight: 700;   
    display: block;
    width: 100%;
}

Finalmente en el editor de WordPress, agregamos el shortcode [banner] y le damos publicar a nuestro post de prueba.

shorcode en WordPress

y el resultado es :
banner con shortcode
Observamos un lindo texto decorado, naturalmente esto es algo sencillo o demasiado sencillo, pero podemos hacerlo tan complejo como queramos.

Crear un shortcode- ¿Como agregar variables, como personalizar un shortcode?

Para que nuestro shortcode soporte variables y podamos personalizarlo un poco más, deberemos reformular nuestro código de la siguiente forma:

function banner($atts, $content = null) {
	extract(shortcode_atts(array('link' => '#'), $atts));

	return '<a class="css_para_banner" href="'.$link.'">' . do_shortcode($content) . '</a>';
	}
	add_shortcode('mibanner', 'banner');

Ahora que transformamos nuestro banner en un enlace, agregaremos algunas reglas css a nuestro archivo style.css, con la intención de dar un poco más de decoración.

.css_para_banner
{
	border-radius: 2px; 
	background-color: #ffbc00;
	color:#131313;
	padding: 5px 10px;
	text-align: center;
	font-size: 1.5em;
	font-style: italic;
	font-weight: 700;	
	display: block;
	width: 100%;
}

.css_para_banner:hover
{
	background-color: #131313;
	color:#ffbc00;
	
}

Y en el editor de WordPress modificamos nuestro shortcode, ahora le podremos agregar variables. El shortocode se vera de la suiente manera:
crear un shortcode
Finalmente hemos creado un código corto que nos servirá para destacar un enlace cada vez que lo necesitamos. Hemos creado un banner sencillo con la posibilidad de agregarle un enlace.

¿Tienes alguna idea para crear un shortcode?Esperamos tus ideas en los comentarios.
Hasta la próxima.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *