Shortcodes: Qué son y qué puedo hacer con ellos

WordPress nos ofrece una vez más una herramientas para los que no somos programadores ni tenemos muchas nociones de programación peronos queremos tener un blog de aspecto tan profesional como si lo fuésemos. Y esto es posible mediante lo que llamamos Shortcodes.

Qué son los Shortcodes

Los Shortcodes no son más que pequeñas líneas de código que llaman a una más extensa programada en PHP y que se ejecuta. O lo que es lo mismo, sencillos códigos escritos entre corchetes [ ] a través de los cuales podemos insertar desde fotos, letras capitales, códigos QR u otros elementos que normalmente te llevaría mucho más tiempo, trabajo y conocimientos. Puedes insertarlos desde en entradas o posts, hasta en páginas o los propios widgets (más adelante crearemos una entrada específica).

→ Crear un carrusel de imágenes.

 Crear un encabezado.

 Crear un divider y vuelve arriba.

 Inserta pestañas.

 Inserta servicios.

Letras capitales.

Citas.

 Subraya texto.

Crea columnas.

Añade el espacio entre párrafos que mejor te venga.

Crea mapas.

 


Qué puedo hacer con ellos

shortcode

Estas son las opciones que te permite este plugin de WordPress Shortcodes Ultimate. Te permite filtrarlo por tipo para que te sea más fácil identificarlos. Este plugin en concreto nos ofrece la posibilidad de insertar una cabecera, citas, audios, videos, galería de fotos, diapositiva, códigos QR y en definitiva cada elemento de la tabla superior que ves arriba. Sólo tienes que seleccionar el tipo y configurarlo según tus necesidades.

Carrusel de imágenes

En este caso hemos optado por un carrusel de imágenes donde muestro las últimas entradas del blog y que está linkeado con estas. Puedes configurar tamaño, items, origen de las imágenes, tipo de enlace…

Crea un encabezado

Shortocodes en Entre Medios & Marcas

Crea un divider y vuelve arriba

Inserta pestañas

Title 1Title 2Title 3
Analytics
Adwords
Shopping

Inserta servicios

Branded Content Branded Content
SEO SEO
SEM SEM

Letras capitales

Esto es una letra capital…

Puedes escoger diferentes estilos y tamaños.

Por defecto, plano, simple…

Citas

Esto es una cita desplazada a la derecha. Pon primero el shortcode y luego escribe tu texto, independientemente si el desplazamiento es a la izquierda o derecha.
«Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»

(Y otros que no te permiten pero que son muy fáciles de crear…)

Subraya texto

Sólo tienes que insertar el siguiente shortcode:

  Hola caracola   ->    [su_hightlight] Hola caracola [/su_hightlight]

´

Y si quieres cambiarle el color, sólo tienes que agregar el color al fondo y el color del texto:

  Hola caracola   ->    [su_hightlight background="#e8493a" color="#ffffff"] Hola caracola [/su_hightlight]

Crea columnas

Columnas de 3 filas:

[ su_row ] [ su_column size=»1/3″ ] Write [ su_row ][ su_column size=»1/3″ ] Write [ su_row ] [ su_column size=»1/3″ ] Write [ /su_column ][ /su_row ]

Crear columnas con el texto nunca fue tan fácil. Gracias al código corto de arriba podemos crear estas columnas en segundos. Copia el código breve y rellénalo con tu contenido. ¡Así de fácil! 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

 

[ su_row ] [ su_column size=»1/3″ ] Write [ /su_column ][ su_column size=»2/3″ ] Write [ /su_column] [ /su_row ]

O si prefieres este tipo de columnas, sólo tienes que redistribuirlas de forma diferente. En lugar de definir 3 su_column size=»1/3″ sólo definiremos 2 y la columna que queramos que ocupe el doble le colocaremos su_column size=»2/3″. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.»

Añade el espaciado que mejor te convenga en cada ocasión

Puedes hacerlo pulsando directamente sobre «Inserta Shortcode» en el código HTML directamente añadiendo:

[ su_spacer size="20" ]

Crear mapas

Periodista y SEO. Autora de éste blog donde comparto mis conocimientos y curiosidades sobre SEO y Márketing Digital. Actualmente, entrepeneur en The Conservas.

Noelia

Periodista y SEO. Autora de éste blog donde comparto mis conocimientos y curiosidades sobre SEO y Márketing Digital. Actualmente, entrepeneur en The Conservas.

Artículos recomendados

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *