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 longitud 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:
Hemos preparado un post con instrucciones detalladas sobre como insertar este o cualquier otro código PHP usando functions.php, el plugin code snippets o creando tu propio plugin, para acceder al mismo pulsa el siguiente enlace: ¿Cómo insertar código PHP en WordPress?
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.
Si también quieres tener un contador para las descripciones de las taxonomías echa un vistazo al enlace anterior.
