DecodeCMS

Tu WordPress a otro Nivel ...

Inicio / Tutoriales / Recursos / Usar el Inspector de código para modificar un theme WordPress
Anuncio banner webservi

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

Inspector de código para modificar un theme WordPress

[ ] [ Autor: ][ 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

Sub pantalla del inspector HTML

 
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.

 

Artículos Relacionados

Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (9 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Enrique Sirera

    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

      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.

  2. Giancarlos Piselli

    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.

  3. Carlos De La Cruz

    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

    • Jhon Marreros Guzmán

      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!important;
}

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

  4. esteban corre45

    hola, yo puedo saber quien a inspeccionado mi pagina web si es asi como?

    • Jhon Marreros Guzmán

      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.

  5. jenny

    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

  6. Carolina Cifuentes

    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.

    • Jhon Marreros Guzmán

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

  7. Luis

    Como grabar los cambios efectuados

    • Jhon Marreros Guzmán

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*