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:

7 votos. Promedio: 4,43 de 5
1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas

Entrada archivada en:

Categorías: PHP

Etiquetas:

★ Por Raúl Flores (11 entradas) el

Entradas relacionadas

3 comentarios

  • 13 octubre, 2014 // Responder

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

  • 29 mayo, 2017 // Responder

    Muchisimas gracias, me saco de un apuro

Deja un comentario

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

*