Microthemer, el plugin WordPress para cambiar CSS en tu web

Este artículo va dirigido sobre todo a aquellos implementadores de WordPress (que hacen páginas web para sus clientes basadas en WordPress) que se manejan muy bien con el gestor de contenidos pero que no llegan a ser unos super programadores a nivel de HTML o CSS.

Es bien sabido que lo bueno de WordPress es que puedes construir páginas web realmente buenas y profesionales sin tocar una línea de código.

Esto se consigue mediante el uso de plantillas, page builders o plugins con contenido prefabricado.

La dificultad viene cuando quieres hacer una personalización muy específica a nivel estético y no sabes nada de CSS (lo que sirve para pintar una web).

Conoce Microthemer, el plugin mágico para WordPress que te permite cambiar CSS en tu website.

Pero al igual que no todo el mundo con una caja de colores y un papel en blanco sabe hacer dibujos e ilustraciones geniales a todo color, lo mismo pasa con WordPress, que por mucho que te facilite la vida a la hora de crear una web, hace falta mucha práctica y conocimiento de la herramienta para poder obtener un resultado convincente para tus clientes.

En este artículo vas a conocer una herramienta que, con muy poca curva de aprendizaje, te servirá para dar esa personalización extra a nivel estético que puede que necesite tu proyecto web, o el de otras personas.

No más dolores de cabeza con móviles y tablets

---

Cuando una web se ve desde diferentes dispositivos, seguro que ya sabes que tiene que ser responsive y que se adapte bien a todo tipo de resoluciones.

Esta responsividad se consigue gracias a una cosa que se llaman Media Queries, que no es más que “decirle” a la web que cuando la resolución sea menor (o mayor) de X (tamaño de pantalla) aplique el código que le escribas en ese caso particular (esto es una definición muy general).

Las Media Queries son útiles, no sólo para que una web se adapte a móviles, si no para ocultar o mostrar elementos dependiendo desde qué dispositivo se visite la web.

Éste es uno de los momentos que más me duelen en el alma es cuando paso varias horas transformando un diseño de PhotoShop a versión WordPress con mi page builder favorito, y por cualquier razón hay cosas que no terminan de verse correctamente en los dispositivos de resolución menor.

Aunque ocurre muy poco, es uno de los momentos clave en los que, para dejarme de líos y repasar todas las cosas que he hecho, instalo el plugin de MicroThemer y, seleccionando el elemento en cuestión de una manera super fácil (lo vemos en el vídeo).

Soy capaz de darle el aspecto estético que yo elija, dependiendo si el usuario visita la web mediante móvil, tablet u ordenador.

Este plugin es, con diferencia, el mejor asistente de Media Queries que he visto desde que uso WordPress.

No más prefijos para diferentes exploradores

---

Una de las cosas que más molestan al escribir CSS (para aquellos que lo sepan hacer, no tienes por qué saber :)) es tener en cuenta los diferentes prefijos dependiendo del explorador de internet que utilice el usuario para, por ejemplo, hacer una transición y que aparezca determinado objeto en una web al hacer scroll hacia abajo.

Como habrás adivinado… ¡sí! también se cubren las animaciones en MicroThemer, y además muy visualmente.

El plugin ya se encarga él solito de “traducir” todo para que funcione en todos los exploradores posibles.

CSS de toda la vida

---

Y quizás ya han caído algunas lagrimillas en el teclado mientras lees esto, porque eres un profesional del CSS y HTML y te das cuenta que cada vez hace menos falta saber dichos lenguajes… ¡no! ¡para nada!.

No caigas en la tentación de pensar que en un futuro no hará falta saber programar…

De hecho, es como si eres un piloto de Fórmula 1 conduciendo por cualquier ciudad nueva. Estás más que acostumbrado a lo que haces, y nada te va a parar a la hora de destacarte sobre los demás.

Todo esto te lo digo porque MicroThemer te ofrece una consola tanto de CSS como de Javascript, para que trabajes como normalmente lo harías al crear una web desde cero (un nivel superior al 90% de la gente en WordPress).

El plugin no querrá en ningún momento ocultar nada que no puedas reconocer en base a tu experiencia, es más, te ahorra tiempo en muchos aspectos, y lo mejor de todo es que tú puedes elegir en qué te ayuda el plugin (¿tengo que recordarte lo de las animaciones en diferentes exploradores? :)).

MicroThemer, la solución para el CSS de tu WordPress

---

Ya sin más dilación, te presento las entrañas de este plugin. Voy a empezar hablando de quién lo ha hecho, porque se han convertido en mis mejores amigos desde que compré la licencia (pero ellos no me conocen de nada, lo de que son mis mejores amigos lo digo retóricamente).

Desarrolladores

Este plugin está desarrollado por una pequeña empresa llamada Themeover, con sede en Londres (Reino Unido).

Sus desarrolladores se lo están montando bastante bien, ya que este plugin es relativamente joven (es de 2012, “sólo” 6 años).

Su plugin ha sido muy bien aceptado por la comunidad de WordPress, y tienen una versión gratuita del mismo en el repositorio oficial.

Planes

Vamos con la dolorosa de la versión premium del plugin. Ya sabes que me vuelven loco los plugins premium, porque destacan en lo bien que están construidos y el buen soporte que tienen (para algo lo pagas).

Ojo, no digo que no hayan plugins o plantillas gratuitas que no sean buenas.

Simplemente me gusta que haya gente motivada por ingresos económicos anuales, a cambio de ofrecer una buena solución a implementadores WordPress con varios clientes como yo.

Yo tuve la suerte de pillar el plugin en sus fases tempranas, donde ofrecían una suscripción de por vida por 149 euros en un único pago.

Claro, los desarrolladores han visto que el plugin funciona muy bien y se lo descarga cada vez más gente, y como es lógico, ahora han cambiado el pricing. Sus actuales planes son:

• Versión Estandar (pago anual) para 3 sitios, por 45 dólares.
• Versión Developer (pago anual) para sitios ilimitados, por 90 euros.

Ojo, las renovaciones anuales son más baratas (27 y 54 euros respectivamente). Y no descartes la posibilidad de que en periodos tipo “Black Friday” o “CyberMonday” vuelvan a poner disponible puntualmente la oferta de por vida.

Simplemente tienes que estar atent@ en esas fechas.

Spanglish

Ojo aquí los que no habléis inglés. Este plugin viene en español, pero bastantes secciones están en inglés (sobre todo la documentación).

Pero no hay problema, a nada que veáis el contexto de las mismas, son fáciles de entender (y muy intuitivas). Simplemente quería comentar que hay un mix de ambos idiomas cuando tenéis vuestra instalación de WordPress en español.

Aprovecho para mencionar, como siempre, que no he recibido ningún tipo de coche de lujo, ni millones de euros por parte de los creadores del plugin.

Mi finalidad es ir mostrándote de una manera progresiva y actualizada todas las herramientas que uso para mi día a día con WordPress, las cuales te ahorrarán tiempo, dinero, y preocupaciones varias.

Características principales

¿Y qué puede hacer este plugin por nosotros, a grandes rasgos?

• Te ayuda a personalizar cualquier plantilla o plugin que hay en WordPress.
• Ayuda muchísimo con la adaptación de tu web a diferentes resoluciones (responsiveness).
• Tiene más de 80 tipos de opciones para estilizar cada uno de los componentes que selecciones en tu web.
• Tiene un “corrector” de CSS que se encarga de siempre tener un código limpio y bien escrito.
• Esta optimizadísimo para que no suponga una carga extra de carga en tu web.
• Está muy bien integrado con Google Fonts.
• Cualquier cambio que vayas haciendo con el plugin, lo vas viendo a tiempo real, antes de publicarlo.
• Puedes exportar e importar todas tus configuraciones entre diferentes webs con el plugin instalado.

Menú de opciones tipo pop-up

Las opciones de este plugin se dividen en 10 apartados. Los veo un poco más en detalle en el vídeo, pero aquí te los dejo mencionados:

• Licencia: donde introduces el código de desbloqueo del plugin.
• Opciones generales en cuanto al plugin, el CSS, el idioma y la manera en que se cargan los estilos.
• Opciones de Media Queries (responsiveness).
• Opciones de Javascript.
• Ver el código que el plugin va generando (tanto CSS como JavasScript).
• Opciones de historial de cambios (donde puedes restaurar los cambios en el momento que quieras).
• Instalación de paquetes de diseño (pre-configurados).
• Opción para importar un paquete u hoja de estilo.
• Opción para exportar tu propia configuración (y usarla en otras webs).
• Centro de ayuda (documentación en Inglés).

Menú de opciones superior

En la interfaz del plugin vas a encontrar un menú en la parte superior izquierda, en donde hay accesos directos a algunas funciones que no aparecen en las opciones generales. Aquí te las describo, aunque las veremos también en el vídeo. Son:

• Modo draft (para poder hacer cambios y publicarlos, pero bajo un entorno “de pruebas”, que no se verá online todavía).
• Editor de código (para los más avanzados). Sustituye los “botoncitos” para no entendidos en código.
• Link a una vista preliminar de los cambios en el sitio, sin que se hayan publicado todavía.
• Pantalla completa (editar sin interrupciones).
• Mostrar / ocultar nombres de los iconos.
• Mostrar / ocultar reglas de medición.
• Activar modo “Beaver Builder”, ya que se integra muy bien con dicho page builder.
• Acceso directo a “resaltar” los elementos que hemos ido cambiando.
• Limpiar estilos o resetear todos los cambios (para dejarlo como al principio).

Cómo funciona el plugin

Y después de tanta teoría, te estarás preguntando cómo hace su magia el plugin. Antes de pasar al vídeo, simplemente te voy a describir los pasos que se suelen seguir para cualquier cambio en el CSS mediante MicroThemer:

1. Darle a “Target” para seleccionar el elemento que queremos cambiar.
2. Seleccionar a qué nivel ese elemento va a verse afectado (a uno individual, o a todos los de una misma clase).
3. Crear un “selector” y organizarlo por carpetas si queremos.
4. Aplicar las opciones deseadas a ese selector (hay más de 80 para elegir).
5. La configuración se va auto-guardando. Aquí podemos previsualizar los cambios, revisar el código CSS generado, o volver a la parte pública de la web.

Vídeo Explicativo

A estas alturas ya te estarás tirando de los pelos y pidiendo a gritos que te muestre el plugin en el siguiente vídeo, porque te apasiona la idea de ahorrarte unas horas de CSS para personalizar tu web a tu gusto o al de tus clientes (o al menos así te imagino, deja que sea feliz a mi manera).

En el vídeo voy a revisar las opciones del plugin (sin mucho detalle, mencionándolas) y hacer un par de ejemplos de “cambios” en el CSS, de una manera muy sencilla e intuitiva, y otro par de cambios con “puro código”, para los más avanzados.

Conclusiones

Y esto ha sido todo por mi parte, en cuanto al plugin MicroThemer.

No se si has notado la pasión con la que describo dicha herramienta, pero es que me salva la vida muchas veces con clientes que quieren cambiar cosas muy específicas en sus webs.

Incluso me ha servido para actuar como “angel de la guarda” de la típica web que está hecha polvo por culpa de una plantilla de ThemeForest, y para la que sólo quieren cambiar determinado apartado, sin gastarse un dineral en rehacer la web.

Espero que te haya servido de mucho este artículo (incluso si te ha servido de poco también me vale), y que hayas descubierto una nueva herramienta para utilizar en el día a día de tu web o de las de tus clientes.

No dudes en preguntarme lo que necesites a través de mi web o redes sociales, y estaré encantado en ayudarte con lo que pueda.

¡Un abrazo y hasta el próximo artículo!