Wordpress - Creando shortcodes

wpressPorque no todo es joomla!,  tambien me estoy aplicando en wordpress; este popular cms que aunque sigo viendolo raro (por la transición), tambien estoy viendo algunas ventajas de personalización;

En este articulo hablaremos un poco de como hacer nuestros propios shortcodes, ya que el usaurio no siempre sabra de programación, es tarea nuestra buscar una forma mas facil de hacer que interactue con el contenido; Obviamente el usaurio escribe lo minimo y nosotros le damos la funcionalidad por detras;

Entonces bien, empezemos:

Los shortcodes, no son mas que abreviaciones que wordpress utiliza para insertar codigo personalizado; hasta ahorita veo que los shortcodes definidos siempre van entre corchetes

[mi_shortcode]

Eso se pone dentro del post y la magia se realiza cuando lo vemos en el frontend o el post normal;

Para realizar nuestro shortcode necesitamos el archivo  functions.php, este archivo se encuentra en la carpeta de nuestro template que estemos habilitando; si estas haciendo tu plantilla personalizada ahi debes incluir este archivo;

Veamos como crear un shortcode basico, asi sencillito para empezar;


function mi_shortcode( ) { return "hola SHORT"; }

Esto no es mas que una funcion que regresa un texto, creo que no hay mas explicacion en esto, para este ejemplo basico;

 

add_shortcode( 'hola', 'mi_shortcode' );

Esta linea que va de preferencia al final de tu funcion (para que no te confundas),  es la que le dice al wordpress, sabes que, tengo un shortcode que se llama mi_shortcode y quiero llamarlo como hola;

De tal forma que seria asi   add_shortcode ('tag en el post', ' funcion a invocar');

Y san se acabo; pongan en su post el tag  [hola], guarden y vean el resultado !!!

shortcode hola

Ahora bien que si quieren un shortcode un poco mas complejo, va creciendo segun el requerimiento; supongamos que queremos un shortcode que nos pinte el texto de rojo;

En este caso los tags cambian (corchetes), no mucho solo abre y cierra para poder pintar el contenido de tal suerte que ahora seria:

[pintame]Este color sera rojo [/pintame]

Asi la funcion tambien ya cambia un poco, solo vamos a agregar la variable $content

function mi_shortcode( $content = null ) { return "<div style='color:red'>". $content ."</div>"; }

y tambien podria cambiar la forma de llamarlo, en este caso reutilize la funcion mi_shortcode del ejemplo anterior pero aqui cambia un poco a la hora de definirlo porque el tag es diferente;

add_shortcode( 'pintame', 'mi_shortcode' );

Al hacer el cambio guardar y refrescar tenemos que:

shorcode rojo

Parece dificil ?, yo creo que quien sabe, intenten hacer sus propios shortcodes, mas adelante realizare un post con mas opciones que podemos utilizar de los shortcodes de wordpress; en lo particular se me hace muy interesante esta forma de trabajar; parece divertido; ahora el detalles es encontrar la forma de simplificar todo para el usaurio de tal modo que se sienta familiarizado y no le cueste incluir codigo bonito en cada uno de sus post;

 

salu2

 

Back to Top