¿Qué son exactamente los códigos cortos? ¿Qué hacen? ¿Cómo trabajan? Si es nuevo en WordPress, probablemente haya oído hablar de ellos, pero su significado exacto aún puede ser un misterio.
La palabra "shortcode" se usa en los tutoriales de WordPress, en las listas de características de los temas de WordPress, en foros, etc. Está en todas partes. Los códigos cortos son inherentes a WordPress y son una de las cosas que hacen que la plataforma sea tan funcional y fácil de usar.. Además, todos los temas premium de WordPress vienen con una selección de códigos cortos personalizados diseñados para aumentar el valor y la usabilidad del tema.
Pero incluso si usted mismo ha estado usando códigos cortos, es probable que aún no esté muy seguro de cuáles son. Hoy lo arreglaremos y ofreceremos una explicación simple pero completa de esta función práctica.
Los códigos cortos son, esencialmente, lo que sugiere su nombre. Son versiones abreviadas y truncadas de código más largo, realizando una función específica. En el backend, se indican mediante corchetes y tienen este aspecto: [I am shortcode].
Los códigos cortos no se muestran en su interfaz. Bueno, lo hacen, pero no de esta forma. Dependiendo de para qué fueron creados, pueden verse como una galería de imágenes, un reproductor de audio, etc., cualquiera que sea su función.
La importancia de los códigos cortos radica en su potencial de personalización. WordPress es de código abierto, lo que significa que puede agregar cualquier código que desee para que un sitio web se vea y funcione como lo desee. Sin embargo, si no es un desarrollador, esta no es exactamente una opción.
Ahí es donde entran en juego los códigos cortos. Permiten a los usuarios "habituales" de WordPress agregar funcionalidades y características a su sitio web sin tener que escribir ningún código para él.
Veamos un ejemplo del uso común de códigos cortos. Esta es una galería básica de WordPress que creamos, configuramos el número de columnas y agregamos a nuestra página.
A continuación puede ver la galería agregada usando el Editor visual. Al ser un editor WYSIWYG (What You See Is What You Get), pasa por alto cualquier necesidad del código real. Pero no deja mucho espacio para la personalización y no facilita la replicación del mismo contenido o similar en una página diferente.
Si miramos la misma galería de imágenes, en la misma página, pero esta vez usando el Editor de texto, nuestra galería se verá así:
Como puede ver, aquí no hay imágenes para obtener una vista previa directamente, solo un código entre corchetes: el código corto. Más precisamente, el shortcode de la galería.
Quizás se pregunte por qué alguien preferiría usar códigos cortos y el Editor de texto en lugar de simplemente agregar imágenes usando el Editor visual. Después de todo, es más fácil cuando puedes ver exactamente cómo se verá tu galería.
Sin embargo, los códigos cortos permiten una personalización adicional allí mismo en el editor, y se pueden colocar (mediante copiar / pegar) en cualquier lugar de su sitio.
Cómo usar códigos cortos
En cuanto a agregar códigos cortos a su sitio, hay tres formas de hacerlo.
- Puede escribir el código corto en el editor usted mismo, si sabe cómo hacerlo.
- Si desea utilizar el mismo código abreviado en una página diferente, puede copiarlo desde el Editor de texto y pegarlo donde desee.
- Puede utilizar plugins.
Además, si está utilizando uno de los temas de qode Interactive, agregar códigos cortos es aún más fácil. Se realiza a través del plugin de creación de páginas de arrastrar y soltar de WPBakery que viene gratis con la mayoría de nuestros temas. Y obtienes un amplia selección de códigos cortos personalizados para elegir, pero hablaremos de todo eso con más detalle en un momento.
WordPress viene con algunos códigos cortos predeterminados y predefinidos que puede usar en cualquiera de sus páginas y publicaciones, así como agregar a áreas de widgets.
En nuestro ejemplo anterior, colocamos un shortcode de galería en una de nuestras páginas.
Cada una de las imágenes cargadas en la Biblioteca de medios tiene su identificación única. El código abreviado extrae la galería creada anteriormente utilizando ID de imagen y los muestra en su página.
El shortcode puede incluir opciones adicionales, como el número de columnas (columnas = "X"), en la que X representa el número de columnas o el tamaño de la imagen (size = "Miniatura").
El código abreviado para una galería con tres columnas e imágenes de tamaño pequeño sería:
En cuanto a agregar códigos cortos en su editor, puede hacerlo tanto en el editor Visual como en el de Texto. En el Editor de texto, el código abreviado para agregar un reproductor de audio (que es uno de los predeterminados) se verá así:
Si cambia al Editor visual, su código abreviado se transformará automáticamente en un nuevo campo que puede editar y personalizar a su gusto:
Adicionalmente, Se pueden agregar códigos cortos a un área de widgets de su elección. Por ejemplo, si desea agregar una galería a la barra lateral de su blog, simplemente arrastre el widget Texto al área del widget Barra lateral del blog. Se abrirá un campo en el que puede escribir o pegar el código corto de su galería. Al hacer clic en Guardar, la galería aparecerá en la barra lateral de su blog.
Los códigos cortos más comunes
Como ya mencionamos, WordPress viene con algunos códigos cortos predeterminados ya integrados. Algunos de los códigos cortos más comunes son:
- Galería: Este shortcode para mostrar galerías de imágenes tiene varias opciones básicas, como especificar el número de columnas, el orden de las imágenes, la identificación y el tamaño de la publicación, así como algunas opciones avanzadas.
- Audio: Puede utilizar este código abreviado para incrustar y reproducir archivos de audio. Las opciones básicas admitidas incluyen especificar la fuente del archivo de audio, el bucle, la reproducción automática y la precarga.
- Subtítulo: Usado principalmente para imágenes individuales, le permite agregar un título a su imagen y envolverlo alrededor del contenido. Las opciones básicas que puede agregar al código abreviado incluyen ID HTML único, clase CSS personalizada, alineación y ancho.
- Empotrar: Este es un código abreviado muy útil que puede usar para incrustar varios elementos. En cuanto a la personalización, las opciones básicas incluyen establecer el ancho y alto deseados del elemento incrustado.
- Lista de reproducción: Este código abreviado muestra una colección de archivos de audio o video de su elección. En cuanto a las opciones, puede especificar el tipo de lista de reproducción a mostrar, el orden de los elementos, la ID de la publicación, el estilo, mostrar u ocultar la lista de pistas y los números de las pistas, agregar imágenes y mostrar artistas.
Códigos cortos adicionales
Además de los códigos cortos predeterminados que vienen con su instalación básica de WordPress, hay cientos de otros que puede agregar a través de plugins, o que vienen incluidos con su tema.
Complementos
Muchos plugins ejecutan sus funcionalidades previstas utilizando precisamente códigos cortos. Por ejemplo, un plugin para agregar un cuadro de autor a sus publicaciones, llamado Cuadro de autor simple, proporciona un código corto que puede copiar y pegar en cualquier lugar dentro de su contenido para mostrar el cuadro de autor.
Además, hay plugins que contienen colecciones completas de códigos cortos para diversos fines. Uno de ellos es Shortcodes Ultimate, que incluye más de 50 códigos cortos para elementos visuales y funcionales, desde pestañas, botones y separadores, acordeones y carruseles, hasta datos de usuarios y publicaciones, metadatos y más.
Códigos cortos interactivos de Qode
Todos los temas de Qode Interactive vienen con una amplia selección de códigos cortos para varios propósitos. Los códigos cortos se pueden insertar fácilmente en cualquier lugar que desee, gracias a la Complemento de creación de páginas WPBakery que viene incluido con nuestros temas.
Para ver los códigos cortos disponibles y agregar uno (o más) a su página o publicación, simplemente haga clic en el signo más (Agregar elemento) en la versión backend del constructor. Se abrirá una lista de códigos cortos disponibles, que le permitirá agregarlos simplemente haciendo clic en ellos o buscándolos por nombre en la barra de búsqueda en la esquina superior derecha.
Para acceder a los códigos abreviados personalizados desarrollados por Qode Interactive e incluidos en su tema, simplemente haga clic en la pestaña llamada "por ..." seguida del nombre del autor del tema (Qode, Elated, Edge, Select, Mikado) o el nombre del tema en sí . En nuestro ejemplo, estamos usando nuestro tema Sahel, por lo que la pestaña dice "por SAHEL".
Una vez que haga clic en el código corto de su elección, verá todas las opciones generales y de diseño disponibles para personalizar.
Cuando haya terminado de configurar todo, haga clic en Guardar cambios y verifique su página en vivo para ver si el código corto está haciendo lo que se supone que debe hacer.
Pensamientos finales
Los códigos cortos son una de las cosas que hacen que WordPress sea tan hermoso y poderoso. Lo mejor de ellos es que son útiles tanto para desarrolladores como para usuarios principiantes. Los desarrolladores pueden crear sus propios códigos cortos, si lo desean, y los usuarios básicos e intermedios pueden agregar funciones, modificar el diseño y personalizar el sitio sin tener que preocuparse por el código real.
Todo es más fácil de usar cuando sabes cómo funciona. Con suerte, logramos desglosar los códigos cortos y su uso para que pueda hacer el mejor uso de ellos y mejorar el diseño y la funcionalidad de su sitio web.