X
Jhon Marreros Guzmán

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

¿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.

 

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

 

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ú.

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.

 
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.

 

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.

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

 

Artículos Relacionados

Categorías: Recursos
Etiquetas: cssherramientas

Ver comentarios (21)

  • 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 , 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.

    • 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.

  • 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.

  • Hola Jhon, tengo un problema con , mi web no puedo encontrar como cambiar el color de mi menu, he hecho todo lo debido por wordpress y nada .. el diseñador que tenia le pague y no me termino la pagina, en realidad, tengo problemas con el menu ya que no puedo modificar he hecho mil cosas y aun nada. claro que esta bloqueado o algo no se ven las letras del menu, mi pagina de comercio es http://www.astoreica.com te dará cuenta como esta el menu, saludos esperotu apoyo

    • Hola, supongo que te refieres al color de fondo de los submenus, prueba agregando el siguiente código CSS:

      .mega-menu .popup .sub-menu{
    background-color:#efefef;
}

      Si sigues con problemas mejor comunícate a través del formulario de contacto: https://decodecms.com/contacto/

    • Hola, no es posible, salvo lo cuentes como una visita, pero no hay forma de saber si ha visto el código fuente con el inspector.

  • hola jhon necesito tu ayuda, en producto de la pagina de mi tienda no aparece para comprar por cantidad, ni el signo + tampoco el -
    dime que debo de hacer?
    agradezco todas tus publicaciones

  • Hola Jhon nescesiot ayuda. Me aparece esto: Warning: A non-numeric value encountered in /home/computa1/public_html/wp-content/plugins/checkout-fees-for-woocommerce-pro/includes/class-alg-wc-checkout-fees-info.php on line 215
    Cómo puedo solucionarlo.

    • Hola, es una advertencia, igual consulta con los desarrolladores del plugin: checkout-fees-for-woocommerce-pro

    • Hola, puedes replicar el código en el archivo style.css de tu tema hijo, o en la opción CSS del personalizador del tema.

  • Hola! Muchas gracias por la explicación, es realmente útil. En mi caso, hay un elemento que sale duplicado en la cabecera. Si lo "borro" en la pestaña de inspeccionar aparece correctamente, pero donde lo modifico en wordpress? Gracias!

    • Hola, tienes que modificar el archivo style.css de tu theme, de preferencia hacer un tema hijo para esto.

  • Hola me interesa que no se vean esas carpetas de wordpress en source al inspeccionar la web por un tema de seguridad. Sabes como podría hacerlo?

    • Hola, podrías reducir los archivos estáticos a un solo archivo a través de plugins de optimización, las carpetas de contenido algunas las puedes cambiar de nombre, por ejemplo la de plugins y de uploads, sin embargo difícilmente podrás ocultar las carpetas completamente.
      Tendrías una opción de hacerlo si sólo usas WordPress como un servidor y usar su API Rest y construir tu front-end con Gatsby

  • Hola Interesante todo esto que explicas a la verdad esta muy bueno.

    Ahora bien tengo una duda que preguntarte.
    En mi sitio web tengo un problema con el botón de mi cuenta ubicado al lado del carrito resulta que en mi pagina de inicio me sale oculto y sin embargo en mis demás paginas me sale visible y estoy buscando por el inspector de código para ver que sucede pero realmente no logro determinar cual es el problema.

    Espero puedas ayudarme a descifrar esta interrogante y esta situación que se me hecho un gran problema y que quizás la solución es sencilla pero no logro encontrarla.

    De antemano muchas gracias por tu ayuda y por este tutorial.

    Saludos
    Eduardo

    • Hola, es como si cargara varias veces diferentes iconos para el usuario pero ninguno de ellos corresponde con el archivo de fuente, consulta con los desarrolladores de tu theme ya que es posible que sea un bug.

Deja un comentario