Saltar al contenido

Etiqueta: widget

JS Categories List 4.0

Luego de 7 años tuve la oportunidad de dedicarle tiempo a mi plugin JS Categories List y poder actualizarlo para que esté al día respecto a los estándares de WordPress y de la web en general.

Listado de categorías de forma dinámica
El plugin muestra un listado de categorías expandibles

Durante este tiempo WordPress añadió Gutenberg, un editor visual que ahora se incorpora en cada instalación y poco a poco va tomando el liderazgo de como crear el contenido. Por este motivo los widget/bloques han migrado a ser hechos con una aplicación en React y que llame a entradas del API del sitio.

Eliminación de jQuery de JS Categories List

En estos 7 años el principal cambio fue lo innecesario de depender de jQuery. Su popularidad se debía porque está incluida en cada instalación y anteriormente ayudaba a manipular el DOM fácilmente debido a las limitaciones de los navegadores.

Pero actualmente no es necesario usarla: los navegadores ya permiten hacer nativamente mucha de sus funcionalidad, la librería requiere cargar contenido JS innecesario y los bloques de Gutenberg se realizan con React quien ofrece mucho mas.

Creación del bloque de Gutenberg

Primero fue mejorar el código fuente, cuya tarea mas que todo fue aplicar estandarización de código PHP, organizar mejor el código, rescribir partes mal hechas

Luego fue la creación del bloque de Gutenberg, tomé como base el código fuente de mi otro plugin recientemente actualizado y lo modifiqué para funcionar con categorías en vez de archivos.

Los bloques de Gutenberg usan React, así que me tocó rescribir el plugin desde el PHP que genera HTML a componentes JSX. La lógica es similar pero en esta migración pude hacer mejoras que luego apliqué a la versión de PHP.

Para facilitar futuras mejoras y ver que el código funciona, agregué pruebas jest a los componentes y así asegurarme que todo funciona bien. En futuros cambios, ahora tendré como probar los cambios y garantizar el correcto funcionamiento,

Animaciones en JavaScript

Una de las principales funcionalidades que ofrecía jQuery es de animaciones sencillas con simplemente llamar una función. Esta funcionalidad no está disponible en el JavaScript puro porque esas características se fueron agregando a CSS.

En mi plugin de JS Archive List, logré implementar las animaciones usando clases CSS pero no funcionan bien en algunos casos reportados por usuarios, sobre todo, cuando hay altura dinámica.

Por ello, para este JS Categories List decidí crearlas desde 0 en vanilla JS para que funcionen bien en cualquier escenario. Descarté el uso de clases CSS por el problema mencionado, ademas que es mas fácil de probar de forma automatizada.

Experiencia al actualizar JS Categories List

Aprendí mucho al rescribir mi código antiguo. Noté como ha evolucionado mi forma de programar a lo largo de estos años, cómo la tecnología cambia pero las bases de WordPress se mantienen y la retrocompatibilidad se respeta. Con razón este CMS es el mas usado en el mundo.

Pude pulir mis conocimientos de React, de pruebas automatizadas con Jest y aplicar mejores patrones en el código de PHP. También el resultado me permitirá actualizar con mayor frecuencia este plugin y ofrecer mejoras.

Si usas WordPress te recomiendo descargar e instalar mi plugin.

Espero que te guste y lo uses en tu sitio.

Deja un comentario

Liberado jQuery Categories List 1.1

Hace unas semanas hice un plugin para wordpress, donde se imprime una lista de las categorías de forma compacta y expandible mediante animaciones  jQuery, pues hoy he liberado la versión 1.1 del mismo, con la novedad que ahora pueden excluir del listado las categorías que deseen. Esta característica fue agregada debido a la solicitud de varios usuarios del plugin y expandir las posibilidades de uso de este plugin.

Para instalarlo pueden ir a su página oficial o actualizar desde el mismo gestor de actualizaciones de WordPress. Si no lo han probado, se los recomiendo y recuerden votar por él.

1 comentario

jQuery Archive List Widget

Para los lectores / amigos que me leen, saben que siempre en las vacaciones suelo programar algo por diversión como: el resolvedor de sudokus, el cheater para Word Challenge, el Skate or Dice para el PSP. Pues esta vez realicé un widget para WordPress utilizando la librerí­a jQuery, el cual consiste en mostrar los archivos de los artí­culos en una lista contraida, al hacer clic en cada uno de los items se despliega el contenido con un efecto de acordeón o de desvanecimiento tal como se puede observar en la sección de Archivos en la parte izquierda de esta página.

Entre las principales caracterí­sticas que posee son:

  • Utiliza el script de jQuery de WordPress por lo que no sobrecarga las páginas.
  • Sencillo y fácil de configurar.
  • Permite mostrar o no la cantidad de artí­culos por año o mes.
  • Permite mostrar o no los artí­culos que hay en cada mes.
  • Permite seleccionar el formato del mes a mostrar.
  • Se puede utilizar dentro de páginas o artículos.
  • Seleccionar efectos de jQuery.
  • Carga el script en un archivo separado para mejor ejecución y permitir guardarlo en caché.
  • Permite seleccionar el sí­mbolo de la viñeta.

Sé que es sencillo y no ofrece mucho, pero dependiendo del uso y si pueden colaborar con donaciones podré dedicarle mas tiempo con el fin de agregar mas caracterí­sticas configurables. Por ahora, pues descárguenlo e instálenlo, cualquier sugerencia o corrección pueden hacerlo por mensaje privado y/o un comentario en esta entrada.

La licencia del mismo es GPL2 y pueden descargarlo desde el siguiente enlace:

https://wordpress.org/extend/plugins/jquery-archive-list-widget/

Si les gustó mucho el widget y desean colaborar con el desarrollo de futuras versiones pueden ayudar con una donación libre usando el siguiente botón.

Cambios en las versiones: Leer los cambios de esta versión

Contribuye con la creación de este plugin

5 comentarios