Los Shortcodes en WordPress son porciones de código que se colocan entre corchetes como parte del contenido (entradas, páginas o widgets de texto), en este artículo veremos cómo crear un Shortcode y algunos plugins que usan esta funcionalidad.
1- Generalidades
En un artículo anterior vimos un ejemplo de uso de Shortcode para restringir contenido. En este artículo veremos el uso de un Shortcode para mostrar las entradas recientes.
Suponiendo que ya tengo un Shortcode llamado EntradasRecientes, entonces para usarlo puedo colocarlo como parte del contenido, tal como se ve en la siguiente imagen:
- La sintaxis básica:
[EntradasRecientes]En este caso mostraría las entradas recientes con los valores por defecto.
- La sintaxis con atributos:
[EntradasRecientes cantidad="4"]En este caso cantidad es un atributo para indicar que muestre las cuatro primeras entradas.
- La sintaxis con atributos y contenido:
[EntradasRecientes cantidad="4"] Titulo de Entradas recientes [/EntradasRecientes]En este caso lo que va dentro de las etiquetas de apertura y cierre se pasará como contenido, por ejemplo pasando algún título.
2- Creando el ShortCode de Entradas Recientes
Para crear un Shortcode necesitaremos insertar código PHP, podemos hacerlo directamente en el archivo functions.php del theme o usar algún plugin de Snippets como vimos en el artículo: Agregar código a tu sitio sin usar functions.php
En el siguiente código de ejemplo usamos un Shortcode para mostrar las entradas recientes.
En el código anterior:
- Usamos el hook init de WordPress para registrar la función dcms_agregar_shortcode
- Dentro de la función dcms_agregar_shortcode creamos el Shortcode llamado EntradasRecientes
- El Shortcode hace referencia a la función dcms_entradasrecientes
- Dentro de la función dcms_entradasrecientes pasamos dos parámetros atts y content
- Los parámetros son consistenciados y asignados para tener valores por defecto
- Realizamos la consulta para recuperar las entradas usando la función de WordPress query_posts
- Creamos el bucle, dentro de este formamos la lista con los datos obtenidos
- Finalmente devolvemos la cadena de texto que hemos ido concatenando con los datos
3- Plugins que generan ShortCodes
Existen plugins que puedes comprobar que como parte de su funcionalidad generan Shortcodes, por ejemplo:
- Woocommerce, cuando trabajamos con Woocommerce nos genera páginas para la tienda las cuales tienen como contenido un Shortcode, por ejemplo para la página de Realizar Pedido tienes el siguiente Shortcode:
[wooocommerce_checkout] - Contact Forms 7, cuando creamos un formulario, este crea un Shortcode que podemos copiar y pegar en alguna página, por ejemplo con el siguiente Shortcode se mostrará el formulario que tiene el id igual a 20:
[contact_form_7 id="20" title="Formulario de contacto"]
Otros plugins te ofrecen funcionalidad variada que puedes usar sólo con Shortcodes, por ejemplo:
- Shortcodes Ultimate, puedes crear, botones, slides, etc, todo usando Shortcodes, sin embargo algunos elementos crean estilos en línea lo cual te genera mucho código.
- WordPress Shortcodes, este es otro plugin similar para crear elementos como listas, botones, etc, inserta los estilos necesarios en archivos.
¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente
Artículos Relacionados
(7 votos, promedio: 5,00 de 5)
Cargando...
Funciona super bien, me gusta ahorrarme los plugins cuando creo mis propios temas de wordpress y tus tutoriales me encantan ya que los enseñas genial.
Yo aun soy muy novato en esto, me podrias decir como agregarle a ese mismo shortcode la posibilidad de mostrar las entradas por alguna categoria especifica?
Asi tipo:
[EntradasRecientes cantidad="4" post_type="page" category_name="bootstrap"]Hola, lo ideal sería que lo uses con el ID de la categoría, si quieres usar el nombre de la categoría tendrías que usar el slug, todo esto lo puedes poner como parte de los parámetros de la función query_posts() , revisa la documentación: https://developer.wordpress.org/reference/functions/query_posts/
Tienes toda la razon, coloque el ID en vez de el nombre de la categoria y funciona perfecto.
Aqui dejo el codigo por si a alguien mas le interesa.
SHORTCODE: [EntradasRecientes cantidad="4" categoria="2"],La verdad no se que tan bien este ese código pero de momento a mi me funciona perfecto, igualmente muchas gracias por la ayuda excelente pagina 10/10. 😀
Hola, bien 👍, gracias por el aporte.
Saludos.
Hola como puedo modificar el código que esta siendo llamado con [wooocommerce_checkout], esto para resolver una traducción que no logro modificar con plugins de traducciones.
Hola, lo recomendable es que uses los Hooks de WooCommerce en lugar de modificar directamente el código del core.