Etiqueta: wordpress

Tutorial: Traducciones rápidas usando CSS para el plugin Opal Estate Pro

Continuando con mi aprendizaje de CSS, esta vez he encontrado que necesito cambiar el idioma de los controles generados por el plugin Opal Estate Pro, un plugin para integrar un sistema inmobiliario completo en WordPress, que puedes encontrar en este enlace.

La verdad, este plugin es muy interesante y ofrece muchas funciones, pero su documentación solo se limita a su pagina web y su soporte es solo en inglés. Por esta razón, mientras trabajaba en un proyecto, encontré la necesidad de hacer una traducción rapida hasta que encontraba como traducir los controles o encontrar un plugin en español.

El problema

Opal Estate Pro solo tiene soporte en inglés y el cliente quería los textos de los controles en español. En un principio pensé en usar el plugin Polylang, pero no funcionó. Como el ´presupuesto no alcanzaba para buscar una mejor alternativa, opté por usar CSS para cambiar el contenido de las etiquetas «label» mediante el siguiente código:

#a{
   content:"nuevocontenido";
}

Esta código permite agregar contenido a la etiqueta, por lo que nuestro texto se agregará al que ya estaba presente. para corregir esto, se aplica el siguiente estilo.

#a{
   visibility:hidden;
}
#a::before{
   content:"nuevocontenido";
   visibility:visible;
}

Al aplicar este estilo, se oculta el contenido anterior de la etiqueta y se agrega el nuevo contenido, dejando solo visible este ultimo.

Aprovechando que Opal Estate tiene clases especificas para cada uno de sus controles, podemos aprovechar esto para crear nuevas clases que aplicaremos en el CSS adicional del tema que tengamos activo.

/*Cambiar el idioma del label "Bedrooms" a español*/
.opalestate-label--Bedrooms {
    visibility: hidden;
}
.opalestate-label--Bedrooms::before {
    content: "Habitaciones";
    visibility: visible;
}
/*Cambiar el idioma del label "Parking" a español*/
.opalestate-label--Parking {
    visibility: hidden;
}
.opalestate-label--Parking::before {
    content: "Parqueo";
    visibility: visible;
}
/*Cambiar el idioma del label "Country" a español*/
.opalestate-label--country {
    visibility: hidden;
}
.opalestate-label--country::before {
    content: "País";
    visibility: visible;
}
/*Cambiar el idioma del label "Bathroom" a español*/
.opalestate-label--Bathrooms {
    visibility: hidden;
}
.opalestate-label--Bathrooms::before {
    content: "Baños";
    visibility: visible;
}
/*Cambiar el idioma del label "Type" a español*/
.opalestate-label--type {
    visibility: hidden;
}
.opalestate-label--type::before {
    content: "Tipo";
    visibility: visible;
}
/*Cambiar el idioma del label "Price" a español*/
.opalestate-label--price {
    visibility: hidden;
}
.opalestate-label--price::before {
    content: "Precio";
    visibility: visible;
}

De esta manera, conseguiremos nuestra traducción rápida para casos de emergencia. Por el momento, solo tengo estos controles traducidos y el código no funciona con el botón de búsqueda, así que toca investigar mas para llegar a un resultado completo. Por el momento, esto ha funcionado lo suficientemente bien como para dejarlo aplicado en producción.

Incidente: Colapso de instalación de WordPress al actualizar Jetpack

A veces es fácil olvidar que los programas que utilizamos a diario son escritos por humanos, así que nos suele tomar por sorpresa cuando estos fallan. Se nos suele advertir que hagamos copias de respaldo de nuestros datos, pero el engorroso proceso para restaurar estos datos, hace que descuidemos toda medida preventiva y todo va bien, hasta que empieza a ir mal.

El caso de hoy es uno que me sirve de advertencia sobre las actualizaciones automáticas. En general funcionan bien, pero pueden haber sorpresas. Incluso WordPress nos lo advierte cuando las activamos. En mi caso, he hecho caso de la advertencia, activándola únicamente para la extensión que menos creí posible que falle; Jetpack.

Si, es cierto que las actualizaciones de Jetpack suelen estar cargadas de nuevas funcionalidades, pero no era difícil confiarse. Especialmente cuando se lidia con otros problemas, que se suelen resolver con un solo click.

Usualmente resuelvo los problemas del servidor luego de echarle un ojo a los logs del sistema y reiniciar los servicios, pero esta vez no tenia tiempo asi que solo reinicie los servicios sin revisar los logs y me olvide del asunto. Entonces una hora luego, me aparecio este mensaje:

El sitio estaba una hora caído. Mi pequeño blog no tiene muchas visitas y (por ahora) no esta monetizado, así que no me preocupaba. Volví a reiniciar los servicios y continúe resolviendo otros problemas.

La notificacion de que el sitio continuaba caido me atormentaba hasta que por fin tuve tiempo para dedicarle al servidor y comence el diagnostico.

Primero, revisar que mensaje de error muestra el navegador:

Ha habido un error critico en esta web. Si los servicios estuvieran caídos, el error debería ser de conexión rechazada, así que no era cuestión de los servicios.

Lo segundo a hacer es acceder a la consola del servidor y buscar en los logs algún patrón que parezca sospechoso en el log de errores e /var/log/apache2/error.log y encontré lo siguiente:

PHP Fatal error:  Uncaught Error: Failed opening required '/var/www/interlan.ec/wp-content/plugins/jetpack/jetpack_vendor/automattic/jetpack-waf/src/../rules/allow-ip.php'

Este error no tiene misterios. Lo único que habría que hacer era desactivar el plugin de Jetpack para resolver el problema y reinstalarlo. Un plan perfecto, sin fisuras.

Desafortunadamente era imposible entrar al panel de administración de wordpress.

Mi otro blog pasó por exactamente el mismo problema, pero a diferencia del primero, alcanzó a enviarme un enlace al modo de recuperacion que existe desde la versión 5.1 de WordPress, así que al usarlo, bastó con desinstalarlo y reinstalarlo. Esta es una funcion muy util, si el colapso da el tiempo a mandar el correo con la ulr de rescate.

En el caso de mi blog principal, la URL no fue enviada, asi que tuve que buscar el plugin y borrarlo manualmente, con lo que recuperaría el control y volvería a abrirlo al publico.

Por supuesto, fue necesario algo de limpieza adicional para que todo vuelva a esta en orden. Al menos por un tiempo.

Cuando otra vez colapso con el mismo problema, habia una tercera cosa que quedaba por hacer para entender lo que estaba pasando. Recurrir a google.

Una de las cosas que mas me fastidia del internet actual es que la gente ya solo hace consultas en redes sociales, por lo que buscar en google puede dar resultados muy antiguos, de la epoca en la que los foros publicos estaban mas activos.

Minar preguntas en stack overflow llevaria mucho tiempo, asi que tras borrar jetpack otra vez, abri el instalador de su plugin y me encontre con que habian sacado una nueva version, apenas una hora antes. Era evidente de que ellos estaban consientes del problema que habían causado.

El unico bug que arreglaron era justamente uno sobre mi problema actual:

Firewall: prevent sites from crashing when updating Jetpack versions due to a missing generated file.

Explorar los comentarios fue suficiente para saber que no era el único con el problema y tras deleitarme un poco con las quejas de otros, decidí que lo mejor seria dejar deshabilitado jetpack hasta que salga una nueva actualización que corrija lo que la actualización para corregir un problema, había dañado.

Por supuesto, resolver este problema me ha enseñado algunas lecciones y espero que si alguien tiene el mismo problema, se pase por mi solución antes de intentar resolverlo con medidas desesperadas.

Interlan
A %d blogueros les gusta esto: