El patrocinador
Este episodio está patrocinado por LucusHost, el proveedor de hosting especializado que se adapta a cualquier necesidad, desde planes de alojamiento compartido, planes multidominio, servidores dedicados, registro de dominios, certificados de seguridad, etc.
Modificar el código
Hay muchos usuarios de WordPress a los que les da auténtico pánico modificar el código de WordPress, ya sea la programación, los hooks o incluso el CSS.
A la hora de ponerte manos a la obra para modificar un sitio web hecho con WordPress, lo primero que tienes que tener claro es qué quieres modificar: funciones o aspecto?
Si tu respuesta es el aspecto de tu sitio, casi con toda probabilidad necesitarás modificar la hoja de estilos de la web, que está programada en lenguaje CSS.
Aunque cuando te pones a ello te das cuenta de que modificar el CSS no es algo demasiado dificultoso, lo cierto es que sí puede resultar más complicado saber qué parte o etiqueta es la que tienes que tocar para que el aspecto se modifique justo en ese lugar.
CSS Hero
Para todos los que tienen ese miedo, incertidumbre o falta de tiempo para cambiar el código CSS de un sitio web, en este episodio os quiero hablar sobre CSS Hero.
¿Qué es?
Se trata de un plugin que se instala, como cualquier otro, dentro tu sitio web hecho con WordPress. Tras la activación, necesitas activar la licencia para que funcione.
Este plugin te habilitará un editor visual de estilos en cualquier página o post de tu sitio web, de tal manera que puedas cambiar fácilmente lo que necesites con un par de clics.
¿Cómo funciona CSS Hero?
A grandes rasgos, CSS Hero hace un duplicado de la hoja estilos de tu sitio web y la habilita para que puedas modificarla a tu gusto, reescribiendo el código por ti.
Una vez que instalas y activas la licencia, aparecerá un nuevo enlace en la Toolbar que pone “Customize with CSS Hero“.
Al pulsar este enlace desde cualquier página o post de tu sitio, se te habilitará un editor visual en la parte de la izquierda de la pantalla, similar al personalizador nativo de WordPress.
Ahora, lo único que tendrás que hacer es seleccionar el elemento que quieres modificar y cambiar los valores en el personalizador de la izquierda.
A medida que vayas haciendo cambios, CSS Hero irá guardándolos de forma automática, pero no los publicará hasta que no pulses un botón que hay en la parte de abajo del personalizador.
¿Qué puedes modificar con CSS Hero?
A través de la infertaz de usuario de CSS Hero, podrás modificar el fondo, la tipografía, los bordes, el espaciado, márgenes, visibilidad, sombras, efectos de transformación… y algunas otras opciones específicas que aparecerán puntualmente.
Incluso puedes modificar la apariencia de la página de inicio de sesión de WordPress.
Además, con Hero CSS tienes la posibilidad de elegir snippets de código ya prefabricados, únicamente para insertar e incluso tiene conexión con la biblioteca de Unsplash para insertar imágenes libres de derechos.
Apariencia en otros dispositivos
CSS Hero te da la posibilidad de ir alternando entre la vista en escritorio, tablet y teléfono móvil y realizar una personalización para cada tamaño de pantalla.
Además, existe la posibilidad de administrar las Media Query y establecer los pixeles mínimos de cada tamaño.
Elegir selector desde listado
También existe la posibilidad de elegir distintos selectores de un listado que se despliega del menú superior o incluso crear tus propios selectores.
Deshacer cambios
CSS Hero también guarda un listado de modificaciones, de tal forma que en cualquier momento puedas volver a una situación anterior, sin que tengan efecto todos los cambios que hayas hecho posteriormente.
Noticias WordPress
Vulnerabilidad de WooCommerce <=3.5.4
Plugin recomendado
Herramienta Recomendada
Esta semana te recomiendo Pinetools, una herramienta online y gratuita con la que podrás listar los códigos hexadecimales de los distintos colores que tenga una imagen. Sólo súbela desde tu ordenador y, por arte de magia, verás el listado de colores y códigos en la pantalla.
