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
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.
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.
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.
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].
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]
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]
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
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
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;
- 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
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
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:
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
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;
- 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;
- Haga clic en el que desee y modifique las opciones;
- Copie el shortcode y modifíquelo;
- 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;
- Copie y pegue su código corto o escríbalo
- 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
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
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.
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
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.
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.
