Saltar al contenido

Categoría: Wordpress

JS Categories List 4.0

Publicado por Miguel Useche el 5 de junio de 2023

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

Comprobar si una pasarela de pago esta activa en WooCommerce

Publicado por Miguel Useche el 10 de junio de 2022

Si en WooCommerce necesitas comprobar si una pasarela de pago esta activa. Puedes obtener un listado de las pasarelas de pago (gateways) disponibles en el sitio con la función:

WC()->payment_gateways->get_available_payment_gateways();

El problema de esta función es que estas instanciando WooCommerce y en algunos casos, algunas pasarelas dejan de registrarse o se esconden por motivos de seguridad. Esto hace que fallen mas adelante cuando realmente deben mostrarse en el checkout. Además, si necesitas comprobar si una pasarela pago está activa en un momento donde no se ha cargado WooCommerce. Necesitas una alternativa a esta función

Comprobar si una pasarela pago está activa desde la base de datos

Una alternativa segura es consultar la información directamente desde la base de datos. Así no necesitas implementar o instanciar objetos. El costo de la consulta es mínimo y queda en caché para futuros accesos (si se usa $wpdb).

WooCoommerce guarda la información de una pasarela de pagos en la base de datos en la tabla options bajo el nombre «woocommerce_idDelGateway_settings». Si el id de tu pasarela es «pagos_con_tarjeta» entonces la información se guarda bajo el nombre woocommerce_pagos_con_tarjeta_settings.

Como la información se guarda en formato JSON. Sólo necesitamos contar el registro bajo el nombre anterior que tenga el valor enabled: true dentro del contenido del JSON.

Para ello hacemos la siguiente función que buscará si existe el valor o no:

function is_enabled($gateway_name) {
  global $wpdb;

  $query = "SELECT COUNT(*)  FROM $wpdb->options "
    . "WHERE `option_name` ='woocommerce_${gateway_name}_settings' "
    . "AND  `option_value`  LIKE '%\"enabled\";s:3:\"yes\"%'";

  $count = $wpdb->get_var( $query );

  return $count > 0;
}

Esta función dependiendo del contexto, puedes ponerla en el archivo functions.php o en el código de tu plugin. Puedes llamarla en cualquier momento ya que $wpdb se instancia temprano en la carga de WordPress.

¡Listo! Con esto podrás leer directamente desde la base de datos si comprobar si una pasarela pago está activa o desactivada. Sin afectar el funcionamiento de WooCommerce.

Deja un comentario

JS Archive List 5.0

Publicado por Miguel Useche el 7 de junio de 2022

Luego de mas de 3 años sin poder dedicar tiempo a mi primer plugin de WordPress: JS Archive List. Finalmente he conseguido trabajar en él y lanzar una nueva versión. La idea era actualizarlo a las últimas tecnologías, realizar mantenimiento y corrección de errores.

Nuevo nombre: JS Archive List Widget

Ya hoy en día no es necesario usar jQuery debido a que los navegadores ofrecen nativamente las funcionalidades básicas de jQuery. A pesar de que WordPress lo sigue incluyendo y la mayoría de temas y plugines lo cargan (causando una descarga adicional de código) eventualmente se dejará de usar y es mejor estar preparado para ello.

Para preparar el plugin ante este cambio y para actualizarlo a las últimas tecnologías, eliminé jQuery de las dependencias. Esto requirió rescribir todo el código de Javascript a nativo sin dependencias de librerías. Prácticamente es escribirlo de nuevo, es una tarea fácil para el código de interacción con el DOM pero la parte de animaciones si tocó estudiar CSS y ver como aplicar la parte de animaciones usando sólo CSS.

Por esta razón, eliminé jQuery del nombre (que era MUY popular cuando este plugin se lanzó por primera vez) y ahora lo dejé simplemente a JS para indicar que está hecho en Javascript.

Soporte a Gutenberg

Mi objetivo pendiente con este plugin era darle soporte a los bloques, la nueva forma de configurar los widgets y de añadir contenido a WordPress. Por mas que no quieran algunos, el futuro de este CMS consiste en crear contenido a través de bloques de Gutenberg. Tarde o temprano tenía que añadir soporte a esta tecnología.

Para este plugin, debía crear un bloque desde 0 para mostrar el formulario que permite configurar el widget. Luego hacer un adaptador de la configuración de Gutenberg a la que uso internamente (y para mantener retrocompatibilidad) y al momento de generar el código HTML que se carga en el sitio, llamo a la función que genera el HTML del widget.

Fue interesante aprender este proceso de crear bloques. También es raro escribir plugins de WordPress usando React y tecnologías de JS. La ventaja es que los plugines quedan mejor integrados al CMS y creo que permite a los usuarios configurarlos fácilmente.

¿Cómo lo descargo o pruebo?

Si te interesa este plugin, en esta página en el lado izquierdo puedes ver la sección de Archivos. Esta parte se genera con JS Archive List Widget y así es una de las formas que puedes configurar el plugin para mostrar los archivos.

Para descargarlo y usarlo en tu instalación de WordPress, haz clic a continuación y disfruta de ver el listado de tus archivos con JS Archive List Widget.

JS Archive List Widget

Ahora tengo que actualizar mi plugin de categorías y evitar que tome 3 años lanzar una nueva versión.

1 comentario

Características de un hosting para WordPress

Publicado por Miguel Useche el 27 de septiembre de 2021

Cuando deseas hacer un sitio en cualquier tecnología o por ejemplo en WordPress. Aparte de comprar tu dominio, es necesario adquirir el servicio de alojamiento o mejor conocido como hosting. En este artículo te enseñaré que es un servicio de alojamiento y como comprar un hosting para WordPress.

¿Por qué necesito un servicio de alojamiento?

Cuando quieres tener una página en Internet requieres principalmente de dos cosas: el dominio y el hosting. En este último es el alquiler del espacio de disco duro de una computadora (llamada servidor), donde se guardan los archivos, códigos e imágenes de tu página web. De esta forma, cuando escribes la dirección URL de un sitio, el dominio apunta a esa computadora para que el navegador inicie el proceso de carga y te la muestre.

¿Qué necesito para adquirir un hosting para WordPress?

Cada servicio de hosting posee soporte para ciertas tecnologías que permiten ejecutar o cargar tu página web. Para el caso de WordPress se requiere tener 2 cosas: un servidor web y un servidor de base de datos. Las compañías suelen ofrecer ambas al mismo tiempo por lo que no debes preocuparte de adquirirlos por separado.

Servidor Web

Es quien se encarga de procesar los archivos de la pagina para mostrarlos en tu navegador, en el caso de que tenga código de un lenguaje de programación lo procesa para generar el HTML que sería la página web que ves.

El hosting para WordPress, puede ser cualquier servidor web que procese PHP, el lenguaje de programación que utiliza WordPress. Ya que actualmente este CMS posee compatibilidad para la mayoría de ellos: Apache, Nginx, Lightspeed, entre otros. Lo mas importante es que soporte PHP (recomiendo tener compatibilidad con la versión 7.4 o superior) pues sin esto no podrás tener WordPress en tu servidor web.

La diferencia entre versiones y servidores web, solo afecta a usuarios mas avanzados y técnicos. Pues la configuración cambia y la velocidad del mismo. Ya queda criterio del programador cual elegir (en caso que se pueda, pues algunos servicios de alojamiento solo te brindan una configuración única).

Base de Datos

El servidor de base de datos es aquel donde se almacenan los datos de forma clasificada y ordenada. De esta forma es rápido leerlo y clasificarlo. Por ejemplo, si tienes varias noticias o artículos en tu página, el servidor de base de datos permite organizarlas por las fecha mas reciente y permitir a WordPress mostrarlas de forma bonita y organizada en el navegador.

Para WordPress requieres tener como base de datos MySQL o 100% compatibles como MariaDB. Si tu servidor de alojamiento tiene soporte para base de datos MySQL o MariaDB es suficiente. Generalmente el otro requerimiento es el espacio (depende de cuanta información tienes) y la versión que debe ser superior a 5.0.15, que hoy en día es una versión muy vieja.

Otro software

Adicionalmente al gestor de Base de Datos y el servidor web que ejecute PHP. Recomiendo tener adicionalmente:

  • Panel de administración como Cpanel, para poder navegar en el sistema de archivos, crear cuentas de correo, administrar dominio y demas cosas fácilmente.
  • Tener instalado GIT para que los programadores puedan subir sus desarrollos fácilmente. Además permite actualizar o revertir actualizaciones rápidamente.
  • SSH para subir los archivos al servidor de forma segura. También con acceso SSH los programadores pueden ejecutar comando o correr scripts que facilitan el trabajo.
  • Soporte a correos electrónicos para poder enviar correos desde el servidor y no usar (inicialmente) otro servicio adicional para enviar informaciones a tus usuarios.

Conclusiones

Como resumen, si andas buscando un hosting para WordPress, te recomiendo hacer esta comparativa de hostings y seleccionar el que tenga la mejor relación de características ajustadas a tu presupuesto.

¡Luego empieza a subir tus archivos y disfruta de tu sitio con WordPress!

Deja un comentario