• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Qué son los Shortcodes en WordPress y cómo usarlos

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

  • Shortcode para mostrar la fecha en WordPressShortcode para mostrar la fecha en WordPress
  • 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
  • Desactivar la actualización para plugins específicosDesactivar la actualización para plugins específicos
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (7 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Fernando Zamora

    8 febrero, 2021

    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"]

    • Jhon Marreros Guzmán

      8 febrero, 2021

      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/

      • Fernando Zamora

        9 febrero, 2021

        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.

        //Valores por defecto
          $atts   = shortcode_atts(['cantidad' => '4', 'categoria' => '2'], $atts, 'EntradasRecientes' );
          $quantity   = (int) $atts['cantidad'];
          $category_id   = (int) $atts['categoria'];
          $title   = ($content) ? $content : 'Entradas Recientes';
          $str   = '';
        
        //Consulta entradas
         query_posts(['post_type' => 'page', 'orderby' => 'date', 'order' => 'DESC' , 'showposts' => $quantity, 'cat' => $category_id]);
        

        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. 😀

        • Jhon Marreros Guzmán

          9 febrero, 2021

          Hola, bien 👍, gracias por el aporte.
          Saludos.

  2. Nestor mendoza

    20 marzo, 2021

    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.

    • Jhon Marreros Guzmán

      22 marzo, 2021

      Hola, lo recomendable es que uses los Hooks de WooCommerce en lugar de modificar directamente el código del core.

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

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Excluir entradas en el inicio de WordPress

Botones para el campo de cantidad en WooCommerce

Eliminar el slug de la URL de un Custom Post Type

Ajax en WordPress de manera correcta

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados