• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Core / Qué son los Shortcodes en WordPress y cómo usarlos
Anuncio banner webservi

Qué son los Shortcodes en WordPress y cómo usarlos

Shortcodes en WordPress cómo usarlos

[ 8 agosto 2017 ] [ Actualizado: 15 mayo 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

funcionalidad

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Shortcode en editor de entradas

 

  • 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

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Listar todos los Shortcodes en un sitio WordPressListar todos los Shortcodes en un sitio WordPress
  • Eliminar Shortcodes que no usas en WordPressEliminar Shortcodes que no usas en WordPress
  • Habilitar comentarios en el inicio de WordPressHabilitar comentarios en el inicio de WordPress
  • Mostrar mensajes en la administración de WordPress y en GutenbergMostrar mensajes en la administración de WordPress y en Gutenberg
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (5 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Tabla de Contenidos en WordPress sin plugins

Agregar animaciones de aparición sin plugins en WordPress

Corregir error plugin desactualizado

Mostrar lista de sub páginas en página padre en WordPress

Recientes

  • Leer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad