Tener un diseño propio en nuestra web es el primer elemento diferencial que va a encontrar nuestro usuario cuando el primer pantallazo se muestre en su navegador. El uso de WordPress y de sus plantillas hacen que el proceso de creación de una web sea rápido y sencillo, sin embargo hemos de tener en cuenta que nuestra plantilla puede estar siendo usada por cientos de sitios simultáneamente y eso no es muy diferencial que digamos.
Por ello, y con el objetivo de domar y hacer propio el diseño que incorpora una plantilla para WordPress como base, vamos a aprender cómo podemos modificar y personalizar nuestra web con ayuda de nuestro navegador, para posteriormente aplicar dichas modificaciones a nuestro WordPress.
Inspector del navegador. ¿Qué buscamos?
Toda web está formada por tres tecnologías básicas, HTML, CSS y JavaScript, ya esté realizado en WordPress o con otro gestor de contenido. De estos tres lenguajes, el CSS es el encargado de gestionar el diseño (y el que nos va a importar a partir de ahora), mientras el HTML es el esqueleto y el JS está reservado para otras tareas avanzadas como las interacciones con el usuario.
Pues bien, estos tres lenguajes de nuestra web están a la vista para ser consultados y por lo tanto, preparados para posteriormente ser añadidos a WordPress con modificaciones que sobrescriben a los originales. Para el primer punto, el de la consulta, utilizaremos la herramienta de inspector de código, disponible en cualquier navegador.
De todas las herramientas de desarrollo, las que personalmente encuentro más completas y amigables son las de Chrome y Firefox. Para este ejemplo usaremos las de Chrome.
Cómo acceder al panel del Inspector del navegador.
Para acceder al panel de inspector del navegador en Chrome, simplemente tenemos que hacer clic en el botón derecho de nuestro ratón en cualquier parte de la web, y en el desplegable seleccionar el último elemento llamado “Inspeccionar”. También tenemos un acceso directo desde el teclado, con la combinación de teclas CRTL + MAYUS + I.
Aquí un pequeño video de como llevarlo a acabo (inglés):
Fuente WordPress.com
Con esto conseguiremos que se nos abra un panel con muchas opciones. Este panel se puede abrir en la parte inferior de la pantalla o en uno de los laterales (podemos cambiar la disposición del mismo en la opción “Dock Size” que se encuentra en el desplegable de los tres puntos junto a la cruz de cierre de la esquina superior derecha del nuevo panel).
Paneles y elementos del inspector de código de Chrome. En busca del CSS.
Lo que nos importa aquí es el panel donde nos muestre el código HTML y el CSS. Para ello debemos situar el selector de pestaña en “Elements” y obtendremos dos columnas, una para el HTML y otra para el CSS.
Ya solo nos queda pasear el ratón por los distintos elementos del HTML para que se nos resalte en la web qué elemento o parte del diseño estamos inspeccionadocabecera. Una vez encontremos aquel que buscamos, con hacer un clic en la ventana de HTML se actualizará la ventana de CSS, y podremos comprobar qué propiedades se están aplicando y cual nos interesa cambiar.
Incluso podemos añadir nuevos elementos o cambiar los valores de los mismos. Estos cambios sólo los estás viendo tu en tu ordenador, tranquilo no te estás cargando ninguna web. Es solo una versión previa de los cambios si finalmente decides aplicarlos.
Aplicando estos cambios a nuestro WordPress
Para aplicar estos cambios, simplemente tendremos que copiar el código CSS modificado y añadirlo de forma correcta a WordPress. Aquí comentamos algunas de las opciones que existen para añadirlas a WordPress.org (mediante plugins o el Customizador) o en WordPress.com (mediante el paquete premium).
Es una buena práctica ordenar el CSS en un editor de código en busca de llaves no cerradas o falta de algún elemento de puntuación antes de añadirlo a nuestro WordPress. Con esto nos aseguraremos que el código está ordenado y sigue las buenas prácticas recomendadas a la hora de escribir CSS.
Ten en cuenta que todos las modificaciones que añadas son reglas que se van a aplicar como si fueran una capa superior a lo que ya tienes, por lo que no estás editando ni dañando el código de tu template, framework CSS o plantilla WordPress. Fácil y seguro.
Muchas más que CSS
A medida que te familiarices con el inspector de código de tu navegador podrás comprobar como las herramientas que tiene son mucho más potentes y que incluyen otras pestañas como los archivos que se cargan con análisis del tiempo de carga, las tipografías aplicadas, una consola de JavaScript, un emulador de dispositivos para probar y testear el diseño web responsive…
En definitiva una herramienta muy útil y completa que todos tenemos a nuestro alcance. Feliz personalización de CSS!