Usar el Inspector de código para modificar un theme WordPress

[ 24 enero 2018 ] [ Autor: Jhon Marreros Guzmán ][ Recursos - Intermedio] [ ]

¿Te gustaría hacer algunos cambios en el diseño de tu sitio?, tal vez cambiar el tamaño de la letra, cambiar algunos colores, etc. Puedes realizar estos cambios con la ayuda del inspector de código de tu navegador y aplicando CSS.

Generalidades

El inspector de código es una herramienta para desarrolladores que viene integrada en los navegadores modernos como Firefox y Google Chrome. Tienes varias formas de abrir el inspector de código, una de mis favoritas es con el acceso por teclas.

En Mac y Linux: Cmd + Opción + i
En Windows : Ctrl + Shift + i

También puedes abrir el inspector de código desde las opciones de menú, o haciendo click con el botón derecho del mouse y luego en el submenú inspeccionar elemento.

Mostrar inspector de código en navegador

Existen también versiones de Firefox y Google Chrome especiales para desarrolladores que incluyen herramientas adicionales: Firefox Quantum Developer Edition y Google Chrome Canary.

Modificaciones CSS usando el inspector de código

El inspector de código tiene varias opciones, sin embargo como herramienta de ayuda para modificar CSS usarás básicamente las opciones de:

Inspector y Editor de estilos – Firefox
Elementos y Fuentes – Google Chrome

Opciones del Inspector de código en Firefox vs Google Chrome

Como puedes observar, ambos navegadores tienen opciones similares para el inspector de código.

– Localizando elemento a modificar

Con el ícono de flecha seleccionado, puedes ubicar el elemento de tu página que quieres modificar, verás que se marcará con un fondo diferente y adicionalmente en la parte inferior se seleccionará el código HTML que genera este elemento.

En la siguiente imagen hemos seleccionado el link «Hola mundo» del menú.

Usando el inspector de código para seleccionar elemento

Tener en cuenta que en el inspector de código también muestra elementos HTML ocultos con un color más tenue.

Si seleccionas algún elemento, en la parte derecha aparecen las reglas CSS aplicadas al elemento, puedes ver también las pseudo clases CSS, como :hover, :active y :focus

En la imagen anterior puedes ver las clases CSS y el archivo y línea de código en la que se encuentra esa clase, en algunos casos (líneas verdes) las clases no se encuentran en un archivo CSS específico, sino o bien son estilos aplicados en línea sobre el elemento HTML específico, o bien son elementos en línea como parte del documento HTML.

Usualmente un theme que permite agregar código CSS desde la configuración creará estilos en línea como parte del documento HTML.

– Realizando los cambios en el Inspector de Código

El inspector de código te ayudará a localizar las clases aplicadas sobre un elemento y qué atributo debes cambiar o agregar. Sin embargo una buena práctica es no modificar directamente esas clases, sino sobrescribir la clases ya sea al final del archivo, o mejor aún, en el caso de WordPress, en el archivo style.css de un child-theme. Es en este punto en donde el tab de Editor de estilos o fuentes, te puede ayudar.

En Firefox verás directamente los archivos .css que carga tu sitio web, y los estilos en línea que están siendo aplicados. En el caso de los archivos puedes averiguar la ruta de los mismos haciendo click con el botón alterno del mouse y abriéndolos en otra pantalla.

Tab de editor de estilos en el inspector de código Firefox

En Google Chrome verás que se organizan los estilos cargados por el dominio de origen, en tu caso te interesa los archivos CSS que carga tu dominio, si navegas en las carpetas podrás ubicar el archivo CSS, para averiguar la ruta tienes la opción de hacer click con el botón alterno, verás que tienes una opción muy útil de copiar enlace.

Tab de fuentes de estilos en el inspector de código Google Chrome

Una vez localizado el archivo puedes agregar tus cambios al final del código

En un artículo anterior vimos cómo usar Firebug, una extensión de Firefox, que era la predecesora del Inspector de Código, en el artículo: Usando Firebug para modificar la apariencia de un theme WordPress, puedes encontrar varios ejemplos de modificaciones a un theme WordPress.

Guardando los cambios de manera permanente

Sin embargo el código que colocaste en el inspector de código es temporal, para hacer que estos cambios se guarden de manera permanente tienes que agregar estos cambios directamente en tu archivo.

Anteriormente vimos cómo obtener la ruta del archivo (con el botón alterno del mouse), entonces usarás esa ruta para localizar el archivo a modificar.

Para editar el archivo tienes varias opciones:

Desde el propio WordPress en: Apariencia > Editor
Usando algún cliente FTP, localizar el archivo y editar
Desde el Administrador de Archivos de tu Cpanel

En la siguiente imagen puedes ver la pantalla que aparece cuando usas la opción de WordPress: Apariencia > Editor.

Opción de Apariencia - Editor en WordPress

Asegúrate en esta pantalla de seleccionar el archivo correcto con extensión CSS, evita editar los archivos con extensión PHP.

¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.

Comentarios

Enrique Sirera

26 marzo, 2020

Hola!
gracias por el tutorial, es muy didáctico.
Tengo una duda:
En un Thema de WP quiero cambiar solo una cosa, el color que sale en todos los botones y resaltes.
El tema no lo permite en personalizar.
Siguiendo el tutorial localizo algún elemento con este color y veo que es el #ff0707;
Voy a WP/Personalizar/Editor de temas/Style.css y cambio todos los valores #ff0707; por #cfd146;
Guardo cambios pero no cambia. Incluso volví a hacerlo añadiendo !important, pero no funciona.
¿Qué estoy mal?
¿Donde debo cambiar ese color?
Perdone mi ignorancia, y de lo atrevido de esa acción basada en el desconocimiento.
El tema en cuestión es este: https://envothemes.com/envo-storefront-pro/

Gracias por su tiempo.
Saludos
Enrique S.

PD: quédense en casa hasta que pase esta pandemia. Si su gobierno no lo recomienda, hágalo igualmente. Le hablo desde la experiencia, estoy de España y las cosas se están poniendo muy feas.
- Jhon Marreros Guzmán
  
  27 marzo, 2020
  Hola
  
  Supongo que te refieres a los botones de WooCommerce, puedes probar con el siguiente código, cambiando blue y green por algún código de color.
```
.woocommerce #respond input#submit:hover, 
.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover, 
.woocommerce #respond input#submit.alt:hover, 
.woocommerce a.button.alt:hover, 
.woocommerce button.button.alt:hover, 
.woocommerce input.button.alt:hover{
  border-color:blue;
  color:blue;
}

.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button, 
.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt{
  border-color:green;
  color:green;
}
```
  PD. Gracias por la recomendación, efectivamente estamos en cuarentena también en Perú y evitamos salir de casa hasta que pase todo esto.
  
  Saludos.
Giancarlos Piselli

2 abril, 2020

Hola! que tal? muy interesante toda tu web y que veo que contestas los mensajes. Pues la verdad es que tengo poco tiempo con esto de wordpress pero compre una plantilla que esta en ingles. Podrias ayudarme y asesorarme en varias cosas ? cuanto me saldria ? por ejemplo a poder editar el nombre de algunos botones que aparecen en ingles. Y otra cosa es cambiar los placeholder de la plantila, que dicen » search for product» y yo los quiero colocar en espanol. Probe con loco translate pero me toma unas cosas si y otras no. SALUDOS Y GRACIAS DE ANTEMANO.
- Jhon Marreros Guzmán
  
  2 abril, 2020
  
  Hola Giancarlos, gracias. Para esto que me comentas comunícate mejor a través del formulario de contacto: https://decodecms.com/contacto/ .Saludos.