PHP: Crear un Shortcode personalizado para WordPress

Detalles del tutorial

  • Tecnología: PHP
  • Dificultad: Nivel básico
  • Tiempo de realización: 15 minutos

Los shortcodes son una herramienta muy útil para insertar fragmentos de información en tus posts y páginas de wordpress. Vamos a crear un shortcode como el que se usa en esta misma página, justo encima de estas líneas, para mostrar los detalles del tutorial (tecnología, dificultad y tiempo). El shortcode tiene 3 parámetros para los 3 campos de este texto.

A meter código php en tu template de wordpress

Abre la carpeta de tu template, localiza el archivo functions.php y ábrelo con tu editor; éste archivo esta presente en la mayoría de las plantillas de wordpress.
A continuación dejo exactamente el mismo código que tiene esta página para mostrar los detalles del tutorial y posteriormente lo explico:


function detalle_func( $atts ) {
	extract( shortcode_atts( array(
		'tecnologia' => 'iOS',
		'dificultad' => 'Principiante',
		'tiempo' => '30 - 60 minutos',
	), $atts ) );

	$salida='<div class="tut_bottom">
    <div class="tutorial_details">
    <p><span>Detalles del tutorial</span></p>
    <ul>
      <li><strong>Tecnología: </strong>'.$tecnologia.'</li><li><strong>Dificultad: </strong>'.$dificultad.'</li><li><strong>Tiempo de realización: </strong>'.$tiempo.'</li>    </ul>
  </div>
</div>';

	return $salida;
}
add_shortcode( 'detalle', 'detalle_func' );

Lo más importante es la línea donde se definen los nombres de las variables del array y se les da un valor por defecto. Podemos poner todos los atributos que queramos y les damos nombres y valor para recogerlos luego:

extract( shortcode_atts( array(
		'tecnologia' => 'iOS',
		'dificultad' => 'Principiante',
		'tiempo' => '30 - 60 minutos',
	), $atts ) );

Luego con las variables $tecnologia, $dificultad y $tiempo creamos una salida html para mostrar lo que queremos y lo guardamos en $salida:

$salida='<div class="tut_bottom">
    <div class="tutorial_details">
    <p><span>Detalles del tutorial</span></p>
    <ul>
      <li><strong>Tecnología: </strong>'.$tecnologia.'</li><li><strong>Dificultad: </strong>'.$dificultad.'</li><li><strong>Tiempo de realización: </strong>'.$tiempo.'</li>    </ul>
  </div>
</div>';
return $salida;

No te olvides de devolver el html de la variable $salida. Por último notifica a wordpress que has creado un shortcode:

add_shortcode( 'detalle', 'detalle_func' );

Creando las css

Ya está creado el shortcode. El siguiente paso sería añadir un poco de css. Tu plantilla debería tener un archivo llamado style.css. Ábrelo e introduce las css a tu antojo. Para este ejemplo yo he utilizado las siguientes:

.tut_bottom {
    float: left;
    padding: 0 ;
    width: 660px;
}

.tut_bottom .tutorial_details {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;

}

.tutorial_details {
    color: #5B6D79;
    float: left;
    font-size: 1em;
    padding-top: 0px;
    width: 100%;
    border-bottom: 1px dotted #8AA7B9;
}

.tutorial_details p{
    color:#5B6D79;
    font-family: "WinterthurCondensedRegular",Georgia,Times,sans-serif;
    font-size:26px;
    background: url("images/fdo_titular_pagina.jpg") repeat-x scroll left bottom transparent;
    line-height: 28px;
    margin-bottom: 12px;
    padding-bottom: 10px;
}

.tutorial_details p span{

    background: url("images/pm-general-bk.jpg") repeat-x scroll left center transparent;
    padding-right: 10px;
}

Insertar tu shortcode recién creado en una entrada

Ahora vamos a utilizar nuestro shortcode al comienzo de este post para mostrar los detalles de este tutorial. El código sería el siguiente:

[detalle tecnologia="PHP" dificultad="Nivel básico" tiempo="15 minutos"]

crear un shortcode en wordpress

Conclusión

Ya habeis visto que es muy fácil crear un shortcode en wordpress. Observad que no hay que poner etiquetas de apertura y cierre (como los de crear columnas por ejemplo), tan solo encerrar con corchetes tal y como os he mostrado.

Valora esta entrada:

6 votos. Promedio: 4,33 de 5
1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas

Entrada archivada en:

Categorías: PHP

Etiquetas:

★ Por Raúl Flores (11 entradas) el

Entradas relacionadas

2 comentarios

  • 13 octubre, 2014 // Responder

    Gracias me sirvio de mucho, no recordaba como obtener los datos por parametros del shortcodes

Deja un comentario

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

*