⚠ ¡Alto ahí, intrépido explorador de código! En este mi primer post "Shortcodes en WordPress", de mi nueva categoría: 🔥¡DIYweb!🔥os tengo que dejar un AVISO SERIO:
Este post NO es para gente que quiere "probar a ver qué pasa". Si no tienes claro lo que es functions.php, nociones básicas de programación web o qué demonios es un child theme, ya tienes tu respuesta: cierra esta pestaña y huye antes de hacer explotar tu web. 💥
Yo uso este código en mi functions.php dentro de un child theme, porque sé lo que hago (bueno, casi siempre 😏). Si tú no tienes claro qué significa eso, entonces este post NO es para ti.
Advertencia final: No me hago responsable de instalaciones de WordPress que entren en coma por copy-paste irresponsable. ¿Aún sigues aquí? Vale, entonces asumo que sabes lo que haces. Sigue leyendo bajo tu propia responsabilidad. 🔥
Imagina que WordPress es como un inmenso castillo lleno de pasadizos, habitaciones secretas y puertas bloqueadas. Los shortcodes son las llaves maestras que te permiten acceder a funciones ocultas sin desmontar la estructura ni invocar al soporte técnico en un ataque de desesperación.
Con solo escribir un código entre [corchetes], puedes hacer que WordPress haga trucos de magia: resaltar texto, insertar botones personalizados, incrustar contenido interactivo e incluso proteger ciertas partes de tu web del clásico "copiar y pegar". Todo sin tocar una sola línea de código en el núcleo del sitio.
Pero aquí no acaba la cosa. No solo te voy a explicar qué son los shortcodes, sino que también te voy a dar algunos listos para usar. ¿Quieres añadir efectos visuales sin complicarte la vida? ¿Necesitas formatear fragmentos de texto con estilo profesional? ¿Te gustaría habilitar zonas copiables en una web protegida? Sigue leyendo, porque este artículo está lleno de trucos que harán que tu web pase de "estándar" a "nivel hacker" sin perder la cabeza en el intento.
¿Qué son los shortcodes y por qué deberías usarlos?
Los shortcodes en WordPress son como los comandos de voz en un asistente virtual: le dices lo que quieres y el sistema lo ejecuta sin preguntas ni quejas. Son pequeños fragmentos de código encerrados entre [corchetes], que WordPress reconoce e interpreta para mostrar funciones avanzadas sin que tengas que programar nada. Se usan así:
1 [mi_shortcode]A saber qué hace esto...[/mi_shortcode]
Para que se entienda fácil: si WordPress fuera una cafetería, escribir un shortcode es como decir "ponme un espresso con leche de avena", y no tener que explicar el proceso de extracción del café. Ahorras tiempo, esfuerzo y el resultado es el mismo: algo que funciona sin que tengas que preocuparte por lo que hay detrás.
¿Por qué deberías usarlos? Porque hacen tu vida más fácil y tu web más potente. Con ellos puedes:
✅ Insertar funciones avanzadas en segundos, sin tocar código.
✅ Personalizar la apariencia y estructura de tu web sin esfuerzo.
✅ Aplicarlos en cualquier parte: Entradas, páginas, widgets y hasta en plantillas de temas.
✅ Evitar plugins innecesarios que solo añaden peso y ralentizan tu web.
✅ Personalizar funciones a tu gusto, sin depender de las limitaciones de un plugin.
✅ Facilitar la edición para usuarios no técnicos, evitando que toquen código y rompan algo.
✅ Reutilizar código sin escribirlo mil veces, ahorrando tiempo y manteniendo la coherencia.
En resumen, los shortcodes son atajos mágicos. El primer shortcode que creé hizo que mi web mostrara memes de gatos cada viernes. WordPress no lo aprobó, pero mis visitantes sí. ¿No te lo crees?
1 function gatos_viernes_shortcode() {
2 // Obtener el día actual (en formato textual, tipo "Friday")
3 $hoy = date_i18n('l');
4 // Solo mostrar contenido si es viernes
5 if ($hoy === 'Friday') {
6 return '<img style="max-width: 100%;height: auto" src="https://nomeacuerdoquewebfueporquefuehacesiglos.com/gatin/dice/Feliz%20Viernes!" alt="Gato feliz porque es viernes" />';
7 } else {
8 return 'Hoy no es viernes, pero los gatos siguen dominando el mundo.';
9 }
10 }
11 add_shortcode('gatos_viernes', 'gatos_viernes_shortcode');
Pero sigamos, que me despisto, hay dos formas de usarlos:
1️⃣ La ruta del valiente: Añadirlos manualmente en functions.php, el archivo de funciones de WordPress (⚠️ recomendado solo si tienes backups y nervios de acero).
2️⃣ La ruta segura: Usar un plugin como Code Snippets, que te permite gestionarlos sin arriesgarte a romper la web. (Porque todos sabemos lo que pasa cuando tocas algo que no debes en el código de WordPress… y no quieres vivir ese drama). Yo lo uso cuando quiero probar código sin arriesgarme a una pantalla blanca del terror. Lo bueno: si la lías, solo desactivas el snippet y listo.
Ahora que ya tienes claro qué son y por qué deberías usarlos (no para los memes, por favor, eran otros tiempos…), vamos a la acción con algunos ejemplos que harán que te enamores de los shortcodes.
Creando shortcodes útiles para tu web
Ahora viene lo bueno. Hasta ahora hemos hablado de qué son los shortcodes y por qué deberías usarlos, pero lo realmente divertido es verlos en acción.
Así que, bienvenido al buffet libre de shortcodes: puedes copiar y pegar estos fragmentos en tu web sin miedo a romper nada (bueno, casi sin miedo… ya sabes, las copias de seguridad son tu mejor amigo).
Vamos a ver cómo hacer que WordPress haga trucos interesantes con solo un par de corchetes mágicos.
Formatear versos o fragmentos especiales
Si quieres que una parte de tu texto destaque, usa este shortcode:
1 function formato_poema($atts, $content = null) {
2 return '
3 <div style="font-style: italic;border-left: 4px solid #333;padding-left: 10px">' . $content . '</div>
4 ';
5 }
6 add_shortcode('poema', 'formato_poema');
📌 Uso:
1 [poema]Estos versos se verán en cursiva y con borde elegante[/poema]
Resaltar texto con fondo
Si te gusta publicar poesía o citas con un diseño especial:
1 function resaltar_texto($atts, $content = null) {
2 return '<span style="background-color: yellow;padding: 2px">' . $content . '</span>';
3 }
4 add_shortcode('resaltar', 'resaltar_texto');
📌 Uso:
1 [resaltar]Texto que va con fondo amarillo[/resaltar]
Permitir copiar ciertos textos mientras bloqueas el resto
Si has invertido horas en escribir contenido original y de calidad, lo último que quieres es que algún oportunista venga, seleccione tu texto y lo copie en su web como si lo hubiera escrito en plena inspiración divina.
¿La solución? Un pequeño truco con CSS y un shortcode que protege tu contenido de los clásicos “copiar y pegar”. Lo tienes en mi artículo "Cómo Evitar que te Copien Contenido en Blogger y WordPress". Pero espera, que esto tiene una vuelta de tuerca interesante: también podemos crear zonas copiables dentro de una página protegida.
Es decir, tú decides qué parte del contenido se puede copiar y cuál no, como un maestro del control absoluto. Perfecto para permitir la copia de fragmentos específicos (citas, referencias o instrucciones) mientras mantienes el resto blindado.
Vamos a ver cómo hacerlo sin tener que recurrir a hechicería oscura (o al soporte técnico de emergencia).
Primero, el shortcode:
1 function freecopy_text($atts, $content = null) {
2 return '
3 <div class="freecopy">' . $content . '</div>
4 ';
5 }
6 add_shortcode('freecopy', 'freecopy_text');
Ahora, agrega este CSS para que funcione:
1 body {
2 user-select: none; /* Bloquea la selección en toda la web */
3 }
4 .freecopy {
5 user-select: text !important; /* Permite copiar solo dentro de esta clase */
6 }
📌 Uso:
1 [freecopy]Este fragmento puede copiarse sin restricciones.[/freecopy]
⚠ Atención: Estas técnicas de anti-copy se pueden saltar por alguien con conocimientos, pero al menos no lo pondremos tan fácil. Y con el freecopy, podremos decidir qué se puede copiar y qué no, aunque el resto de nuestro contenido esté bloqueado.
📌 Dónde meter el CSS sin hacer un estropicio
Tienes el código, tienes la idea… pero ¿dónde demonios lo metes sin que tu web explote? Pues depende de tu setup en WordPress. Te advierto: Si metes el CSS donde no debes, el karma te lo devolverá con una web fantasma. Asegúrate de que el código no desaparezca en la próxima actualización.
Yo he probado todas estas opciones y, créeme, si quieres evitar dolores de cabeza, la opción de CSS Adicional es la más sencilla. Te coges tu bloc de notas, te creas tu archivo CSS para tu child theme y lo subes. Y ahí trasteas.
Pero bueno, aquí van todas las opciones para no acabar pidiendo auxilio en soporte técnico:
✅ Opción 1: Child Theme (La forma PRO y recomendada)
Si tienes un child theme, lo mejor es pegar el código en style.css.
Solo abre el archivo y, al final, añade esto:
1 body {
2 user-select: none; /* Bloquea la selección en toda la web */
3 }
4 .freecopy {
5 user-select: text !important; /* Permite copiar solo dentro de esta clase */
6 }
🚨 Si no usas un child theme, NO toques style.css del tema principal, porque en la siguiente actualización BOOM, adiós a todo tu código.
✅ Opción 2: CSS Adicional en WordPress (Para los que quieren ir a lo fácil y rápido)
Si usas un tema normalito como Astra, GeneratePress, OceanWP, etc., ve a:
🛠 Apariencia > Personalizar > CSS Adicional
Ahí pegas el código y guardas. Fácil, rápido y sin líos.
🚀 Cuándo usarlo: Si quieres una solución rápida sin meterte en archivos.
✅ Opción 3: Si usas Divi, Elementor u otro theme builder
Si eres del club de los maquetadores visuales, también puedes meter el CSS en su configuración:
🔹 Divi: Divi > Opciones del tema > CSS Personalizado
🔹 Elementor Pro: Apariencia > Personalizar > CSS Adicional o usa un widget HTML y pon el CSS dentro de <style> en la misma página.
📌 Ideal para: Webs que dependen de estos constructores y no quieren tocar archivos.
✅ Opción 4: Un plugin de CSS personalizado (Para quienes no quieren tocar ni un archivo)
Si prefieres tener todo el CSS separado, puedes usar un plugin como:
🔸 Simple Custom CSS
🔸 WP Add Custom CSS
Solo instalas, pegas tu código y listo. Sin miedo a perderlo en futuras actualizaciones.
✅ Opción 5: Inyectarlo con código en functions.php (Nivel Hacker)
Si te gusta meter mano al código (y vives al límite), puedes inyectar el CSS con PHP en functions.php de tu child theme:
1 function agregar_css_freecopy() {
2 echo '
3
4 body { user-select: none; }
5 .freecopy { user-select: text !important; }
6
7 ';
8 }
9 add_action('wp_head', 'agregar_css_freecopy');
🚨 Peligro: Un error aquí y tu web se va de vacaciones sin aviso. Si no sabes lo que haces, ni lo intentes.
🔥 Conclusión: No metas el CSS donde no debes
✅ ¿No quieres líos? → CSS Adicional en Apariencia > Personalizar.
✅ ¿Quieres algo permanente? → Style.css en tu child theme.
✅ ¿Usas Divi o Elementor? → Mete el código en sus opciones de personalización.
✅ ¿Te gusta complicarte la vida? → Functions.php con wp_head.
Siguiendo estas opciones, te ahorras sustos, lágrimas y visitas forzadas a soporte técnico.
Ahora quiero dejar un agradecimiento y abrazo a mi compañero Ric, de Socialbytes… que me hizo pensarme lo de las infografías… Lo que no consigas tú, amigo, no lo consigue ni una IA entrenada para hacerme cambiar de opinión. Me rindo, las infografías molan.
Cómo gestionar shortcodes sin tocar functions.php
¿Te tiemblan las manos al pensar en el functions.php? Code Snippets es tu chaleco antibombas: instálalo, pega el código y ¡BOOM! Tus shortcodes sobrevivirán a cualquier actualización como campeones.
Piensa en este plugin como un campo de pruebas: puedes añadir, probar y modificar shortcodes sin el riesgo de que un error en el código convierta tu web en una pantalla blanca de la muerte. Y lo mejor, si algo sale mal, solo desactivas el snippet y sigues con tu vida sin tener que hacer malabares con el FTP.
Cómo usar Code Snippets sin estrés:
✅ Paso 1: Instala y activa el plugin desde el repositorio de WordPress.
✅ Paso 2: Ve a Snippets → Añadir nuevo (piensa en esto como abrir un nuevo cuaderno de hechizos).
✅ Paso 3: Pega el código de tu shortcode en la caja de edición.
✅ Paso 4: Guarda y actívalo.
¿Lo mejor de todo? No importa cuántas veces actualices tu tema, los shortcodes seguirán ahí, funcionando sin que tengas que volver a añadirlos. Es como tener un seguro de vida para tus funciones personalizadas.
Crear un shortcode para mostrar código con formato
Si te dedicas a compartir tutoriales, guías técnicas o simplemente quieres presumir de tus habilidades en WordPress, seguro que te has topado con un problema clásico: el código dentro de tus posts parece un caos indescifrable.
Sin el formato adecuado, tus lectores se sentirán como arqueólogos intentando descifrar jeroglíficos en piedra. Para evitar eso, puedes usar este shortcode, que se encarga de darle un formato limpio, legible y profesional a cualquier fragmento de código que publiques.
¿Por qué usar un shortcode en lugar de meter código directamente?
- Evitas que WordPress interprete accidentalmente el código y rompa tu página (sí, pasa más a menudo de lo que crees… yo ya tengo línea directa con el soporte técnico de varios hostings, y no por gusto).
- Aseguras que los lectores vean el código en un formato claro y atractivo.
- Se mantiene coherencia en el estilo de todos los fragmentos de código de tu web.
¿Quieres ir un paso más allá? Si lo tuyo es el estilo, puedes integrar Prism.js, una biblioteca que añade resaltado de sintaxis y hace que tu código luzca como salido de una terminal de un hacker profesional. (O al menos lo parecerá, nadie tiene por qué saber la verdad.)
Veamos cómo se hace…
1 function mostrar_codigo($atts, $content = null) {
2 return '
3 <pre><code>' . esc_html($content) . '</code></pre>
4 ';
5 }
6 add_shortcode('codigo', 'mostrar_codigo');
📌 Uso:
[codigo]
Hello world!;
[/codigo]
Lo dicho, si quieres mejorar aún más la visualización, puedes integrar Prism.js para el resaltado de sintaxis. O bien, espera mi próxima entrega donde te daré más shortcodes, más personalización, más trucos y más humor made in IAdicto™ 😏
Conclusión
En resumen, los shortcodes en WordPress son como pequeños hechizos mágicos: simples de usar, increíblemente útiles y capaces de transformar tu web sin que tengas que venderle tu alma al código.
Con ellos puedes optimizar tu contenido, mejorar la experiencia de usuario y añadir funciones avanzadas sin tocar una sola línea del núcleo de WordPress. Y lo mejor: puedes hacerlo todo sin miedo a que una mala edición en functions.php convierta tu web en un bonito error 500.
⚠️ Pero antes de que te lances a experimentar como un científico loco, una advertencia importante:
- Haz siempre una copia de seguridad antes de modificar archivos como
functions.php. (Confía en mí, te ahorrarás un susto innecesario). - Si no tienes experiencia con código, usa Code Snippets. Más vale prevenir que pasarse la noche restaurando una web caída.
- Si algo sale mal, no entres en pánico. Recuerda: casi todo en WordPress tiene solución (a menos que borres accidentalmente toda la base de datos, en cuyo caso… mejor ni hablemos de eso 😅).
¿Tienes algún shortcode favorito que usas en tu web y crees que merece estar en este artículo? Déjamelo en los comentarios y lo añadimos a la colección. Porque compartir conocimiento es tan importante como escribir buen código.
BONUS PARA NINJAS: Shortcodes al Siguiente Nivel
Si has llegado hasta aquí y no te has asustado con los códigos, felicidades. Estás listo para subir de nivel y desbloquear técnicas avanzadas. Aquí van algunos trucos para convertirte en un maestro de los shortcodes en WordPress.
1️⃣ Shortcodes con parámetros personalizados
Hasta ahora, los shortcodes que hemos visto eran estáticos, pero ¿qué pasa si quieres personalizar los valores sin modificar el código? Puedes hacer que un shortcode acepte parámetros y se adapte según lo que necesites.
Ejemplo: Crear un botón con color, texto y enlace personalizados
1 // 🚀 ¡Bienvenidos al código más estiloso del barrio! 🚀
2 // Este shortcode crea un botón con estilo porque... ¿quién quiere enlaces aburridos? 🤷♂️
3 function boton_personalizado($atts) {
4 // 📌 Establecemos los atributos por defecto
5 $atts = shortcode_atts(
6 array(
7 'color' => 'blue', // 🎨 Azul por defecto, porque somos clásicos... pero se puede cambiar 😎
8 'texto' => 'Haz clic aquí', // 🔘 Si la gente no sabe qué hacer con un botón, esto les ayuda 🤭
9 'enlace' => '#' // 🔗 Porque un botón sin destino es como un café sin cafeína: sin sentido.
10 ),
11 $atts
12 );
13 // 🏗️ Armamos la estructura del botón con el glamour que se merece
14 return '<a style=") . ';color: white;padding: 10px 20px;display: inline-block;text-decoration: none;border-radius: 5px" href="' . esc_url($atts['enlace']) . '">' . esc_html($atts['texto']) . '</a>';
15 }
16 // 🎉 ¡Magia! Registramos el shortcode para que WordPress lo reconozca como el botón más cool del universo 🌌
17 add_shortcode('boton', 'boton_personalizado');
18 // 🛠️ Ahora puedes usar [boton color="red" texto="¡Leer Maldades IAdicto™!" enlace="https://example.com"]
19 // para crear un botón con personalidad propia. ¡A darle caña! 🔥
⚠ Atención: Comprobad que el color sea un valor CSS válido (como red, #ff0000, rgb(255,0,0), etc.). Nada de inventos raros, que luego el navegador entra en pánico y se niega a colaborar. 😏
📌 Uso:
1 [boton color="red" texto="¡Leer Maldades IAdicto™!" enlace="https://iadictodigital.com"]
✅ ¿Por qué es útil?
- Puedes reutilizarlo en diferentes partes de tu web sin escribir código nuevo.
- Personalizas cada instancia del shortcode con distintos colores, enlaces y textos.
- Es dinámico y flexible para diseños avanzados.
2️⃣ Shortcodes condicionales según el usuario
📌 ¿Quieres mostrar contenido solo a usuarios registrados? Puedes hacer que un shortcode muestre un mensaje distinto si el visitante está logueado o no.
1 function contenido_exclusivo() {
2 if (is_user_logged_in()) {
3 return '
4 Bienvenido de nuevo, ninja. Aquí tienes contenido exclusivo para miembros.
5 ';
6 } else {
7 return '
8 Este contenido es solo para usuarios registrados. <a href="/wp-login.php">Inicia sesión</a> para verlo.
9 ';
10 }
11 }
12 add_shortcode('privado', 'contenido_exclusivo');
📌 Uso:
1 [privado]
2 Visible solo para registrados o para los members UltraVipGuays
3 [/privado]
✅ ¿Por qué es útil?
- Perfecto para sitios de membresía o cursos online.
- Evita usar plugins pesados si solo necesitas restricciones básicas.
- Puedes adaptarlo para mostrar mensajes personalizados.
⚠ Atención, agentes de seguridad web: Este shortcode es sencillo y útil, pero que no os engañe su simplicidad. Solo protege el contenido en la vista normal. Si alguien se pone en modo espía del código fuente, no encontrará el contenido… pero ojo con no dejar info sensible en JavaScript o alguna otra trampa mortal para filtraciones. 🕵️♂️💻
💡 Mejora nivel PRO: Es posible que tengas una web con un modelo membership site, en plan Secta Siniestra con Ultimate Member (este me encanta, pero pesa mucho, igual que casi todos), MemberPress, Restrict Content Pro, Paid Memberships Pro, entre otros. Bueno, pues puedes personalizarlo según roles, para que cada usuario vea contenido exclusivo según su nivel de acceso. Así evitarás que los reclutas tengan acceso a los secretos del alto mando. 🔒
3️⃣ Un shortcode que muestra la fecha actual (pero con estilo)
📌 Si necesitas mostrar la fecha actual en diferentes partes de tu web sin actualizarla manualmente, este shortcode lo hace por ti:
1 function fecha_actual($atts) {
2 // 🛑 Evitamos que el usuario haga explotar la web con un formato raro
3 // Si no mete nada, le ponemos un formato por defecto bonito y elegante
4 $atts = shortcode_atts(
5 array('formato' => 'j \d\e F, Y'), // Resultado típico: "12 de marzo, 2025"
6 $atts,
7 'fecha'
8 );
9 // 🧐 Filtramos la entrada para evitar que algún iluminado meta cosas raras en el formato de fecha
10 // (Si esperabas poder meter un script malicioso aquí, vas a tener que buscar otro sitio)
11 $formato = preg_replace('/[^a-zA-Z0-9\-\s\\\]/', '', $atts['formato']);
12 // 🎨 Le devolvemos la fecha con una clase CSS, porque meter estilos inline en 2025 es como llevar pantalones de campana con hombreras
13 return '<span class="fecha-shortcode">' . date_i18n($formato) . '</span>';
14 }
15 // 📢 Aviso a WordPress: "Eh, WordPress, aquí tienes un shortcode nuevo, úsalo bien"
16 add_shortcode('fecha', 'fecha_actual');
📌 Uso:
1 [fecha formato="d/m/Y"] → 12/03/2025
2 [fecha formato="F j, Y"] → Marzo 12, 2025
3 [fecha formato="l, d \d\e F Y"] → Martes, 12 de marzo de 2025
🖌 Personaliza el Estilo Como Dios Manda
Si quieres que la fecha tenga color y un poco de personalidad, no hagas guarradas metiendo estilos inline. Pon esto en CSS Adicional o en style.css de tu child theme:
1 .fecha-shortcode {
2 font-weight: bold;
3 color: #ff4500; /* Cambia este color si quieres que la fecha no parezca un semáforo en rojo */
4 }
✅ ¿Por qué es útil?
✔ Ideal para blogs con actualizaciones periódicas. No más fechas caducadas que te hagan parecer que abandonaste la web hace siglos.
✔ Formato personalizable (d/m/Y, F j, Y, etc.), para que lo ajustes a tu gusto sin pelearte con WordPress.
✔ Le da un toque dinámico a los posts sin necesidad de editar manualmente cada entrada como si estuvieras en 1998.
⚠ Nota Final Para Que No Rompas Nada
✔ Este código no explota tu web. Pero si lo editas sin saber lo que haces, ya es tu problema.
✔ Si no ves cambios, limpia la caché. Y si sigue sin funcionar, mira a ver si has metido el código en una tostadora en vez de en WordPress.
✔ No metas este shortcode en la bio de Tinder, porque no hay nada menos atractivo que un [fecha] mal formateado.
4️⃣ Shortcodes anidados (cuando un shortcode llama a otro)
📌 Esto ya es nivel ultra ninja. Si alguna vez has querido usar un shortcode dentro de otro, esta técnica es para ti.
Por defecto, WordPress no procesa shortcodes dentro de otros, pero puedes hacer que eso suceda con do_shortcode().
📌 Ejemplo: Crear un shortcode que muestre otro shortcode dentro:
1 // 🎩 BIENVENIDO AL SHORTCODE QUE LO CONTIENE TODO 🎩
2 // Esto es como el tupperware del SEO: mete lo que quieras dentro y WordPress se encarga del resto. 🥡✨
3 function contenedor_dinamico($atts, $content = null) {
4 // 📦 Envolvemos el contenido en un elegante marco punteado,
5 // porque lo cutre no es una opción en este código. 😎
6 return '
7 <div style="border: 2px dashed #444;padding: 10px;margin: 10px">' .
8 do_shortcode($content) . // 🛠️ Le decimos a WordPress: "Procesa esto como si fuera el Santo Grial de los shortcodes." 🏆
9 '</div>
10 ';
11 }
12 // 🏗️ REGISTRAMOS EL SHORTCODE PARA QUE WORDPRESS LO RECONOZCA 🏗️
13 // Ahora, cuando alguien use [contenedor] en su post, WordPress dirá: "¡Ah sí, esto lo controlo yo!" 🦾
14 add_shortcode('contenedor', 'contenedor_dinamico');
15 // 🛠️ USO PRÁCTICO:
16 // 📌 [contenedor] ¡Aquí dentro puedes meter cualquier shortcode que quieras! [boton texto="Pulsa sin miedo" enlace="https://iadictodigital.com"] [/contenedor]
17 // ¿Shortcodes dentro de shortcodes? Sí, WordPress permite estas locuras y nosotros las aprovechamos. 🚀
18 // 🧙♂️ CONSEJO MÁGICO:
19 // Si alguna vez usas este contenedor sin contenido, no te preocupes... no explotará el universo, pero tampoco hará nada útil. 💥
📌 Uso:
1 [contenedor]Aquí dentro puedes meter [boton texto="Un botón ninja" enlace="https://iadictodigital.com"] y otros shortcodes.[/contenedor]
✅ ¿Por qué es útil?
- Te permite combinar múltiples shortcodes sin problemas (a priori…)
- Ideal para estructurar contenido en bloques reutilizables.
- Te da más control sobre la personalización y el diseño.
⚠ ¡Cuidado, arquitectos del shortcode! Este do_shortcode($content) se lo traga todo sin preguntar, incluyendo lo que no debería estar ahí. Si tu web tiene varios editores metiendo mano, convendría filtrar el $content con wp_kses_post().
💡 Pero ojo: Esto puede romper shortcodes más complejos, así que antes de lanzarte a blindar el código, prueba bien que todo sigue funcionando. No querrás que un inocente poema termine censurado como si fuera el manual para invocar a Cthulhu, los memes prohibidos de la Deep Web o la lista de la compra de Chuck Norris. 😱💀
📌 Conclusión del Bonus Ninja 🥷
Si has llegado hasta aquí, felicidades. Ahora no solo usas shortcodes, sino que los personalizas, adaptas y combinas para hacer cosas que la mayoría de usuarios de WordPress ni siquiera sabe que existen.
⚠ Advertencias cruciales para no destrozar tu WordPress con shortcodes y funciones
Crear shortcodes es como jugar con fuego: bien usado, ilumina tu web; mal usado, puede reducirla a cenizas digitales. Así que antes de lanzarte a meter código a lo loco, ten en cuenta estas reglas de supervivencia. 🛑🔥
1️⃣ No conviertas tu functions.php en una bomba de relojería
🛑 Cuidado con functions.php. Una coma mal puesta y… ¡BOOM! Pantalla Blanca de la Muerte™, esa criatura mitológica que aparece justo cuando no hiciste copia de seguridad. 🤡
Lo ideal es usar un child theme desde el minuto cero (porque romper el tema padre no es buena idea) y apoyarte en Code Snippets para evitar que WordPress entre en modo autodestrucción, especialmente cuando el tema se actualiza y decide rebelarse contra ti. 😅🔥
🔄 Compatibilidad PHP: No vivas en el pasado. Asegúrate de que tu hosting está en PHP 7.4 o superior (idealmente 8.x). Con versiones antiguas, los errores pueden caer como meteoritos sobre tu web. ☄ Comprobar versiones PHP
2️⃣ Seguridad: No dejes puertas abiertas a hackers y editores traviesos
🔑 Limita quién puede usar shortcodes. No dejes que cualquiera con permisos pueda meter código. Solo Administradores y Editores, salvo que quieras una fiesta de inyecciones de HTML o JS.
🚨 Sanitiza y valida los datos. Todo lo que entre y salga de un shortcode debe pasar por filtros de seguridad como:
✔ esc_html()
✔ esc_attr()
✔ esc_url()
✔ wp_kses_post()
Si un usuario con permisos dudosos mete un shortcode con código extraño, puede romperte la web o peor… hacer cosas que ni quieres imaginar. 😬
3️⃣ El bloqueo de copy no es magia (ni infalible)
📌 Bloquear el copy-paste no es 100% seguro. Siempre habrá maneras de saltárselo, así que no prometas lo imposible. Si alguien de verdad quiere copiar tu contenido, lo hará. Mejor centrarse en otras estrategias de protección.
4️⃣ Estilos y compatibilidades: no hagas que tu web se vea como el monstruo de Frankenstein
🎨 No todos los themes respetan bordes, fuentes o colores. Si algo no se ve bien, toca refinar el CSS. No des por hecho que todos los estilos se aplicarán como esperas.
🔍 Shortcodes nuevos = Errores posibles. Si algo empieza a fallar tras instalar un shortcode, desactiva Code Snippets o borra el fragmento y revisa los logs antes de entrar en pánico.
5️⃣ Copias de seguridad: Tu salvavidas digital
💾 Siempre, SIEMPRE haz una copia de seguridad antes de meter código nuevo. No te fíes de tu buena suerte ni de la frase "qué es lo peor que puede pasar". La respuesta suele ser "más de lo que imaginas".
🔥 Conclusión: Usa tus shortcodes con cabeza y sin miedo
✔ Protege inputs y outputs como si fueran datos bancarios.
✔ Code Snippets o Child Theme SIEMPRE… functions.php mejor ni tocarlo (aunque yo lo tenga más parcheado que la relación de Ross y Rachel en Friends).
✔ Copia de seguridad antes de cualquier experimento.
✔ Evita colisiones con nombres de funciones genéricos. Algo como mostrar_codigo() es muy común, mejor usa prefijoEspecifico_mostrar_codigo().
✔ Prueba compatibilidad antes de liar un desastre. Plugins, PHP, theme… todo tiene que ir en armonía.
Siguiendo estas reglas, podrás fardar de una web potente sin entrar en crisis cada vez que añades un [shortcode]. ✨
¿Tienes un shortcode que hace llorar de envidia a los plugins premium? ¡Compártelo y lo convertiremos en leyenda (con créditos y un chiste malo incluido)!
Únete a IAdicto Digital
¿Te apasionan la escritura, la IA, el SEO y los trucos raros para mejorar tu web? Suscríbete y recibe en tu bandeja dosis de creatividad y caos digital con cada nuevo artículo que se publique en IAdictoTM.
Suscribirme ahora¿Te ha gustado esta entrada?
Hola Miguel, he estado leyendo tu manual para utilización de shortcodes, una guía súper útil para aquellos que saben del tema y me he quedado acomplejado, sabes un montón de programación en WordPress.
En mi caso, yo no me atrevo a tanto, salvo cambiar permisos y alguna modificación que tuve que hace antaño, nunca me he puesto a hacer estas cosas, mi mantra, hoy día, no te compliques y ves a lo funcional, que es escribir y maquetar mis artículos.
En resumen, si algún día se me ocurre cambiar algo, ya sé a quien tengo que preguntar.
Gracias por la mención sobre las infografías, la verdad es que le dan algo a los artículos, sobre todo, para aquellas personas que escanean en lugar de leer.
Por otra parte, me gustaría aprender más sobre GA4, por ejemplo, a ver si te animas y nos haces un artículo para torpes, desde que cambiaron, no me aclaro con ello, antes me manejaba mejor con ello, ahora, soy nulo 👍
¡Saludos compañero! 😂
¡Hola Ric!
Me ha encantado tu comentario, de verdad. Pero nada de acomplejarse, como siempre te he dicho, lo que aportas en Socialbytes con tu conocimiento y experiencia tiene un valor increíble. Cada uno tenemos nuestros puntos fuertes y aportamos de distinta manera.
Sobre mi recorrido en esto del diseño y la programación, llevo años trabajando con webs y tiendas online. Monté una empresa de desarrollo web llamada Qumm en 2015 ( para entonces ya había creado blogs y webs de manera no profesional) y desde entonces diseñé y programé muchos proyectos hasta hace unos 5 años. Luego hice alguna más (la última la de https://nancogame.com), y al final he podido ponerme con mi propio rincón digital solo para mí en IAdicto.
Y sobre GA4… totalmente contigo. El cambio ha sido demasiado radical y la interfaz nada intuitiva. Han desmontado todo lo que antes era claro y fácil de entender en Universal Analytics, y ahora casi todo el mundo se siente perdido. Las métricas han cambiado, las conversiones hay que configurarlas a mano y los informes predefinidos brillan por su ausencia. No sé si Google esperaba que nos volviéramos analistas de datos de la noche a la mañana, pero lo han complicado innecesariamente. Así que sí, una buena guía hace falta, y si puedo explicarlo con claridad y algo de humor, mejor. Me lo apunto e iré documentándome, que una cosa es manejarse más o menos, y otra hacer una guía que sea útil y práctica. A ver si la semana que viene puedo sacarla y mientras voy trabajando en la estructura, me parece una gran idea.
¡Un abrazo, compañero! ¡Y mil gracias por pasarte!
Esto es una maravilla.
Por favor, escribe más manuales de este tipo. Tengo conocimientos básicos de programación frontend y la verdad que desde que uso WordPress tengo ganas de aprender más de PHP y no sé ni por dónde empezar.
Me encanta ver este manual tan sencillo a la vez que super bien explicado y de forma muy amena. Muchas felicidades. Si escribes más, aquí te seguirá tu fan de manuales number one.
¡Hola, Cristina! Jo, me has alegrado el día. La verdad es que estos manuales nacieron precisamente para personas como tú: con ganas de cacharrear con WordPress pero sin morir en el intento. Nada me hace más feliz que saber que no solo te ha resultado útil, sino que encima te lo has pasado bien leyéndolo.
Quédate cerca porque vienen más cositas en camino para la categoría "DIYweb". Y por supuesto, me has dado una motivación extra para seguir explicando las cosas con humor, cariño y algún aviso apocalíptico para evitar tragedias digitales (que nunca sobran, los avisos… no las tragedias 😂).
¡Gracias por ser la fan number one oficial de mis manuales! Un abrazo enorme.
Como siempre no puedo decir más qué felicidades por el artículo, he puesto en práctica el shortcode para no copiar contenido y funciona de 10, un día me tienes que contar donde haces esas imágenes tan espectaculares. Saludos, compañero
¡Hola Luis!
Me alegra un montón saber que el shortcode te ha servido y que lo tienes funcionando como un reloj. A veces, en este mundillo de WordPress, un buen código bien implementado es la diferencia entre un "esto va fino" y un "¿por qué he tocado nada? 😅".
Sobre las imágenes… ¡ah, el misterio! Jajaja. Digamos que hay algo de magia digital y muchísimo de ensayo y error (2 años, que se dice pronto). Pero también tengo pensado escribir un artículo con prompts de todos los colores y formatos para lograr hacer imágenes de todo tipo. Lo tengo en la lista de TODO, pero llegará.
¡Un abrazo, compañero! Y gracias por pasarte.