Detalles del tutorial
- Tecnología: PHP
- Dificultad: Nivel básico
- Tiempo de realización: 15 minutos
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"]
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.
iLen dice
Gracias me sirvio de mucho, no recordaba como obtener los datos por parametros del shortcodes
stiven dice
Muchisimas gracias, me saco de un apuro
Mat dice
Tio, me sirvio muchisimo
Muchas gracias, saludos.