Contador de Caracteres y Palabras en WordPress
En este post te mostraré cómo añadir un contador de caracteres y palabras al campo de título en el editor de contenidos de WordPress.
Este sencillo script te ayudará a visualizar el número de caracteres y palabras en tiempo real, mientras escribes el título de tus entradas o páginas, además de cambiar el color según la longitud del texto (personalizable fácilmente).
Si tu web muestra el título de las páginas seguido del título del sitio web debes sumar ambos para saber la longitud total.
Mantener los títulos de las páginas web con menos de 60-65 caracteres de logitud total facilita a Google la tarea de indexar las páginas de tu sitio web y mejora tu posicionamiento.
A continuación te muestro el código que tienes que insertar y después las instrucciones de cómo hacerlo.
Código para contador de caracteres y palabras en WordPress:
// Contador de caracteres y palabras en WordPress
add_action('admin_footer', function () {
$screen = get_current_screen();
if ($screen->base === 'post') {
echo '<script>
document.addEventListener("DOMContentLoaded", function () {
const titleField = document.getElementById("title");
if (titleField) {
// Crear y agregar el contador al DOM
const counter = document.createElement("span");
counter.id = "title-char-counter";
counter.style.marginTop = "1em";
counter.style.float = "right";
counter.style.fontSize = "0.9em";
counter.style.color = "#888";
titleField.parentElement.appendChild(counter);
// Función para contar palabras
const countWords = (text) => {
return text.trim().split(/\s+/).filter(word => word.length > 0).length;
};
// Actualizar el contador y cambiar el color
const updateCounter = () => {
const length = titleField.value.length;
const words = countWords(titleField.value);
// Actualizar el texto del contador
counter.textContent = `El título tiene ${length} caracteres (${words} palabras)`;
// Cambiar el color según la cantidad de caracteres
if (length <= 17) { counter.style.color = "gray"; }
else if (length <= 34) { counter.style.color = "green"; }
else if (length <= 51) { counter.style.color = "red"; }
else if (length <= 68) { counter.style.color = "maroon"; }
else { counter.style.color = "black"; }
};
// Actualizar al cargar y al escribir
updateCounter();
titleField.addEventListener("input", updateCounter);
}
});
</script>';
}
});
Instrucciones para insertar el código usando Code Snippets:
- Ve al panel de administración de tu WordPress.
- Instala y activa el plugin Code Snippets si aún no lo tienes.
- Accede a «Fragmentos de código» > Añadir nuevo.
- Copia el código proporcionado y pégalo en el campo de código:
- Asigna un nombre al snippet (por ejemplo, «Contador de Caracteres y Palabras en WordPress«).
- Guarda y activa el snippet.
Ahora, al crear o editar una entrada, podrás ver el contador de caracteres y palabras en el campo del título, justo debajo y a la derecha del mismo.
