was successfully added to your cart.

Cómo crear tus propios shortcodes en WordPress.

By 3 Abril, 2017Blog

Los que trabajamos en WordPress vemos a diario como plugins y temas usan unos “códigos” para insertar fácilmente elementos en las páginas desde el administrador. Estos “códigos” se caracterizan por estar dentro de corchetes cuadrados, por ejemplo [mi_primer_shortcode]

Estos “códigos” se conocen como shortcodes y son una manera muy sencilla de insertar contenido 100% personalizado en nuestras páginas. Básicamente lo que hace un shortcode es ejecutar una función en el lugar donde lo peguemos desde el administrador de WordPress. Una función puede ser tan simple como queramos, por ejemplo:

function mi_funcion_para_un_shortcode(){
echo 'Título desde mi primer shortcode';
}

Lo que hace esta función es imprimir un título con el texto que le indicamos, pero dentro de los corchetes {} puedes hacer prácticamente lo que quieras y eso se ejecutará al insertar el shortcode. Yo normalmente lo uso para insertar elementos en HTML muy extensos.
Ahora, para crear tu primer shortcode relacionado a la función de arriba usamos la siguiente linea de código:

add_shortcode( 'mi_primer_shortcode', 'mi_funcion_para_un_shortcode' );

La primera palabra entre comillas será lo que insertaremos entre los corchetes cuadrados [ ], en este casó será [mi_primer_shortcode] y la segunda palabra será la función que definimos arriba y que se ejecutará donde peguemos el shortcode en el administrador de WordPress.
El código completo que tienes que pegar en el archivo functions.php es:

function mi_funcion_para_un_shortcode(){
echo 'Título desde mi primer shortcode';
}
add_shortcode( 'mi_primer_shortcode', 'mi_funcion_para_un_shortcode' );

Esta es la forma más básica de cómo crear un shortcode, pero a veces desde el administrador de WordPress necesitamos cambiar palabras, imágenes u otros valores en nuestro shortcode. Hay una manera muy sencilla y es usando parámetros, es decir elementos que pueden variar cada vez que usamos el shortcode.

Para este ejemplo supongamos que queremos añadir una sección donde mostremos el equipo de trabajo de PappCorn:

function mostrar_equipo_pappcorn($atts, $content = null){
  //registra los parámetros para usarlos en la función
  $empleado = shortcode_atts(array(
      	'nombre' => '',
	'cargo' => ''
  ), $atts);

//imprime los parametros
	echo 'Nombre:  '. $empleado['nombre'];
	echo '<br>';
	echo 'Cargo:  '. $empleado['cargo'];
	echo '<br>';
';
}

add_shortcode( 'equipo_pappcorn', 'mostrar_equipo_pappcorn' );

Pegando el código de arriba en el archivo functions.php, puedes utilizar el shortcode de la siguiente manera:

[equipo_pappcorn nombre="Mateo" cargo="Maker"]

Esto imprimirá en tu página lo siguiente:

Nombre: Mateo
Cargo: Maker

Y lo puedes seguir usando todas las veces que quieras con diferentes valores:

[equipo_pappcorn nombre="María" cargo="Partner Manager"]
[equipo_pappcorn nombre="Pipoca" cargo="C.P.O."]

Puedes ver un caso real de nuestros Partners donde usamos shortcodes en un proyecto de Nación Golf. La sección del Field (lista de jugadores) de la página del Club Colombia Championship fue hecha con esta técnica y este fue el resultado.

Estas son dos de las tres maneras de usar los shortcodes de WordPress y son herramientas muy poderosas. En un próximo wiki les mostraré cómo usar shortcodes de otra manera.

Author Mateo Buitrago

More posts by Mateo Buitrago

Leave a Reply

contacto
PAPPCORN
CONTÁCTANOS
Si quieres saber más sobre nuestra filosofía de Partner, o quieres ser parte de nuestro portafolio, no dudes en escribirnos y pronto estaremos en contacto.
Gracias por escribirnos. Somos #TuPartnerDigital
contacto
PAPPCORN
COTIZA TU WEBSITE
Si crees que tu website necesita una planeación diferente, con un desarrollo nativo y hecho a la medida para tu proyecto, completa este formulario y pronto estaremos contactándote.
Gracias por escribirnos. Somos #TuPartnerDigital