Ininite Scroll + Automatic Text Expander

Dos de los detalles en los que más me he esforzado y que más me gustan del nuevo diseño son que tenga scroll infinito, de modo que no hace falta clicar en página atrás para ver viejos posts (tanto en la página principal como en categorías), y que las entradas aparezcan contraídas con posibilidad de extenderse en el mismo lugar.

Activar el scroll infinito es muy fácil en WordPress utilizando el plugin Infinite Scroll, que funciona perfectamente y es sencillísimo de configurar. Únicamente hay que decirle bajo qué clases CSS están los posts y el link de navegación atrás. Nada más.

Por otro lado, para facilitar las cosas decidí que mostrar unos pocos párrafos sería lo ideal. Busqué y busqué, pero no fui capaz de encontrar nada que cortase los artículos con posibilidad de expandirlos. Creo que la única alternativa ahora mismo en WordPress es mandar que aprezca un extracto (the_excerpt()) en lugar de todo el contenido (the_content()), con el cuál eliges un número de caracteres que quieres que se muestren.

La función propia de wordpress parece ser bastante probre y hay muchos plugins mejorándola, evitando que corte palabras enteras, que corte etiquetas HTML, etc. Pero nada de esto hacía lo que yo quería, pues obliga al lector a abrir el post y cargar otra página (de lo cual algunos estarán encantadísimos porque les suma visitas; pero mi intención es que me lean, no hacerme pajas con las estadísticas de páginas visitadas).

De ese modo, terminé por bajarme Text Expander, un plugin que permite contraer ciertas partes de un post simplemente escribiendo entre corchetes EXPAND y /EXPAND rodeando al texto a ocultar. Parecía la solución… pero hubiera supuesto añadir a mano en cada una de todas las entradas del blog esas etiquetas, lo cual es una tarea titanica. Además de que si algún día decido cambiarlo supondría un esfuerzo equivalente.

Por eso terminé por empezar a cacharrear con el código del plugin para hacerme algo a la medida. Ahora, para cada entrada que se carga se cuentan los párrafos que tiene, y si son más de cinco, le digo que me añade el EXPAND entre el segundo y el tercero. En realidad no sólo tiene en cuenta párrafos, sino también listas, citas e imágenes. Parecía sencillo, pero la cosa se empezó a complicar cuando me di cuenta de que había que tener mucho cuidado con los párrafos dentro de un blockquote, o las sublistas dentro de listas (ul); de lo contrario, al perderse las etiquetas de cierre, se desestructuraba todo el blog. Creo que finalmente he sido capaz de solucionarlo, pero como puede haber alguna combinación que no haya tenido en cuenta os pediré que si en algún momento descubrís algún error me lo comuniquéis.

Otro problema que me costó identificar fue que las nuevas entradas obtenidas al deslizar la página hasta el final se cargaban expandidas, de modo que pensaba que no estaba aplicandose la conversión allí. Al final me di cuenta de que la contracción se aplicaba al cargar la página con una línea de Javascript, pero esto no funciona con las nuevas al estar ya «cerrada» la web. Afortunadamente Infinite Scroll incluye un apartado en su configuración que permite al usuario añadir código Javascript que se invoque una vez el nuevo contenido se carga, de modo que con tres o cuatro líneas solucioné el problema.

Creo que es algo bastante útil y que quizás más gente necesite algo así, de modo que he pensado que quizás podría darle un retoque y publicarlo como plug-in; aunque nunca lo he hecho así que no tengo ni idea de si es un proceso sencillo. ¿Alguien tiene experiencia en plugins de WordPress y puede darme un consejo?

Por cierto, pensé que sería interesante dejar la primera entrada de la página principal directamente extendida, pues al ser la última publicada será más probable que la gente entre a leer esa. ¿Os gusta así o la preferís contraída como el resto?

Únete a la conversación

1 comentario

  1. A mí me gusta así. Como creo que comenté , es un diseño muy elegante. El único inconveniente que tengo es que gris y blanco no resultan muy claros (al menos en mi monitor) para leer. El gris es un gris suave y por lo tanto no hay un contraste… Pero vamos, que te has aplicado un lavado de cara excelente. Pura pulcritud que da más ganas incluso de leer los post! Un abrazo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *