Shortcodes Ultimate mejora el aspecto de tu theme

Shortcode Ultimmate es uno de los plugins más completos para WordPress que te permitirán insertar gran contenido por medio de shortcodes, dando un aspecto totalmente diferente a tu web.

Foto del autor

Juanma Aranda

14 comentarios

10 minutos de lectura
shortcode ultimate

Colaboran con este sitio web:

Rara vez nos encontramos con un theme que se adapte 100% a nuestras necesidades. Siempre nos decantamos por uno, pero al final terminamos echando en falta funcionalidades. Hoy te hablaré sobre ShortCodes Ultimate: el plugin que te permitirá añadir funciones extra a tu blog.

¿Qué son los shortcodes?

Para ponernos en situación, empezaremos explicando que los shortcodes son palabras encorchetadas entre signos [ ] que piden a WordPress que ejecute una programación.

Previamente, hemos tenido que crear esa programación a la que hemos asignado un atajo (un shortcode).

De esta manera, cuando queramos que se ejecute, en lugar de volver a escribir toda la programación, escribiremos únicamente el atajo. En este caso el shortcode.

¿Quién utiliza shortcodes?

Los principales plugins utilizan shortcodes para hacer sus funciones en WordPress… por ejemplo WooCommerce, el plugin del comercio electrónico más utilizado, también utiliza shortcodes.

También algunos constructores visuales, como Divi, utilizan los shortcodes para que puedas crear tus sitios web.

¿Qué es Shortcode Ultimate?

Se trata de un plugin freemium con más de 700.000 instalaciones activas y más de 4 millones de descargas, que te permite insertar determinados elementos en entradas o páginas simplemente insertando un shortcode.

Pero no sólo eso, sino que además puedes personalizar esos shortcodes para personalizar el aspecto del elemento que insertas. Aunque para eso necesitarás conocer un poco de programación en CSS.

El plugin tiene la versión gratuita, que te va a permitir insertar y personalizar decenas de elementos, y otra versión premium que te permitirá añadir elementos extra, cambiar los skin de los elementos o incluso crear tus propios shortcodes.

Si quieres ver su funcionamiento en vivo, te animo a que eches un vistazo a la lección de Shortcode Ultimate en mi Curso de Plugins Recomendados.

¿Qué incluye Shortcode Ultimate?

En esto momento la versión completa incluye 67 shortcodes, que te voy a resumir a continuación, separados por funcionalidades:

Contenido

ultimate shortcode
  • Cabecera. Con el que podrás crear un título “con adornos”.  Podrás personalizar tamaños, márgenes y colores.
  • Línea divisoria. Añadirá una línea separadora entre párrafos, pudiendo elegir, por ejemplo, un enlace donde ponga “ir arriba”. También podrás personalizar el estilo de la línea, el grosor, el color, etc
  • Espaciado. Que te añadirá un párrafo en blanco para ganar espacio.
  • Texto resaltado. Te dará el aspecto de palabras subrayadas con un marcador de colores. Podrás personalizar el color del texto y el color del resaltado.
  • Etiquetas. Añade texto con formato de etiquetas estilizadas. Puedes elegir entre distintos estilos que trae predefinidos.
  • Letra capital.  Te permite poner una letra como destacada al inicio de un párrafo, pudiendo elegir entre distintos estilos predefinidos.
  • Lista. Crea una lista similar a esta que estás leyendo ahora mismo, pero con la diferencia de que puedes elegir un icono de Font Awesome en lugar de el punto que saldría por defecto.
  • Botón. Con este shortcode crearás fácilmente un botón totalmente personalizado: estilo, colores, url.. etc
  • Tabla.  Hará posible que crees una tabla, al igual que si lo hicieras manualmente con código html, pero con la ventaja de que la puedes hacer responsive fácilmente.
  • Enlace permanente a un artículo o página simplemente incluyendo el ID de la entrada.
  • Feed RSS. Para incluir el contenido de un feed.
  • Texto de relleno. Muy útil sobre todo cuando estas diseñando una web y te falta el contenido. Con este shortcode puedes elegir el número de palabras o párrafos a incluir y si quieres cachearlo o no.
  • Imagen de relleno. Al igual que el shotcode anterior, podrás insertar imágenes de muestra. Puedes elegir las dimensiones y la temática de la imagen.
  • Código QR. Con el que podrás crear un código QR fácilmente eligiendo dimensiones, colores, url, márgenes, etc.
  • Texto con icono. Te permimtirá insertar un bloque de texto con un icono, pudiendo elegir tamaño, color, url, etc
  • Miembro. Añadirá una ficha de miembro de un equipo, donde podrás personalizar el aspecto con muchas opciones.
  • Icono. Hará posible que insertes un icono de Font Awesome, personalizando el tamaño, colores, url y márgenes.

Caja

ultimate shortcode
  • Pestañas. Mediante este shortcode podrás crear contenido divido en pestañas, tanto verticales como horizontales.
  • Spoiler. Se trata de un shortcode con el que crearás menús desplegables, pudiendo elegir entre distintos aspectos predefinidos.
  • Acordeón. Muy similar al spoiler. Te permitirá incluir contenido en menús desplegables que aparecerán ocultos. Puedes elegir entre distintos estilos predefinidos.
  • Cita. Este shortcode te permite, como su nombre sugiere, incluir un cita pudiendo elegir uno de los estilos predefinidos que trae.
  • Cita desplaza. Es una variación del shortcode anterior, que posibilita alinear la cita a la izquierda o derecha, según elijas.
  • Columnas. Este shortcode es quizás uno de los más utilizados, ya que te permite crear contenido en columnas, pudiendo elegir entre distintos formatos y proporciones de las mismas.
  • Servicio. Un conjunto de título, icono y descripción para informar sobre los servicios que ofreces, por ejemplo. Evidentemente puedes personalizar el icono o la imagen que quieres mostrar.
  • Caja. Se trata de una caja, tipo aviso, en la que puedes colocar un título y una descripción. Personalizable en cuanto a color y uno de los diseños predefinidos.
  • Nota. Se trata de un párrafo sombreado en el que puedes escribir texto, para que se muestre en modo aviso. Puedes elegir el color del sombreado y el color del texto.
  • Expandir. Efecto que puedes colocar en cualquier párrafo para que sólo muestre las primeras palabras y un enlace “mostrar más” para mostrar el resto del contenido.
  • Splash screem. Muestra un contenido a pantalla completa, pudiendo elegir entre distintos estilos predefinidos, tamaño y opacidad.
  • Exit popup. Al acercar el ratón a alguna zona de la pantalla para salir de ella, aparecerá un popup en la pantalla con el contenido que decidas. Al igual que el shortcode anterior, puedes elegir estilo, tamaño y opacidad.
  • Panel. Dibuja un marco alrededor del texto, pudiendo personalizar el borde, la alineación, el color, etc
  • Photo panel. Muestra un marco alrededor de una imagen, con una leyendo debajo de la misma. Puedes personalizar grosor, color, texto alternativo, url… etc
  • Icon panel. Muy similar al anterior, pero en lugar de mostrar una imgen, muestra un icono de la biblioteca de Font Awesome.
  • Tabla de precios. Te permite configurar una tabla de precios, personalizando precio, contenido, colores, url, iconos, etc
  • Testimonial. Mostrará contenido dentro de una especie de bocadillo como los de los comics, pudiendo añadir foto, texto, url, borde, etc.

Medios

ultimate-shortcode
  • Youtube. Mostrará un video de youtube, pudiendo elegir dimensiones y autoplay
  • Youtube avanzado. Similar al anterior pero con más opciones de personalización en cuanto a lista de reproducción, dimensiones, controles, etc
  • Vimeo. Inserta un video de youtube, personalizable en cuanto a tamaño y autoplay.
  • Dailmotion. Para insertar un video de Dailmotion con distintas opciones de personalización, similares a las de youtube acanzado.
  • Audio. Inserta un audio en el contenido, pudiendo elegir entre autoplay, tamaño y reproducción contínua.
  • Video. Similar al anterior, pero eligiendo un archivo de video en lugar de audio
  • Documento. Se trata de un visor de documentos de Google. Para configurarlo simplemente indica la URL del documento y dimensiones.
  • Mapa de Google. En pocos segundos tendrás insertado un mapa simplemente escribiendo la dirección dentro de este shortcode.

Galería

ultimate shortcode
  • Lightbox. Muestra una caja de luz en formato popup donde puedes insertar videos, imágenes, o cualquier contenido en html.
  • Diapositiva. Inserta un slider donde podrás incluir imágenes de tu galería o de artículos de una categoría o taxonomía que elijas. También puedes personalizar las dimensiones y el destino del link al hacer clic.
  • Carrusel. Igual que el anterior, pero en lugar de mostrarlo en slider lo muestra con efecto carrusel.
  • Content slider. En este caso las diapositivas muestran texto o contenido que quieras. Puedes personalizar el efecto de transición, apariencia de las flechas, autoplay, etc.

Datos

ultimate shortcode
  • Meta Dato. Muestra los metadatos elegidos de un post seleccionado mediante ID.
  • Datos de usuario. Igual que el shortcode anterior, pero en este caso muestra los datos de un usuario seleccionado mediante su ID.
  • Fecha de artículo. Presenta la fecha de un artículo seleccionado mediante distintas variables.

Otros

ultimate shortcode
  • Pista. Al pasar el ratón sobre un contenido, mostrará una etiqueta emergente con un texto. Se puede personalizar el estilo, el tamaño, la posición, el título, etc.
  • Privado. Permite insertar notas privadas que únicamente leerán los autores del post, no será visible para los lectores.
  • Miembros. Con este shortcode podrás esconder contenido de tal forma que únicamente esté disponible para usuarios registrados en tu sitio web. Puedes personalizar el color, el texto del aviso y la url para el login.
  • Invitado. Te permite poner un contenido que únicamente estará visible para los usuarios que no estén identificados dentro de tu sitio.
  • Artículos. Muestra un listado de los artículos o custom post type seleccionado. Puedes personaliar el orden, filtrar por autor, por taxonomías, título, estado del post… etc
  • Animación. Permite elegir un efecto determinado para la aparición de un texto en la pantalla. Puedes elegir entre muchos efectos predefinidos.
  • Progress Pie. Se trata de un contador con una barra de progreso circular, en la que puedes configurar el porcentaje, tamaño, textos, color, alineación… etc
  • Barra de progreso. Similar al terior, pero en lugar de ser en formato circular, es una barra horizontal.
  • Sombra. Agrega sombra a cualquier elemento anidado, pudiendo elegir entre distintos estilos predefinidos.

¿Cómo utilizar los shortcodes?

Una vez activado el plugin, su utilización es muy sencilla ya que se te habrá creado un nuevo botón encima del editor de textos de WordPress, donde pone “Inserta Shortcode“.

Al hacer clic ahí, se te abrirá una nueva ventana con todo el listado de shortcodes para que elijas el que quieres insertar.

Al hacer clic sobre el shortcode elegido, cambiará la ventana y se mostrará un pequeño asistente para que personalices los campos que desees y, de esta manera, se autocompleten los atributos dentro del shortcode.

Una vez personalizado, abajo te aparecerá un botón que pone “Insertar shortcode” y justo al lado otro que pone “Vista Previa” para que puedas comprobar el aspecto antes de insertarlo.

Conclusión

Como ves, las posibilidades que te ofrece el plugin Shortcode Ultimate son enormes. Simplemente teniendo claro cuales son los atributos que puedes modificar en cada shortcode, puedes conseguir modificar totalmente el aspecto de tu sitio web sin necesidad de utilizar ningún constructor visual ni de cambiar de theme.

¿Has probado ya este plugin? ¿Qué opinión te merece? Deja tu comentario debajo y comparte tu experiencia con otros usuarios.

14 comentarios en «Shortcodes Ultimate mejora el aspecto de tu theme»

  1. Tengo varias imágenes en horizontal, con la vista de ordenador. Pero me gustaría que en la versión para móvil estas imágenes aparecieran una encima de la otra. Cómo lo puedo hacer? Gracias.

    Responder
  2. Hola gracias excelente. Yo uso una galería de varias imágenes y debo estar constantamente añadiendo o retirando imágenes.

    Como como se añaden o quitan o cambian las imagenes? Mi web en buena parte depende de actualizar esas galerías contantemente, y tampoco se de mucho manejo de html, css, etc.

    Responder
  3. Muy buenas! sabes si puedo combinar shortcodes? estoy tratando de diseñar un botón que abra un vídeo de youtube en un lightbox… eso son 3 shortcode pero no veo el modo y no quería instalar más plugins para hacer sea función.
    Gracias

    Responder
  4. Hola Juanma,

    Una pregunta: ¿este plugin es totalmente compatible con programas de maquetación de WordPress como Elementor o Visual Composer?

    Gracias!!

    dani

    Responder
    • Hola Dani!

      Yo lo he utilizado con Elementor y funciona perfectamente. Respecto a Visual Composer no te puedo decir, porque no lo he probado.

      Un saludo,

      Responder
  5. Hola, ¿cómo puedo alinear a la izquierda el texto de “expandir”, también quisiera cambiar la fuente del texto. He intentado con la tabla de texto, agregar el shortcode, alinearlo hacia la izquierda. pero en la website se ve a la derecha.

    Responder
    • Hola Mes!

      Esta personalización no puedes hacerla directamente en el shortcode, sino que tienes que utilizar tu propio CSS a través del personalizador de WordPress. Te dejo aquí algunos ejemplos.

      Un saludo!

      Responder
  6. Una pregunta, si por ejemplo creo una tabla y meto contenido dentro ¿ese contenido y esas palabras claves de dentro del shorcode también posicionan como si fuera contenido normal del artículo?

    Responder
    • Hola Juan!

      En realidad, los robots de los buscadores, nunca “leen” el diseño, sino el código html de cada entrada o página. En este caso, el código no va a variar, salvo que añadirá unos shortcodes antes y después del contenido.

      Distinto sería si el contenido fuera sustituido por un shortcode. En ese caso, los robots no pueden traducirlo y no lo posicionan…

      Pero en el caso de este plugin, lo que hace es únicamente dar estilos al contenido que va en medio, por lo que no debes preocuparte.

      Un saludo!

      Responder

Deja un comentario

En wpnovatos.com, los datos personales que nos proporciones serán tratados con el fin de moderar tus comentarios por Juanma Aranda. Puede que los datos que nos facilites sean compartidos con terceros de acuerdo con lo que se establece en la Política de Privacidad y Cookies. Además, puedes revocar tu consentimiento, consultar cómo ejercer tus derechos y ampliar la información sobre el tratamiento de tus datos en nuestra Política de Privacidad y Cookies.