🔐 Cómo Implementé un Bloc de Notas Flotante en WordPress

Navego por muchos blogs de temáticas distintas: desarrollo, diseño, marketing, ciencia, incluso recetas. Y me pasa algo muy común: cuando se me ocurre una idea, suelo guardar el artículo en favoritos con la intención de volver a él más tarde… pero muchas veces, esas ideas se pierden entre cientos de marcadores, notas dispersas, o el clásico montón de papelitos que terminan olvidados.

Ahí fue cuando se me ocurrió: ¿y si pudiera escribir mis propias anotaciones directamente dentro del artículo? Algo rápido, sencillo y que se quedara asociado a ese contenido específico. Y si además lo combinaba con el sistema de pinear artículos que también implementé recientemente, tendría una especie de centro de lectura personalizado: guardas un artículo para leer más tarde y puedes escribir tus propias ideas dentro de él.

Así nace este bloc de notas flotante, que hoy te quiero enseñar.

¿Qué hace este sistema de notas?

• Muestra un botón flotante llamado «Notas» en cada entrada individual.
• Al hacer clic, se despliega una caja lateral elegante y minimalista.
• El usuario puede escribir, editar y eliminar sus propias anotaciones.
• Cada artículo tiene su propio listado de notas independiente.
• Si el lector está registrado y logueado, las notas se guardan en la base de datos para siempre o hasta que las elimine.
• Si no está logueado, se almacenan en el navegador de forma temporal.
• El sistema incluye autoguardado automático sin botones ni recargas.

Beneficios para el usuario

Este bloc de notas mejora enormemente la experiencia de lectura:

• Organiza ideas mientras lee sin salir del contenido.
• Permite volver más tarde y seguir donde lo dejó.
• Motiva a los usuarios registrados a iniciar sesión (para conservar sus notas).
• Potencia la retención: si el lector puede anotar, se queda más tiempo.

Detalles importantes

• Cada nota está limitada a 100 caracteres para fomentar mensajes breves y claros. Esto se puede ajustar, pero en mi caso lo mantengo así para que el bloc siga siendo ligero y fácil de usar.
• El diseño es responsive: se adapta a móvil perfectamente.
• Scroll interno.
• Incluye un mensaje en la parte superior del bloc que varía según si el usuario está registrado o no.

Por ejemplo:

«Hola, Fran 👋 Tus notas se guardan aquí para siempre…»

O bien:

«Tus notas se guardan solo mientras dura esta sesión. Regístrate para conservarlas…»

Cómo se integra con el sistema de pinear artículos

Si ya tienes activo el sistema para que los usuarios puedan pinear artículos favoritos para leer después, este bloc de notas lo complementa perfectamente. El lector puede pinear un artículo y, al volver a él, encontrarse con sus propias anotaciones listas para seguir trabajando o repasando.

Esto transforma tu blog en una especie de espacio de trabajo personalizado, ideal para sitios de formación, tutoriales, desarrollo, código, recetas, etc.

Experiencia fluida y sin recargas

Todo está pensado para que el usuario no tenga que preocuparse de guardar nada manualmente. Cualquier cambio en las notas (escribir, borrar, editar) se guarda en tiempo real. Si está logueado, se actualiza en la base de datos; si no lo está, se guarda en el navegador.

Además, el sistema detecta si el usuario ya tiene notas previas y las muestra al cargar la entrada.

Seguridad de las notas personales

Aunque los usuarios pueden escribir cualquier cosa dentro del bloc de notas, el sistema está diseñado para evitar riesgos. Las notas se guardan de forma segura, limpiando todo el contenido antes de enviarlo a la base de datos. Esto significa que nadie puede ejecutar código malicioso desde estas notas ni afectar a otros usuarios o a tu sitio.

Tampoco se procesan etiquetas HTML ni scripts y todo está preparado para ofrecer una experiencia funcional, privada y segura.

¿Qué impacto tiene en la base de datos?

Una de las ventajas de haber creado este sistema con código personalizado es que las notas se guardan en una tabla independiente (wp_bloc_de_notas). Esto significa que no interfieren con las tablas principales de WordPress, y puedes gestionar o eliminar esa tabla fácilmente si algún día decides dejar de usar el sistema.

Pero… ¿qué pasa si tienes muchos usuarios y mucho contenido? Vamos con un ejemplo realista:

• Tienes 800 artículos publicados.
• Supongamos que 1.000 usuarios diferentes guardan 10 notas por artículo.

Eso generaría aproximadamente:

• 800.000 registros (1.000 usuarios × 10 notas × 800 artículos)

Cada nota se guarda como una entrada de texto (campo TEXT) en la base de datos. Si limitas las notas a 100 caracteres como en mi caso, estarías ocupando unos 100 bytes por nota, más el espacio del resto de campos (id, user_id, post_id, timestamps, índices…).

En total, todo ese volumen ocuparía alrededor de:

• 100 a 150 MB como máximo

Esto es menos que lo que ocupa, por ejemplo, una galería de imágenes optimizadas o incluso algunos plugins de estadísticas. Es decir, un impacto muy bajo para la cantidad de utilidad que ofrece.

Además, al estar todo en una tabla personalizada, puedes eliminarlo con total libertad, sin afectar otras partes del sitio. Es un sistema limpio, organizado y controlable.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. También puedes crear tu propio plugin con unos simples pasos.

Conclusión

Gracias a este bloc de notas, he convertido cada entrada del blog en una especie de mini herramienta interactiva, donde el lector puede involucrarse activamente en el contenido. No se limita a leer: anota, guarda, vuelve, repasa.

Y todo ello sin plugins adicionales, solo con un poco de código personalizado. Si tienes un blog donde el contenido es valioso y quieres que tus lectores se queden, vuelvan y construyan una relación real con tus artículos, te animo a implementar algo parecido.

No subestimes lo poderosa que puede ser una simple funcionalidad de notas personales en un sitio web.

¡Espera un momento! No te vayas aún. ¿Quieres transformar los comentarios de tus artículos en una especie de foro individual? Click Aquí.