Código corto de WordPress

Literalmente, shortcode significa «código corto» o «trozo de código». Es un tipo de código que se utiliza con ganchos y que los webmasters implementan en su sitio para integrar nuevas características

Con una cuota de mercado de casi 60,8 %wordPress es el sistema de gestión de contenidos más utilizado en el mundo

Es de código abierto y tiene una multitud de características incluyendo shortcodes

Se trata de un componente que le permite añadir funcionalidades complejas a su sitio web sin necesidad de conocimientos de programación

  • ¿Qué es un shortcode?
  • ¿Cómo funciona?
  • ¿Cómo se utiliza?

Estas son las diferentes cuestiones que abordaré en este artículo.

¡Empecemos!

Capítulo 1: ¿Qué es un Shortcode de WordPress?

En esta primera parte, explicaré más claramente el significado de la expresión Shortcode

Entonces, se tratará de mostrarle cómo :

  • Son importantes;
  • Las ventajas que aportan;
  • Pero también, las desventajas que conllevan

1.1. Shortcode de WordPress: ¿Qué es?

Como sabe, WordPress le proporciona una pluralidad de funcionalidades en cuanto a la personalización de su sitio web

En efecto, además de las extensiones, los plugins, los temas y los widgets, WordPress también le permite modificar su sitio integrando «Shortcode» a su sitio web.

También se conocen como

  • «Fragmentos de código»;
  • «Código pequeño»
  • «Fragmentos de código»;
  • «Shortcode» ;
  • Etc.

Estos «fragmentos de código» o Shortcodes fueron introducidos en WordPress desde su versión 2.5. en 2008

Sin embargo, un concepto similar ya existía antes de la década de 2000 en los sitios de foros de discusión

De hecho, la historia de los códigos cortos comenzó con la integración de BBCode (Bulletin Board Code) con el software de creación de foros en línea (Ultimate bulletin board) en 1998

Shortcode WordPress (1)

Volviendo a WordPress, hay que decir que el propósito de implementar shortcodes es ejecutar cierta funcionalidad en los posts o en el sitio web.

Backend shortcode api frontend

Esto significa que los shortcodes tienen más o menos la misma potencia que muchas líneas de código, pero a diferencia de ellas, son mucho más fáciles de usar

Esto se debe a que son una alternativa al hecho de que WordPress impide la ejecución de PHP en el contenido del sitio por razones de seguridad.

Los webmasters pueden utilizarlos aunque no tengan muchos conocimientos de programación web. Pueden agregar

  • Calendarios
  • Cree un formulario;
  • Cree un slider responsivo;
  • Añada gráficos u otras características sin escribir una sola línea de código

Así que entendido, antes de seguir adelante, es importante decir las características de los shortcodes de wordpress.

1.2. ¿cuáles son las características del shortcode de WordPress?

La particularidad de los shortcodes en WordPress se encuentra esencialmente en dos niveles

  • Son códigos que se insertan entre corchetes []
  • Son simples y fáciles de usar, a diferencia de los códigos largos

El lenguaje es sencillo y fácil de entender. No requieren casi ningún conocimiento de programación.

Además, recordemos que hay dos categorías de shortcode en WordPress.

Les types de codes courts

En efecto, hay

  • Códigos cortos de cierre automático este es el shortcode [captura], por ejemplo. No necesita una etiqueta de cierre. Las diferentes opciones se añaden gracias a los atributos
  • Y cerrar los shortcodes estos son códigos cortos que necesitan una etiqueta de cierre. Estos códigos cortos suelen manipular el contenido que existe entre las etiquetas de apertura y cierre. Como ejemplo, tiene el Shortcode de incrustación: [incoporer]….[/incoporer]

1.3. ¿Por qué son importantes?

Como ya sabe, los códigos cortos de WordPress le permiten añadir características interesantes a las entradas, páginas y widgets de su sitio sin tener que escribir código

Así que le ahorran mucho tiempo

También le permiten insertar fácilmente diversas características en su contenido. Esto tiene la ventaja de permitirle atraer y captar la atención de los internautas

Como tal, puede utilizarse a lo largo del tiempo como un elemento que garantice el reconocimiento de su marca por parte de los usuarios en línea.

Además, debido a su corta longitud, los códigos cortos de WordPress no sólo son muy sencillos de utilizar, sino que también son fáciles de introducir y corregir

Simplifican los procesos de desarrollo de su sitio web al permitir que se añadan características complejas con sólo unas líneas de código. También significa que puede recordarlos sin esfuerzo

Además, parecen más fáciles de usar que el código HTML o PHP, que requiere un cierto nivel de conocimientos de programación web

El shortcode de WordPress le permite, por ejemplo, insertar lo siguiente en su sitio

  • Formularios ;
  • Botones de llamada a la acción; Imágenes o vídeos
  • Imágenes o vídeos
  • Una galería de imágenes;
  • Y muchas otras cosas.

Además, tenga en cuenta que los códigos cortos se pueden personalizar y agrupar como una extensión que puede utilizar en cualquier momento

Esto también es una gran ventaja, ya que le permite utilizarlos de forma estable, pero también exportarlos a otros sitios en caso de que tenga varios sitios de WordPress

1.4. ¿Qué ocurre con el shortcode de WordPress?

A pesar de todas las ventajas que he mencionado anteriormente, hay algunas cosas a tener en cuenta sobre los shortcodes de WordPress que hacen que su uso sea menos agradable

Aunque son fáciles de usar e integrar en su sitio web, los shortcodes pueden crear problemas para la representación HTML de su sitio

Además, su presencia en su sitio en un número elevado puede aumentar la carga de su sitio web y, por tanto, dificultar la carga rápida del mismo

Como puede imaginar, una situación así puede acabar poniendo en peligro todo su sitio web

De todos modos, no es fácil saber lo que puede hacer un código corto con sólo mirarlo

Ahora que tiene una idea de lo que es el shortcode, las ventajas y desventajas que puede tener, le sugiero que aprenda aún más sobre ellos en las siguientes líneas

Capítulo 2: ¿Cómo funciona el shortcode de WordPress?

En este capítulo, hablaré de ello

  • Cómo funciona el shortcode de wordpress;
  • Los shortcodes básicos que se encuentran en wordpress;

2.1. ¿Cómo funciona el shortcode de WordPress?

En general, los códigos se establecen para pedir al ordenador que se comporte de una manera específica o que realice tareas definidas

Esta es la misma lógica que el shortcode de WordPress se utiliza para implementar en su sitio web. Permite que se comporte de una manera y no de otra

De hecho, cuando añade un Shortcode de WordPress al contenido de su web, está pidiendo a su sitio que muestre una serie de elementos que no muestra cuando no ha incrustado nada

Por ejemplo, al añadir el shortcode de WordPress que asegura que se añada un formulario o una imagen, sin duda esperará que se muestre ese formulario o esa imagen en su sitio web

2.2. ¿Qué códigos cortos se encuentran habitualmente en WordPress?

En WordPress, se pueden distinguir diferentes tipos de shortcode. Hay 6 de ellos y se entregan por defecto con WordPress

En WordPress, tiene los siguientes códigos cortos básicos

2.2.1. Audio

El shortcode de WordPress [ «audio»] (sin las comillas) está integrado en WordPress desde la versión 3.6.

l audio

Se utiliza para añadir y reproducir archivos de audio en el sitio. Admite 4 opciones básicas

  • src o cadena que permite añadir el formato de audio
  • bucle que asegura el bucle o no del audio;
  • la reproducción automática que permite la reproducción automática
  • La opción de precarga indica cómo se carga el audio en la página

2.2.2. Vídeo

Integrado a partir de la versión 3.6, este shortcode se utiliza como el shortcode [ «audio»] (sin las comillas) para reproducir vídeos en su sitio web

El shortcode de vídeo de WordPress se utiliza a partir de la fórmula [vídeo].

Video

Tiene las mismas opciones básicas que el shortcode [«audio»] (sin las comillas) sin embargo también tiene opciones como

  • Cartel : Que indica la imagen que se mostrará mientras se espera la reproducción del vídeo;
  • Altura : Que indica la altura del vídeo;
  • Anchura: Que define el valor del soporte.

2.2.3. Leyenda

Este código corto se utiliza para añadir un pie de foto a una imagen de forma individual

La fórmula para añadirla es: [captions] caption [/captions]

Legende

También hay 4 opciones básicas para este shortcode, que son las siguientes

  • Identificador esta opción le ofrece la posibilidad de añadir un identificador HTML;
  • Clasificar esta opción le permite personalizar una clase;
  • Alinear: Esta opción le permite determinar cómo se alinea el pie de foto dentro del mensaje. Puede ser a la izquierda, a la derecha, al centro o no estar alineado;
  • Anchura esta opción le permite determinar el ancho de la leyenda en píxeles. Su valor debe ser mayor o igual a 1

2.2.4 Incorporar

Como su nombre indica, este es el Shortcode que le permite definir el tamaño máximo de los elementos que tiene incrustados en la página web

Se añadió a partir de la versión 2.9 de WordPress. Se utiliza con la siguiente fórmula: … [/incorporar]

Incorporer

Admite dos opciones, a saber: Ancho y tamaño. La anchura le permite dar el ancho del objeto mientras que el tamaño le permite asignar un tamaño

2.2.5. Galería

Este es un shortcode de WordPress que le permite añadir una o más galerías de imágenes a su sitio web. Se utiliza en esta forma en la versión 2.5

Galerie

A partir de la versión 3.5 de WordPress, el shortcode de la galería shortcode comenzó a integrar los IDs de las imágenes por defecto

Esto dio lugar a una nueva forma de shortcode que ahora tiene el siguiente aspecto: [Gallery ID = «729 732 731 720»]

Es posible utilizar cualquiera de las dos fórmulas

Pero tenga en cuenta que cuando utiliza simplemente: [galería], sólo se muestran las imágenes que se adjuntan a la página, mientras que el uso del Shortcode con el ID incluido le permite incluir todas las imágenes que desee

El shortcode de la galería también tiene varias opciones.

2.2.6. Lista de reproducción

Este shortcode de WordPress [ «playlist»] (sin las comillas) le permite implementar una lista de archivos de audio y vídeo en su sitio

Playlist

Está integrado desde la versión 3.9 de WordPress

Más allá de estos códigos, WordPress ofrece un lista de códigos cortos.

Además de los códigos cortos predeterminados, también puede crear y añadir sus propios códigos cortos

A continuación, tendrá que integrarlos en su sitio web mediante determinados plugins

2.3. ¿Dónde añadir el Shortcode de WordPress a su sitio web?

El uso de shortcodes en WordPress no es algo difícil.

Pero, en primer lugar, es necesario saber cómo se añaden a un sitio web

Para ello, qué mejor que echar un vistazo a la documentación de WordPress sobre códigos cortos

Un rápido vistazo a esta página le mostrará que puede incorporar muchas funciones en su sitio web utilizando los códigos cortos de WordPress.

Se pueden añadir a diferentes partes del sitio

Por ejemplo, pueden añadirse en los siguientes lugares

2.3.1. En el post o en la página de su sitio

Para añadir códigos cortos a una entrada en su sitio de WordPress

  • Vaya a la pestaña de publicaciones;
  • Elija el post o la página a la que desea añadir el shortcode;
  • Edición de prensa ;
  • Cuando solicite el cambio, ahora haga clic en el botón de añadir bloque e inserte un bloque de shortcode;
  • Introduzca su shortcode y guarde los cambios;
site WordPress
  • Por último, previsualice para ver cómo aparecen los nuevos cambios en su página web o artículo.

2.3.2. En los widgets y la barra lateral

Los códigos cortos también se pueden añadir a los widgets de su sitio web

widgets disponibles

Para ello, siga los siguientes pasos

  • Ir a las apariciones ;
  • Seleccione los widgets y añada el widget de texto a la barra lateral;
  • Una vez creado el widget de texto, ahora le toca pegar su shortcode en el área de texto del widget
  • A continuación, pulse el botón de guardar para hacer efectiva la manipulación;
  • Vaya a la dirección de su sitio de WordPress para actualizarlo y ver una vista previa de los cambios.

2.3.3. En el tema de su sitio web

Si su ambición es integrar el Shortcode en su tema de WordPress. Para ello, primero debe modificar los archivos de su tema de WordPress

Para ello, una solución es utilizar el plugin de código de fragmentos de WordPress

Como su nombre indica, se trata de un plugin que le permite añadir fragmentos de código a su sitio web

PHP code Snippets

Tiene una función de cambio de código que desactiva el fragmento de código cuando tiene errores

Por lo tanto, es una solución adecuada que le permite evitar hacer malas manipulaciones dentro de su archivo function.php.

Con este plugin, puede añadir fácilmente fragmentos de código desde el área de administración de su sitio de WordPress

Para utilizarlo, sólo tiene que seguir los siguientes pasos

  • Acceda al plugin;
  • Seleccione una nueva página para añadir su código personalizado.

También puede añadir el código directamente en el archivo de funciones de su sitio web.

Para ello, deberá seguir los siguientes pasos

  • Ir a la apariencia ;
  • Elija el editor
  • Y haga clic en function.php en la columna de la derecha
  • Pegue su fragmento de código: La fórmula a utilizar para añadir el Shortcode es:
Ajout du shortcode

Una vez que haya añadido el shortcode, actualice su archivo y compruebe que se tiene en cuenta actualizando su sitio web

2.3.4. En la cabecera y el pie de página

Aparte del tema, los widgets del artículo o la página de su sitio web, el Shortcode también se puede añadir a la cabecera o al pie de página de su sitio web

Ajout du shortcode dans pieds de page

Para ello, basta con añadir el siguiente código en los archivos header.php o footer.php del sitio web

Esto debería permitir que el shortcode se muestre en el lugar donde lo puso

Una vez que lo haya colocado, simplemente guarde los cambios y previsualice su sitio para ver cómo se muestra el shortcode creado cuando se pone en marcha

Ahora que tiene una idea de cómo mostrar los códigos cortos que hay en su sitio web y dónde se pueden añadir, echaré un vistazo a cómo se crean

Capítulo 3: ¿Cómo crear un Shortcode de WordPress?

En esta sección, aprenderá a crear códigos cortos también en su sitio web.

De hecho, hay varias formas de crear un shortcode para su sitio web.

Una posibilidad es utilizar plugins. Otra posibilidad podría ser crear el shortcode usted mismo desde cero. Pero para adoptar una solución de este tipo, es necesario tener algunos conocimientos de programación web

Aquí hablaré principalmente de la creación de Shortcodes con la ayuda de los plugins de WordPress

De hecho, para crear Shortcodes con WordPress, una de las soluciones más fáciles que recomiendo es utilizar plugins.

Por ello, puede utilizar los siguientes plugins

3.1. shortcode ultimate

Este plugin le ofrece la posibilidad de añadir un shortcode prediseñado a su sitio web

Para utilizarlo, puede seguir los siguientes pasos

  • Busque e instale el plugin Shortcode ultimate en su sitio web y actívelo;
Plugin Shortcode ultimate
  • Una vez activada, la verá aparecer en la barra de menú de su tablero de mandos;
  • A continuación, verá una lista de códigos cortos disponibles que puede añadir a su sitio web;
Tous les Shortcodes
  • Haga clic en el que desee y modifique las opciones;
Selection d un shortcode
  • Copie el shortcode y modifíquelo;
Code court
  • Vaya a la página o al artículo al que desea añadir el código;
  • Pulse el botón de modificación
  • Espere a que se muestre la página o el artículo y elija el botón más;
  • Seleccione o busque el código corto:
  • Haga clic en él para añadirlo;
site WordPress
  • Copie y pegue su código corto o escríbalo
Copier ou coller le code court
  • A continuación, actualice los cambios y obtenga una vista previa para ver si se han añadido los cambios

Además de esta solución, otra solución es utilizar el plugin «Shortcoder»

3.2. El plugin «Shortcoder»

Otro plugin que puede utilizar para crear Shortcodes en su sitio de WordPress es el «Shortcoder»

El plugin Shortcoder le permite crear Shortcodes personalizados en JavaScript, HTML, php, etc.

Para utilizarlo, primero debe instalarlo y activarlo en su sitio de WordPress

plugin Shortcoder

Una vez activada, podrá verla en la barra de menús. También se puede acceder a ella desde la pestaña «crear».

Una vez que haga clic en la pestaña «Shortcoder», podrá

  • Muestra la lista de códigos cortos que ha creado;
  • Acceda al espacio de creación de su Shortcode;
  • Vea las diferentes etiquetas de sus Shortcodes

Para crear su Shortcode, simplemente haga clic en «Crear Shortcode»

A continuación, verá una nueva ventana que muestra los diferentes campos que debe rellenar para crear su propio Shortcode

Create shortcode

En general, el espacio de creación del plugin Shortcode se compone de varias partes

En primer lugar, tiene una pequeña caja titulada «introduzca el nombre del Shortcode». Aquí tiene que escribir el nombre que quiere dar a su shortcode

Entonces tiene dos menús desplegables. El primero le permite insertar los parámetros de su shortcode. El segundo menú le permite elegir el tipo de editor que desea utilizar para escribir su shortcode. Puede elegir entre tres tipos de editor.

Estos son

  • Editor de texto ;
  • Editor de código ;
  • O el editor visual.
Insert shortcode parameters

Siempre que elija un tipo de editor en particular, podrá ver que los cambios se admiten en el espacio reservado para recibir el código

Justo debajo de esta función, tiene la configuración del código corto

Shortcoder

Estos ajustes le permiten

  • Especifique el nombre que debe mostrarse cuando se active el shortcode
  • Desactivar temporalmente el Shortcode o no;
  • Desactivar el Shortcode para los administradores;
  • Elija las herramientas en las que se puede ejecutar el shortcode

Finalmente, como última característica, tiene el espacio reservado para la etiqueta. Este es un parámetro útil para las funciones de devolución de llamada.

Tags

Cuando rellene estos distintos campos, tendrá su Shortcode y podrá publicarlo o guardarlo como borrador

Como he mencionado anteriormente en este artículo, también puede crear su propio shortcode desde cero

Para ello, tendrá que utilizar la API de códigos cortos de WordPress

3.3. La API de códigos cortos de WordPress

L’API de códigos cortos de WordPress la API de códigos cortos es útil si desea ampliar la personalización o la funcionalidad de su sitio web

El uso de la API de códigos cortos de WordPress le permite crear, por ejemplo, formularios únicos y dinámicos.

Para utilizar la API Shortcode, primero debe definir una función manejadora de Shortcode.

Para ello, necesita el comando add_shortcode Este comando recibe dos parámetros

  • El nombre de su Shortcode
  • Y una función de devolución de llamada para el shortcode

La función de devolución de llamada contiene generalmente tres parámetros, pero puede utilizar el número que desee

Estos son los siguientes parámetros

  • atts define los atributos;
  • $ contenido el contenido;
  • $ etiqueta es útil si quiere compartir el shortcode entre dos o más funciones

Para saber más sobre la API Shortcode, lea el artículo API de código corto artículo

También puede leer esto artículo de Kinsta para hacerse una idea de cómo se crean los shortcodes sin plugins a nivel de WordPress

Si desea obtener algunas ideas sobre cómo puede utilizar la API de códigos cortos de WordPress, le sugiero que lea este artículo de DZone artículo sobre algunos útiles shortcode de WordPress

En pocas palabras

El código corto de WordPress es una característica de WordPress que le permite utilizar atajos de código en su contenido para añadir características interesantes a su sitio web

Se puede diseñar desde algunos plugins o manualmente con la API de WordPress en el archivo de su tema o widgets

En este artículo, he explicado lo que es el concepto de Shortcode. También encontrará las ventajas del shortcode y consejos sobre cómo implementarlo en su sitio web

Si alguna vez ha tenido que utilizar el shortcode en su sitio web, o si tiene problemas, no dude en hablar de ello en los comentarios.

Deja un comentario