Cómo crear una To-Do List interactiva en WordPress usando JavaScript: Guía para principiantes
En el desarrollo web moderno, saber cómo integrar JavaScript dentro de sitios WordPress es una habilidad esencial, especialmente para añadir funcionalidades interactivas que mejoren la experiencia del usuario.
En este tutorial práctico, aprenderás a construir una To-Do List desde cero, completamente funcional y fácil de integrar en tu sitio WordPress. Este proyecto es ideal para principiantes que quieren entender la interacción entre PHP, JavaScript y HTML en un entorno real.
Al finalizar, tendrás un plugin sencillo que podrás activar en cualquier instalación de WordPress para gestionar tareas diarias de forma dinámica.
Proyecto completo que vas a crear
Construiremos un plugin de WordPress que añade una To-Do List interactiva utilizando JavaScript para manejar la lógica en el navegador y PHP para integrar el plugin en WordPress.
La aplicación permitirá a los usuarios añadir, marcar como completadas y eliminar tareas, con una interfaz limpia y sencilla.
Este proyecto te enseñará a:
- Crear un plugin básico en WordPress.
- Encolar scripts JavaScript y estilos CSS dentro del plugin.
- Manipular el DOM con JavaScript para gestionar tareas en tiempo real.
- Guardar tareas temporalmente en el almacenamiento local del navegador para persistencia básica.
Es un proyecto ideal para principiantes que desean entender la integración de JavaScript en WordPress sin complicaciones.
Estructura de archivos
todo-list-plugin/todo-list-plugin.php
todo-list-plugin/assets/css/style.css
todo-list-plugin/assets/js/main.js
Cómo crear y probar el proyecto
- Crea una carpeta llamada 'todo-list-plugin' dentro de wp-content/plugins/ de tu instalación WordPress.
- Dentro de esa carpeta, crea los archivos 'todo-list-plugin.php', 'assets/css/style.css' y 'assets/js/main.js'.
- Copia y pega el código proporcionado en cada archivo según corresponda.
- En el panel de administración de WordPress, navega a Plugins y activa 'To-Do List Plugin'.
- Crea una página o entrada y añade el shortcode [todo_list] para mostrar la lista de tareas.
- Abre la página en el navegador para probar y agregar tareas.
¿Qué es un plugin en WordPress y cómo funciona este proyecto?
Un plugin es una extensión que añade funcionalidades a WordPress sin modificar su núcleo. En nuestro caso, el plugin insertará una sección con una lista dinámica para gestionar tareas usando JavaScript.
El plugin proveerá un shortcode que se puede colocar en cualquier página o entrada, mostrando la To-Do List con su interfaz y funcionalidades.
Creando el archivo principal del plugin: todo-list-plugin.php
Este archivo es el corazón del plugin. Define el nombre, versión, autor y carga los scripts necesarios para el frontend.
Es fundamental registrar y encolar el archivo JavaScript y el CSS para que se carguen solo cuando se use el shortcode, evitando afectar otras partes del sitio.
Errores comunes
- No usar correctamente las funciones de WordPress para encolar scripts puede causar conflictos o que el JavaScript no funcione.
- Olvidar declarar el shortcode o errores de sintaxis en PHP que impiden la activación.
Diseñando la interfaz con HTML y CSS
El shortcode genera la estructura HTML necesaria: un campo para añadir tareas, un botón y una lista para mostrar las tareas.
El CSS define estilos básicos para una apariencia limpia y responsive.
Buenas prácticas
- Separar estilos y scripts en archivos externos para mejor mantenimiento.
- Usar clases específicas para evitar conflictos con otros estilos del tema.
Implementando la lógica con JavaScript
El archivo main.js gestiona eventos como añadir tareas, marcar completadas y eliminar tareas.
Usamos localStorage para guardar las tareas en el navegador, asegurando que al recargar la página, la lista se mantenga.
Errores comunes en JavaScript
- Olvidar probar si localStorage es compatible en el navegador.
- No limpiar o actualizar el DOM correctamente al eliminar o añadir tareas.
- No manejar eventos delegados en listas dinámicas, lo que impide que los botones de eliminar funcionen después de añadir nuevas tareas.
Probando el proyecto
Tras activar el plugin, añade el shortcode en una página. Visita la página y prueba a:
- Añadir nuevas tareas.
- Marcar tareas como completadas.
- Eliminar tareas de la lista.
- Recargar la página para verificar que las tareas se mantienen.
Si alguna funcionalidad no funciona, revisa la consola del navegador para posibles errores JavaScript o conflictos.
Cuándo usar este plugin
Este proyecto es perfecto para sitios WordPress personales, blogs o páginas de productividad que quieran ofrecer a sus usuarios una herramienta sencilla para gestionar pequeñas listas de tareas sin salir del sitio.
Para proyectos más complejos o multiusuario, se recomienda integrar bases de datos o APIs para persistencia avanzada y seguridad.
Código completo para copiar y pegar
Archivo principal del plugin
Archivo PHP principal que declara el plugin, registra el shortcode y encola scripts y estilos.
<?php
/**
* Plugin Name: To-Do List Plugin
* Description: Plugin para añadir una To-Do List interactiva con JavaScript.
* Version: 1.0
* Author: BorisTech
* Text Domain: todo-list-plugin
*/
if (!defined('ABSPATH')) {
exit; // Exit if accessed directly
}
// Función para cargar scripts y estilos
function tdl_enqueue_scripts() {
// Registramos el CSS
wp_enqueue_style('tdl-style', plugin_dir_url(__FILE__) . 'assets/css/style.css');
// Registramos el JS
wp_enqueue_script('tdl-script', plugin_dir_url(__FILE__) . 'assets/js/main.js', array(), '1.0', true);
}
// Función que genera el HTML de la To-Do List
function tdl_render_todo_list() {
// Encolamos scripts y estilos sólo cuando se usa el shortcode
tdl_enqueue_scripts();
$html = '<div id="tdl-container">';
$html .= '<h2>Mi Lista de Tareas</h2>';
$html .= '<div id="tdl-input-area">';
$html .= '<input type="text" id="tdl-input" placeholder="Añadir nueva tarea...">';
$html .= '<button id="tdl-add-btn">Añadir</button>';
$html .= '</div>';
$html .= '<ul id="tdl-list"></ul>';
$html .= '</div>';
return $html;
}
// Registramos el shortcode [todo_list]
add_shortcode('todo_list', 'tdl_render_todo_list');
Estilos CSS para la To-Do List
Archivo CSS que define el diseño básico y estilos para la interfaz de la lista de tareas.
#tdl-container {
width: 100%;
max-width: 400px;
margin: 20px auto;
padding: 15px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
font-family: Arial, sans-serif;
}
#tdl-container h2 {
text-align: center;
color: #333;
margin-bottom: 15px;
}
#tdl-input-area {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
#tdl-input {
flex: 1;
padding: 8px 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
#tdl-add-btn {
background-color: #0073aa;
color: white;
border: none;
padding: 9px 16px;
margin-left: 8px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#tdl-add-btn:hover {
background-color: #005177;
}
#tdl-list {
list-style: none;
padding: 0;
}
#tdl-list li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 10px;
margin-bottom: 6px;
background-color: #fff;
border-radius: 4px;
border: 1px solid #ddd;
}
#tdl-list li.completed span {
text-decoration: line-through;
color: #999;
}
.tdl-delete-btn {
background-color: transparent;
border: none;
color: #cc0000;
font-weight: bold;
cursor: pointer;
font-size: 16px;
margin-left: 10px;
}
.tdl-delete-btn:hover {
color: #ff4444;
}Lógica en JavaScript para la To-Do List
Archivo JavaScript que controla la gestión de tareas: añadir, marcar completadas, eliminar y persistencia en localStorage.
document.addEventListener('DOMContentLoaded', function () {
const input = document.getElementById('tdl-input');
const addBtn = document.getElementById('tdl-add-btn');
const list = document.getElementById('tdl-list');
// Cargar tareas guardadas en localStorage
let tasks = JSON.parse(localStorage.getItem('tdlTasks')) || [];
// Función para renderizar la lista
function renderTasks() {
list.innerHTML = '';
tasks.forEach((task, index) => {
const li = document.createElement('li');
li.className = task.completed ? 'completed' : '';
const span = document.createElement('span');
span.textContent = task.text;
span.style.flex = '1';
span.style.cursor = 'pointer';
// Al hacer clic en el texto, alternar completado
span.addEventListener('click', () => {
tasks[index].completed = !tasks[index].completed;
saveTasks();
renderTasks();
});
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '✖';
deleteBtn.className = 'tdl-delete-btn';
deleteBtn.setAttribute('aria-label', 'Eliminar tarea');
// Al hacer clic en eliminar, borrar la tarea
deleteBtn.addEventListener('click', () => {
tasks.splice(index, 1);
saveTasks();
renderTasks();
});
li.appendChild(span);
li.appendChild(deleteBtn);
list.appendChild(li);
});
}
// Guardar tareas en localStorage
function saveTasks() {
localStorage.setItem('tdlTasks', JSON.stringify(tasks));
}
// Añadir tarea nueva
addBtn.addEventListener('click', () => {
const text = input.value.trim();
if (text === '') {
alert('Por favor, ingresa una tarea válida');
return;
}
tasks.push({ text: text, completed: false });
saveTasks();
renderTasks();
input.value = '';
input.focus();
});
// Permitir añadir tarea con tecla Enter
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
addBtn.click();
}
});
// Inicializar renderizado
renderTasks();
});Has completado la creación de un plugin básico de WordPress con una To-Do List interactiva utilizando JavaScript. Ahora puedes añadir esta funcionalidad en cualquier página con un shortcode y adaptar el diseño y funciones a tus necesidades.
Como próximos pasos, podrías extender el plugin para guardar las tareas en la base de datos de WordPress, añadir opciones de administración o integración multiusuario.